صور لا تُبطئ الصفحة

الصور هي أثقل ما في أغلب الصفحات، وتحلّ أربع خصائص معظم هذه المشكلة:

فالخاصية loading="lazy" تؤجّل تحميل الصور التي خارج الشاشة، وdecoding="async" تمنع فكّ ترميز الصورة من إيقاف رسم الصفحة، وwidth وheight تحجزان المساحة مسبقًا فلا يقفز النصّ عند وصول الصورة، وهذا القفز هو ما يقيسه مؤشّر CLS.

استثناء مهمّ: لا تؤجّل الصورة الأولى التي تظهر فور فتح الصفحة، لأن تأجيلها يؤخّر أكبر عنصر في الصفحة ويُسيء إلى مؤشّر LCP بدل أن يحسّنه.