يسرد قسم "فرص التحسين" في تقرير Lighthouse جميع عناوين URL التي تحظر عرض محتوى صفحتك. والهدف من ذلك هو تقليل تأثير عناوين URL هذه التي تمنع العرض من خلال تضمين الموارد المهمة وتأخير الموارد غير المهمة وإزالة أيّ موارد غير مستخدَمة.
ما هي عناوين URL التي يتم الإبلاغ عنها كموارد تمنع عرض الإعلانات؟
يرصد Lighthouse نوعَين من عناوين URL التي تمنع العرض: النصوص البرمجية وملفات الأنماط.
علامة <script> تستوفي الشروط التالية:
- أن تكون في
<head>من المستند - لا تحتوي على سمة
defer - لا تحتوي على سمة
async
علامة <link rel="stylesheet"> تستوفي الشروط التالية:
- لا تحتوي على سمة
disabledعند توفّر هذه السمة، لا ينزِّل المتصفّح جدول الأنماط. - لا تحتوي على سمة
mediaتتطابق مع جهاز المستخدم على وجه التحديد. يُعدّmedia="all"من العناصر التي تمنع العرض.
كيفية تحديد الموارد المهمة
تتمثل الخطوة الأولى نحو الحد من تأثير موارد حظر العرض في تحديد العناصر المهمة وغير المهمة. استخدِم علامة التبويب "التغطية" في Chrome DevTools لتحديد صفحات CSS وJavaScript غير المهمة. عند تحميل صفحة أو تشغيلها، تُعلمك علامة التبويب بكمية الرمز البرمجي المستخدَمة مقارنةً بكمية الرمز البرمجي الذي تم تحميله:
يمكنك تقليل حجم صفحاتك من خلال إرسال الرمز البرمجي والأنماط التي تحتاج إليها فقط. انقر على عنوان 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 الإضافية التي يمكنها مساعدتك في تضمين الأصول المهمة أو تأجيل الموارد الأقل أهمية.