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