بارگذاری تنبل (Lazy Loading): بهینه‌سازی عملکرد وب با تصاویر و کامپوننت‌ها

در چشم‌انداز دیجیتال امروز، عملکرد وب‌سایت از اهمیت بالایی برخوردار است. کاربران انتظار تجربیات سریع و پاسخگو را دارند و موتورهای جستجو وب‌سایت‌هایی را که این انتظارات را برآورده می‌کنند، در اولویت قرار می‌دهند. یکی از تکنیک‌های حیاتی برای بهبود عملکرد، بارگذاری تنبل (lazy loading) است. این مقاله یک راهنمای جامع برای بارگذاری تنبل تصاویر و کامپوننت‌ها ارائه می‌دهد و به شما کمک می‌کند تا وب‌سایت خود را برای مخاطبان جهانی بهینه کنید.

بارگذاری تنبل (Lazy Loading) چیست؟

بارگذاری تنبل تکنیکی است که بارگذاری منابع (تصاویر، آی‌فریم‌ها، کامپوننت‌ها و غیره) را تا زمانی که واقعاً به آن‌ها نیاز باشد، به تعویق می‌اندازد – معمولاً زمانی که در آستانه ورود به دید کاربر (viewport) قرار می‌گیرند. این بدان معناست که به جای بارگذاری تمام دارایی‌ها از ابتدا، مرورگر تنها منابعی را بارگذاری می‌کند که در بارگذاری اولیه صفحه برای کاربر قابل مشاهده هستند. با پایین آمدن کاربر در صفحه، منابع بیشتری با قابل مشاهده شدن، بارگذاری می‌شوند.

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

چرا از بارگذاری تنبل استفاده کنیم؟

بارگذاری تنبل چندین مزیت قابل توجه ارائه می‌دهد:

• بهبود زمان بارگذاری اولیه صفحه: با به تعویق انداختن بارگذاری منابع خارج از صفحه، مرورگر می‌تواند بر بارگذاری محتوایی که بلافاصله برای کاربر قابل مشاهده است، تمرکز کند. این امر منجر به زمان بارگذاری اولیه سریع‌تر صفحه، بهبود اولین برداشت کاربر و کاهش نرخ پرش (bounce rates) می‌شود.
• کاهش مصرف پهنای باند: کاربران تنها منابعی را که واقعاً می‌بینند دانلود می‌کنند، که باعث کاهش مصرف پهنای باند می‌شود، به خصوص برای کاربرانی که از دستگاه‌های تلفن همراه یا با طرح‌های داده محدود استفاده می‌کنند. این امر به ویژه برای کاربران در مناطقی با سرعت اینترنت پایین‌تر یا داده‌های گران‌قیمت اهمیت دارد.
• بار کمتر روی سرور: با ارائه درخواست‌های اولیه کمتر، سرور بار کمتری را تجربه می‌کند که می‌تواند عملکرد کلی و مقیاس‌پذیری وب‌سایت را بهبود بخشد.
• تجربه کاربری بهتر: یک وب‌سایت سریع‌تر تجربه کاربری بهتری را فراهم می‌کند که منجر به افزایش تعامل، تبدیل‌ها و رضایت مشتری می‌شود.
• بهبود سئو (SEO): موتورهای جستجو مانند گوگل، سرعت بارگذاری صفحه را به عنوان یک عامل رتبه‌بندی در نظر می‌گیرند. بارگذاری تنبل می‌تواند به بهبود عملکرد سئوی وب‌سایت شما کمک کند.

بارگذاری تنبل تصاویر

تصاویر اغلب بزرگترین دارایی‌های یک وب‌سایت هستند و آن‌ها را به گزینه‌های اصلی برای بارگذاری تنبل تبدیل می‌کنند. در اینجا نحوه پیاده‌سازی بارگذاری تنبل برای تصاویر آورده شده است:

بارگذاری تنبل بومی (Native)

مرورگرهای مدرن (کروم، فایرفاکس، سافاری و اج) اکنون از بارگذاری تنبل بومی با استفاده از ویژگی loading پشتیبانی می‌کنند. این ساده‌ترین و کارآمدترین راه برای بارگذاری تنبل تصاویر است.

برای فعال کردن بارگذاری تنبل بومی، کافی است ویژگی loading="lazy" را به تگ <img> خود اضافه کنید:

            <img src="image.jpg" alt="My Image" loading="lazy">
            

              
                Copy
              
            
          

