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

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

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

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

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

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

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

القياس

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

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

تقرير Lighthouse للصفحة غير المحسّنة، يعرض "سرعة عرض المحتوى على الصفحة" لـ "1" و"إزالة موارد الحظر" ضمن "الفرص"
يقترح تقرير Lighthouse تبسيط جدول ملف التنسيق لكي يتم تحميل صفحتك بشكلٍ أسرع.

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

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

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

تتبُّع أداء "أدوات مطوّري البرامج" لصفحة غير محسَّنة تعرض "سرعة عرض المحتوى على الصفحة" عند بدء التحميل بعد تحميل CSS.
في الصفحة التجريبية غير المحسّنة، لا يمكن أن يحدث FCP إلى أن ينتهي تحميل CSS.

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

تحسين

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

  1. في DevTools، افتح قائمة الأوامر بالضغط على Control+Shift+P أو Command+Shift+P (Mac).
  2. اكتب "التغطية" واختَر عرض التغطية.
  3. انقر على إعادة تحميل لإعادة تحميل الصفحة وبدء تسجيل التغطية.
تغطية لملف CSS تُظهر 55.9% من وحدات البايت غير المستخدَمة
يعرض تقرير التغطية مقدار 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 فيملف HTML :

مراقب

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

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

تتبُّع أداء DevTools
    للصفحة المحسَّنة، يعرض بدء سرعة عرض المحتوى على الصفحة قبل تحميل CSS
في الصفحة المُحسَّنة، يمكن أن يبدأ سرعة عرض المحتوى على الصفحة قبل تحميل ورقة الأنماط.

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

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

تقرير Lighthouse يعرض قيمة FCP‏ &quot;0.8 ثانية&quot;
الإصدار الجديد والمُعدَّل من "سرعة عرض المحتوى على الصفحة"

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

صورة توضيحية لتقرير Lighthouse يعرض &quot;إزالة الموارد المحظورة&quot; في قسم &quot;عمليات التدقيق التي تم اجتيازها&quot;
تجتاز الصفحة الآن تدقيق موارد الحظر
.

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

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