قرّر ما هو مطلوب الآن، لا ما يظهر مبكراً في الوسوم
يشير التحميل الكسول إلى جعل المورد غير حرج حتى يحتاجه المستخدم فعلاً. صنّف الموارد حسب الرحلة الحقيقية: ضروريات العرض الأول، وسائط أسفل الطية، المضمّنات الاختيارية، والكود الخاص بمسار أو لوحة لاحقة. موضع العنصر في نظام إدارة المحتوى ليس دليلًا كافيًا؛ فالصورة قد تكون خارج العرض في قالب واحد ومحورية في آخر.
راجع التحميلات الباردة على هاتف صغير وسطح مكتب نموذجي. اختبر أيضاً روابط الحملات والمرابط داخل الصفحة التي قد تهبط بالزائر في مواضع أعمق. هذا الفحص يوضح ما يجب أن يكون جاهزاً دون طلب يبدأ بحدث تمرير.
المهمة الأولية، التنقّل المرئي، النص الأساسي، وأول مرئي مفيد يجب أن تكون متاحة فوراً.
معارض الصور أسفل الصفحة، الخرائط، المضمّنات الاجتماعية، مشغلات الوسائط خارج العرض، والكود لميزات غير مختارة هي مرشحة شائعة.
حِمِ البطل (hero) والمنظر الأولي
لا تضع محتوى من المحتمل أن يكون مرئياً عند فتح الصفحة في التحميل الكسول. تحذّر Google من ذلك، وتحليل web.dev يوضح أن تحميل صور العرض الأولى كسولاً يمكن أن يؤخر LCP. قد يكون عنصر LCP صورة البطل، صورة منتج، ملصق، أو نص؛ تحقق منه في كل قالب مهم بدل التكهن.
حمّل صورة LCP المؤكدة بشكل عاجل. إذا أظهر الاختبار أن صورة حرجة تفقد اهتمام الشبكة القابل للاكتشاف، جرّب تلميح أولوية الجلب (fetch-priority) العالي لها. إنه تلميح وليس أمراً ملزماً. قد تحتاج صورة خلفية CSS الحرجة إلى preload مبكر لأن المحلل لا يمكنه اكتشافها مباشَرة؛ قِس هذه الحالة.
تحقّق من إعدادات CMS والإضافات للصور المميزة التي وُسمت خطأً كـ lazy على صفحات القوائم.
استخدم تحميلات باردة على الجوال وسطح المكتب، لا معاينة تصميم سطح المكتب فقط.
احجز المساحة قبل وصول الوسائط
Cumulative Layout Shift أو CLS هو تحرّك غير متوقع للمحتوى المرئي. صورة مؤجلة بلا ارتفاع معروف يمكن أن تدفع النص والعناصر بعد أن يبدأ القارئ بالمسح أو يصل إلى زر. هذا خطر تفاعلي، وليس مجرد مسألة مقياس.
وفّر سمات العرض والارتفاع الدقيقة للصور والفيديو، أو احجز الشكل باستخدام CSS aspect-ratio. استخدم عنصر نائب (placeholder) ببصمة المكوّن النهائية. بالنسبة للإطار الخارجي، احجز ارتفاعه وامنحه حالة تحميل أو حالة غير متاحة واضحة.
خزن أبعاد الوسائط مع الملف عندما يكون ذلك ممكناً؛ النسبة العامة ليست موثوقة لأشكال الصور المختلطة.
مرّر الصفحة، صفِّ التفلاتر، افتح الألواح، قم بتدوير جهاز الجوال، واستخدم رجوع المتصفح لاكتشاف التحركات المتأخرة.
حافظ على اكتشاف المحتوى وفهم التفاعلات
تقول Google Search Central إن Google لا تتفاعل مع الصفحات بالتمرير أو النقر. ينبغي أن يتحمّل المحتوى الكسول المهم عند ظهوره، ويجب أن يكشف HTML المَصْنُوع عن المحتوى المتوقع أو عناوين URL للوسائط. افحص صفحات ممثلة في Search Console بعد التنفيذ.
قائمة لا نهائية قابلة للفهرسة تحتاج إلى مسار مُرقّم لكل جزء دائم: عنوان URL فريد ومستمر، محتوى ثابت عند ذلك العنوان، وروابط عبر التسلسل. هذا يخلق أيضاً موضعاً قابلاً للمشاركة للعودة إليه.
عندما يكشف إجراء عن محتوى، اجعل عنصر التحكم قابلاً للتشغيل عبر لوحة المفاتيح واجعل النتيجة مفهومة. للتحديثات غير المرتبطة بالتركيز مثل «النتائج تم تحميلها» اجعل الحالة مكشوفة برمجياً كي تُعلن تقنيات المساعدة دون الحاجة لتحريك التركيز.
تفاصيل المنتج، نص المقال، معلومات الأهلية، وتعليمات المهمة لا يجب أن توجد أولاً بعد إجراء المستخدم.
لا تؤخّر عناصر الدفع أو المصادقة المطلوبة. اجعل مراجعي الأمان والامتثال المؤهلين يقيمون تغييرات الدفع، الهوية، وبرمجيات الطرف الثالث.
استخدم آلية أقل هشاشة
بالنسبة للصور والإطارات (iframes) العادية خارج العرض، يكون تحميل المتصفح الأصلي عادة أبسط نقطة بداية. يقرّر المتصفح متى يبدأ الطلب القريب من منطقة العرض؛ تلك المسافة ليست ضماناً. قد يحدث حدث window load بينما تبقى الموارد الكسولة غير مكتملة.
استخدم Intersection Observer عندما يحتاج مكوّن مسمّى إلى تنشيط مخصص، مثل تركيب لوحة مكلفة قبل ظهورها بقليل. اجعل المراقب ضيق النطاق وابدأ العمل مبكراً بما يكفي للتمرير السريع. استخدم تقسيم الكود (code splitting) للمسارات غير الابتدائية أو الميزات الاختيارية، لا كذريعة لتأخير المهمة الحالية.
لا تستبدل مصدرًا بسيطًا بسمات بيانات، عدة سكربتات، ومكتبة إلا إذا كانت السلوك الإضافي يحل حاجة مختبرة.
يجب أن يكون للمضمّن الاختياري حالة احتياطية واضحة أو حالة حِذْف، لا مؤقّت دوّار دائم.
قِس، أطلق، وعالج معاً
قارن الأساس والمرشح على نفس عناوين URL، حالة التخزين المؤقت، حجم العرض، ومسار المستخدم. استخدم اختبار محاكى بارد ومقيد على الجوال بالإضافة إلى فحوصات أجهزة فعلية حيث أمكن. سجّل LCP، التسلسل المرئي، التحولات التخطيطية، أخطاء الوسائط، HTML المَصْنُوع، والإجراءات الأساسية. تكمل بيانات الحقل اختبارات المختبر.
انشر تغييراً قابلاً للعكس ومحدود القوالب. سجل الأصول التي نُقلت من التحميل المتعجل إلى المؤجّل، مرجع النشر، إجراء التخزين المؤقت، المالك، وخطوة التراجع الأولى. إذا أصبح عنصر LCP كسولاً أو صار مسار التحويل غير مكتمل، أزل القاعدة من ذلك الأصل الحرج وتحقق مجدداً. أعد الفحص بعد تغيّر الثيم، نظام إدارة المحتوى، خدمة الصور، الوسم، أو المضمّنات.
ركّز على منع وتجديد تجربة مكسورة، لا على التقارير الحالية للحالة أو التنبيه فحسب.
عكس إعداد القالب المتأثر قبل إعادة ضبط كل الصور في الموقع.