Lazy Loading یا لیزی لودینگ چیست؟

در دنیای امروز که سرعت حرف اول را در تجربه کاربری و موفقیت وب‌سایت‌ها می‌زند، بهینه‌سازی سرعت بارگذاری سایت امری حیاتی است. یکی از تکنیک‌های قدرتمند و بسیار موثر در این زمینه، “Lazy Loading” یا بارگذاری تنبل است. این تکنیک با به تعویق انداختن بارگذاری منابع غیرضروری تا زمانی که واقعاً مورد نیاز کاربر قرار گیرند، به طور قابل توجهی سرعت اولیه بارگذاری صفحه را افزایش می‌دهد. این مقاله به صورت جامع توضیح میدهیم لیزی لودینگ چیست، نحوه عملکرد آن، انواع مختلف آن، مزایای بی‌شمارش و همچنین چالش‌ها و راهکارهای پیاده‌سازی آن خواهد پرداخت.

لیزی لودینگ چیست؟

Lazy Loading، که به فارسی بارگذاری تنبل ترجمه می‌شود، یک الگوی طراحی است که در آن بارگذاری منابع (مانند تصاویر، ویدئوها، iframe ها، یا حتی بخش‌های بزرگتر صفحه) به صورت “تنبل” یا “در صورت نیاز” انجام می‌شود. به عبارت دیگر، به جای اینکه تمام منابع یک صفحه در ابتدای بارگذاری دانلود و نمایش داده شوند، Lazy Loading تنها منابعی را که در دید کاربر (Viewport) قرار دارند یا به زودی در دید او قرار خواهند گرفت، بارگذاری می‌کند. منابعی که خارج از دید کاربر هستند، تا زمانی که کاربر صفحه را اسکرول کرده و به آن‌ها نزدیک شود، بارگذاری نمی‌شوند و این موضوع بشدت روی سرعت یک سایت تاثیر دارد.

توجه کنید اگر سرعت سایت شما کند است میتوانید از خدمات سرعت برای بهبود سرعت سایت خهود کمک بگیرید

تصور کنید یک صفحه وب دارای تعداد زیادی تصویر است. اگر بدون Lazy Loading، تمام این تصاویر همزمان با بارگذاری صفحه دانلود شوند، زمان بارگذاری صفحه به شدت افزایش می‌یابد، به خصوص برای کاربرانی که اتصال اینترنت ضعیفی دارند. Lazy Loading با اولویت دادن به منابعی که کاربر در حال حاضر مشاهده می‌کند، تجربه کاربری را بهبود می‌بخشد و سرعت اولیه نمایش محتوا را به شکل چشمگیری افزایش می‌دهد.

چرا Lazy Loading اهمیت دارد؟ تاثیر آن بر سرعت سایت

سرعت سایت یکی از حیاتی‌ترین عوامل در موفقیت یک وب‌سایت است که در مقاله اهمیت سرعت سایت درباره آن توضیح دادیم. تاثیر سرعت بر موارد زیر مستقیماً قابل مشاهده است:

1. تجربه کاربری: کاربران امروزی صبور نیستند. اگر سایتی کند بارگذاری شود، احتمال خروج کاربر از سایت (Bounce Rate) به شدت افزایش می‌یابد. لیزی لود با ارائه سریع‌تر محتوای قابل مشاهده، تجربه کاربری را بهبود می‌بخشد و کاربران را ترغیب به ماندن در سایت و تعامل با آن می‌کند.
2. سئو : موتورهای جستجو مانند گوگل، سرعت سایت را به عنوان یک فاکتور مهم در رتبه‌بندی سایت در نظر می‌گیرند. سایت‌های سریع‌تر شانس بیشتری برای قرار گرفتن در نتایج بالای جستجو دارند. PageSpeed Insights گوگل نیز معیارهایی مانند First Contentful Paint (FCP) و Largest Contentful Paint (LCP) را برای سنجش سرعت بارگذاری در نظر می‌گیرد که Lazy Loading می‌تواند به بهبود این معیارها کمک شایانی کند.
3. نرخ تبدیل : هرچه کاربران سریع‌تر به محتوای مورد نظر خود دسترسی پیدا کنند، احتمال اینکه اقدام مورد نظر شما (مانند خرید، ثبت‌نام، یا پر کردن فرم) را انجام دهند، بیشتر است. کندی سایت می‌تواند مانع بزرگی بر سر راه تبدیل کاربران به مشتری باشد.
4. استفاده از منابع: با استفاده از Lazy Loading، پهنای باند (Bandwidth) کمتری در ابتدای بارگذاری مصرف می‌شود، که این امر به خصوص برای کاربرانی که بسته‌های اینترنتی محدود دارند، بسیار مهم است. همچنین، منابع سرور نیز در ابتدا کمتر درگیر می‌شوند.

