يسرد قسم "فرص التحسين" في تقرير Lighthouse جميع عناوين URL التي تحظر عرض محتوى صفحتك. والهدف هو تقليل تأثير عناوين URL هذه التي تحظر العرض من خلال تضمين الموارد المهمة مباشرةً، وتأجيل الموارد غير المهمة، وإزالة أي عناصر غير مستخدَمة.
ما هي عناوين URL التي يتم الإبلاغ عنها كموارد تحظر العرض؟
تضع أداة Lighthouse علامة على نوعَين من عناوين URL التي تحظر العرض، وهما النصوص البرمجية وأوراق الأنماط.
علامة <script> التي:
- يقع في
<head>من المستند. - لا يحتوي على سمة
defer. - لا يحتوي على سمة
async.
علامة <link rel="stylesheet"> التي:
- لا يحتوي على سمة
disabled. عند توفّر هذه السمة، لا ينزّل المتصفّح ورقة الأنماط. - لا يحتوي على السمة
mediaالتي تتطابق مع جهاز المستخدم تحديدًا. يُعدّmedia="all"من الموارد التي تحظر العرض.
كيفية تحديد الموارد الأساسية
تتمثّل الخطوة الأولى نحو الحدّ من تأثير الموارد التي تحظر العرض في تحديد الموارد المهمة والموارد غير المهمة. استخدِم علامة التبويب "نسبة استخدام رموز الصفحة" في "أدوات مطوّري البرامج في Chrome" لتحديد ملفات CSS وJS غير المهمة. عند تحميل صفحة أو تشغيلها، يوضّح لك التبويب مقدار الرمز المستخدَم مقارنةً بالمقدار الذي تم تحميله:
يمكنك تقليل حجم صفحاتك من خلال إرسال الرمز والأنماط التي تحتاج إليها فقط. انقر على عنوان URL لفحص هذا الملف في لوحة "المصادر". يتم تمييز الأنماط في ملفات CSS والرموز في ملفات JavaScript بلونين:
- أخضر (مهم): الأنماط المطلوبة للرسم الأول، والرموز البرمجية المهمة للوظائف الأساسية للصفحة
- أحمر (غير مهم): الأنماط التي تنطبق على المحتوى غير المرئي على الفور، والرمز غير المستخدَم في الوظيفة الأساسية للصفحة
كيفية إزالة النصوص البرمجية التي تحظر العرض
بعد تحديد الرمز البرمجي المهم،
انقل هذا الرمز من عنوان URL الذي يحظر العرض إلى علامة script مضمّنة في صفحة HTML.
عند تحميل الصفحة، ستتضمّن ما تحتاج إليه للتعامل مع الوظائف الأساسية للصفحة.
إذا كان هناك رمز غير مهم في عنوان URL يحظر العرض، يمكنك إبقاء الرمز في عنوان URL، ثم وضع علامة على عنوان URL باستخدام السمتَين async أو defer (راجِع أيضًا إضافة تفاعلية باستخدام JavaScript).
يجب إزالة الرموز التي لا يتم استخدامها على الإطلاق (راجِع إزالة الرموز غير المستخدَمة).
كيفية إزالة أوراق الأنماط التي تحظر العرض
على غرار تضمين الرمز في علامة <script>،
يجب تضمين الأنماط الأساسية المطلوبة لعرض أول محتوى مرئي
في كتلة <style> ضمن head من صفحة HTML.
بعد ذلك، حمِّل بقية الأنماط بشكل غير متزامن باستخدام الرابط preload (راجِع تأجيل محتوى CSS غير المستخدَم).
ننصحك بأتمتة عملية استخراج وتضمين CSS "في أعلى الصفحة" باستخدام أداة Critical.
هناك طريقة أخرى للتخلص من الأنماط التي تحظر العرض، وهي تقسيم هذه الأنماط إلى ملفات مختلفة منظَّمة حسب طلب البحث عن الوسائط. بعد ذلك، أضِف سمة وسائط إلى كل رابط لورقة الأنماط. عند تحميل صفحة، يحظر المتصفّح عرض أول طلاء فقط لاسترداد أوراق الأنماط التي تتوافق مع جهاز المستخدم (راجِع CSS التي تحظر العرض).
أخيرًا، عليك تصغير ملف CSS لإزالة أي مساحة بيضاء أو أحرف إضافية (راجِع تصغير ملف CSS). يضمن ذلك إرسال أصغر حِزمة ممكنة إلى المستخدمين.
إرشادات خاصة بكل حزمة
AMP
استخدِم الأدوات، مثل محسِّن AMP في تنسيقات AMP للعرض من جانب الخادم.
Drupal
يمكنك استخدام وحدة لتضمين محتوى CSS أو JavaScript المهم واستخدام سمة التأجيل لمحتوى CSS أو JavaScript غير المهم.
Joomla
هناك عدد من مكوّنات Joomla الإضافية التي يمكنها مساعدتك على تضمين مواد العرض المهمة أو تأجيل موارد أقل أهمية.
WordPress
هناك عدد من مكوّنات WordPress الإضافية التي يمكنها مساعدتك على تضمين مواد العرض المهمة أو تأجيل موارد أقل أهمية.