Carga diferida de imágenes a nivel del navegador para la web
¡La carga diferida incorporada finalmente está aquí!
¡La compatibilidad con el nivel del navegador para imágenes de carga diferida ahora es compatible en la web! Este video muestra una demostración de la función:
Desde Chrome 76 en adelante, puede usar el atributo de loading para cargar imágenes de forma diferida sin la necesidad de escribir un código de carga diferida personalizado o usar una biblioteca de JavaScript separada. Es hora de dar un clavado en los detalles.
Compatibilidad del navegador #
<img loading=lazy> es compatible con los navegadores más populares con tecnología Chromium (Chrome, Edge, Opera) y Firefox. La implementación de WebKit (Safari) está en progreso. caniuse.com tiene información detallada sobre la compatibilidad con varios navegadores. Los navegadores que no admiten el atributo de loading simplemente lo ignoran sin efectos secundarios.
¿Por qué la carga diferida a nivel del navegador? #
Según HTTPArchive, las imágenes son el tipo de archivo más consultado para la mayoría de los sitios web y, por lo general, ocupan más ancho de banda que cualquier otro recurso. En el percentil 90, los sitios envían aproximadamente 4,7 MB de imágenes en computadoras de escritorio y dispositivos móviles. Eso equivale a muchas fotos de gatos.
Actualmente, hay dos formas de aplazar la carga de imágenes fuera de la pantalla:
- Usando la API de Intersection Observer
- Usando los controladores de eventos de
scroll,resizeoorientationchange
Cualquiera de las opciones puede permitir a los desarrolladores incluir la funcionalidad de carga diferida, y muchos desarrolladores han creado bibliotecas de terceros para proporcionar abstracciones que son aún más fáciles de usar. Sin embargo, con la carga diferida compatible directamente con el navegador, no es necesario una biblioteca externa. La carga diferida a nivel del navegador también garantiza que la carga diferida de imágenes siga funcionando incluso si JavaScript está deshabilitado en el cliente.
El atributo de loading #
Hoy en día, Chrome carga imágenes con diferentes prioridades dependiendo de dónde se encuentren con respecto a la ventana gráfica del dispositivo. Las imágenes debajo de la ventana gráfica se cargan con una prioridad más baja, pero aún así se obtienen lo antes posible.
En Chrome 76+, puede utilizar el loading para aplazar por completo la carga de imágenes fuera de la pantalla a las que se puede acceder desplazándose:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">Estos son los valores admitidos para el atributo de loading
auto: comportamiento predeterminado de carga diferida del navegador, que es lo mismo que no incluir el atributo.lazy: pospone la carga del recurso hasta que alcance una distancia calculada desde la ventana gráfica.eager: carga el recurso inmediatamente, independientemente de dónde se encuentre en la página.
Limite de distancia desde la ventana gráfica #
Todas las imágenes que están en la mitad superior de la página, es decir, que se pueden ver inmediatamente sin desplazarse, se cargan normalmente. Las que están muy por debajo de la ventana gráfica del dispositivo solo se cargan cuando el usuario se desplaza cerca de ellas.
La implementación de Chromium de la carga diferida intenta garantizar que las imágenes fuera de la pantalla se carguen lo suficientemente temprano para que estén listas una vez que el usuario se desplaza cerca de ellas. Al buscar imágenes cercanas antes de que se vuelvan visibles en la ventana gráfica, maximizamos la posibilidad de que ya estén cargadas cuando se vuelven visibles.
En comparación con las bibliotecas de carga diferida de JavaScript, los limites para obtener imágenes que se desplazan a la vista pueden considerarse como conservadores. Chromium busca alinear mejor estos limites con las expectativas de los desarrolladores.
El limite de distancia no es fijo y varía en función de varios factores:
- El tipo de recurso de imagen que se está recuperando.
- Si el modo lite está habilitado en Chrome para Android
- El tipo de conexión efectiva
Puede encontrar los valores predeterminados para los diferentes tipos de conexiones efectivas en la fuente de Chromium. Estos números, e incluso el enfoque de buscar solo cuando se alcanza una cierta distancia desde la ventana gráfica, pueden cambiar en un futuro cercano a medida que el equipo de Chrome mejora la heurística para determinar cuándo comenzar a cargar.
Ahorro de datos mejorado y limites de distancia desde la ventana gráfica #
A partir de julio de 2020, Chrome ha realizado mejoras significativas para alinear los limites de la distancia de carga diferida desde la ventana gráfica de la imagen para cumplir mejor con las expectativas de los desarrolladores.
En conexiones rápidas (por ejemplo, 4G), redujimos los limites de distancia desde la ventana de Chrome de 3000px a 1250px y en conexiones más lentas (por ejemplo, 3G), cambiamos el limite de 4000px a 2500px. Este cambio logra dos cosas:
<img loading=lazy>se comporta más cerca de la experiencia que ofrecen las bibliotecas de carga diferida de JavaScript.- Los nuevos limites de distancia desde la ventana gráfica aún nos permiten garantizar que las imágenes probablemente se hayan cargado cuando un usuario se haya desplazado hacia ellas.
Puede encontrar una comparación entre los limites de distancia desde la ventana gráfica antiguos y los nuevos para una de nuestras demostraciones en una conexión rápida (4G) a continuación:
Limites antiguos contra limites nuevos:
y los nuevos limites frente a LazySizes (una popular biblioteca de carga diferida de JS):
Estamos comprometidos a trabajar con la comunidad de estándares web para explorar una mejor alineación en cómo se abordan los limites de distancia desde la ventana gráfica en diferentes navegadores.
Las imágenes deben incluir atributos de dimensión #
Mientras el navegador carga una imagen, no conoce inmediatamente las dimensiones de la misma, a menos que se especifiquen explícitamente. Para permitir que el navegador reserve suficiente espacio en una página para imágenes, se recomienda que todas las etiquetas <img> incluyan atributos de width y de height. Sin las dimensiones especificadas, pueden producirse cambios en el diseño, que son más evidentes en las páginas que tardan más tiempo en cargarse.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">Alternativamente, especifique sus valores directamente en un estilo en línea:
<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">La mejor práctica para establecer dimensiones se aplica a las <img> independientemente de si se cargan de forma diferida o no. Con la carga diferida, esto puede volverse más relevante. Establecer el width y la height de las imágenes en los navegadores modernos también permite a los navegadores inferir su tamaño intrínseco.
En la mayoría de los escenarios, las imágenes aún se cargan de forma diferida si no se incluyen las dimensiones, pero hay algunos casos extremos que se debe de conocer. Sin width y el height, las dimensiones de la imagen son 0 × 0 píxeles al principio. Si tiene una galería de tales imágenes, el navegador puede concluir que todas encajan dentro de la ventana gráfica al principio, ya que cada una de ellas prácticamente no ocupa espacio y ninguna imagen se desplaza fuera de la pantalla. En este caso el navegador determina que todos son visibles para el usuario y decide cargarlos todos.
Además, especificar las dimensiones de la imagen reduce las posibilidades de que se produzcan cambios en el diseño. Si no puede incluir dimensiones para sus imágenes, cargarlas de forma diferida puede ser una compensación entre ahorrar recursos de red y tener un riesgo mayor de cambio de diseño.
Si bien la carga diferida en Chromium se implementa de tal manera de que sea probable que las imágenes se carguen una vez que estén visibles, todavía existe una pequeña posibilidad de que aún no se hayan cargado. En este caso, los atributos de width y height faltan en tales imágenes y con ello aumentan su impacto en el Cambio de diseño acumulativo.
Las imágenes que se definen mediante el <picture> también se pueden cargar de forma diferida:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>Aunque un navegador decidirá qué imagen cargar de cualquiera de los <source>, el loading solo debe incluirse en el elemento de respaldo <img> .
Evite las imágenes de carga diferida que se encuentran en la primera ventana gráfica visible #
Debe evitar configurar loading=lazy para las imágenes que se encuentran en la primera ventana gráfica visible.
Si es posible, se recomienda agregar sólo loading=lazy a las imágenes que se colocan debajo de la primera pantalla. Las imágenes que se cargan rápidamente se pueden recuperar de inmediato, mientras para las imágenes que se cargan de manera diferida, el navegador actualmente necesita esperar hasta que reconozca dónde está posicionada la imagen en la página, lo que depende de que IntersectionObserver esté disponible.
En general, cualquier imagen dentro de la ventana gráfica debe cargarse rápidamente utilizando los valores predeterminados del navegador. No es necesario especificar loading=eager para que este sea el caso de las imágenes en la ventana gráfica.
<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">
<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">Degradación elegante #
Los navegadores que aún no tienen compatibilidad con el atributo de loading ignorarán su presencia. Si bien estos navegadores, no obtendrán los beneficios de la carga diferida, incluir el atributo no tiene un impacto negativo en ellos.
Preguntas frecuentes #
¿Hay planes para cargar imágenes de forma diferida automáticamente en Chrome? #
Chromium ya carga automáticamente de forma diferida cualquier imagen que sea adecuada para diferir si el modo lite está habilitado en Chrome para Android. Esto está dirigido principalmente a usuarios conscientes del ahorro de datos.
¿Puedo cambiar qué tan cerca debe estar una imagen antes de que se active una carga? #
Estos valores están codificados y no se pueden cambiar a través de la API. Sin embargo, pueden cambiar en el futuro a medida que los navegadores experimenten con diferentes distancias de limite y variables.
¿Pueden las imágenes de fondo del CSS aprovechar el atributo de loading? #
No, actualmente solo se puede usar con las etiquetas <img>
¿Existe algún inconveniente en las imágenes de carga diferida que se encuentran dentro de la ventana gráfica del dispositivo? #
Es más seguro evitar colocar loading=lazy en las imágenes de la mitad superior de la página, ya que Chrome no precargará loading=lazy en el escáner de precarga.
¿Cómo funciona el loading con imágenes que están en la ventana gráfica pero que no son visibles inmediatamente (por ejemplo: detrás de un carousel u ocultas por el CSS para ciertos tamaños de pantalla)? #
Solo las imágenes que están por debajo de la ventana gráfica del dispositivo por la distancia calculada se cargan de manera diferida. Todas las imágenes sobre la ventana gráfica, independientemente de si son inmediatamente visibles, se cargan normalmente.
¿Qué sucede si ya estoy usando una biblioteca de terceros o un script para cargar imágenes de forma diferida? #
El loading no debería afectar el código que actualmente carga de forma diferida sus archivos de ninguna manera, pero hay algunas cosas importantes a considerar:
- Si su cargador diferido personalizado intenta cargar imágenes o marcos antes que cuando Chrome los carga normalmente, es decir, a una distancia mayor que los limites de distancia desde la ventana gráfica, se aplazarán y se cargarán según el comportamiento normal del navegador.
- Si su cargador diferido personalizado utiliza una distancia más corta para determinar cuándo cargar una imagen en particular que el navegador, entonces el comportamiento se ajustará a su configuración personalizada.
Una de las razones importantes para seguir usando una biblioteca de terceros junto con loading="lazy" es proporcionar un polyfill para los navegadores que aún no tienen compatibilidad con el atributo.
¿Cómo manejo los navegadores que aún no tienen compatibilidad con la carga diferida? #
Cree un polyfill o utilice una biblioteca de terceros para cargar imágenes en forma diferida en su sitio. La propiedad de loading se puede utilizar para detectar si la función es compatible con el navegador:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}Por ejemplo, lazysizes es una popular biblioteca de carga diferida de JavaScript. Puede detectar el soporte al atributo de loading para cargar lazysizes como una biblioteca de reserva sólo cuando loading no sea compatible. Esto funciona de la siguiente manera:
- Reemplace
<img src>con<img data-src>para evitar una carga rápida en navegadores no compatibles. Si el atributo deloadinges compatible, intercambiedata-srcporsrc. - Si
loadingno es compatible, cargue una opción de respaldo (lazysizes) e inícielo. Según los documentos de lazysizes, se usa lalazyloadcomo una forma de indicar a lazysizes qué imágenes se cargarán de forma diferida.
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>Aquí hay una demostración de este patrón. Pruébelo en un navegador como Firefox o Safari para ver el respaldo en acción.
¿La carga diferida para iframes también es compatible con Chrome? #
<iframe loading=lazy> se estandarizó recientemente y ya está implementado en Chromium. Esto le permite cargar iframes de forma diferida utilizando el atributo loading. En breve se publicará un artículo dedicado sobre la carga diferida de iframe en web.dev.
El loading afecta a los iframes de manera diferente que a las imágenes, dependiendo de si el iframe está oculto. (Los iframes ocultos se utilizan a menudo con fines analíticos o de comunicación). Chrome utiliza los siguientes criterios para determinar si un iframe está oculto:
- El ancho y el alto del iframe son 4 px o menos.
display: noneovisibility: hiddenes utilizado.- El iframe se coloca fuera de la pantalla con un posicionamiento X o Y negativo.
Si un iframe cumple con alguna de estas condiciones, Chrome lo considera oculto y no lo cargará de forma diferida en la mayoría de los casos. Los iframes que no estén ocultos solo se cargarán cuando estén dentro de los limites de distancia desde la ventana gráfica. Se muestra un marcador de posición para los iframes cargados de forma diferida que aún están siendo recuperados.
¿Cómo afecta la carga diferida a nivel del navegador a los anuncios en una página web? #
Todos los anuncios que se muestran al usuario en forma de imagen o iframe se cargan de forma diferida como cualquier otra imagen o iframe.
¿Cómo se manejan las imágenes cuando se imprime una página web? #
Aunque la funcionalidad no está en Chrome actualmente, existe un problema abierto para garantizar que todas las imágenes e iframes se carguen inmediatamente si se imprime una página.
¿Lighthouse reconoce la carga diferida a nivel del navegador? #
Las versiones anteriores de Lighthouse aún destacarían que las páginas que usan loading=lazy en imágenes requerían una estrategia para cargar imágenes fuera de la pantalla. Lighthouse 6.0 y superior tienen un mejor factor en los enfoques para la carga diferida de imágenes fuera de la pantalla que pueden usar diferentes limites, lo que les permite pasar la auditoría de diferir imágenes fuera de la pantalla.
Conclusión #
Implementar una compatibilidad de imágenes de carga diferida puede facilitarle significativamente la mejora del rendimiento de sus páginas web.
¿Está notando algún comportamiento inusual con esta función habilitada en Chrome? ¡Reporta el problema!