Obtén información sobre tres nuevos lanzamientos de rendimiento web de I/O 2019.
Durante la charla "Speed at Scale" en Google I/O 2019, anunciamos tres cosas que esperamos que mejoren el rendimiento web durante el próximo año.
Lighthouse ahora admite presupuestos 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. Y, lo que es más importante, te permiten identificar y corregir las regresiones de rendimiento antes de que se envíen.
LightWallet está disponible en la versión más reciente de la CLI de Lighthouse y solo tarda un par de minutos en configurarse. Estas instrucciones proporcionan más información.
¿No sabes cuáles deberían ser tus presupuestos? Prueba nuestra calculadora de presupuesto de rendimiento experimental, que puede generar una configuración de presupuesto compatible con LightWallet.
La carga diferida de imágenes y de iframes a nivel del navegador llega a la Web
Las páginas web suelen contener una gran cantidad de imágenes, lo que contribuye al uso de datos, la sobrecarga de la página y las cargas de página más lentas. Muchas de estas imágenes están fuera de la pantalla, por lo que el usuario debe desplazarse para verlas.
Hasta ahora, necesitabas resolver la carga diferida de imágenes 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 de <img> y <iframe> a la Web.
El atributo loading permite que un navegador aplace la carga de imágenes y de iframes fuera de la pantalla hasta que los usuarios se desplacen cerca de ellos. loading admite tres valores:
lazyes un buen candidato para la carga diferida.eagerno es un buen candidato para la carga diferida. Carga de inmediato.auto: El navegador determinará si se debe realizar la carga diferida o no.
<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" se deja en manos del navegador. En general, esperamos que los navegadores comiencen a recuperar las imágenes diferidas y el contenido de iframe un poco antes de que aparezcan en el 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 un artículo 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 ya está disponible en producción para todas las Google Fonts a través del parámetro de cadena de consulta display:
https://fonts.googleapis.com/css?family=Lobster&display=swap
El descriptor font-display te permite decidir cómo se renderizarán o
reemplazarán tus fuentes web, según el tiempo que tarden en cargarse. Admite una serie
de valores, incluidos auto, block, swap, fallback y optional.
Antes, la única forma de especificar font-display para las fuentes web de Google Fonts era alojarlas de forma autónoma, pero este cambio elimina esa necesidad.
La documentación de Google Fonts se actualizó para incluir font-display en las incorporaciones de código predeterminadas (como se muestra a continuación). Esperamos que esto anime a más desarrolladores a probar esta emocionante
incorporación.
Mira el video para obtener más información
Nuestra charla también abarcó varios casos de éxito de producción en los que se usaron patrones de rendimiento avanzados para mejorar la experiencia del usuario. Entre ellas, se incluyeron sitios que aprovechan las CDN de imágenes, la compresión Brotli, la publicación inteligente de JavaScript y la carga previa para acelerar sus páginas. Mira la charla para obtener más información.