M

MLOG

فارسی

راهنمای جامع برای بارگذاری تنبل تصاویر و کامپوننت‌ها، بهبود عملکرد وب‌سایت و تجربه کاربری برای مخاطبان جهانی.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال:

<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">

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

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

برای مرورگرهای قدیمی‌تری که از بارگذاری تنبل بومی پشتیبانی نمی‌کنند، می‌توانید از کتابخانه‌های جاوا اسکریپت استفاده کنید یا اسکریپت سفارشی خود را بنویسید. در اینجا یک مثال ساده با استفاده از 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);
});

توضیح:

  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">

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

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

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

این کتابخانه‌ها معمولاً یک 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;

توضیح:

  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)
  }
];

توضیح:

  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>

توضیح:

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

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

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

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

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

نتیجه‌گیری

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

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