A partir de Chrome 73, el link rel = «preload» y las imágenes receptivas se pueden combinar para cargar imágenes más rápido.
Este post me da la posibilidad de discutir dos de mis cosas favoritas: imágenes receptivas. y precarga. Como alguien que estuvo muy involucrado en el desarrollo de ambas funciones, ¡estoy muy emocionado de verlos trabajar juntos!
Descripción general de imágenes receptivas
Suponga que está navegando por la web en una pantalla de 300 píxeles de ancho y la página solicita una imagen de 1500 píxeles de ancho. Esa página básicamente desperdició muchos de sus datos celulares debido a que su pantalla no puede hacer nada con toda esa resolución adicional. Idealmente, el navegador debería conseguir una versión de la imagen que sea solo una pequeño más ancho que el tamaño de su pantalla, digamos 325 píxeles. Esto asegura una imagen de alta resolución sin desperdiciar datos. Y, lo que es mejor, la imagen se cargará más rápido. Las imágenes receptivas posibilitan a los navegadores buscar diferentes recursos de imágenes en diferentes dispositivos. Si no usa una CDN de imagen, debe guardar varias dimensiones para cada imagen y especificarlas en el srcset atributo. los w value le dice al navegador el ancho de cada versión. Según el dispositivo, el navegador puede optar el adecuado:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">Descripción general de la precarga
La precarga le posibilita informar al navegador sobre los recursos críticos que desea cargar lo antes viable, antes de que se detecten en HTML. Esto es sobre todo útil para recursos que no se pueden descubrir fácilmente, como fuentes incluidas en hojas de estilo, imágenes de fondo o recursos cargados desde un script.
<enlace rel="preload" as="image" href="important.png">Imágenes receptivas + precarga = cargas de imágenes más rápidas
Las imágenes receptivas y la precarga han estado disponibles durante los últimos años, pero a la vez faltaba algo: no había forma de precargar imágenes receptivas. Comenzando en Chrome 73, el navegador puede precargar la variante correcta de imágenes receptivas especificadas en srcset antes de que descubra el img ¡etiqueta!
Dependiendo de la estructura de su sitio, ¡eso podría significar una visualización de imágenes significativamente más rápida! Realizamos pruebas en un sitio que usa Javascript para cargar imágenes adaptables de forma diferida. La precarga dio como consecuencia que las imágenes se cargaran 1,2 segundos más rápido.
imagesrcset y imagesizes
Para precargar imágenes receptivas, recientemente se agregaron nuevos atributos al <enlace> elemento: imagesrcset y imagesizes. Se usan con <enlace rel="preload"> y coincide con el srcset y sizes sintaxis utilizada en <img> elemento.
A modo de ejemplo, si desea precargar una imagen receptiva especificada con:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">Puede hacerlo agregando lo siguiente a su HTML <head>:
<enlace rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">Esto inicia una solicitud usando la misma lógica de selección de recursos que srcset y sizes se aplicará.
Casos de uso
Carga previa de imágenes receptivas inyectadas dinámicamente
Supongamos que está cargando dinámicamente imágenes heroicas como parte de una presentación de diapositivas y sabe qué imagen se mostrará primero. En ese caso, probablemente desee evitar esperar el script antes de cargar la imagen en cuestión, puesto que eso retrasaría cuando los usuarios puedan verla.
Puede inspeccionar este problema en un portal web con una galería de imágenes cargada dinámicamente:
-
Abierto este portal web de ejemplo en una nueva pestaña.
-
prensa
Control+Shift+J(oCommand+Option+Jen Mac) para abrir DevTools. -
Haga clic en el Red lengüeta.
-
En el Estrangulamiento lista desplegable, seleccione 3G rápido.
-
Deshabilita el Desactivar el caché caja.
-
Vuelve a cargar la página.
Usando preload ayuda aquí debido a que la imagen empieza a cargarse antes de tiempo y es probable que ya esté allí cuando el navegador necesite mostrarla.
Para ver la diferencia que hace la precarga, puede inspeccionar la misma galería de imágenes cargada dinámicamente pero con la primera imagen precargada siguiendo los pasos del primer ejemplo.
Una forma alternativa de evitar el problema sería usar un carrusel basado en marcas y tener la precargador del navegador recoger los recursos necesarios. A pesar de todo, este enfoque puede no ser siempre práctico. (A modo de ejemplo, si está reutilizando un componente existente, que no está basado en marcas).
Carga previa de imágenes de fondo con conjunto de imágenes
Si tiene diferentes imágenes de fondo para diferentes densidades de pantalla, puede especificarlas en su CSS con el image-set sintaxis. A continuación, el navegador puede optar cuál mostrar en función de la DPR.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);La sintaxis anterior ignora el hecho de que se necesitan prefijos de proveedor para esta función en los navegadores basados en Chromium y WebKit. Si planea utilizar esta función, debería considerar utilizar Autoprefixer para abordar eso de forma automática.
El problema con las imágenes de fondo CSS es que el navegador las descubre solo luego de haber descargado y procesado todo el CSS de la página. <head>, que puede ser mucho CSS …
Puede inspeccionar este problema en un portal web de ejemplo con imagen de fondo sensible.
La precarga de imágenes receptiva proporciona una forma sencilla y sin piratería de cargar esas imágenes más rápido.
<enlace rel=preload href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">Puede inspeccionar cómo se comporta el ejemplo anterior con imagen de fondo adaptable precargada.
Carga previa de imágenes receptivas en acción
La carga previa de sus imágenes receptivas puede acelerarlas en teoría, pero ¿qué hace en la práctica?
Para responder que creé dos copias de un tienda de demostración de PWA: uno que no precarga imágenesy uno que precarga algunos de ellos. Puesto que el sitio carga imágenes de forma diferida con JavaScript, es probable que se beneficie de la precarga de las que estarán en la ventana gráfica inicial.
Eso me dio los siguientes resultados para sin precarga y para precarga de imagen. Mirando los números sin procesar, vemos que Iniciar renderizado se mantuvo igual, el índice de velocidad mejoró ligeramente (273 ms, puesto que las imágenes llegan más rápido, pero no ocupan una gran parte del área de píxeles), pero la métrica real que captura la diferencia es la Último héroe pintado métrica, que mejoró en 1,2 segundos. 🎉🎉
Decididamente, nada captura la diferencia visual como una comparación de tira de película:
Precarga y <picture>?
Si está familiarizado con las imágenes receptivas, es viable que se pregunte «¿Qué pasa con <picture>? «.
El Web Performance Working Group está hablando de agregar un idéntico de precarga para srcset y sizes, pero no el <picture> elemento, que aborda el caso de uso de «dirección de arte».
¿Por qué se «descuida» este caso de uso?
Aunque además hay interés en solucionar ese caso de uso, aún hay una serie de problemas técnicos para solucionar lo que significa que una solución aquí tendría una complejidad significativa. Al mismo tiempo de eso, parece que en su mayor parte, el caso de uso se puede abordar hoy, inclusive si de una manera hacky (ver más abajo).
Dado eso, Web Performance WG ha decidido enviar srcset primero y ver si la demanda de idéntico picture surge el apoyo.
Si se encuentra en condiciones de precargar <picture> es viable que pueda usar la próxima técnica como solución.
Dado el siguiente escenario:
<picture>
<source src="small_cat.jpg" media="(max-width: 400px)">
<source src="medium_cat.jpg" media="(max-width: 800px)">
<img src="huge_cat.jpg">
</picture>los <picture> La lógica del elemento (o la lógica de selección de la fuente de la imagen, para ser precisos), sería repasar la media atributos de la <source> ítems en orden, busque el primero que coincida y utilice el recurso adjunto.
Porque la precarga receptiva no tiene la noción de «orden» o «primera coincidencia», los puntos de interrupción deben traducirse en algo como:
<enlace rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<enlace rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<enlace rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">Resumen
La precarga de imágenes receptivas nos brinda oportunidades nuevas y emocionantes para precargar imágenes receptivas de formas que antes solo eran posibles a través de hacks. Es una nueva adición importante a la caja de herramientas del desarrollador consciente de la velocidad y nos posibilita asegurarnos de que las imágenes importantes que anhelamos mostrar a nuestros usuarios lo antes viable estarán allí cuando las necesitemos.