نحوه عملکرد Lazy Loading

Lazy Loading معمولاً با استفاده از جاوا اسکریپت پیاده‌سازی می‌شود. فرآیند کلی به این صورت است:

1. تعیین منابع: در کد HTML، به جای استفاده مستقیم از ویژگی src برای تگ‌های <img> یا <video>، از ویژگی‌های جایگزین مانند data-src یا data-lazy-src استفاده می‌شود. این ویژگی‌ها آدرس منبع واقعی را نگهداری می‌کنند.
2. تشخیص دید کاربر (Viewport Detection): جاوا اسکریپت به طور مداوم موقعیت کاربر در صفحه (Scroll Position) را رصد می‌کند.
3. بررسی تقاطع (Intersection Observer API): روش مدرن و کارآمد برای تشخیص اینکه آیا یک عنصر در محدوده دید کاربر قرار گرفته است یا خیر، استفاده از Intersection Observer API است. این API به صورت بهینه و بدون نیاز به اسکرول مداوم (Debouncing/Throttling) این کار را انجام می‌دهد.
4. تغییر ویژگی src: هنگامی که جاوا اسکریپت تشخیص دهد که یک عنصر (مانند تصویر) در نزدیکی یا داخل محدوده دید کاربر قرار گرفته است، ویژگی src آن عنصر را با مقدار ذخیره شده در data-src جایگزین می‌کند.
5. بارگذاری منبع: با جایگزینی src، مرورگر به طور خودکار منبع را دانلود و نمایش می‌دهد.

انواع لیزی لودینگ

Lazy Loading را می‌توان برای منابع مختلفی پیاده‌سازی کرد:

1. Lazy Loading تصاویر: این رایج‌ترین نوع Lazy Loading است. تصاویری که در پایین صفحه قرار دارند و در ابتدا دیده نمی‌شوند، با استفاده از این تکنیک بارگذاری تنبل می‌شوند.مثال HTML:

   <img src="placeholder.jpg" data-src="image-to-load.jpg" alt="توضیحات تصویر">
   

   در این مثال، placeholder.jpg یک تصویر کوچک و کم‌حجم است که در ابتدا نمایش داده می‌شود (می‌تواند یک رنگ ساده یا یک آیکون باشد) و data-src حاوی آدرس تصویر اصلی است که پس از قرار گرفتن در دید کاربر بارگذاری می‌شود.

2. Lazy Loading ویدئوها: ویدئوها معمولاً حجم بالایی دارند و بارگذاری آن‌ها در ابتدای صفحه می‌تواند زمان بارگذاری را به شدت افزایش دهد. Lazy Loading ویدئوها به کاربر اجازه می‌دهد تا با کلیک بر روی یک تصویر بندانگشتی (Thumbnail) یا هنگامی که پخش‌کننده ویدئو در دید کاربر قرار می‌گیرد، ویدئو را بارگذاری و پخش کند.مثال HTML:

   <video controls data-src="video.mp4">
       <source src="placeholder-video.mp4" type="video/mp4">
       مرورگر شما از پخش ویدئو پشتیبانی نمی کند.
   </video>
   

   یا رایج‌تر، استفاده از iframe برای ویدئوهای یوتیوب:

   <iframe src="about:blank" data-src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
   

