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

Demián Renzulli

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

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

مثال: تحميل CSS غير المُثلى

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

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

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

القياس

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

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

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

1. افتح الصفحة في Chrome.
2. اضغط على Control+Shift+J (أو Command+Option+J في نظام التشغيل Mac) لفتح DevTools.
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>
   

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

• يطلب 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 المهم، ويتضمن مختبر رمز للاطّلاع على كيفية عملها في الممارسة.