lazy loading چیست؟ | بررسی ساختار لود تنبل تصاویر

یکی از چالش‌های بنیادین در معماری وبِ مدرن، حجم بالای فایل‌های چندرسانه‌ای (به ویژه تصاویر) و تاثیر مخرب آن‌ها بر زمان پاسخ‌گویی سرور است. زمانی که یک کاربر وارد صفحه‌ای با ده‌ها تصویر باکیفیت می‌شود، مرورگر به صورت پیش‌فرض تلاش می‌کند تمام این منابع را به صورت همزمان دانلود کند. این رفتار باعث هدررفتِ شدید پهنای باند و افزایش زمان لود اولیه صفحه می‌گردد که نتیجه آن، افت تجربه کاربری و کاهش رتبه‌های سئو است. بنابراین، یکی از مهم ترین خدمات سئو سایت، بهینه سازی وضعیت تصاویر و وضعیت سرور است.

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

lazy loading چیست؟

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

در این ساختار، بارگذاری سایر منابعی که در پایین صفحه قرار دارند، به تعویق می‌افتد؛ تا زمانی که کاربر به سمت پایین اسکرول کرده و آن المان‌ها به محدوده دید او نزدیک شوند. این رویکرد دقیقاً در نقطه مقابل بارگذاری همزمان (Eager Loading) قرار دارد که در آن، مرورگر موظف است تمام محتوای صفحه را پیش از نمایش، پردازش کند.

عملکرد لود تنبل تصاویر در مرورگر

برای درک بهتر این فرآیند، باید نحوه تعامل مرورگر با کدهای سایت را بررسی کنیم. زمانی که تکنیک لود تنبل تصاویر فعال است، مرورگر به جای قرار دادن لینکِ اصلیِ تصویر در تگ src، یک تصویر جایگزینِ بسیار سبک (Placeholder) را نمایش می‌دهد.

سپس با استفاده از ابزارهای مانیتورینگِ اسکرول، فاصله کاربر تا تصاویرِ بعدی محاسبه می‌شود. به محض اینکه کاربر به فاصله استانداردی از یک تصویر رسید (مثلاً چند پیکسل قبل از نمایان شدن تصویر در صفحه)، مرورگر لینک اصلی را فراخوانی کرده و تصویر را به صورت کاملاً نامحسوس بارگذاری می‌کند.

بیشتر بخوانید: راهنمای جامع سئو تصاویر

مزایای فنی و تاثیر lazy load در سئو

استفاده از این تکنیک، نتایج قابل‌اندازه‌گیری و مستقیمی بر شاخص‌های عملکردی سایت دارد. مهم‌ترین موارد تاثیر lazy load در سئو عبارتند از:

• کاهش زمان بارگذاری اولیه (Initial Load Time): با به تعویق انداختن دانلود تصاویرِ خارج از دید، مرورگر تمرکز خود را روی پردازش کدهای HTML و CSS قرار می‌دهد که باعث می‌شود سایت بسیار سریع‌تر برای کاربر قابل استفاده شود.
• ارتقای نمرات Core Web Vitals: اجرای صحیح این تکنیک، زمان مسدود شدن رشته اصلی (Main Thread) را کاهش داده و نمرات شما را در ابزارهایی مانند PageSpeed Insights بهبود می‌بخشد.
• حفظ منابع سرور و کاهش هزینه‌های زیرساخت: اگر کاربری وارد سایت شود و بدون اسکرول کردن صفحه را ببندد، سرور نیازی به پردازش و ارسال ده‌ها تصویر پایین صفحه نخواهد داشت.

بیشتر بخوانید: آموزش مینیفای کردن css

خط قرمزهای سئو: چه تصاویری را نباید Lazy Load کنیم؟

یکی از مهلک‌ترین اشتباهات وب‌مستران، استفاده کورکورانه از این تکنیک برای تمامی تصاویر سایت است. اعمال بارگذاری تنبل برای تصاویری که در بالای صفحه و در دیدِ اولیه کاربر (Above the fold) قرار دارند، یک خطای استراتژیک است.

تصاویری مانند لوگوی سایت، بنر اصلی (Hero Image) و اولین تصویر مقالات، باید در سریع‌ترین زمان ممکن بارگذاری شوند. اگر این تصاویر را اصطلاحاً Lazy Load کنید، مرورگر در بارگذاری آن‌ها تاخیر ایجاد می‌کند که این امر مستقیماً باعث افت شدید شاخص LCP (بزرگترین محتوای متنی یا تصویری) در سرچ کنسول می‌شود. بنابراین، قانون طلایی این است: تصاویری که در نگاه اول و بدون اسکرول دیده می‌شوند، باید از فرآیند بارگذاری تنبل مستثنی (Exclude) گردند.

بیشتر بخوانید: LCP چیست؟ راهنمای بهینه سازی شاخص LCP

آموزش lazy loading برای توسعه‌دهندگان (پیاده‌سازی فنی)

برای پیاده‌سازی این معماری، توسعه‌دهندگان فرانت‌اند می‌توانند از دو روش کاملاً استاندارد استفاده کنند. در این بخش از آموزش lazy loading، این دو ساختار را بررسی می‌کنیم:

۱. استفاده از ویژگی بومی HTML (Native Lazy Loading)

مدرن‌ترین و امن‌ترین روش، استفاده از صفت loading="lazy" در تگ‌های و