Velocidad a gran escala: ¿cuáles son las novedades sobre el rendimiento web?

Obtén información sobre tres nuevos lanzamientos de rendimiento web de I/O 2019.

Katie Hempenius
Katie Hempenius

Durante la charla "Velocidad a gran escala" en Google I/O 2019, anunciamos tres aspectos que esperamos que mejoren el rendimiento web en el próximo año.

Lighthouse ahora admite el presupuesto de rendimiento

LightWallet es una nueva función de Lighthouse que agrega compatibilidad con los presupuestos de rendimiento. Las estimaciones de rendimiento establecen estándares para el rendimiento de tu sitio. Lo que es más importante, facilitan la identificación y corrección de las regresiones de rendimiento antes de que se envíen.

Un informe de LightWallet que muestra qué recursos superan el presupuesto de tamaño de archivo.

LightWallet está disponible en la versión más reciente de Lighthouse CLI y solo tarda unos minutos en configurarse. Estas instrucciones proporcionan más información.

¿No sabes cuáles deberían ser tus presupuestos? Prueba nuestro Calculador experimental de presupuestos de rendimiento, que puede generar una configuración de presupuesto compatible con LightWallet.

La carga diferida de imágenes y iframes a nivel del navegador llega a la Web

Las páginas web suelen contener una gran cantidad de imágenes, lo que genera un mayor uso de datos, aumento de tamaño de la página y cargas 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, debías 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 agrega la carga diferida estandarizada de <img> y <iframe> a la Web.

Carga diferida a nivel del navegador que destaca el contenido fuera de la pantalla que se carga a pedido

El atributo loading permite que un navegador aplace la carga de imágenes fuera de la pantalla y de iframes hasta que los usuarios se desplacen cerca de ellos. loading admite tres valores:

  • lazy: Es un buen candidato para la carga diferida.
  • eager: No es un buen candidato para la carga diferida. Se cargará de inmediato.
  • auto: El navegador determinará si se cargará de forma 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" queda a la elección del navegador. En general, esperamos que los navegadores comiencen a recuperar imágenes diferidas y contenido de iframes 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 un artículo sobre la función de carga diferida disponible con más detalles.

Google Fonts ahora admite font-display como un parámetro de consulta

Anunciamos que la compatibilidad con font-display ahora está disponible en producción para todas las fuentes de Google a través del parámetro de cadena de consulta de visualización:

https://fonts.googleapis.com/css?family=Lobster&display=swap

El descriptor font-display te permite decidir cómo se renderizarán o usarán las fuentes web como alternativa, según el tiempo que tarden en cargarse. Admite una serie de valores, incluidos auto, block, swap, fallback y optional.

Anteriormente, la única forma de especificar font-display para las fuentes web de Google Fonts era alojarlas por tu cuenta, pero este cambio elimina 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 motive a más desarrolladores a probar esta emocionante función.

Código de incorporación de Google Fonts con font-display incluido en la URL como parámetro de consulta

A continuación, se muestra una demostración en Glitch del uso de la visualización con varias familias de fuentes. Pruébala con la emulación de red de DevTools para ver el impacto de font-display: swap.

Mira más

En nuestra charla, también se analizaron varios casos de éxito de producción sobre el uso de patrones de rendimiento avanzados para mejorar la experiencia del usuario. Estos incluyen sitios que aprovechan las CDN de imágenes, la compresión Brotli, la entrega inteligente de JavaScript y la precarga para acelerar sus páginas. Mira la charla para obtener más información.