Images far below the initial viewport can wait until a reader scrolls near them. Native loading="lazy" lets the browser defer those downloads without a JavaScript observer.

<img src="diagram.webp" alt="A simple network diagram" loading="lazy" width="1200" height="800">

No cargues de forma diferida la primera imagen importante

  • Use loading="eager" or omit lazy loading for the likely largest contentful image.
  • Proporcione ancho y alto, o una relación de aspecto, para que el diseño reserve espacio antes de que llegue el archivo.
  • Utilice fuentes responsivas cuando haya varios tamaños de imagen disponibles.

Medir en la página real

Los navegadores eligen cuándo buscar una imagen diferida, así que no la trate como una programación de red exacta. Verifique la prioridad de carga de la imagen del contenido principal y confirme que las imágenes inferiores no cambien el texto cuando aparecen.

El objetivo es evitar descargas tempranas innecesarias y al mismo tiempo proteger la primera vista significativa. Aplique la carga diferida de forma selectiva, no como una regla general para cada imagen.