3. Lazy Loading iframe ها: iframe ها برای جاسازی محتوا از سایت‌های دیگر (مانند نقشه‌ها، فرم‌ها، یا ابزارهای شخص ثالث) استفاده می‌شوند. بارگذاری تنبل iframe ها می‌تواند تاثیر قابل توجهی بر سرعت اولیه صفحه داشته باشد.
4. Lazy Loading کد جاوا اسکریپت و CSS: گاهی اوقات، کد جاوا اسکریپت یا CSS که تنها برای بخش‌های خاصی از صفحه مورد نیاز است (مثلاً یک گالری تصاویر در پایین صفحه)، می‌تواند به صورت تنبل بارگذاری شود تا زمان بارگذاری اولیه صفحه کاهش یابد.
5. Lazy Loading بخش‌های صفحه: در فریم‌ورک‌های مدرن جاوا اسکریپت مانند React، Vue.js یا Angular، می‌توان کامپوننت‌های (Components) یک صفحه را به صورت تنبل بارگذاری کرد. این بدان معناست که کد مربوط به هر کامپوننت تنها زمانی دانلود می‌شود که آن کامپوننت در دید کاربر قرار گیرد یا مورد نیاز باشد. این تکنیک به خصوص برای برنامه‌های Single Page Application (SPA) بسیار مفید است.

پیاده‌سازی Lazy Loading

برای پیاده‌سازی Lazy Loading، روش‌های مختلفی وجود دارد:

الف) پیاده‌سازی با استفاده از جاوا اسکریپت (Vanilla JS)

این روش شامل نوشتن کد جاوا اسکریپت برای مدیریت بارگذاری است.

1. استفاده از Intersection Observer API (روش مدرن و پیشنهادی):

این API به صورت کارآمد تشخیص می‌دهد که آیا یک عنصر وارد محدوده دید (Viewport) مرورگر شده است یا خیر.

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = document.querySelectorAll("img[data-src]");

    var lazyLoadObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var img = entry.target;
                img.src = img.dataset.src; // انتقال data-src به src
                img.removeAttribute('data-src'); // حذف data-src پس از بارگذاری

                // اگر از picture element استفاده می کنید
                // var source = img.closest('picture').querySelector('source[data-srcset]');
                // if (source) {
                //     source.srcset = source.dataset.srcset;
                //     source.removeAttribute('data-srcset');
                // }

                observer.unobserve(img); // عدم رصد مجدد این عنصر
            }
        });
    }, {
        rootMargin: '0px', // شروع بارگذاری زمانی که عنصر در فاصله 0 پیکسل از لبه Viewport قرار دارد
        threshold: 0.01  // حداقل 1% از عنصر باید در Viewport باشد تا فراخوانی شود
    });

    lazyImages.forEach(function(img) {
        lazyLoadObserver.observe(img);
    });
});

2. روش سنتی (استفاده از Scroll Event – کمتر پیشنهادی به دلیل سربار پردازشی):

در این روش، به رویداد scroll گوش داده می‌شود و موقعیت تصاویر نسبت به پنجره مرورگر بررسی می‌شود.

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = document.querySelectorAll("img[data-src]");
    var viewportOffset = 100; // بارگذاری تصاویر زمانی که 100 پیکسل تا Viewport فاصله دارند

    function lazyLoadImages() {
        lazyImages.forEach(function(img) {
            if (img.getBoundingClientRect().top <= window.innerHeight + viewportOffset &&
                img.getBoundingClientRect().bottom >= -viewportOffset &&
                img.getAttribute('data-src')) {
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
            }
        });

        if (lazyImages.length === 0) {
            document.removeEventListener('scroll', lazyLoadImages);
            window.removeEventListener('resize', lazyLoadImages);
        }
    }

    document.addEventListener('scroll', lazyLoadImages);
    window.addEventListener('resize', lazyLoadImages);

    lazyLoadImages(); // بارگذاری اولیه تصاویری که از ابتدا در Viewport هستند
});

