Velocidad web: 12 novedades del 2022

En este artículo, vamos a explorar algunas características, técnicas o herramientas que más nos llamaron la atención en 2022.

1) Imágenes WebP y AVIF en casi todos los navegadores#

El soporte para los nuevos formatos ha mejorado nuevamente. Los formatos modernos de imágenes, como WebP y AVIF, pueden acelerar significativamente los sitios web al codificar la misma información en archivos más pequeños.

Mientras que WebP ha sido ampliamente soportado durante más de dos años, el soporte para AVIF apareció en Safari recién este septiembre con el lanzamiento de iOS 16 y macOS Ventura. Cabe recordar que no todos los usuarios de Safari han realizado la actualización y que Edge aún no soporta AVIF. No obstante, WebP se puede utilizar con bastante seguridad.

2) Cambio en el cálculo de la métrica CLS#

Como hemos descubierto en el equipo de consultores de PageSpeed.ONE, entender correctamente el cálculo de las métricas es fundamental para una optimización exitosa.

La metodología para medir la métrica Cumulative Layout Shift ha cambiado varias veces, la última vez de manera bastante significativa. Si deseas comprender términos como Session Window, Session Gap y cómo todo esto funciona en conjunto, te recomendamos leer nuestro artículo sobre CLS.

3) Early Hints: carga los recursos aún antes que con preload#

En 2022, Chrome introdujo una novedad interesante llamada Early Hints. Se trata de un código de estado HTTP (103 Early Hints) que permite enviar al servidor una "pista" sobre recursos críticos.

Mientras el servidor genera el recurso principal, los archivos críticos (como CSS y JS) ya están siendo descargados en el navegador gracias a Early Hints, lo cual puede mejorar la velocidad de los sitios web.

4) Priority Hints en Chrome y Edge desde la versión 101#

Chrome y Edge a partir de la versión 101 introducen una novedad que lleva la gestión de prioridades mucho más allá. Priority Hints (sugerencias de prioridad) trabajan con el atributo fetchpriority, el cual puede añadirse a un elemento HTML para aumentar o disminuir la prioridad de su descarga. Puedes obtener más información en web.dev.

5) Medición de la velocidad web paso a paso (y nuestro tester 3.0)#

Martin Michálek ha preparado para ti una guía actual sobre la medición de la velocidad web. ¿Estás midiendo correctamente? ¿Y estás midiendo el dominio, una URL específica, y también grupos de páginas según lo que Google espera de nosotros? El texto está dirigido principalmente a personas no técnicas y muestra cómo simplificar la medición con la ayuda de la tercera versión de nuestro tester.

6) Llegada de una nueva métrica: Interaction to Next Paint (INP)#

Interaction to Next Paint es una métrica experimental que mide la respuesta del sitio web tras una interacción del usuario. Google sostiene que debería reemplazar en el futuro al First Input Delay (FID) en Core Web Vitals, ya que actualmente el 95% de los sitios cumplen con FID. FID solo mide la primera interacción y una parte del ciclo de interacción. INP medirá todas las interacciones durante la navegación por las páginas y su límite está fijado por ahora en 200 ms. Encuentra más en nuestro artículo sobre la métrica INP. Añadimos también algunos consejos de cómo optimizar INP.

7) Performance Insights: una vista más simple y clara de la velocidad#

Si deseas ajustar la velocidad, pero la pestaña Performance en Chrome DevTools te parece complicada, prueba Performance Insights. Muestra solo la información más relevante, principalmente relacionada con Web Vitals. En el sitio de Chrome Developers han elaborado una guía detallada sobre cómo utilizar la herramienta.

8) CSS size-adjust: armonía entre fuentes del sistema y web#

Hemos comenzado a utilizar ampliamente la regla CSS size-adjust, que ya cuenta con un alto soporte en los navegadores. La diferencia entre una webfont del diseño de tu sitio y una fuente del sistema puede causar desplazamientos indeseados del layout (CLS). Para estas situaciones, existe la nueva propiedad CSS size-adjust y ascent-override, además de esta herramienta que facilita su implementación.

9) CLS: Cómo asegurar la proporción de imágenes y evitar desplazamientos inesperados del layout#

Jake Archibald en su artículo describe dos técnicas para lograr un layout estable con imágenes. Una de ellas es la propiedad CSS aspect-ratio, la otra son los clásicos atributos width y height en HTML. El autor añade muchos detalles interesantes. ¿Conocías la sintaxis aspect-ratio: auto 16/9? Esta asegura que al elemento se le asigne una proporción de 16

, pero si la imagen tiene otra proporción, esta se aplicará al cargar.

10) Soporte completo para lazyload nativo ya en Safari#

Desde la versión 15.4 de Safari, lanzada en marzo de este año, todos los navegadores soportan el atributo loading="lazy" en imágenes. Para el soporte de carga diferida en <iframe>, aún es necesario activar la función en algunos navegadores. La carga diferida nativa de imágenes asegura que estas solo se carguen cuando estén a punto de aparecer en el viewport, ahorrando ancho de banda y priorizando contenido más importante de la página.

11) Back/Forward Cache en Chrome#

Bfcache es una caché en la memoria del navegador que almacena una instantánea completa de la página (incluyendo una buena cantidad de JavaScript) mientras el usuario se aleja. Si la página completa está en memoria, el navegador puede restaurarla rápida y fácilmente cuando el usuario decide regresar.

Desde la versión 96 de Chrome, Bfcache está disponible para todos los usuarios de Chrome, tanto en escritorio como en dispositivos móviles. Esto puede tener impactos interesantes en la velocidad para los usuarios reales, así como en los datos del Chrome UX Report.

12) Representación anticipada de páginas completas en Chrome#

A veces es muy probable que el usuario pase a una nueva página pronto, y desde el lanzamiento de la versión 108 de Chrome, el navegador comenzará a cargar la página antes de que se realice la transición a ella.

Cuando se realiza la transición a esa página, la página que fue cargada en segundo plano se "anticipará", o posiblemente se renderizará de inmediato.

Con esto concluye nuestro resumen del 2022. ¿Qué esperamos para el 2023? Seguro veremos una mejora en el soporte de las características ya presentadas en todos los navegadores.

También estamos ansiosos por ver cómo y cuándo exactamente Google utilizará la métrica INP. Definitivamente estaremos atentos a las novedades en torno al rendimiento web y te mantendremos informado. Síguenos en Twitter, LinkedIn o Facebook.

Etiquetas:Web PerformanceINP