در دنیای امروز که سرعت اینترنت کاربران و تجربه کاربری از مهمترین فاکتورهای سئو محسوب میشوند، تکنیک Lazy Loading تبدیل به یکی از ضروریترین ابزارهای توسعهدهندگان وب شده است. اما Lazy Load دقیقاً چیست، چرا برای سئو اهمیت دارد و چطور باید آن را پیادهسازی کرد؟ در این مقاله به صورت کامل به این موضوع میپردازیم.
Lazy Loading یا بارگذاری تنبل، تکنیکی است که در آن بارگذاری تصاویر، ویدئوها، اسکریپتها یا هر محتوای سنگین دیگر تا زمانی که کاربر واقعاً به آنها نیاز پیدا نکند، انجام نمیشود.
به زبان ساده:
وقتی کاربر صفحه را باز میکند، فقط بخشهایی که در صفحه قابل مشاهده هستند (viewport) لود میشوند.
بخشهایی مثل تصاویر پایین صفحه بعداً و هنگام رسیدن کاربر به آن قسمتها بارگذاری خواهند شد.
گوگل بارها تأکید کرده که Speed یک سیگنال رتبهبندی مهم است. Lazy Load باعث کاهش حجم اولیه لود صفحه میشود، در نتیجه:
LCP بهتر میشود
CLS کاهش پیدا میکند
TTFB کمتر حس میشود
Core Web Vitals بهبود پیدا میکند
تصاویر یکی از سنگینترین منابع صفحات وب هستند. Lazy Load اجازه نمیدهد همه تصاویر باهم لود شوند و این موضوع برای کاربران موبایل اهمیت زیادی دارد.
۳. افزایش تجربه کاربری
کاربران سریعتر به محتوای اصلی دسترسی پیدا میکنند و وقفههای سنگین در بارگذاری صفحه کمتر میشود.
وقتی منابع سنگین بیدلیل لود نشوند، گوگلبات وقت خود را بهتر مدیریت کرده و صفحات بیشتری از سایت شما را کراول میکند.
در گذشته، اگر تصاویر با Lazy Load نمایش داده میشدند و کاربر اسکرول نمیکرد، گوگل قادر به دیدن آنها نبود.
اما امروزه گوگل Lazy Loading استاندارد HTML را بهطور کامل پشتیبانی میکند.
دو نکته در این میان مهم هستند:
نحوه پیادهسازی Lazy Load به روش استاندارد HTML
گوگل توصیه میکند از ویژگی loading="lazy" استفاده شود.
نمونه کد ساده و استاندارد:
<img src="image.jpg" alt="تصویر نمونه" loading="lazy">
این کد به مرورگر میگوید تصویر را زمانی لود کند که به viewport نزدیک شود.
برای iframeها:
<iframe src="video.html" loading="lazy"></iframe>
اگر تصویر داخل بخش قابل مشاهده صفحه (Above the fold) باشد و Lazy Load شود:
❌ LCP بدتر میشود
❌ تجربه کاربری افت میکند
❌ Core Web Vitals ضربه میخورد
بنابراین برای تصاویر هدر یا بنر اصلی همیشه Lazy Load را حذف کنید:
<img src="header.jpg" alt="تصویر هدر" loading="eager">
پیادهسازی Lazy Load با Intersection Observer (روش حرفهای)
اگر نیاز به کنترل بیشتر دارید، Intersection Observer API بهترین انتخاب است.
نمونه کد:
<img class="lazy" data-src="image.jpg" alt="تصویر نمونه">
const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
مزیت این روش:
کنترل بیشتر
سازگاری بهتر با الگوریتمهای پیچیده
امکان استفاده در SPAها و فریمورکهایی مثل React / Vue / Next
HTML attribute (loading=lazy) سریع، ساده، استاندارد، مورد تأیید گوگل کنترل کمتر
Intersection Observer انعطاف بالا، مناسب پروژههای بزرگ نیاز به کدنویسی
کتابخانهها مانند Lozad.js تنظیمات ساده، سازگاری بالا حجم اضافه اسکریپت
بهترین روش:
تا جای ممکن از loading="lazy" استفاده کنید و فقط در صورت نیاز سراغ جاوااسکریپت بروید.
چکلیست نهایی Lazy Load برای سئو
تصاویر مهم و بالای صفحه → بدون Lazy Load
سایر تصاویر → loading="lazy"
بررسی Core Web Vitals در Lighthouse
تست Crawlability در Search Console
استفاده از فرمتهای سبک مثل WebP
مشخص کردن width و height برای جلوگیری از CLS
Lazy Loading یکی از سریعترین و سادهترین روشها برای بهبود سرعت سایت و سئو است. این تکنیک باعث میشود کاربران تجربه بهتری داشته باشند و گوگل نیز وبسایت را سریعتر و مؤثرتر کراول و رتبهبندی کند. با پیادهسازی اصولی Lazy Load میتوانید عملکرد سایت خود را به شکل چشمگیری بهبود دهید.
اگر خواستی، میتونم نسخه آماده برای انتشار HTML هم بسازم یا طرح جلد (کاور) ویرگول برای مقاله درست کنم.