ویژگی loading می‌تواند سه مقدار داشته باشد:

• lazy: بارگذاری تصویر را تا زمانی که در آستانه ورود به دید کاربر قرار گیرد، به تعویق می‌اندازد.
• eager: تصویر را بلافاصله بارگذاری می‌کند، صرف نظر از موقعیت آن در صفحه. (این رفتار پیش‌فرض در صورت عدم وجود این ویژگی است.)
• auto: به مرورگر اجازه می‌دهد تصمیم بگیرد که آیا تصویر را به صورت تنبل بارگذاری کند یا خیر.

مثال:

            <img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
            

              
                Copy
              
            
          

در این مثال، تصاویر پل لندن، افق توکیو و ریودوژانیرو تنها زمانی بارگذاری می‌شوند که کاربر به سمت آن‌ها اسکرول کند. این بسیار مفید است، به خصوص اگر کاربر تا انتهای صفحه اسکرول نکند.

بارگذاری تنبل با جاوا اسکریپت

برای مرورگرهای قدیمی‌تری که از بارگذاری تنبل بومی پشتیبانی نمی‌کنند، می‌توانید از کتابخانه‌های جاوا اسکریپت استفاده کنید یا اسکریپت سفارشی خود را بنویسید. در اینجا یک مثال ساده با استفاده از Intersection Observer API آورده شده است:

            const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

توضیح:

1. ما تمام عناصر <img> را که دارای ویژگی data-src هستند، انتخاب می‌کنیم.
2. ما یک نمونه جدید از IntersectionObserver ایجاد می‌کنیم. تابع callback زمانی اجرا می‌شود که یک عنصر مشاهده شده وارد دید کاربر شود یا از آن خارج شود.
3. در داخل تابع callback، ما روی entries (عناصری که با دید کاربر تلاقی داشته‌اند) تکرار می‌کنیم.
4. اگر یک عنصر در حال تلاقی باشد (entry.isIntersecting برابر با true است)، ما ویژگی src تصویر را با مقدار ویژگی data-src تنظیم می‌کنیم.
5. سپس ویژگی data-src را حذف کرده و مشاهده تصویر را متوقف می‌کنیم، زیرا دیگر به آن نیازی نیست.
6. در نهایت، هر تصویر را با استفاده از observer.observe(img) مشاهده می‌کنیم.

ساختار HTML:

            <img data-src="image.jpg" alt="My Image">
            

              
                Copy
              
            
          

توجه داشته باشید که URL واقعی تصویر به جای ویژگی src در ویژگی data-src قرار می‌گیرد. این کار از بارگذاری فوری تصویر توسط مرورگر جلوگیری می‌کند.

استفاده از کتابخانه‌های بارگذاری تنبل

چندین کتابخانه جاوا اسکریپت می‌توانند فرآیند بارگذاری تنبل تصاویر را ساده کنند. برخی از گزینه‌های محبوب عبارتند از:

• Lozad.js: یک کتابخانه بارگذاری تنبل سبک و بدون وابستگی.
• yall.js: یک کتابخانه بارگذاری تنبل مدرن با استفاده از Intersection Observer.
• React Lazy Load: یک کامپوننت ری‌اکت برای بارگذاری تنبل تصاویر و کامپوننت‌های دیگر.

این کتابخانه‌ها معمولاً یک API ساده برای راه‌اندازی بارگذاری تنبل ارائه می‌دهند و ویژگی‌های اضافی مانند تصاویر جایگزین (placeholder) و جلوه‌های انتقال را ارائه می‌دهند.

بارگذاری تنبل کامپوننت‌ها

بارگذاری تنبل فقط برای تصاویر نیست؛ می‌توان آن را برای کامپوننت‌ها نیز به کار برد، به ویژه در فریم‌ورک‌های مدرن جاوا اسکریپت مانند ری‌اکت، انگولار و ویو. این امر به ویژه برای برنامه‌های تک‌صفحه‌ای (SPA) بزرگ با کامپوننت‌های زیاد مفید است.

بارگذاری تنبل در ری‌اکت (React)

ری‌اکت یک تابع داخلی به نام React.lazy() برای بارگذاری تنبل کامپوننت‌ها فراهم می‌کند. این تابع به شما اجازه می‌دهد تا کامپوننت‌ها را به صورت پویا وارد (import) کنید، که سپس تنها زمانی که رندر می‌شوند، بارگذاری می‌شوند.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

توضیح:

