1. Fase 1: Implementazione del lazy loading nativo con `loading=”lazy”` solo per immagini <2x viewport width; per contenuti critici (es. didascalie testuali), uso Intersection Observer con:
   const observer = new IntersectionObserver((entries, est) => entries.forEach(entry => {
if (entry.isIntersecting && entry.target.dataset.src !== '' && entry.target.dataset.placeholder !== '') {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => {
entry.target.classList.add('loaded');
entry.target.removeAttribute('data-src');
entry.target.removeAttribute('data-placeholder');
};
img.classList.add('lazy-placeholder');
}
}, {
rootMargin: '0 0 80px 0',
threshold: 0.1
});
entries.forEach(entry => observer.observe(entry.target));


2. Fase 2: Personalizzazione del threshold dinamico in base all’utente italiano:
   – Per utenti con connessione lenta (rilevato da `navigator.connection.effectiveType === ‘2g’`), threshold 0.3 (priorità anticipata).
   – Per dispositivi con schermo <1.5x ratio, riduzione buffer a 120px.

3. Fase 3: Monitoraggio continuo con Calibre o WebPageTest integrato in pipeline CI/CD; alert su drop LCP >0.5s o CLS >0.1 dopo aggiornamenti.

_“Un lazy loading mal configurato può trasformare un’immagine in un’ancora di lentezza, soprattutto su connessioni 2G diffuse in Sud Italia.”_