تطبيق التحميل الفوري باستخدام نمط PRPL

PRPL هو اختصار يصف النمط المستخدم لتحميل صفحات الويب وتصبح تفاعلية بشكل أسرع:

  • حمِّل مسبقًا الموارد التي تم اكتشافها متأخرًا.
  • يمكنك عرض المسار الأولي في أقرب وقت ممكن.
  • تخزين مواد العرض المتبقية في ذاكرة التخزين المؤقت مسبقًا.
  • التحميل الكسول للمسارات الأخرى والأصول غير المُهمّة

في هذا الدليل، اكتشِف كيف تتلاءم كل تقنية من هذه التقنيات مع بعضها مع إمكانية استخدامها على نحو مستقل لتحقيق نتائج الأداء.

التدقيق في صفحتك باستخدام Lighthouse

تشغيل Lighthouse لتحديد فرص التحسين المتوافقة مع تقنيات "PRPL":

  1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
  2. انقر على علامة التبويب Lighthouse.
  3. ضَع علامة في مربّعَي الاختيار الأداء وتطبيق الويب التقدّمي.
  4. انقر على تشغيل عمليات التدقيق لإنشاء تقرير.

لمزيد من المعلومات، يُرجى الاطّلاع على المقالة اكتشاف فرص الأداء باستخدام Lighthouse.

تحميل الموارد المهمة مسبقًا

تعرض أداة Lighthouse عملية التدقيق التالية التي تعذّر تنفيذها في حال تحليل مورد معيّن واسترجاعه:

أداة Lighthouse: مراجعة طلبات التحميل المُسبق لطلبات المفاتيح

التحميل المسبق هو طلب جلب بياني يخبر المتصفّح بطلب مورد لا يمكن اكتشافه من خلال أداة فحص التحميل المسبق في المتصفّح، مثل صورة تشير إليها سمة "background-image". يمكنك تحميل الموارد التي تم اكتشافها المتأخر مسبقًا من خلال إضافة علامة <link> باستخدام rel="preload" إلى عنوان مستند HTML:

<link rel="preload" as="image" href="hero-image.jpg">

ستؤدي إضافة توجيه <link rel="preload"> إلى بدء طلب لهذا المورد وتخزينه في ذاكرة التخزين المؤقت. ويمكن للمتصفّح بعد ذلك استرداده عند الحاجة.

لمزيد من المعلومات حول التحميل المُسبق للموارد المهمة، يمكنك الاطّلاع على دليل التحميل المُسبق لمواد العرض المهمة.

عرض المسار الأولي في أقرب وقت ممكن

ترسِل أداة Lighthouse تحذيرًا إذا كانت هناك موارد تؤدي إلى تأخير عرض First Paint، وهي اللحظة التي يعرض فيها موقعك الإلكتروني وحدات البكسل على الشاشة:

أداة Lighthouse: مراجعة موارد حظر العرض

لتحسين سرعة عرض أول صفحة، تقترح أداة Lighthouse تضمين لغة JavaScript المهمة وتأجيل باقي العناصر باستخدام async، بالإضافة إلى تضمين محتوى CSS المهم المستخدَم في الجزء المرئي من الصفحة. يؤدي ذلك إلى تحسين الأداء من خلال إزالة الزيارات ذهابًا وإيابًا إلى الخادم لجلب مواد العرض التي تحظر العرض. ومع ذلك، يصعب الاحتفاظ بالرمز البرمجي المضمّن من منظور التطوير، ولا يمكن تخزينه مؤقتًا بشكل منفصل عن طريق المتصفح.

هناك طريقة أخرى لتحسين سرعة عرض أول محتوى للصفحة، وهي عرض محتوى HTML الأولي لصفحتك من جهة الخادم. يؤدي ذلك إلى عرض المحتوى على الفور للمستخدم بينما لا يزال يتم جلب النصوص البرمجية وتحليلها وتنفيذها. ومع ذلك، قد يؤدي ذلك إلى زيادة حمولة ملف HTML بشكل كبير، ما قد يضرّ بـ Time to Interactive، أو الوقت الذي يستغرقه تطبيقك ليصبح تفاعليًا ويمكنه الاستجابة لإدخالات المستخدمين.

