Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

قواعد وتوصيات PageSpeed

PageSpeed Insights في السياق: ما يجب الانتباه له عند تحسين مسار العرض الحرج وسبب ذلك.

الحد من جافا سكريبت وCSS الذي يحظر العرض

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

تحسين استخدام جافا سكريبت

تعد موارد جافا سكريبت وسيلة لحظر المحلل افتراضيًا ما لم يتم وضع علامة async أو الإضافة عبر مقتطف جافا سكريبت خاص. تفرض جافا سكريبت التي تحظر المحلل على المتصفح انتظار CSSOM وتعمل على إيقاف إنشاء DOM مؤقتًا، وهذا بدوره يؤدي إلى تأخر في العرض لأول مرة.

تفضيل موارد جافا سكريبت غير المتزامنة

تلغي الموارد غير المتزامنة حظر محلل المستند وتتيح للمتصفح تجنب الحظر على CSSOM قبل تنفيذ النص البرمجي. في الغالب، إذا كان من الممكن جعل النص البرمجي غير متزامن، فهذا يعني أنه ليس ضروريًا للعرض أول مرة - فيمكنك تحميل نصوص برمجية غير متزامنة بعد العرض الأول.

تأجيل تحليل جافا سكريبت

يجب تأجيل أية نصوص برمجية غير أساسية وليست حرجة لإنشاء المحتوى المرئي في العرض الأول، وذلك لتقليل نسبة العمل المطلوب من المتصفح لعرض الصفحة.

تجنب جافا سكريبت الذي يستغرق وقتًا طويلاً في التشغيل

يؤدي جافا سكريبت الذي يستغرق وقتًا طويلاً إلى حظر المتصفح من إنشاء DOM وCSSOM ومن عرض الصفحة. ونتيجة لذلك، يجب تأجيل أي منطق للبدء أو وظيفة غير أساسية للعرض لأول مرة حتى وقت لاحق. وإذا كانت هناك حاجة إلى تشغيل تسلسل بدء طويل، فجرب تقسيمه إلى عدة مراحل للسماح للمتصفح بمعالجة أحداث أخرى في الوسط.

تحسين استخدام CSS

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

وضع CSS في رأس المستند

يجب تحديد جميع موارد CSS في أقرب وقت ممكن ضمن مستند HTML، حتى يتمكن المتصفح من اكتشاف علامات <link> وإرسال الطلب لصالح CSS في أسرع وقت ممكن.

تجنب عمليات استيراد CSS

يؤدي توجيه استيراد CSS وهو (@import) إلى تمكين ورقة أنماط واحدة لاستيراد القواعد من ملف ورقة أنماط أخرى. إلا أنه يجب تجنب هذه التوجيهات نظرًا لأنها تضع جولات إضافية في المسار الحرج: يتم اكتشاف موارد CSS بعد تلقي ورقة أنماط CSS التي تتضمن قاعدة @import نفسها وتحليلها.

تضمين CSS الذي يحظر العرض

للحصول على أفضل أداء، يمكنك تضمين CSS الحرج مباشرة في مستند HTML. ويؤدي هذا إلى تقليص عدد الجولات الإضافية في المسار الحرج وإذا تم تقديمه على نحو سليم، فيمكن استخدامه لتقديم طول مسار حرج مكون من جولة واحدة حيث يكون HTML هو عنصر الحظر الوحيد.