Una imagen que solo se carga cuando ya casi está en pantalla le ahorra al visitante todo lo que hay bajo la línea de flotación. Si el navegador no sabía qué tamaño iba a tener, la página salta al llegar la imagen, y el lector pierde el punto donde iba o pulsa un enlace que se ha movido.

Da siempre el ancho y el alto

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

No son el tamaño de visualización. Son la proporción, y de ellos el navegador reserva justo el espacio correcto mientras el archivo todavía se descarga. Con width:100%;height:auto en CSS la imagen sigue escalando con normalidad.

Nunca difieras la parte alta de la página

Un loading="lazy" en la imagen de cabecera retrasa el elemento más grande de la pantalla, que es precisamente la métrica de lo rápida que se siente la página. La regla es simple: todo lo que está sobre la línea de flotación se carga de inmediato; todo lo que está debajo, en diferido.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

Lo mismo vale para las incrustaciones

Un iframe también admite ancho, alto y loading="lazy". Un vídeo incrustado sin diferir suele ser el elemento más pesado de la página, y normalmente está bajo la línea de flotación.

Y para todo lo que revela un script

Un efecto de aparición al desplazarse que empieza con opacidad 0 le muestra una tarjeta en blanco a cualquiera cuyo script no se haya ejecutado. Haz que el estado oculto sea explícito, aplicado por el script una vez está vivo, para que el contenido sea visible por defecto.

Compruébalo

Carga la página con la red limitada y observa si algo se mueve después de que lleguen las imágenes. El Cumulative Layout Shift de una pasada de Lighthouse le pone número a lo mismo: consulta Medir con honestidad las Core Web Vitals.