Carga diferida de imágenes: guía detallada

La «carga diferida» es una técnica de carga de contenido aplazada que optimiza la velocidad de carga de las páginas. Imágenes y otros recursos se cargan solo cuando están cerca de aparecer en el viewport del usuario.

¿Con qué ayuda exactamente esta técnica?

• Reduce el tiempo inicial de carga de la página (métrica First Contentful Paint).
• Ayuda a mostrar más rápidamente el elemento LCP (mejora la métrica Largest Contentful Paint).
• Ahorra en volumen de datos descargados y cantidad de solicitudes.

En general, este método mejora la experiencia del usuario, especialmente en dispositivos móviles o con conexiones lentas.

En esta guía detallada sobre la carga diferida, aprenderá cómo implementar esta técnica, cómo medir sus impactos y qué mejoras en la velocidad hemos observado tras su implementación.

Atributo loading en la etiqueta IMG#

HTML ofrece el atributo loading que permite especificar la forma de carga de los elementos. Este atributo se añade fácilmente a la etiqueta <img>.

<img src="image.webp" loading="lazy" alt="…" width="200" height="200" />

El atributo loading puede tener dos valores utilizables:

• lazy – las imágenes se cargan solo cuando están cerca o dentro del viewport.
• eager – las imágenes se cargan inmediatamente. Este es el ajuste predeterminado.

¿Cómo implementar la carga diferida de imágenes?#

En general, le recomendamos un enfoque conservador, es decir, aplicar loading="lazy" a todas las imágenes que se encuentran fuera de la primera parte visible de la pantalla. Sin embargo, hay varios enfoques posibles que exploraremos juntos.

Enfoque conservador: imágenes fuera del primer viewport#

Cargue todas las imágenes fuera del primer viewport de manera diferida usando el atributo loading="lazy". Esta es una solución adecuada para la mayoría de las situaciones.

Además del elemento LCP, también recomendamos priorizar imágenes que constituyen elementos importantes de la interfaz de usuario o que ayudan al usuario a reconocer la marca e identificar claramente el sitio web. Se establece el atributo loading="eager" en el elemento LCP, iconos en el encabezado (especialmente en el encabezado móvil) y el logotipo de la marca.

Enfoque radical: todas las imágenes excepto el elemento LCP#

Si se encuentra entre los desarrolladores más experimentados, puede permitirse aplicar la carga diferida a todas las imágenes excepto la imagen más grande en el primer viewport (el llamado elemento LCP).

Esto se logra haciendo una excepción para el elemento LCP, donde se establece loading="eager" o no se incluye el parámetro en absoluto.

Todas las demás imágenes en la página tendrán loading="lazy". Advertimos que esta solución es arriesgada desde el punto de vista de posibles errores si, por ejemplo, se cambia el código HTML o el diseño del sitio web.

Atención, ¡nunca cargue diferidamente el elemento LCP!#

Nunca use el atributo loading="lazy" en el elemento LCP, ya que esto empeorará la métrica LCP. El atributo loading="lazy" baja la prioridad del elemento y retrasa su descarga.

La peor combinación es usar lazyload de JavaScript y aplicarlo al elemento LCP, lo que algunas bibliotecas de JavaScript hacen automáticamente. Primero, se espera la descarga y el procesamiento de JavaScript y solo entonces el navegador descarga la fuente de la imagen.

Lazyload de JavaScript#

Para una implementación más avanzada, se puede utilizar JavaScript y la API Intersection Observer.

La API Intersection Observer es una API de JavaScript que permite monitorear elementos cuando se acercan al viewport. Esto se puede utilizar, por ejemplo, para implementaciones personalizadas de carga diferida.

Sin embargo, este es un método muy avanzado y definitivamente no lo recomendamos para optimización estándar.

Ventajas:

• Flexibilidad.
• Posibilidad de definir condiciones de carga más complejas.
• Este tipo de carga diferida se puede utilizar en componentes de JavaScript como carruseles y similares.

Desventajas:

• Mayor complejidad.
• Espera para la descarga e inicialización del código JavaScript.
• Necesidad de una solución alternativa usando <noscript> para navegadores sin JavaScript habilitado.
• Imposibilidad de usar plenamente el preload scanner del navegador.
• Si se implementa incorrectamente, existe el riesgo de que las imágenes no sean visibles para los bots de búsqueda.

Sistemas avanzados de gestión de contenido web como WordPress o Drupal a menudo ofrecen plugins que implementan la carga diferida mediante JavaScript. Si está utilizando tal plugin, le recomendamos desactivarlo y en su lugar usar la carga diferida nativa con el atributo loading="lazy".

Puede obtener más información sobre la optimización de WordPress en el artículo Optimización de WordPress.

¿Qué le recomendamos?#

• Use la carga diferida nativa, que está ampliamente soportada.
• Use la carga diferida de JavaScript solo para casos más complejos que no se pueden cubrir con el atributo nativo.

Relación entre el atributo loading y el aumento de la prioridad de carga mediante fetchpriority#

El valor eager es una indicación para cargar la imagen inmediatamente, sin retrasar la carga si la imagen está fuera de pantalla. La imagen se carga tan rápido como una imagen sin el atributo loading.

Si desea aumentar la prioridad de carga de una imagen importante (por ejemplo, una imagen LCP), utilice priority hints y el atributo fetchpriority="high".

