صورةٌ لا تُحمَّل إلّا حين تقارب الشاشة توفّر على الزائر كلَّ ما تحت الطيّة. فإن لم يعرف المتصفّح كم سيكون حجمها قفزت الصفحة حين تصل — فيفقد القارئ موضعه، أو ينقر رابطًا انتقل.

أعطِ العرض والارتفاع دائمًا

<img src="/img/rack.webp" width="1600" height="900" alt="A server rack" loading="lazy" decoding="async">

وهما ليسا مقاس العرض. بل هما نسبةُ الأبعاد، ومنهما يحجز المتصفّح المساحة الصحيحة بالضبط والملفُّ لا يزال يُنزَّل. ومع width:100%;height:auto في CSS تظلّ الصورة تتقاس عاديًّا.

ولا تُحمّل أعلى الصفحة تحميلًا كسولًا أبدًا

فالسمة loading="lazy" على صورة الواجهة تؤخّر أكبرَ شيءٍ على الشاشة، وهو المقياس الوحيد الذي يقيس كم تبدو الصفحة سريعة. والقاعدةُ بسيطة: كلُّ ما فوق الطيّة يُحمَّل بحرص، وكلُّ ما تحتها كسول.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

والأمرُ نفسه في المُضمَّنات

فإطارُ iframe يأخذ العرض والارتفاع وloading="lazy" كذلك. وتضمينُ فيديو تُرك حريصًا هو في الغالب أثقلُ شيءٍ منفرد في الصفحة، وهو عادةً تحت الطيّة.

وفي كل ما يكشفه سكربت

فأثرُ الكشف عند التمرير الذي يبدأ بشفافيّةٍ صفر يُظهر بطاقةً فارغة لكل من لم يعمل سكربته. فاجعل الحالةَ المخفيّة اختياريّةً — يطبّقها السكربتُ متى صار حيًّا — حتى يكون المحتوى ظاهرًا افتراضيًّا.

افحصه

حمّل الصفحة والشبكةُ مخنوقة وانظر هل يتحرّك شيءٌ بعد وصول الصور. ومقياسُ إزاحة التخطيط التراكمية في تشغيلة Lighthouse يضع رقمًا على الشيء نفسه — انظر قياس مؤشّرات الويب الأساسية.