1. ما از React.lazy() برای وارد کردن پویای MyComponent استفاده می‌کنیم. تابع import() یک promise را برمی‌گرداند که به ماژول کامپوننت resolve می‌شود.
2. ما MyComponent را در یک کامپوننت <Suspense> قرار می‌دهیم. کامپوننت Suspense به شما امکان می‌دهد تا یک رابط کاربری جایگزین (در این مورد، "Loading...") را در حین بارگذاری کامپوننت نمایش دهید.

بارگذاری تنبل در انگولار (Angular)

انگولار از بارگذاری تنبل ماژول‌ها با استفاده از ویژگی loadChildren در پیکربندی مسیریابی (routing) پشتیبانی می‌کند.

            const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];
            

              
                Copy
              
            
          

توضیح:

1. ما یک مسیر برای مسیر my-module تعریف می‌کنیم.
2. ما از ویژگی loadChildren برای مشخص کردن اینکه MyModuleModule باید به صورت تنبل بارگذاری شود، استفاده می‌کنیم. تابع import() ماژول را به صورت پویا وارد می‌کند.
3. متد then() برای دسترسی به ماژول و بازگرداندن کلاس MyModuleModule استفاده می‌شود.

بارگذاری تنبل در ویو (Vue.js)

ویو از بارگذاری تنبل کامپوننت‌ها با استفاده از وارد کردن‌های پویا (dynamic imports) و تگ component پشتیبانی می‌کند.

            <template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>
            

              
                Copy
              
            
          

توضیح:

1. ما از تگ <component> با ویژگی :is برای رندر پویای یک کامپوننت استفاده می‌کنیم.
2. در هوک چرخه حیات mounted، ما از تابع import() برای وارد کردن پویای MyComponent.vue استفاده می‌کنیم.
3. سپس ما خاصیت داده dynamicComponent را به خروجی پیش‌فرض ماژول تنظیم می‌کنیم.

بهترین شیوه‌ها برای بارگذاری تنبل

برای اطمینان از اینکه بارگذاری تنبل به طور مؤثر پیاده‌سازی شده است، این بهترین شیوه‌ها را در نظر بگیرید:

• در صورت امکان از بارگذاری تنبل بومی استفاده کنید: اگر مرورگرهای مدرن را هدف قرار می‌دهید، از ویژگی بومی loading برای تصاویر و آی‌فریم‌ها استفاده کنید.
• کتابخانه مناسب را انتخاب کنید: اگر نیاز به پشتیبانی از مرورگرهای قدیمی‌تر دارید یا به ویژگی‌های اضافی نیاز دارید، یک کتابخانه بارگذاری تنبل با پشتیبانی خوب و سبک انتخاب کنید.
• از جایگزین‌ها (Placeholders) استفاده کنید: تصاویر یا عناصر رابط کاربری جایگزین را برای جلوگیری از جابجایی محتوا در حین بارگذاری منابع فراهم کنید. این کار تجربه کاربری را بهبود می‌بخشد و ناپایداری طرح‌بندی را کاهش می‌دهد. از تصاویر جایگزین با حجم بسیار کم (اندازه کیلوبایت پایین) یا حتی بلوک‌های رنگی یکدست که با رنگ متوسط تصویری که در نهایت بارگذاری می‌شود مطابقت دارد، استفاده کنید.
• تصاویر را بهینه کنید: قبل از پیاده‌سازی بارگذاری تنبل، تصاویر خود را با فشرده‌سازی آن‌ها و استفاده از فرمت‌های فایل مناسب (مانند WebP، JPEG، PNG) بهینه کنید.
• به طور کامل تست کنید: پیاده‌سازی بارگذاری تنبل خود را در مرورگرها، دستگاه‌ها و شرایط شبکه مختلف تست کنید تا از صحت عملکرد آن اطمینان حاصل کنید. به کاربران با دستگاه‌های ضعیف‌تر (اغلب تلفن‌های قدیمی‌تر) توجه کنید تا مطمئن شوید بارگذاری تصاویر بیش از حد طول نمی‌کشد.
• بخش بالای صفحه (Fold) را در نظر بگیرید: برای عناصری که در بالای صفحه قرار دارند (در بارگذاری اولیه صفحه قابل مشاهده هستند)، از بارگذاری تنبل آن‌ها خودداری کنید. این عناصر باید به صورت فوری (eagerly) بارگذاری شوند تا از رندر اولیه سریع اطمینان حاصل شود.
• منابع حیاتی را در اولویت قرار دهید: منابع حیاتی که برای تجربه کاربری اولیه ضروری هستند را شناسایی کرده و آن‌ها را به صورت فوری بارگذاری کنید. این موارد ممکن است شامل لوگوی وب‌سایت، عناصر ناوبری و محتوای اصلی صفحه باشد.
• عملکرد را نظارت کنید: از ابزارهای نظارت بر عملکرد برای ردیابی تأثیر بارگذاری تنبل بر عملکرد وب‌سایت خود استفاده کنید. این به شما کمک می‌کند تا هرگونه مشکل را شناسایی کرده و پیاده‌سازی خود را بهینه کنید. PageSpeed Insights گوگل و WebPageTest ابزارهای رایگان عالی برای اندازه‌گیری عملکرد سایت هستند.