ب) استفاده از کتابخانه‌های جاوا اسکریپت

کتابخانه‌های زیادی برای ساده‌سازی پیاده‌سازی Lazy Loading وجود دارند، مانند:

• lazysizes: یکی از محبوب‌ترین و قدرتمندترین کتابخانه‌ها است که قابلیت‌های زیادی از جمله پشتیبانی از picture element، responsive images و … را ارائه می‌دهد.نحوه استفاده از lazysizes:
  1. لینک دادن به کتابخانه در <head> یا انتهای <body>:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
     

  2. استفاده از کلاس lazyload و ویژگی data-src:

     <img data-src="image-to-load.jpg" src="placeholder.jpg" class="lazyload" alt="توضیحات تصویر">
     
     <picture>
       <source data-srcset="image-large.jpg 1024w, image-medium.jpg 768w" type="image/jpeg">
       <img data-src="image-fallback.jpg" src="placeholder.jpg" alt="توضیحات تصویر" class="lazyload">
     </picture>
     

• vanilla-lazyload: یک کتابخانه سبک و ساده برای Lazy Loading تصاویر و iframe ها.

ج) Lazy Loading نیتیو (Native Lazy Loading)

مرورگرهای مدرن از Lazy Loading نیتیو پشتیبانی می‌کنند. این کار با افزودن ویژگی loading="lazy" به تگ‌های <img> و <iframe> انجام می‌شود. این روش نیازی به جاوا اسکریپت ندارد و توسط مرورگر مدیریت می‌شود که بسیار کارآمد است.

مثال HTML:

<img src="image-to-load.jpg" alt="توضیحات تصویر" loading="lazy">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>

نکات مهم در مورد Native Lazy Loading:

• پشتیبانی مرورگر: این قابلیت توسط اکثر مرورگرهای مدرن (Chrome, Firefox, Edge, Safari) پشتیبانی می‌شود، اما مرورگرهای قدیمی‌تر ممکن است از آن پشتیبانی نکنند. برای اطمینان، بهتر است fallback جاوا اسکریپت نیز در نظر گرفته شود.
• loading="lazy": این ویژگی به مرورگر می‌گوید که منبع را تا زمانی که در دید کاربر قرار گیرد، بارگذاری نکند.
• loading="eager": این مقدار پیش‌فرض است و به مرورگر می‌گوید که منبع را فوراً بارگذاری کند.
• loading="auto": مرورگر خودش تصمیم می‌گیرد که چه زمانی منبع را بارگذاری کند.

مزایای Lazy Loading

Lazy Loading مزایای متعددی برای وب‌سایت شما به ارمغان می‌آورد:

1. افزایش سرعت بارگذاری اولیه صفحه: این مهم‌ترین مزیت Lazy Loading است. با بارگذاری منابع کمتری در ابتدا، صفحه سریع‌تر قابل مشاهده می‌شود.
2. بهبود تجربه کاربری: کاربران تجربه روان‌تری دارند و نیازی به انتظار برای بارگذاری تمام محتوا ندارند.
3. کاهش نرخ خروج (Bounce Rate): سرعت بالاتر باعث می‌شود کاربران از سایت شما خارج نشوند.
4. بهبود سئو: سرعت سایت یکی از فاکتورهای رتبه‌بندی موتورهای جستجو است.
5. صرفه‌جویی در مصرف پهنای باند: کاربرانی که تنها بخش کوچکی از صفحه را مشاهده می‌کنند، از دانلود منابع غیرضروری اجتناب می‌کنند.
6. کاهش فشار بر منابع سرور: در ابتدا، سرور کمتر درگیر پردازش و ارسال داده می‌شود.
7. بهبود معیارهای Core Web Vitals: معیارهایی مانند LCP (Largest Contentful Paint) به طور مستقیم از Lazy Loading سود می‌برند.

