تأجيل محتوى CSS غير المهم

Demián Renzulli

ملفات CSS هي موارد تحظر العرض: يجب تحميلها ومعالجتها قبل أن يعرض المتصفح هذه الصفحة. صفحات الويب التي تحتوي على أوراق أنماط كبيرة بشكل غير ضروري يستغرق عرضها وقتًا أطول.

في هذا الدليل، ستتعرف على كيفية تأجيل محتوى CSS غير المهم لتحسين مسار العرض الحرج وتحسين سرعة عرض أول محتوى مرئي (FCP):

مثال: تحميل CSS دون المستوى الأمثل

يحتوي المثال التالي على أكورديون بثلاث فقرات مخفية من النص، فيتم تصميم كلٍ منها بفئة مختلفة:

تطلب هذه الصفحة ملف CSS يحتوي على ثماني فئات، ولكن ليست جميعها اللازمة لعرض القيمة "مرئية" المحتوى.

الهدف من هذا الدليل هو تحسين هذه الصفحة بحيث لا تظهر سوى الأنماط الهامة بشكلٍ متزامن، بينما يتم تحميل الباقي (بما في ذلك أنماط الفقرة)، بطريقة لا تؤدي إلى حظر الإعلانات.

القياس

شغِّل Lighthouse في الصفحة وانتقل إلى قسم الأداء

يعرض التقرير مقياس سرعة عرض المحتوى على الصفحة مع القيمة "1s". فرصة إزالة الموارد التي تحظر العرض، مع الإشارة إلى ملف style.css:

للاطّلاع على كيفية حظر خدمة مقارنة الأسعار (CSS) للعرض:

1. افتح الصفحة في Chrome.
2. اضغط على Control+Shift+J (أو Command+Option+J على جهاز Mac) لفتح "أدوات مطوري البرامج".
3. انقر على علامة التبويب الأداء.
4. في لوحة "الأداء"، انقر على إعادة التحميل.

في تقرير التتبُّع الناتج، ستلاحظ أنه تم وضع علامة FCP على الفور. بعد انتهاء تحميل CSS:

هذا يعني أنّ المتصفّح يحتاج إلى الانتظار حتى يتم تحميل جميع صفحات CSS ومعالجتها قبل رسم بكسل واحد على الشاشة.

تحسين

لتحسين هذه الصفحة، عليك معرفة الصفوف التي تُعتبَر حرجة. لتحديد ذلك، استخدِم أداة التغطية:

1. في "أدوات مطوري البرامج"، افتح قائمة الأوامر (Command). بالضغط على Control+Shift+P أو Command+Shift+P (نظام التشغيل Mac).
2. اكتب "التغطية" واختَر عرض التغطية
3. انقر على إعادة تحميل لإعادة تحميل الصفحة وبدء التقاط التغطية.

انقر مرّتين على التقرير للاطّلاع على التفاصيل:

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

باستخدام هذه المعلومات، يمكنك تحسين خدمة مقارنة الأسعار (CSS) لكي يتمكّن المتصفّح من بدء المعالجة. الأنماط المهمة مباشرةً بعد تحميل الصفحة وتأجيل ملفات CSS غير المهمة لوقت لاحق:

1. استخراج تعريفات الفئات التي تم وضع علامة الأخضر عليها في تقرير التغطية وضع هذه الصفوف في قسم <style> في أعلى الصفحة:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. تحميل باقي الصفوف بشكل غير متزامن من خلال تطبيق ما يلي النمط:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

وهذه ليست الطريقة العادية لتحميل صفحات الأنماط المتتالية (CSS). إليك آلية العمل:

• يطلب link rel="preload" as="style" ورقة الأنماط بشكل غير متزامن. إِنْتَ يمكنك الاطّلاع على مزيد من المعلومات عن preload في دليل التحميل المُسبق لمواد العرض المهمة.
• تسمح السمة onload في link للمتصفّح بمعالجة CSS في حال ينتهي تحميل ورقة الأنماط.
• "خالٍ" فإن معالج onload بعد استخدامه يساعد بعض المتصفحات في تجنب إعادة استدعاء المعالج عند تبديل السمة rel.
• يوفر المرجع إلى ورقة الأنماط داخل عنصر noscript السمة المتصفحات التي لا تنفّذ JavaScript

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

مراقب

استخدام "أدوات مطوري البرامج" لتنفيذ عملية تتبُّع الأداء الأخرى على الصفحة المحسَّنة.

تظهر علامة FCP قبل أن تطلب الصفحة CSS، وهو ما يعني لا يحتاج المتصفّح إلى الانتظار حتى يتم تحميل CSS قبل عرض الصفحة:

كخطوة أخيرة، شغِّل Lighthouse على الصفحة المحسَّنة.

وستلاحظ في التقرير انخفاضًا في صفحة "سرعة عرض المحتوى على الصفحة" (FCP) بمقدار 0.2 ثانية (بنسبة %20). تحسين!):

لن يظهر الاقتراح إزالة الموارد التي تحظر العرض بعد الآن ضمن فرص التحسين، وهي متوفرة في قسم عمليات التدقيق التي تم اجتيازها بدلاً من ذلك:

الخطوات التالية المراجع

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