أضف الخاصية loading="lazy" إلى وسم الصورة:

<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

المتصفح يؤجل تحميل الصورة حتى يقترب الزائر منها أثناء التمرير. هذا يسرّع فتح الصفحة، ويوفر البيانات على الجوال، خاصة في الصفحات الطويلة.

متى لا أستخدمه؟

لا تضعه على الصورة الأولى أعلى الصفحة (مثل صورة الغلاف). هذه يجب أن تُحمّل فورًا، وتأجيلها يجعل الصفحة تبدو أبطأ.

نصيحة

حدد width وheight دائمًا، حتى يحجز المتصفح مكان الصورة ولا “تقفز” الصفحة عند تحميلها.

ويعمل loading="lazy" أيضًا مع <iframe>، مثل فيديو YouTube المضمّن.