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

Demián Renzulli

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

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

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

يحتوي المثال التالي على ملف أرشيف مضغوط يتضمّن ثلاث فقرات مخفية من النص، تمّ تصميم كلّ منها باستخدام فئة مختلفة:

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

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

القياس

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

يعرض التقرير مقياس سرعة عرض أكبر جزء من المحتوى على الصفحة بقيمة "ثانية واحدة"، ويشير إلى فرصة التخلص من الموارد التي تمنع العرض، ويشير إلىملف style.css:

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

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

في عملية التتبّع الناتجة، ستلاحظ وضع علامة FCP مباشرةً بعد انتهاء ��حميل CSS:

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

تحسين

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

1. في DevTools، افتح قائمة الأوامر بالضغط على 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 على الصفحة المحسَّنة.

في التقرير، ستلاحظ أنّه تم تقليل سرعة عرض المحتوى على صفحة الويب بمقدار 0.2 ثانية (بنسبة 20% ).

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

.

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

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