لا يوجد حل واحد صحيح للحد من سرعة عرض أول محتوى في تطبيقك، ويجب أن تفكر فقط في تضمين الأنماط والعرض من جهة الخادم إذا كانت الفوائد تفوق المفاضلات الخاصة بتطبيقك. يمكنك معرفة المزيد حول هذين المفهومين باستخدام الموارد التالية.

الطلبات/الردود مع مشغّل الخدمات

مواد العرض المخزنة مؤقتًا بشكل مسبق

من خلال العمل كخادم وكيل، يستطيع مشغِّلو الخدمات جلب الأصول مباشرةً من ذاكرة التخزين المؤقت بدلاً من الخادم عند الزيارات المتكرّرة. يتيح ذلك للمستخدمين إمكانية استخدام تطبيقك بلا اتصال بالإنترنت فحسب، بل يؤدي أيضًا إلى زيادة سرعة تحميل الصفحات عند تكرار الزيارات.

استخدِم مكتبة تابعة لجهة خارجية لتبسيط عملية إنشاء عامل خدمات، ما لم تكن لديك متطلبات تخزين مؤقت أكثر تعقيدًا مما يمكن أن توفِّره المكتبة. على سبيل المثال، يوفر Workbox مجموعة من الأدوات التي تسمح لك بإنشاء عامل خدمات وصيانته لتخزين الأصول مؤقتًا. لمزيد من المعلومات عن مشغِّلي الخدمات والموثوقية بلا اتصال بالإنترنت، يُرجى الرجوع إلى دليل مشغّلي الخدمات في مسار تعلُّم الموثوقية.

التحميل الكسول

تعرض أداة Lighthouse عملية تدقيق فاشلة في حال إرسال الكثير من البيانات عبر الشبكة.

أداة Lighthouse: تتم تدقيق حمولات البيانات الضخمة في الشبكة.

يشمل ذلك جميع أنواع الأصول، إلا أنّ أحمال JavaScript الكبيرة مكلفّة بشكل خاص بسبب الوقت الذي يستغرقه المتصفّح لتحليلها وتجميعها. وتعرِض أداة Lighthouse أيضًا تحذيرًا بشأن ذلك عندما يكون ذلك مناسبًا.

Lighthouse: تدقيق وقت تشغيل JavaScript

لإرسال حمولة JavaScript أصغر تحتوي على الرمز البرمجي المطلوب فقط عندما يحمِّل المستخدم تطبيقك في البداية، يمكنك تقسيم الحزمة بأكملها وأجزاء التحميل الكسول عند الطلب.

بعد أن تتمكّن من تقسيم الحزمة، حمِّل مسبقًا المقاطع الأكثر أهمية (راجِع دليل التحميل المُسبق للمواد المهمة). يضمن التحميل المُسبق جلب الموارد الأكثر أهمية وتنزيلها في وقت أسرع من خلال المتصفّح.

بصرف النظر عن تقسيم وتحميل مقاطع JavaScript مختلفة عند الطلب، يوفّر Lighthouse أيضًا تدقيقًا للصور الكسولة غير المهمة.

Lighthouse: تأجيل تدقيق الصور خارج الشاشة

في حال تحميل العديد من الصور على صفحة الويب، يمكنك تأجيل تحميل كل الصور في الجزء السفلي غير المرئي من الصفحة أو خارج إطار عرض الجهاز عند تحميل الصفحة (راجِع استخدام طريقة \"التحميل الكسول\" لتحميل الصور).

الخطوات التالية

والآن بعد أن فهمت بعض المفاهيم الأساسية وراء نمط PRPL، تابع إلى الدليل التالي في هذا القسم لمعرفة المزيد. من المهم أن تتذكر أنه لا يلزم تطبيق جميع التقنيات معًا. ستقدم أي جهود تبذلها مع أي مما يلي تحسينات ملحوظة في الأداء.

  • التحميل المُسبق للموارد المهمة
  • يمكنك عرض المسار الأولي في أقرب وقت ممكن.
  • تخزين مواد العرض المتبقية في ذاكرة التخزين المؤقت مسبقًا.
  • التحميل الكسول للمسارات الأخرى والأصول غير المُهمّة

يمكنك قراءة المزيد عن أنماط PRPL.