مستوى المقال: مبتدئ · زمن القراءة المتوقع: 7 دقائق
Lazy Loading للمبتدئ: نزّل وقت تحميل صفحتك 60% بكلمة واحدة في HTML
لو موقعك بيحمّل 14 صورة في الصفحة الواحدة وأول زيارة بتاخد 4.8 ثانية على 4G، إنت بتحمّل صور المستخدم مش هيشوفها أصلاً. كلمة واحدة في الـ HTML بتنزّل وقت التحميل من 4.8 ثانية لـ 1.9 ثانية، بدون ما تلمس صورة واحدة ولا تنزّل مكتبة JavaScript ولا تكتب سطر CSS واحد. هتفهم في المقال ده ليه ده بيحصل وازاي تطبّقه النهاردة على مشروعك.
المشكلة باختصار
المتصفح بشكل افتراضي بيحمّل كل صور الصفحة في وقت واحد، حتى الصور اللي تحت الـ fold ومش ظاهرة على الشاشة. لو blog عندك فيه 14 صورة بمتوسط 180KB لكل صورة، الزائر بيدفع تنزيل 2.5 ميجابايت قبل ما يقرأ أول سطر، وأغلب الصور دي مش هيشوفها لو خرج من الصفحة بعد 10 ثواني.
النتيجة: P75 LCP بيطلع فوق 3.4 ثانية على 4G، Google بيصنّف الصفحة Poor، وانت بتدفع فاتورة bandwidth أكبر بـ 3x من غير سبب.
مثال للمبتدئ: فندق بـ 14 طابق
تخيّل إنك دخلت فندق وحجزت غرفة في الدور التاني. الموظف بدل ما يطلّعك لغرفتك على طول، بيركبك أسانسير وبيوقف على كل دور من الـ 14 علشان "تتفرّج" على الغرف اللي ما تخصّكش. بعد 14 وقفة بتوصل لغرفتك مرهق ومش فاهم ليه ضيّع وقتك. ده بالظبط اللي المتصفح بيعمله مع الصور بدون lazy loading.
الـ loading="lazy" بتقول للموظف: "خد الزائر لغرفته الأول. لو طلب يطّلع على دور تاني بعد كده، اعمل ده وقتها فقط." الفكرة بسيطة: حمّل اللي محتاجه الزائر دلوقتي، وأجّل الباقي لحد ما يطلبه فعلًا.
التعريف العلمي
Lazy loading هو نمط تأجيل تحميل الموارد لحين الحاجة إليها فعليًا (deferred resource loading). في HTML الحديث، الخاصية loading="lazy" على عناصر <img> و <iframe> بتأمر المتصفح يأجّل تنزيل المورد لحد ما يقرب من viewport بمسافة معينة (في Chromium الافتراضي 1250px من أسفل الـ viewport على شبكة 4G).
الخاصية جزء من HTML Living Standard من 2020، ومدعومة في Chrome 77+ و Firefox 75+ و Safari 15.4+ و Edge 79+. التغطية الحالية فوق 95% من المتصفحات حسب Can I Use في مايو 2026.
الكود الفعلي
<!-- قبل: المتصفح بيحمّل كل الصور فوراً -->
<img src="/images/post-cover.jpg" alt="غلاف المقال" />
<img src="/images/section-2.jpg" alt="قسم 2" />
<img src="/images/section-3.jpg" alt="قسم 3" />
<!-- بعد: المتصفح بيأجّل التحميل لحين اقتراب الصورة من viewport -->
<img src="/images/post-cover.jpg"
width="800" height="450"
alt="غلاف المقال" />
<img src="/images/section-2.jpg"
loading="lazy"
width="800" height="450"
alt="قسم 2" />
<img src="/images/section-3.jpg"
loading="lazy"
width="800" height="450"
alt="قسم 3" />
