حدد المساحة التي تظهر متأخرة
راقب صفحة ممثلة أثناء تحميل صورها وسجل المحتوى الذي يتحرك. حدد الصورة وحاويتها والنصوص أو الأزرار المجاورة المتأثرة. قد يبرز تقرير تحرك التخطيط فقرة تحركت بينما تكون صورة فوقها هي السبب. افحص السبب قبل تعديل العنصر الذي يبرزه التقرير.
اجمع أبعاد الصورة الفعلية وعرضها الظاهر وقواعد القالب التي تتحكم في ارتفاعها. أدرج عرضًا ضيقًا وآخر واسعًا عندما يختلف التصميم. افصل هذا العمل عن تقليل حجم التنزيل؛ فقد تحرك صورة صغيرة المحتوى إذا لم تحجز الصفحة مساحة لها.
اختر نسبة أبعاد موثوقة
توصي إرشادات web.dev الرسمية بتحديد width وheight للصورة أو حجز المساحة بطريقة مناسبة مثل CSS aspect-ratio. يحتاج المتصفح إلى معلومات مفيدة عن الحجم قبل انتهاء تحميل المورد. تحقق من أن الأبعاد تصف الصورة أو الحاوية المقصودة، لا قيمًا عشوائية من مكوّن آخر.
في الصورة المتجاوبة المعتادة، تساعد الأبعاد الأصلية على تحديد النسبة بينما تسمح CSS بتقليص العرض الظاهر. راجع قواعد الارتفاع الحالية حتى لا تشوه الصورة. وإذا كان التصميم يقص الصور عمدًا داخل شكل ثابت، فتعامل مع شكل الحاوية وطريقة القص كقرار تصميم واضح وافحص النتيجة.
راجع الصور البديلة والمؤجلة
اختبر ما إذا كان الهاتف يستخدم مصدرًا أو قصًا مختلفًا. قد تناسب المساحة صورة الحاسوب وتخالف نسب البديل على الهاتف. سجل حالات التخطيط المهمة، وتأكد من مطابقة المساحة المحجوزة للعرض المقصود قبل تحميل المورد المختار وبعده.
راجع الصور الموجودة في أسفل الصفحة أيضًا. التحميل المؤجل لا يحجز المساحة وحده. مرر خلال رحلة القراءة الفعلية وراقب ما إذا كانت الصور اللاحقة تدفع المحتوى المحيط بصورة غير متوقعة. ثبات الشاشة الأولى لا يثبت استقرار الصفحة كلها.
مثال توضيحي: رسم بنسبة اثنين إلى واحد
لنفترض رسمًا افتراضيًا بعرض 1200 بكسل وارتفاع 600 بكسل يعرض دون قص. عندما يصبح عرضه الظاهر 320 بكسل، يكون ارتفاعه المتناسب 160 بكسل. يمكن للتنفيذ الاحتفاظ بنسبة اثنين إلى واحد قبل وصول الملف، مع مراعاة الحاوية وقواعد CSS الفعلية.
يتحقق المراجع من وجود المساحة أثناء التحميل ومن ثبات النص التالي عند ظهور الصورة. وإذا استبدل تصميم الهاتف الصورة بقص مربع، فلا يعود افتراض 160 بكسل مناسبًا، ويجب أن تطابق المساحة ذلك التصميم. الأرقام توضح الحساب وليست قياسات من موقع عميل.
تحقق من التعديل دون المبالغة في النتيجة
أعد حالات التحميل والتمرير نفسها بعد التعديل ووثق أبعاد العرض وحالة الذاكرة المؤقتة. افحص المنطقة المتأثرة وأدلة الحركة المتاحة من الأداة. سجل مدى ملاءمة المساحة، بما في ذلك بطء التحميل أو فشله. يجب ألا يخفي ثبات الموضع وجود صورة معطلة عن المراجعة.
قد تسبب عناصر أخرى مثل المحتوى المضاف والخطوط حركة لاحقة. لا تضمن قيمة CLS صفرية لمجرد إضافة سمتين. احفظ المكوّن المصحح والدليل والملاحظات المتبقية. قد يحدد تدقيق الموقع صورًا تفتقر إلى الأبعاد، لكن العرض الفعلي يجب أن يؤكد ملاءمة المساحة للتخطيط.