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

Demián Renzulli

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

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

تحميل CSS غير مثالي

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

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

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

القياس

استخدِم Lighthouse في "أدوات مطوّري البرامج" لمراجعة المقاييس المؤثّرة.

1. افتح العرض التوضيحي في Chrome.
2. افتح "أدوات مطوّري البرامج في Chrome".
3. انقر على لوحة الأداء.
4. من داخل اللوحة، أعِد تحميل الصفحة.

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

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

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

تحسين

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

1. افتح قائمة الأوامر في "أدوات مطوّري البرامج" بالضغط على 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، مثل loadCSS، التي تتضمّن هذا السلوك وتعمل بشكل جيد على جميع المتصفّحات. تتوافق هذه الدوال مع سياسة أمان المحتوى التي قد لا تسمح بتنفيذ رمز onload JavaScript المضمّن.

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

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

مراقب

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

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

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

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

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

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

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