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

Demián Renzulli

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

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

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

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

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

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

قياس

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

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

للحصول على تمثيل بصري حول كيفية حظر CSS للعرض:

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

في عملية التتبُّع الناتجة، ستلاحظ أنّ علامة 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 في ملف HTML:

المراقبة

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

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

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

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

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

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

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