PRPL هو اختصار يصف نمطًا يُستخدَم لتحميل صفحات الويب و جعلها تفاعلية بشكل أسرع:
- التحميل المُسبق للموارد المكتشَفة في وقت متأخر
- اعرض المسار الأولي في أقرب وقت ممكن.
- تخزين مواد العرض المتبقية مؤقتًا
- التحميل البطيء للمسارات الأخرى ومواد العرض غير المهمة
في هذا الدليل، تعرَّف على كيفية توافق كل أسلوب من هذه الأساليب معًا مع إمكانية استخدامها بشكلٍ مستقل لتحقيق نتائج الأداء.
فحص أداء صفحتك باستخدام Lighthouse
يمكنك تشغيل Lighthouse لتحديد فرص التحسين بما يتوافق مع تقنيات PRPL التالية:
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب مصباح الهداية.
- ضَع علامة في مربّعَي الاختيار الأداء وتطبيق الويب التقدّمي.
- انقر على تشغيل عمليات التدقيق لإنشاء تقرير.
لمزيد من المعلومات، يُرجى الاطّلاع على مقالة استكشاف فرص تحسين الأداء باستخدام Lighthouse.
تحميل الموارد المهمة مسبقًا
يعرض Lighthouse عملية التدقيق التالية التي تعذّر إكمالها إذا تم تحليل مورد معيّن واسترجاعه متأخّرًا:
التحميل المُسبَق
هو طلب جلب تعريفي يطلب من المتصفّح طلب مورد لا يمكن اكتشافه بخلاف ذلك من خلال أداة فحص التحميل المُسبَق في المتصفّح، مثل صورة تتم الإشارة إليها من خلال السمة background-image. يمكنك تحميل الموارد التي تم اكتشافها لاحقًا مسبقًا عن طريق إضافة علامة <link> مع rel="preload" إلى رأس مستند HTML:
<link rel="preload" as="image" href="hero-image.jpg">
ستؤدي إضافة توجيه <link rel="preload"> إلى بدء طلب لهذا المورد وتخزينه في ذاكرة التخزين المؤقت. يمكن للمتصفح بعد ذلك استرداده عند الحاجة.
لمزيد من المعلومات عن التحميل المُسبَق للموارد المُهمّة، يُرجى الرجوع إلى دليل التحميل المُسبَق لمواد العرض المُهمّة.
لا يؤديعرض المسار الأولي في أقرب وقت ممكن
يقدّم Lighthouse تحذيرًا إذا كانت هناك موارد تؤخّر عرض المحتوى للمرة الأولى، وهو اللحظة التي يعرض فيها موقعك الإلكتروني وحدات البكسل على الشاشة:
لتحسين First Paint، تقترح أداة Lighthouse تضمين محتوى JavaScript مهم وتأجيل باقي العناصر باستخدام async، بالإضافة إلى تضمين محتوى CSS المهم المستخدم في الجزء المرئي من الصفحة. ويؤدي ذلك إلى تحسين الأداء
من خلال إزالة عمليات التنقّل إلى الخادم لتحميل مواد العرض التي تمنع العرض.
ومع ذلك، يصعب الاحتفاظ بالرمز المضمّن من منظور التطوير، ولا يمكن للمتصفّح تخزينه مؤقتًا بشكل منفصل.
من الطرق الأخرى لتحسين "العرض الأول" هي العرض من جهة الخادم لملف HTML الأولي لصفحتك. يؤدي ذلك إلى عرض المحتوى على الفور للمستخدم أثناء مواصلة جلب النصوص البرمجية وتحليلها وتنفيذها. ومع ذلك، يمكن أن يؤدي ذلك إلى زيادة حمولة ملف HTML بشكل كبير، ما قد يضرّ بوقت الاستجابة للتفاعل، وهو الوقت الذي يستغرقه تطبيقك ليصبح تفاعليًا ويمكنه الاستجابة لإدخالات المستخدم.
لا يتوفّر حلّ واحد صحيح لتقليل وقت "العرض الأوّل" في تطبيقك، ويجب عدم التفكير في تضمين الأنماط والعرض العميق على الخادم إلا إذا كانت المزايا تفوق السلبيات في تطبيقك. يمكنك قراءة المزيد من المعلومات حول هذين المَعلمتَين من خلال المراجع التالية.
ذاكرة التخزين المؤقت المُسبَق لمواد العرض
من خلال التصرّف كوكيل، يمكن لعمال الخدمة جلب مواد العرض مباشرةً من ذاكرة التخزين المؤقت بدلاً من الخادم عند الزيارات المتكرّرة. لا يسمح ذلك للمستخدمين فقط باستخدام تطبيقك عندما لا يكون لديهم اتصال بالإنترنت، بل يؤدي أيضًا إلى تقليل أوقات تحميل الصفحة عند الزيارات المتكررة.
استخدِم مكتبة تابعة لجهة خارجية لتبسيط عملية إنشاء مشغّل الخدمات إلا إذا كانت لديك متطلبات تخزين مؤقت أكثر تعقيدًا مما يمكن للمكتبة تقديمه. على سبيل المثال، يوفّر مكتبة Workbox مجموعة من الأدوات التي تتيح لك إنشاء عامل خدمة والاحتفاظ به لتخزين مواد العرض في ذاكرة التخزين المؤقت. لمزيد من المعلومات عن مشغّلات الخدمات والموثوقية بلا إنترنت، يُرجى الرجوع إلى دليل مشغّلات الخدمات في مسار التعلّم حول الموثوقية.
التحميل الكسول
يعرض Lighthouse تقرير تدقيق تعذّر إجراؤه في حال إرسال بيانات كثيرة جدًا عبر الشبكة.
ويشمل ذلك جميع أنواع مواد العرض، إلا أنّ أحمال JavaScript الكبيرة تكون مكلفة بشكل خاص بسبب الوقت الذي يستغرقه المتصفّح في تحليلها وتجميعها. وتقدِّم أداة Lighthouse تحذيرًا بشأن ذلك عند اللزوم.
لإرسال حمولة JavaScript أصغر حجمًا تحتوي فقط على الرمز البرمجي المطلوب عندما يُحمِّل المستخدم تطبيقك في البداية، يمكنك تقسيم الحزمة بالكامل والتحميل البطيء للقطع عند الطلب.
بعد تقسيم حزمتك، حمِّل مسبقًا الأجزاء الأكثر أهمية (راجِع دليل التحميل المُسبق لمواد العرض المهمة). يضمن التحميل المُسبق جلب المزيد من الموارد المهمة وتنزيلها بشكل أسرع من خلال المتصفّح.
بالإضافة إلى تقسيم أجزاء JavaScript المختلفة وتحميلها عند الطلب، يقدّم Lighthouse أيضًا مراجعة للتحميل الكسول للصور غير المهمة.
إذا حمّلت العديد من الصور على صفحة الويب، يمكنك تأجيل تحميل كل الصور التي تظهر أسفل الصفحة أو خارج إطار عرض الجهاز عند تحميل الصفحة (راجِع استخدام lazysizes لتحميل الصور بشكل كسول).
الخطوات التالية
الآن بعد أن فهمت بعض المفاهيم الأساسية وراء نمط PRPL، تابع إلى الدليل التالي في هذا القسم لمعرفة المزيد. من المهم أن تتذكر أنّه ليس من الضروري تطبيق كلّ التقنيات معًا. ستؤدي أي جهود تُبذل في أيّ من الإجراءات التالية إلى تحسينات ملحوظة في الأداء.
- تحميل الموارد المهمة مسبقًا
- عرض المسار الأولي في أقرب وقت ممكن.
- تخزين مواد العرض المتبقية مؤقتًا
- التحميل البطيء للمسارات الأخرى ومواد العرض غير المهمة
يمكنك الاطّلاع على مزيد من المعلومات عن أنماط PRPL.