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