چالش‌های لیزی لود

با وجود مزایای فراوان، Lazy Loading نیز چالش‌هایی دارد که باید به آن‌ها توجه کرد:

1. SEO و ربات‌های خزش (Crawlers): ربات‌های خزش موتورهای جستجو ممکن است به طور پیش‌فرض کدهای جاوا اسکریپت را به طور کامل اجرا نکنند و نتوانند محتوایی را که از طریق Lazy Loading بارگذاری می‌شود، ببینند. اگر محتوای مهم (مانند متن یا تصاویر کلیدی) به صورت Lazy Loading بارگذاری شود، ممکن است سئوی آن تحت تأثیر قرار گیرد.
   • راه حل:
     • استفاده از Native Lazy Loading (loading="lazy").
     • اطمینان از اینکه محتوای مهم صفحه (Critical Content) قبل از اجرای اسکریپت‌ها بارگذاری می‌شود.
     • استفاده از اسکریپت‌های Lazy Loading که به خوبی با سئو سازگار هستند (مانند lazysizes).
     • در صورت نیاز، از Progressive Enhancement استفاده کنید؛ یعنی ابتدا سایت با HTML و CSS پایه قابل استفاده باشد و سپس جاوا اسکریپت قابلیت‌های اضافی مانند Lazy Loading را اضافه کند.
2. دسترسی‌پذیری (Accessibility): اطمینان حاصل کنید که کاربران با صفحه‌خوان‌ها (Screen Readers) یا با ناتوانی در استفاده از ماوس/کیبورد، همچنان به محتوا دسترسی دارند.
   • راه حل:
     • استفاده از alt text مناسب برای تصاویر.
     • استفاده از aria-label یا سایر مشخصات ARIA در صورت نیاز.
     • برای ویدئوها، اطمینان از وجود دکمه پخش واضح.
     • تست با صفحه‌خوان‌ها.
3. تأخیر در نمایش (Perceived Latency): اگرچه سرعت کلی افزایش می‌یابد، اما ممکن است کاربر هنگام اسکرول به یک عنصر، یک لحظه مکث قبل از بارگذاری کامل آن را تجربه کند، به خصوص اگر اتصال اینترنت ضعیف باشد.
   • راه حل:
     • استفاده از تصاویر placeholder کم‌حجم و جذاب.
     • استفاده از تصاویر کوچک‌تر برای پیش‌نمایش (thumbnails) یا blurred versions.
     • بهینه‌سازی تصاویر اصلی برای کاهش حجم.
4. مشکلات در مرورگرهای قدیمی: Native Lazy Loading در مرورگرهای قدیمی پشتیبانی نمی‌شود.
   • راه حل:
     • ارائه یک fallback با استفاده از جاوا اسکریپت برای مرورگرهایی که از loading="lazy" پشتیبانی نمی‌کنند.
5. مشکلات در نمایش عناصر با ارتفاع پویا: اگر عنصری که Lazy Loading می‌شود، ارتفاع قابل توجهی داشته باشد و placeholder آن کوتاه باشد، ممکن است باعث تغییر ناگهانی در چیدمان صفحه (Cumulative Layout Shift – CLS) شود.
   • راه حل:
     • مشخص کردن width و height برای تگ‌های <img> یا استفاده از CSS برای اختصاص دادن نسبت ابعادی (Aspect Ratio) به عناصر.
     • استفاده از aspect-ratio CSS property.

بهترین شیوه‌ها برای Lazy Loading

