Lazy loading - ekrandan kənar resursları yalnız scroll edəndə yükləyən texnologiyadır. Initial page load 50-70% azalır - mobil cihazlarda kritikdir.

Lazy loading nəyi optimallaşdırır?

Şəkillər

Səhifədə 30 şəkil var, lakin scroll etmədən yalnız 3-ü görünür. Lazy load ilə qalan 27 sonra yüklənir.

Video

YouTube embed yalnız klikləyəndə yüklənsin - səhifə yüklənmə vaxtını 70% azaldır.

iFrame-lər

Sosial şəbəkə embed-ləri (jQuery $ funksiyası) script-lər çox ağırdır - lazy ilə defer edilməlidir.

Native lazy loading

HTML atributu

<img src="image.jpg" loading="lazy" alt="...">

Chrome, Firefox, Safari hamısı dəstəkləyir - plagin lazım deyil.

iframe lazy

<iframe src="youtube.com/..." loading="lazy"></iframe>

WordPress-də

5.5+ avtomatik

WordPress 5.5-dən bütün şəkillərə avtomatik loading="lazy" əlavə olunur.

Featured image üçün

Above-the-fold görünən featured image lazy load edilməsin - bu LCP-i pisləşdirir. fetchpriority="high" əlavə edin.

İntersection Observer API

Custom lazy loading

JS ilə tam kontrol:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll(img[data-src]).forEach(img => observer.observe(img));

Plugin: a3 Lazy Load

WordPress 5.5-dən əvvəlki saytlar üçün. Şəkil, iframe, video lazy loading əlavə edir.

LSCache lazy loading

LSCache plagini Page Optimization → Media → "Lazy Load Images" aktivləşdirin. Native loading + əlavə optimizasiyalar.

Above-the-fold yox

İlk ekrandakı şəkilləri lazy etməyin

Hero şəkil dərhal yüklənməlidir - LCP metriki üçün kritikdir. Yalnız scroll-da görünənlər lazy.

Placeholder strategiyası

LQIP (Low Quality Image Placeholder)

10-20 KB blurry preview - əsl şəkil yüklənənə qədər göstərilir. Layout shift yox.

Dominant color

Şəkilin əsas rəngi placeholder kimi - Pinterest istifadə edir.

YouTube lazy load

Niyə vacibdir?

YouTube embed 1.5 MB+ JS yükləyir. Lazy ilə 0-a düşür.

WP YouTube Lyte plagini

YouTube preview göstərir - klikləyəndə real embed yüklənir.

Lazy loading SEO təsiri

Google indeksi

Native lazy loading SEO-ya təsir etmir - Google düz interpretasiya edir.

Sayt sürəti = SEO

Lazy ilə Core Web Vitals yaxşılaşır - SEO sıralaması artır.

Yoxlama

Chrome DevTools → Network → "Slow 3G" simulate edin. Scroll edəndə yeni şəkillərin gəlməsini görəcəksiniz.

Hostinq.az hosting - LSCache ilə lazy loading hazır quraşdırılıb.