ما هو Lazy Loading في الويب؟ شرح عملي للمبتدئين مع أمثلة

لو فتحت متجرًا إلكترونيًا يحتوي على عشرات الصور، فأنت عند بداية فتح الصفحة لا ترى كل الصور في الوقت نفسه. غالبًا ترى أول عدة منتجات فقط، والباقي لن يظهر إلا عندما تبدأ في النزول داخل الصفحة.

هنا يظهر سؤال مهم: لماذا نحمّل كل الصور والموارد من البداية، رغم أن المستخدم قد يغلق الصفحة قبل أن يصل إليها؟

هذه هي المشكلة التي يحاول Lazy Loading حلها.

Lazy Loading أو التحميل الكسول هو أسلوب يجعل المتصفح يؤجل تحميل بعض الموارد غير المطلوبة حاليًا إلى أن يقترب المستخدم من الحاجة إليها. في هذا الدليل سنفهم الفكرة من الأساس، ونطبقها على الصور وiframe وJavaScript، ونرى متى يكون استخدامها مفيدًا ومتى يصبح خطأ.

ماذا يحدث عندما تفتح صفحة ويب؟

لنفترض أن لدينا صفحة تحتوي على ملف HTML وCSS وJavaScript وصورة رئيسية و20 صورة داخل المقال وفيديو YouTube وWidget موجود في نهاية الصفحة.

كل مورد يتم تنزيله له تكلفة: وقت + Bandwidth + معالجة + ذاكرة.

لكن ليست كل الموارد مهمة في اللحظة نفسها. بعض الأشياء يحتاجها المستخدم فور فتح الصفحة، بينما أشياء أخرى قد لا يصل إليها إلا بعد عدة ثوانٍ، أو قد لا يصل إليها أصلًا.

Lazy Loading هو قرار بسيط: لا تحمّل هذا المورد الآن؛ انتظر حتى يصبح من المحتمل أن يحتاجه المستخدم.

مثال بسيط بالأرقام

تخيل صفحة بها 20 صورة، وحجم كل صورة في المتوسط 300 KB.

20 × 300 KB = 6000 KB

أي حوالي 6 MB من الصور فقط. لكن لو الجزء الذي يظهر للمستخدم عند فتح الصفحة يحتوي على صورتين فقط، فنحن فعليًا نحتاج في البداية حوالي:

2 × 300 KB = 600 KB

لماذا إذًا ننزّل الباقي قبل أن نعرف أصلًا هل المستخدم سينزل إلى نهاية الصفحة؟ باستخدام Lazy Loading يمكن تحميل الصور المهمة أولًا، ثم تحميل الصور الأخرى عندما يقترب المستخدم منها.

أبسط طريقة لعمل Lazy Loading للصور

قديمًا كان المطور يحتاج إلى JavaScript أو مكتبات مخصصة لتنفيذ Lazy Loading للصور. في المتصفحات الحديثة توجد طريقة مباشرة في HTML.

الصورة العادية:

<img src="article-image.webp" alt="مثال على تحسين أداء صفحة ويب">

ولجعلها Lazy Loaded نضيف فقط:

<img src="article-image.webp" alt="مثال على تحسين أداء صفحة ويب" loading="lazy">

السطر loading="lazy" يخبر المتصفح أن الصورة ليست ضرورية فورًا ويمكن تأجيل تحميلها حتى تصبح قريبة من الجزء المرئي من الصفحة.

ما هو الـViewport؟

الـViewport هو ببساطة الجزء من الصفحة الذي يستطيع المستخدم رؤيته حاليًا على الشاشة. الصور الموجودة في أجزاء بعيدة أسفل الصفحة تسمى عادةً Below the fold، وهي من أفضل المرشحين لاستخدام Lazy Loading.

مثال عملي: صفحة مقال

لنفترض أن لدينا مقالًا يحتوي على صورة رئيسية أعلى الصفحة وثلاث صور توضيحية داخله. الصورة الرئيسية يراها المستخدم فورًا، أما الصور الداخلية فلن تظهر إلا بعد النزول داخل المقال.