Una imagen con los atributos loading="lazy" y fetchpriority="high" no se carga hasta que está fuera de pantalla. Si está dentro del viewport o cerca de él, se carga con alta prioridad. Esta combinación no es necesaria, ya que el navegador probablemente cargaría esta imagen con alta prioridad de todos modos.

Distancia desde el viewport: umbrales de carga de imágenes#

Todas las imágenes que son inmediatamente visibles en el viewport sin desplazarse se cargan de inmediato. Las imágenes que están lejos por debajo del viewport del dispositivo solo se cargan cuando el usuario se acerca a ellas.

La implementación de la carga diferida en el navegador Chrome intenta garantizar que las imágenes fuera de pantalla se carguen lo suficientemente temprano para completar su carga cuando el usuario apenas se acerca a ellas, cargándolas mucho antes de que sean visibles en el viewport.

¿Cómo está configurado en el navegador Chrome? En conexiones rápidas (4G y superiores), Chrome tiene umbrales de distancia desde la visualización de 1250 px y en conexiones más lentas (3G o inferiores) tiene un umbral de 2500 px.

La decisión final de cuándo comienza a descargarse una imagen depende únicamente del navegador y los valores aquí indicados son solo orientativos.

¿Cómo analizar si la carga diferida está implementada correctamente?#

Al implementar la carga diferida, es necesario identificar qué elementos son adecuados para la carga diferida. También es bueno saber cómo verificar si hemos implementado la carga diferida correctamente.

Análisis de la carga diferida en la línea de tiempo del navegador#

La carga diferida se puede analizar, por ejemplo, usando Chrome Developer Tools en la sección Performance. La carga de imágenes es visible aquí como solicitudes separadas en el tiempo durante el desplazamiento del usuario.

En la primera visualización de la página, solo se descargan imágenes que son visibles en el primer viewport o muy cerca de él.

Otras imágenes con el parámetro loading="lazy" comienzan a descargarse solo con la interacción del usuario. Por ejemplo, al desplazarse por la página.

Las imágenes con el parámetro loading="lazy" comienzan a descargarse solo con la interacción del usuario

Análisis en la herramienta Lighthouse o Monitor PLUS de PageSpeed.ONE#

En la herramienta Lighthouse o Monitor PLUS se pueden identificar imágenes adecuadas para la carga diferida en el «Detalle de la ejecución de la prueba». Las imágenes se enumeran en la advertencia «Retrasar la carga de imágenes fuera de pantalla» en la prueba sintética de Lighthouse.

1. En el menú principal, seleccione la pestaña «Oportunidades». monitor PLUS, prueba de Lighthouse

2. Seleccione la prueba para la URL específica. monitor PLUS, prueba de Lighthouse

3. Encuentre el ítem «Retrasar la carga de imágenes fuera de pantalla». Aquí se enumeran las imágenes para las cuales es adecuado aplicar la carga diferida. Aquí se enumeran las imágenes para las cuales es adecuado aplicar la carga diferida.

Los consejos que recibe en esta sección son de calidad y aproximadamente corresponden a lo que mencionamos arriba sobre el enfoque conservador para la carga diferida.

La carga diferida también se puede aplicar a otros elementos del sitio web, no solo a las imágenes.

Carga diferida para iframe#

La carga diferida también se puede usar en iframes, lo que puede mejorar significativamente las métricas Core Web Vitals, por ejemplo, en páginas con videos o mapas incrustados. ¿El uso es muy similar al de las imágenes?

<iframe src="https://example.com" loading="lazy"></iframe>

Soporte de carga diferida en navegadores#

Todos los navegadores modernos soportan el atributo loading. Siempre recomendamos el uso de la carga diferida nativa antes que la solución de JavaScript.

Ejemplos de nuestra práctica en la optimización de velocidad#

Implementación de la carga diferida en imágenes#

En este cliente, el uso de la carga diferida en imágenes en el menú principal y pie de página resultó en una reducción drástica del volumen de datos de imágenes.

monitor PLUS - reducción del volumen de datos de imágenes.

Cifras en la imagen:

1. Reducción del volumen de datos de imágenes usando carga diferida

El resultado también fue una mejora en la métrica LCP.

Sustitución de la carga diferida de JavaScript por la solución nativa#

La sustitución de la carga diferida de JavaScript por la carga diferida nativa y el aumento de la prioridad con el atributo fetchpriority="high" hace que la imagen LCP comience a descargarse muy pronto y la métrica LCP mejore significativamente. En este caso, la métrica LCP se aceleró en una conexión lenta (Fast 3G) en aproximadamente 2 segundos.

Estado original

Explicaciones de la imagen:

1. Inicio de descarga de la imagen LCP solo después del procesamiento de JavaScript app.js.
2. Visualización de la imagen LCP en la página.

Estado después de la optimización

Explicaciones de la imagen:

1. El inicio de la descarga de la imagen LCP ocurre justo después de la descarga del documento HTML.
2. Visualización de la imagen LCP en la página.

Resumen#

Recomendamos la carga diferida de imágenes como uno de los métodos básicos y al mismo tiempo muy efectivos para optimizar la velocidad de carga de la página. Le recomendamos posponer conservadoramente la carga de todas las imágenes fuera del primer viewport. Tenga cuidado de aplicar la carga diferida a las imágenes que son elementos LCP, ya que esto puede empeorar la velocidad.