Lazy Loading چیست و چرا سایتت بهش نیاز داره؟
Lazy Loading یعنی به‌جای بارگذاری همه‌ی عکس‌های صفحه از همون اول، فقط عکس‌هایی که توی دید فعلی کاربر هستن رو لود کنی — و بقیه رو تا وقتی کاربر به سمتشون اسکرول نکرده، صبر کنی. برای صفحه‌ای با ده‌ها عکس (مثل یک فروشگاه یا گالری)، این یعنی صرفه‌جویی واقعی در پهنای باند و زمان بارگذاری اولیه.
پیاده‌سازی با یک خط کد
امروز دیگه نیازی به کتابخانه‌ی جاوااسکریپت جداگانه نیست — مرورگرها به‌صورت بومی از ویژگی loading="lazy" پشتیبانی می‌کنن:
<img src="photo.jpg" loading="lazy" alt="..." width="800" height="450">همین. مرورگر خودش تشخیص می‌ده کی این عکس نزدیک دیده شدنه و دقیقاً همون موقع لودش می‌کنه.
اشتباه رایجی که خیلی‌ها می‌کنن
اگه اولین عکسی که کاربر می‌بینه (بالای صفحه، قبل از اسکرول) رو lazy بذاری، دقیقاً برعکس هدفت عمل می‌کنه — چون مرورگر عمداً لودش رو به تاخیر می‌ندازه، و این مستقیم LCP (که توی مقاله‌ی Core Web Vitals توضیح دادیم) رو بدتر می‌کنه. عکس‌های above-the-fold باید همیشه فوری لود بشن.
Lazy Loading جایگزین فشرده‌سازی نیست
یک نکته‌ی مهم: lazy loading فقط زمان لود شدن عکس رو عقب می‌ندازه، حجم فایل رو کم نمی‌کنه. وقتی کاربر بالاخره به اون عکس می‌رسه، همون فایل بزرگ باید دانلود بشه. برای نتیجه‌ی واقعی، باید هر دو کار رو با هم انجام بدی: هم lazy load کنی، هم عکس‌ها رو از قبل فشرده کرده باشی.
عکس‌هات رو از قبل سبک کن
ترکیب فشرده‌سازی + lazy loading، سریع‌ترین ترکیب ممکنه
رفتن به ابزار فشرده‌سازی