¡El soporte para la imagen perezosa incorporada y las cargas de iframe ha llegado a la web!
A partir de la versión 76 de Chrome, puede usar el nuevo atributo de
loading para cargar recursos de manera perezosa sin tener que escribir código adicional para esto o usar una biblioteca de JavaScript de terceros. Veamos los detalles.
Este video muestra
un ejemplo de esta función:
¿Por qué la carga perezosa incorporada?
Según
HTTPArchive , las imágenes son el tipo de recurso más solicitado en la mayoría de los sitios y, por lo general, consumen más ancho de banda que cualquier otro. En el percentil 90, los sitios envían aproximadamente 4,7 MB de imágenes a computadoras de escritorio y dispositivos móviles. Suficientes
fotos con gatos .
Los iframes integrados también consumen muchos datos y pueden ser perjudiciales para el rendimiento de la página. La descarga de imágenes no críticas e iframes solo en el momento en que el usuario puede verlos mejora la velocidad de carga de la página, minimiza la carga en el ancho de banda del canal del usuario y reduce el uso de memoria.
Actualmente hay dos formas de retrasar la carga de imágenes y marcos ubicados fuera de la pantalla:
Cualquier opción puede permitir a los desarrolladores habilitar la funcionalidad de carga diferida, y muchos han creado bibliotecas de terceros para proporcionar abstracciones que son aún más fáciles de usar. Si tiene soporte para la carga diferida directamente en el navegador, no habrá necesidad de una biblioteca de terceros. La carga diferida incorporada también garantiza que la carga retrasada de imágenes y marcos continúe funcionando incluso si JavaScript está deshabilitado en el lado del cliente.
Cargando atributo
Hoy, Chrome ya descarga imágenes con diferentes prioridades, dependiendo de dónde se encuentren en relación con el área de visualización del dispositivo. Las imágenes debajo del área de visualización se cargan con menor prioridad, pero aún así se cargan lo más rápido posible.
En Chrome 76, puede usar el atributo de
loading para retrasar permanentemente la carga de imágenes y marcos fuera de la pantalla, a la que se puede acceder desplazándose:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
loading valores de atributos admitidos:
auto : configuración predeterminada del modo de carga diferida en el navegador. Igual que el atributo faltantelazy : Retrasar la carga de un recurso hasta que alcance la distancia estimada desde la ventana gráficaeager : cargar un recurso inmediatamente, a pesar de su ubicación en la página
Esta característica continuará actualizándose hasta que se lance en la versión estable (no anterior a Chrome 76). Pero puede probarlo activando los siguientes indicadores en Chrome:
- chrome: // flags / # enable-lazy-image-loading
- chrome: // flags / # enable-lazy-frame-loading
Umbral de distancia de carga
Todas las imágenes y marcos visibles en la página sin necesidad de desplazamiento se cargan como estándar. Los que se encuentran debajo del área de visualización del dispositivo se cargan solo cuando el usuario se desplaza hacia ellos.
La distancia a la que comienza la carga no es fija y varía según varios factores:
Puede encontrar los valores predeterminados para los diferentes tipos de compuestos efectivos en la
fuente de cromo . Estas métricas e incluso el enfoque de carga cuando se alcanza una cierta distancia del área de visualización pueden cambiar en un futuro próximo, ya que el equipo de Chrome mejora la heurística para determinar cuándo comenzar a descargar.
En Chrome 77, puede experimentar con estos umbrales diferentes
disminuyendo la velocidad de conexión en DevTools. Durante esto, deberá anular el tipo de conexión efectiva en el navegador usando el
chrome://flags/#force-effective-connection-type.Subir imágenes
El atributo de carga afecta a los marcos de manera diferente a las imágenes, dependiendo de si el marco está oculto (los marcos ocultos a menudo se usan para tareas de análisis o comunicación). Chrome utiliza los siguientes criterios para determinar si un marco está oculto:
- Ancho y altura del marco 4px o menos
display: none o visibility: hidden aplican propiedades visibility: hidden- el marco está fuera de la pantalla usando posicionamiento negativo X o Y
Si un marco cumple con alguna de estas condiciones, Chrome lo considera oculto y no se cargará en modo diferido en la mayoría de los casos. Los marcos que no están ocultos solo se cargarán cuando caigan dentro del
umbral de carga . Para los cuadros que todavía se están cargando en modo de carga diferida, se muestra un marcador de posición
FAQ
¿Hay planes para expandir esta función?
Hay planes para cambiar el modo predeterminado de carga diferida del navegador para mostrar automáticamente en este modo cualquier imagen y fotograma cuya carga se pueda retrasar si el
modo Lite está habilitado en Chrome para Android.
¿Es posible cambiar la distancia a la imagen o al marco en el que comienza la carga retrasada?
Estos valores están codificados y no se pueden cambiar a través de la API. Sin embargo, pueden cambiar en el futuro, ya que el equipo de Chrome está experimentando con diferentes distancias y variables de umbral.
¿Pueden las imágenes configuradas mediante la propiedad de fondo CSS obtener el atributo de carga?
No, por el momento solo se puede usar con etiquetas.
¿Cómo funciona el atributo de carga con imágenes que están dentro del alcance pero no son visibles (como un carrusel)?
En el modo diferido, solo se cargan las imágenes que están a una
cierta distancia de la parte inferior del área de visualización del dispositivo. Todas las imágenes sobre el área de visualización, independientemente de si están actualmente visibles, se cargan normalmente.
¿Qué sucede si ya uso una biblioteca o script de terceros para diferir la carga de imágenes o marcos?
El atributo de carga no debería afectar el código que carga datos en modo diferido, pero es importante tener en cuenta algunos puntos importantes:
- Si su gestor de arranque de terceros en modo diferido intenta cargar imágenes o marcos antes de que Chrome los cargue en modo normal, es decir, a una distancia mayor que el umbral de distancia de descarga del navegador, aún se retrasarán y cargarán de acuerdo con las reglas del comportamiento normal del navegador
- Si su gestor de arranque de terceros utiliza una distancia más corta para determinar cuándo cargar una imagen o marco en particular que el navegador, entonces el comportamiento coincidirá con la configuración de su gestor de arranque
Una de las razones importantes para continuar usando una biblioteca de terceros en paralelo con loading = "lazy" es proporcionar un archivo polifónico para los navegadores que no admiten este atributo.
¿Otros navegadores admiten la carga diferida integrada?
El atributo de
loading puede verse como una mejora progresiva. Los navegadores que lo admiten pueden cargar imágenes y marcos en modo diferido. Aquellos que no son compatibles, por ahora, cargue imágenes como de costumbre. Desde el punto de vista de la compatibilidad entre navegadores, el atributo de
loading es compatible con Chrome 76 y cualquier navegador basado en Chromium 76. También hay un
error abierto sobre la implementación de esta función en Firefox.
Se propuso una API similar y se usó en IE y Edge, pero se centró en reducir las prioridades de descarga en lugar de posponerla por completo.
¿Qué hacer con los navegadores que aún no admiten la descarga retrasada incorporada?
Cree un archivo polifásico o use una biblioteca de terceros para cargar imágenes en el sitio en modo diferido. La propiedad de carga se puede usar para determinar si la funcionalidad es compatible con el navegador:
if ('loading' in HTMLImageElement.prototype) {
Por ejemplo,
lazysizes es una biblioteca de JavaScript popular para la carga diferida. Puede definir la compatibilidad con el atributo de carga para cargar esta biblioteca solo cuando no se admite la
loading . Funciona de la siguiente manera
<img src="hero.jpg" alt="…"> <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 { </script>
Demostración de trabajo. Pruébelo en navegadores como Firefox o Safari para ver el retroceso en acción.
La biblioteca lazysizes también proporciona
un complemento de carga integrado que utiliza la carga diferida incorporada cuando es posible y utiliza la funcionalidad de la biblioteca cuando es necesario.
¿Cómo afecta la carga en línea retrasada a los anuncios en una página?
Todos los anuncios presentados en forma de imágenes o marcos también se cargan en modo diferido, como cualquier otra imagen o marco.
¿Cómo se procesan las imágenes si se imprime una página web?
Aunque no hay funcionalidad en Chrome 76, hay
un problema abierto que carga inmediatamente todas las imágenes y marcos al imprimir una página.
Conclusión
El uso del soporte incorporado para la carga diferida de imágenes y marcos puede mejorar significativamente el rendimiento de las páginas web.
Si notas algún comportamiento inusual cuando habilitas esta función en Chrome,
informa un error .