Obtén información sobre tres nuevos lanzamientos de rendimiento web en I/O 2019.
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.
LightWallet está disponible en la versión más reciente de la CLI de Lighthouse y solo tarda unos minutos en configurarse. Estas instrucciones proporcionan más información.
¿No está seguro de cuáles deberían ser sus 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 contribuye al uso de datos, el page-bloat y las cargas de página 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 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.
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 anime a más desarrolladores a probar esta emocionante función.
Esta es una demostración en Glitch del uso de display con varias familias de fuentes. Pruébala con la emulación de red de Herramientas de desarrolladores para ver el impacto de font-display: swap
.
Mira más
Nuestra charla también abarcó varios casos de éxito de producción del 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.