• از Native Lazy Loading استفاده کنید: در صورت امکان، loading="lazy" را بر روی تصاویر و iframe ها اعمال کنید. این ساده‌ترین و کارآمدترین روش است.
• ارائه Fallback: برای سازگاری با مرورگرهای قدیمی‌تر، از جاوا اسکریپت به عنوان fallback استفاده کنید.
• استفاده از تصاویر Placeholder: یک تصویر placeholder کم‌حجم و معنی‌دار (مثل یک آیکون یا یک رنگ ساده) در src اصلی قرار دهید تا قبل از بارگذاری تصویر اصلی، فضای کافی برای آن رزرو شود و از CLS جلوگیری شود.
• تعیین ابعاد تصاویر: همیشه width و height را برای تصاویرتان مشخص کنید تا مرورگر بتواند فضای لازم را رزرو کند و از پرش محتوا جلوگیری شود.
• استفاده از picture element و srcset: برای ارائه تصاویر responsive که با اندازه‌های مختلف صفحه نمایش سازگار هستند، از <picture> و srcset همراه با Lazy Loading استفاده کنید.
• بارگذاری تنبل برای محتوای غیرضروری: فقط برای منابعی که در دید اولیه کاربر قرار ندارند، از Lazy Loading استفاده کنید. محتوای کلیدی صفحه باید به صورت عادی بارگذاری شود.
• تست در شرایط مختلف: سایت خود را با سرعت‌های مختلف اینترنت و دستگاه‌های متفاوت تست کنید تا از عملکرد صحیح Lazy Loading اطمینان حاصل کنید.
• پایش معیارهای عملکرد: با ابزارهایی مانند Google PageSpeed Insights، GTmetrix، یا WebPageTest، عملکرد سایت خود را پس از اعمال Lazy Loading پایش کنید.

Lazy Loading در فریم‌ورک‌های مدرن

فریم‌ورک‌های جاوا اسکریپت مدرن مانند React، Vue.js و Angular، مکانیزم‌های داخلی یا کتابخانه‌هایی برای تسهیل Lazy Loading کامپوننت‌ها و کدهای جاوا اسکریپت ارائه می‌دهند:

• React: از React.lazy و Suspense برای بارگذاری تنبل کامپوننت‌ها استفاده می‌شود.

  import React, { Suspense } from 'react';
  
  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  
  function App() {
    return (
      <div>
        <h1>صفحه اصلی</h1>
        <Suspense fallback={<div>در حال بارگذاری کامپوننت...</div>}>
          <LazyComponent />
        </Suspense>
      </div>
    );
  }
  

• Vue.js: از Vue.component با استفاده از تابع async برای بارگذاری تنبل کامپوننت‌ها بهره می‌برد.
• Angular: از loadChildren در مسیریابی (Routing) برای بارگذاری تنبل ماژول‌ها و کامپوننت‌ها استفاده می‌کند.

این رویکردها به توسعه‌دهندگان اجازه می‌دهند تا حجم اولیه جاوا اسکریپت بارگذاری شده را به شدت کاهش دهند و فقط کدهای مورد نیاز را در زمان لازم بارگذاری کنند.

نتیجه‌گیری

در این مقاله توضبح دادبم لیزی لودینگ چیست که یکی از موارد در چک لیست افزایش سرعت سایت میباشد و در نتیحه Lazy Loading یک تکنیک حیاتی برای بهینه‌سازی سرعت وب‌سایت‌ها و بهبود تجربه کاربری است. با به تعویق انداختن بارگذاری منابع غیرضروری، می‌توان زمان بارگذاری اولیه صفحه را به طور چشمگیری کاهش داد، که این امر مستقیماً بر سئو، نرخ تبدیل و رضایت کاربران تأثیر مثبت می‌گذارد. استفاده از Native Lazy Loading (loading="lazy") ساده‌ترین و بهترین روش است، اما برای اطمینان از سازگاری کامل، ترکیب آن با fallback های جاوا اسکریپت توصیه می‌شود. با درک صحیح نحوه عملکرد Lazy Loading و رعایت بهترین شیوه‌ها، می‌توانید وب‌سایت خود را به سطحی از سرعت و کارایی برسانید که رضایت کاربران و موتورهای جستجو را جلب کند.