Lazy Loading یک تکنیک بهینه سازی وب است که بارگذاری منابع غیر ضروری - در این مورد، تصاویر - را در لحظه بارگذاری اولیه صفحه وب به تاخیر می اندازد. به جای بارگذاری همه تصاویر به طور همزمان، تصاویر تنها زمانی بارگذاری می شوند که کاربر به آن ها اسکرول کند و تصویر در دید کاربر قرار گیرد. این روش به طور قابل توجهی زمان بارگذاری اولیه صفحه را کاهش می دهد، پهنای باند مصرفی را کم می کند و عملکرد کلی وب سایت را بهبود می بخشد.
روش های مختلفی برای پیاده سازی Lazy Loading وجود دارد، از جمله:
ساده ترین راه برای پیاده سازی Lazy Loading، استفاده از ویژگی loading="lazy" در تگ <img> است. به عنوان مثال:
<img src="image.jpg" alt="توضیح تصویر" loading="lazy">
این ویژگی به مرورگر اعلام می کند که تصویر را فقط زمانی بارگذاری کند که در دید کاربر قرار گیرد.
Intersection Observer API یک رابط برنامه نویسی جاوا اسکریپت (API) است که به شما امکان می دهد تشخیص دهید که یک عنصر چه زمانی وارد صفحه نمایش کاربر شده است. این API می تواند برای پیاده سازی Lazy Loading سفارشی استفاده شود. این روش نیاز به دانش JavaScript دارد اما کنترل بیشتری بر نحوه بارگذاری تصاویر ارائه می دهد. به عنوان مثال:
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;
observer.unobserve(img);
}
});
});
images.forEach(img => {
observer.observe(img);
});
در این مثال، ابتدا تمام تصاویر با ویژگی data-src انتخاب می شوند. سپس، یک Intersection Observer ایجاد می شود که وظیفه نظارت بر ورود تصاویر به صفحه نمایش را بر عهده دارد. هنگامی که یک تصویر وارد صفحه نمایش می شود، URL تصویر از ویژگی data-src به ویژگی src منتقل می شود و تصویر بارگذاری می شود.
برای سهولت در پیاده سازی Lazy Loading، می توانید از کتابخانه ها و پلاگین های آماده استفاده کنید. برخی از محبوب ترین کتابخانه ها و پلاگین های Lazy Loading عبارتند از:
همانطور که اشاره شد، سرعت بارگذاری صفحه یکی از عوامل مهم در رتبه بندی سئو است. Lazy Loading با بهبود سرعت بارگذاری صفحه، تاثیر مثبتی بر سئوی سایت دارد. گوگل به وب سایت هایی که تجربه کاربری بهتری ارائه می دهند رتبه بالاتری می دهد. یک وب سایت سریعتر نرخ پرش را کاهش می دهد، زمان ماندن کاربران در سایت را افزایش می دهد و در نهایت منجر به بهبود رتبه بندی SEO می شود. علاوه بر این، Lazy Loading می تواند به خزنده های گوگل کمک کند تا صفحات سایت را به طور موثرتری بررسی کنند.
بله، Lazy Loading می تواند برای اکثر وب سایت ها مفید باشد، به ویژه وب سایت هایی که دارای تصاویر زیادی هستند.
اگر به درستی پیاده سازی شود، Lazy Loading نباید تاثیری بر accessibility سایت داشته باشد. مطمئن شوید که ویژگی alt برای تصاویر تنظیم شده باشد و placeholder مناسبی نمایش داده شود.
بله، AMP از Lazy Loading به طور پیش فرض پشتیبانی می کند.
می توانید از ابزارهای توسعه مرورگر (Developer Tools) استفاده کنید تا بررسی کنید که تصاویر فقط زمانی بارگذاری می شوند که در دید کاربر قرار گیرند.
آیا به دنبال بهبود سئوی سایت خود هستید؟ با ما تماس بگیرید: 09190994063 - 09376846692. ما در بهینه سازی سایت شما و افزایش رتبه آن در نتایج جستجو به شما کمک می کنیم!