ملاحظات بین‌المللی‌سازی

هنگام پیاده‌سازی بارگذاری تنبل برای مخاطبان جهانی، این عوامل بین‌المللی‌سازی را در نظر بگیرید:

• سرعت‌های شبکه متفاوت: کاربران در مناطق مختلف ممکن است سرعت‌های شبکه بسیار متفاوتی داشته باشند. استراتژی بارگذاری تنبل خود را برای در نظر گرفتن اتصالات کندتر بهینه کنید.
• هزینه‌های داده: در برخی مناطق، هزینه‌های داده بالا است. بارگذاری تنبل می‌تواند به کاهش مصرف داده و بهبود تجربه کاربری برای کاربران با طرح‌های داده محدود کمک کند.
• قابلیت‌های دستگاه: کاربران در مناطق مختلف ممکن است از دستگاه‌های متفاوتی با قابلیت‌های گوناگون استفاده کنند. پیاده‌سازی بارگذاری تنبل خود را روی طیف وسیعی از دستگاه‌ها تست کنید تا از صحت عملکرد آن اطمینان حاصل کنید.
• شبکه‌های تحویل محتوا (CDN): از یک CDN برای تحویل دارایی‌های وب‌سایت خود از سرورهای واقع در سراسر جهان استفاده کنید. این کار می‌تواند عملکرد را برای کاربران در مناطق مختلف بهبود بخشد. به عنوان مثال، تصاویر مکان‌های دیدنی اروپا باید تا حد امکان از یک نقطه پایانی CDN در اروپا برای کاربران اروپایی ارائه شود.
• فرمت‌های تصویر: استفاده از فرمت‌های تصویر مدرن مانند WebP را در نظر بگیرید که فشرده‌سازی و کیفیت بهتری نسبت به فرمت‌های سنتی مانند JPEG و PNG ارائه می‌دهند. با این حال، از سازگاری مرورگرها آگاه باشید؛ برای مرورگرهای قدیمی‌تری که از WebP پشتیبانی نمی‌کنند، از جایگزین‌های مناسب استفاده کنید.
• دسترسی‌پذیری: اطمینان حاصل کنید که پیاده‌سازی بارگذاری تنبل شما برای کاربران دارای معلولیت قابل دسترس است. متن جایگزین (alt text) مناسب برای تصاویر فراهم کنید و اطمینان حاصل کنید که وضعیت بارگذاری به فناوری‌های کمکی اطلاع داده می‌شود.

نتیجه‌گیری

بارگذاری تنبل یک تکنیک قدرتمند برای بهینه‌سازی عملکرد وب‌سایت و بهبود تجربه کاربری است. با به تعویق انداختن بارگذاری منابع خارج از صفحه، می‌توانید زمان بارگذاری اولیه صفحه را کاهش دهید، مصرف پهنای باند را کم کنید و بار سرور را کاهش دهید. چه در حال ساخت یک وب‌سایت شخصی کوچک باشید و چه یک برنامه کاربردی بزرگ سازمانی، بارگذاری تنبل باید بخش کلیدی استراتژی بهینه‌سازی عملکرد شما باشد. با پیروی از بهترین شیوه‌های ذکر شده در این مقاله و در نظر گرفتن عوامل بین‌المللی‌سازی، می‌توانید اطمینان حاصل کنید که پیاده‌سازی بارگذاری تنبل شما مؤثر است و تجربه کاربری مثبتی را برای مخاطبان جهانی فراهم می‌کند.

بارگذاری تنبل را در آغوش بگیرید و یک تجربه وب سریع‌تر، کارآمدتر و کاربرپسندتر را برای همه فراهم کنید.