Un'immagine che si carica solo quando è quasi in vista risparmia al visitatore tutto ciò che sta sotto la piega. Se il browser non sapeva quanto sarebbe stata grande, all'arrivo la pagina sobbalza — e il lettore perde il segno, o tocca un collegamento che nel frattempo si è spostato.

Indica sempre larghezza e altezza

<img src="/img/rack.webp" width="1600" height="900" alt="A server rack" loading="lazy" decoding="async">

Non sono la misura di visualizzazione. Sono le proporzioni, e da quelle il browser riserva esattamente lo spazio giusto mentre il file sta ancora scendendo. Con width:100%;height:auto nel CSS l'immagine continua a scalare normalmente.

Non caricare mai in modo pigro la parte alta della pagina

Un loading="lazy" sull'immagine di testa ritarda la cosa più grande sullo schermo, che è proprio la misura di quanto la pagina sembri veloce. La regola è semplice: tutto ciò che sta sopra la piega si carica subito, tutto ciò che sta sotto è pigro.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

Lo stesso vale per i contenuti incorporati

Anche un iframe accetta larghezza, altezza e loading="lazy". Un video incorporato lasciato a caricamento immediato è spesso la cosa più pesante di tutta la pagina, e di solito sta sotto la piega.

E per tutto ciò che uno script fa comparire

Un effetto di comparsa allo scorrimento che parte da opacità 0 mostra una scheda vuota a chiunque non abbia visto girare lo script. Rendi lo stato nascosto una scelta esplicita — applicata dallo script una volta che è vivo — così il contenuto è visibile per impostazione predefinita.

Verificalo

Apri la pagina con la rete rallentata e guarda se qualcosa si muove dopo l'arrivo delle immagini. Il Cumulative Layout Shift in una passata di Lighthouse mette un numero sulla stessa cosa — vedi Misurare onestamente i Core Web Vitals.