Una nueva función de Chrome denominada “Blink LazyLoad” está diseñada para mejorar drásticamente el rendimiento al diferir la carga de imágenes debajo de la página y de terceros. <iframe>
s.
Los objetivos de este audaz experimento son mejorar la velocidad de procesamiento general del contenido que aparece en la ventana gráfica de un usuario (también conocida como mitad superior de la página), así como reducir el uso de memoria y datos de red. ✨
Si está buscando agregar la carga diferida a los medios de su sitio en este momento, sería inteligente incluir estos atributos nativos de carga diferida, pero a partir de esta actualización (julio de 2019), el soporte en navegadores estables aún no existe. Querrás ver hacer más:
- La guía completa para imágenes de carga diferida
- Consejos para rodar tu propia carga diferida
- Lozad.js: carga diferida de imágenes de alto rendimiento
👨🏫 ¿Cómo funcionará?
Se cree que retrasar temporalmente el contenido menos importante mejorará drásticamente el rendimiento general percibido.
Si esta propuesta tiene éxito, se ejecutarán optimizaciones automáticas durante la fase de carga de una página:
- Las imágenes y los iFrames se analizarán para medir la importancia.
- Si se considera que no son esenciales, se pospondrán o no se cargarán en absoluto:
- Los elementos diferidos solo se cargarán si el usuario se ha desplazado al área cercana.
- Se utilizará una imagen de marcador de posición en blanco hasta que se obtenga una imagen.
La propuesta pública tiene algunos detalles interesantes:
- LazyLoad se compone de dos mecanismos diferentes: LazyImages y LazyFrames.
- Las imágenes diferidas y los iFrames se cargarán cuando un usuario se haya desplazado dentro de un número determinado de píxeles. El número de píxeles variará en función de tres factores:
- Si es un iframe o una imagen
- El Ahorro de datos está habilitado o deshabilitado
- El “tipo de conexión efectivo“
- Una vez que el navegador haya establecido que una imagen se encuentra debajo del pliegue, emitirá una solicitud de rango para obtener los primeros bytes de una imagen para establecer sus dimensiones. A continuación, las dimensiones se utilizarán para crear un marcador de posición.
El loading
El atributo permitirá a los autores especificar qué elementos deben o no deben cargarse de forma diferida. Aquí hay un ejemplo que indica que este contenido no es esencial:
<iframe src="https://css-tricks.com/a-native-lazy-load-for-the-web-platform/ads.html" loading="lazy"></iframe>
Hay tres opciones:
on
– Indica una fuerte preferencia por diferir la obtención hasta que se pueda ver el contenido.off
– Obtener este recurso de inmediato, independientemente de la capacidad de visualización.auto
– Dejar que el navegador decida (tiene el mismo efecto que no usar elloading
atributo en absoluto).
🔒 Implementando una política segura de carga diferida
Política de características: LazyLoad proporcionará un mecanismo que permite a los autores forzar la aceptación o no de la funcionalidad de LazyLoad por dominio (similar a cómo funcionan las Políticas de seguridad de contenido). Hay una solicitud de extracción aún por fusionar que describe cómo podría funcionar.
🤔 ¿Qué pasa con la retrocompatibilidad?
En este punto, es difícil saber si estas optimizaciones de página podrían causar problemas de compatibilidad con los sitios existentes.
Los iframes de terceros se utilizan para una gran cantidad de propósitos, como anuncios, análisis o autenticación. Retrasar o no cargar un iFrame crucial (porque el usuario nunca se desplaza tanto) podría tener efectos dramáticos e imprevisibles. Páginas que se basan en una imagen o iFrame que se ha cargado y está presente cuando onLoad
los incendios también podrían enfrentar problemas importantes.
Estas optimizaciones automáticas podrían acelerar de manera silenciosa y eficiente la velocidad de renderizado de Chrome sin ningún problema notable para los usuarios. El equipo de Google detrás de la propuesta está midiendo cuidadosamente las características de rendimiento de los efectos de LazyLoad a través de métricas que registra Chrome.
💻 Habilitación de la carga diferida en Chrome
En el momento de escribir este artículo, la carga diferida nativa solo está disponible en Chrome Canary, detrás de dos indicadores obligatorios:
chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading
Las banderas se pueden habilitar navegando a chrome://flags
en un navegador Chrome.
📚 Referencias y materiales
- Propuesta pública de LazyLoad
- Solicitud de extracción de HTML Living Standard: atributo de carga diferida
- Solicitudes de rango HTTP
- Estado de la plataforma Chrome: política de características: carga diferida
- LazyLoad Frames se fusionó con Chromium (minutos después de la publicación)
- Supervisión del rendimiento de calibre
Compatibilidad con navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Escritorio
Cromo | Firefox | ES DECIR | Borde | Safari |
---|---|---|---|---|
77 | 97 | No | 79 | TP |
Móvil / Tableta
Android cromo | android firefox | Androide | iOSSafari |
---|---|---|---|
96 | 95 | 96 | No |
👋 Para cerrar
A medida que nos embarcamos en dar la bienvenida a los próximos mil millones de usuarios a la web, es una lección de humildad saber que apenas estamos comenzando a comprender la complejidad de los navegadores, la conectividad y la experiencia del usuario.