روش استاندارد
مرورگرهای امروزی Lazy Load را به‌صورت داخلی پشتیبانی می‌کنند:
<img src="chart.webp" alt="نمودار رشد ترافیک" width="800" height="450" loading="lazy">
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>وردپرس از نسخه‌ی ۵.۵ این ویژگی را خودکار به تصاویر اضافه می‌کند و در نسخه‌های جدیدتر سعی می‌کند تصویر اول صفحه را از آن مستثنا کند.
بزرگ‌ترین اشتباه: Lazy Load تصویر بالای صفحه
اگر تصویر شاخص یا اسلاید اول Lazy Load شود، مرورگر دیرتر دانلودش را شروع می‌کند و LCP بدتر می‌شود. قانون ساده: تصاویری که در نمای اول صفحه دیده می‌شوند نباید loading="lazy" داشته باشند؛ تصویر اصلی حتی بهتر است fetchpriority="high" بگیرد.
Lazy Load و Googlebot
Googlebot اسکرول نمی‌کند؛ صفحه را با یک نمای بلند رندر می‌کند. روش استاندارد مرورگر و کتابخانه‌هایی که با IntersectionObserver کار می‌کنند معمولاً مشکلی ندارند. اما روش‌های قدیمی که آدرس تصویر را فقط در data-src نگه می‌دارند و منتظر رویداد اسکرول می‌مانند، ممکن است باعث شوند گوگل تصویر را نبیند.
Lazy Load و CLS
تصویری که دیر بارگذاری می‌شود، اگر ابعادش مشخص نباشد، هنگام نمایش محتوا را هل می‌دهد و CLS می‌سازد. پس همیشه width و height یا aspect-ratio تعیین کنید.
اشتباه‌های رایج
- فعال کردن Lazy Load هم در افزونه‌ی کش و هم در قالب و تداخل آن‌ها.
- Lazy Load کردن لوگو و تصاویر بالای صفحه.
- جاسازی سنگین ویدئوی یوتیوب بدون تصویر جایگزین سبک (facade).
چطور بررسی کنیم؟
Lighthouse هشدار «Largest Contentful Paint image was lazily loaded» را برای همین اشتباه دارد. با URL Inspection سرچ کنسول و گزینه‌ی View tested page هم می‌توانید ببینید تصاویر در نسخه‌ی رندرشده‌ی گوگل حاضرند یا نه.