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

Demián Renzulli

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

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

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

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

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

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

القياس

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

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

يقترح تقرير Lighthouse تبسيط ورقة أنماط لتحميل صفحتك بشكل أسرع.

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

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

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

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

في صفحة العرض التوضيحي غير المحسَّنة، لا يمكن أن تحدث سرعة عرض المحتوى على الصفحة. إلى أن تنتهي خدمة مقارنة الأسعار (CSS) من التحميل

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

تحسين

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

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

يعرض تقرير التغطية مقدار خدمة مقارنة الأسعار (CSS). يُستخدم في التحميل الأولي للصفحة.

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

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

باستخدام هذه المعلومات، يمكنك تحسين خدمة مقارنة الأسعار (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 التي يمكنها تلخيص هذا السلوك والعمل بشكل جيد عبر المتصفحات، تدعم سياسة أمان المحتوى التي قد لا السماح بلغة JavaScript onload المضمَّنة.

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

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

مراقب

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

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

في الصفحة المُحسَّنة، يمكن أن يبدأ FCP قبل يتم تحميل ورقة الأنماط.

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

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

الإصدار الجديد المخفّض من "سرعة عرض المحتوى على الصفحة" (FCP)

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

تمرر الصفحة الآن موارد الحظر التدقيق.

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

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