Lazy loading avanzato e priorizzazione del contenuto con Intersection Observer

Implementa il lazy loading nativo con `loading=”lazy”` come base, ma integra Intersection Observer per un controllo preciso:
const observerOptions = { rootMargin: ‘0px 0px 200px 0px’ };
const observer = new IntersectionObserver((entries, self) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
img.src = src;
img.removeAttribute(‘loading’);
self.unobserve(img);
}
});
}, observerOptions);

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

Questa tecnica evita il blocco iniziale del thread e migliora il CLS grazie al placeholder blur-up: applica un SVG leggero (es. 10x10px sfondo sfocato) come placeholder, con CSS:
img {
background: url(‘placeholder-blur.svg’) no-repeat center center;
background-size: contain;
transition: opacity 0.3s ease;
opacity: 0.7;
}
img.loaded {
opacity: 1;
}

Errore frequente: configurazioni errate di `loading=”lazy”` in alcuni browser legacy (es. Safari <15) possono impedire il lazy loading; usa rilevazione feature JavaScript per fallback o sincronizzazione.
Caso studio: un sito e-commerce italiano ha ridotto i tempi di caricamento immagini da 2,1s a 0,8s con questa implementazione, migliorando LCP del 40%.