Obtén información sobre tres lanzamientos nuevos de rendimiento web de I/O 2019.
Durante la charla"Speed at Scale" en Google I/O 2019, anunciamos tres aspectos que esperamos que mejoren el rendimiento de la Web el próximo año.
Lighthouse ahora es compatible con el presupuesto de rendimiento
LightWallet es una nueva función de Lighthouse que agrega compatibilidad con los presupuestos de rendimiento. Los presupuestos de rendimiento establecen estándares para el rendimiento de tu sitio. Lo más importante es que facilitan la identificación y corrección de las regresiones de rendimiento antes de su envío.
LightWallet está disponible en la versión más reciente de la CLI de Lighthouse y solo toma unos minutos para configurarse. En estas instrucciones, se proporciona más información.
¿No está seguro de cuáles deberían ser sus presupuestos? Prueba nuestra calculadora de presupuesto de rendimiento experimental, que puede generar una configuración de presupuesto compatible con LightWallet.
La carga diferida de iframes y imágenes a nivel del navegador llegan a la Web
A menudo, las páginas web contienen una gran cantidad de imágenes, que contribuyen al uso de datos, el aumento de la página y las cargas de páginas más lentas. Muchas de estas imágenes están fuera de la pantalla, lo que requiere que el usuario se desplace para verlas.
Hasta ahora, debías resolver imágenes de carga diferida con una biblioteca de JavaScript, pero eso podría cambiar pronto. Este verano, Chrome lanzará la compatibilidad con el atributo loading, que incorpora la carga diferida estandarizada <img> y <iframe> a la Web.
El atributo loading permite que un navegador postergue la carga de imágenes y iframes fuera de pantalla hasta que los usuarios se desplazan cerca de ellos. loading admite tres valores:
lazy: Es un buen candidato para la carga diferida.eager: no es una buena opción para la carga diferida. Cargar de inmediatoauto: El navegador determinará si se carga o no de forma diferida.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
La heurística exacta para "cuando el usuario se desplaza cerca" queda en manos del navegador. En general, esperamos que los navegadores comiencen a recuperar imágenes diferidas y contenido de iframe un poco antes de que lleguen al viewport.
El atributo loading se implementa detrás de las marcas en Chrome Canary. Puedes probar esta demostración en Chrome 75 y versiones posteriores con las marcas about://flags/#enable-lazy-image-loading y about://flags/#enable-lazy-frame-loading activadas.
Hay una revisión disponible sobre la función de carga diferida con más detalles.
Google Fonts ahora admite font-display como parámetro de consulta.
Anunciamos que la compatibilidad con font-display ahora está disponible en producción para todas las fuentes de Google Fonts a través del parámetro Display query-string:
https://fonts.googleapis.com/css?family=Lobster&display=swap
El descriptor font-display te permite decidir cómo se renderizarán o usarán tus fuentes web de resguardo, según cuánto tiempo tarden en cargarse. Admite una serie de valores, incluidos auto, block, swap, fallback y optional.
Anteriormente, la única manera de especificar font-display para las fuentes web de Google Fonts era alojarlas por cuenta propia, pero este cambio quitaba la necesidad de hacerlo.
Se actualizó la documentación de Google Fonts para incluir font-display en las incorporaciones de código predeterminadas (como se muestra a continuación). Esperamos que esto aliente a más desarrolladores a probar esta emocionante incorporación.
Esta es una demostración de Glitch para usar pantallas con varias familias de fuentes. Pruébalo con la emulación de red de Herramientas de desarrollo para ver el impacto de font-display: swap.
Mira más contenido
También se trataron varios casos de éxito de producción relacionados con el uso de patrones de rendimiento avanzados para mejorar la experiencia del usuario. Entre ellos, se incluían sitios que aprovechaban CDN de imágenes, la compresión Brotli, la entrega de JavaScript inteligente y la carga previa para acelerar sus páginas. Mira la charla para obtener más información :)