الأفضل أن تترك الصورة الرئيسية بدون Lazy Loading، وتضيفه للصور التي تأتي لاحقًا:

<article>
    <h1>كيف تحسن أداء موقعك؟</h1>

    <img
        src="hero.webp"
        alt="تحسين أداء المواقع"
        width="1200"
        height="630"
    >

    <p>مقدمة المقال...</p>

    <img
        src="example-1.webp"
        alt="مثال أول"
        width="800"
        height="450"
        loading="lazy"
    >

    <p>جزء كبير من المقال...</p>

    <img
        src="example-2.webp"
        alt="مثال ثان"
        width="800"
        height="450"
        loading="lazy"
    >
</article>

لماذا لا نستخدم Lazy Loading للصورة الرئيسية؟

هذه من أهم النقاط التي يجب أن يفهمها المبتدئ. Lazy Loading ليس شيئًا نضعه على كل الصور.

لو كانت الصورة ظاهرة للمستخدم فور فتح الصفحة، فالمتصفح يحتاج إلى تحميلها مبكرًا. ولو كانت هي العنصر الأكبر الظاهر في بداية الصفحة، فقد تكون جزءًا من مقياس Largest Contentful Paint (LCP).

تأخير تحميل هذه الصورة يمكن أن يجعل أهم محتوى في الصفحة يظهر متأخرًا، وبالتالي قد يضر الأداء بدل تحسينه.

لماذا نحدد width وheight للصور؟

من الأفضل مع الصور أن تحدد أبعادها:

<img
    src="performance-chart.webp"
    alt="رسم يوضح أداء الصفحة"
    width="800"
    height="450"
    loading="lazy"
>

معرفة الأبعاد تساعد المتصفح على حجز مكان الصورة قبل وصولها. بدون ذلك قد يصل النص أولًا، ثم تصل الصورة لاحقًا فتدفع المحتوى إلى الأسفل وتسبب حركة مفاجئة في الصفحة.

Lazy Loading للـiframe

الفكرة لا تقتصر على الصور. لنفترض أن لديك فيديو YouTube في نهاية مقال طويل:

<iframe
    title="شرح Lazy Loading"
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="560"
    height="315"
    loading="lazy"
></iframe>

هذا مفيد خصوصًا مع YouTube وGoogle Maps والمحتوى المضمّن والـWidgets، لأن iframe قد يؤدي بدوره إلى تحميل JavaScript وصور واتصالات إضافية.

Lazy Loading في JavaScript

الفكرة نفسها يمكن تطبيقها على الكود. تخيل Dashboard به رسم بياني، لكن المستخدم لا يحتاج الرسم إلا إذا ضغط على زر.

بدل تحميل Module من البداية:

import { createChart } from "./chart.js";
createChart();

يمكن تحميله عند الحاجة باستخدام Dynamic Import:

const button = document.querySelector("#show-chart");

button.addEventListener("click", async () => {
    const module = await import("./chart.js");
    module.createChart();
});

الآن ملف chart.js لا يحتاج إلى التحميل إلا عندما يضغط المستخدم على الزر.

وهنا تظهر الفكرة الأوسع: بدل تحميل الكود لأن المستخدم قد يحتاجه، نحمّله عندما يصبح هناك سبب حقيقي لاستخدامه.

وماذا عن Intersection Observer؟

في الحالات العادية للصور، ابدأ بـloading="lazy". لا تكتب JavaScript مخصصًا إذا كان المتصفح يقدم لك الحل بالفعل.

لكن أحيانًا تحتاج معرفة أن عنصرًا اقترب من الشاشة لتنفيذ شيء خاص، مثل تحميل Widget مخصص. هنا يمكن استخدام Intersection Observer:

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("العنصر أصبح ظاهرًا");
        }
    });
});

const element = document.querySelector(".special-widget");
observer.observe(element);

هل Lazy Loading يجعل الموقع سريعًا تلقائيًا؟

لا. لو عندك صورة حجمها 8 MB ثم أضفت لها loading="lazy" فأنت لم تصلح الصورة؛ أنت فقط أخّرت تنزيلها.

الأداء الجيد للصور عادةً يجمع أكثر من قرار:

• اختيار أبعاد مناسبة للصورة.
• ضغط الصورة جيدًا.
• استخدام صيغة مناسبة مثل WebP أو AVIF عندما تكون مناسبة.
• استخدام Responsive Images عند الحاجة.
• استخدام Lazy Loading للصور غير المهمة في بداية الصفحة.

إذن Lazy Loading هو جزء من استراتيجية الأداء، وليس بديلًا عن تحسين الموارد نفسها.

جرّب Lazy Loading بنفسك في DevTools

أفضل طريقة لفهم الموضوع هي أن تراه بنفسك.

أنشئ صفحة بها عدة صور:

<img src="1.webp" width="800" height="450">

<img src="2.webp" width="800" height="450" loading="lazy">
<img src="3.webp" width="800" height="450" loading="lazy">
<img src="4.webp" width="800" height="450" loading="lazy">

ثم افتح:

DevTools → Network → Img

أعد تحميل الصفحة وراقب طلبات الصور، ثم ابدأ بالنزول داخل الصفحة. التجربة ستساعدك على فهم العلاقة بين HTML وNetwork Requests والـScroll بشكل أوضح من حفظ التعريف وحده.

متى تستخدم Lazy Loading؟

3 أخطاء شائعة

1. استخدام Lazy Loading لكل الصور

لو الصورة موجودة أمام المستخدم عند فتح الصفحة، فإن تأخيرها قد يكون قرارًا سيئًا، خاصةً لو كانت صورة Hero أو مرشحة لأن تكون LCP.

2. اعتبار Lazy Loading حلًا لحجم الملفات

صورة 5 MB ستظل 5 MB. Lazy Loading يجيب عن سؤال متى أحمل المورد؟ لكنه لا يجيب وحده عن سؤال هل المورد نفسه محسّن؟

3. بناء JavaScript معقد لمشكلة يحلها HTML

إذا كنت تحتاج فقط إلى Lazy Loading لصورة عادية، ابدأ بـ:

<img src="image.webp" alt="..." loading="lazy">

ولا تنتقل إلى مكتبات أو Intersection Observer إلا عندما يكون لديك احتياج لا يغطيه الحل الأصلي في المتصفح.

الخلاصة

أهم شيء في Lazy Loading ليس حفظ loading="lazy"، بل فهم الفكرة وراءه.

عندما تبني صفحة اسأل نفسك: ما أقل قدر من الموارد التي يحتاجها المستخدم لكي يبدأ استخدام الصفحة؟

المستخدم لا يحتاج صور نهاية المقال وهو ما زال يقرأ العنوان، ولا يحتاج خريطة Google في نهاية صفحة التواصل قبل أن يصل إليها، ولا يحتاج مكتبة الرسوم البيانية قبل أن يطلب مشاهدة الرسم.

Lazy Loading يحاول أن يجعل تحميل الصفحة يتبع احتياج المستخدم بدل تحميل كل شيء مقدمًا لمجرد أنه قد يحتاجه لاحقًا.

ابدأ في الصور بـ:

<img
    src="image.webp"
    alt="وصف واضح للصورة"
    width="800"
    height="450"
    loading="lazy"
>

واستخدمه للصور والعناصر البعيدة عن الجزء الأول من الصفحة، لكن اترك الصور المهمة والـHero والـLCP تُحمّل مبكرًا.

ولو كنت ما زلت في بداية تعلم الويب، يمكنك أيضًا قراءة الفرق بين Frontend وBackend وFull Stack، ثم التوسع لاحقًا في مفاهيم الأداء والأتمتة مثل GitHub Actions للمبتدئين.