Velocidad web: 12 novedades del año 2022

En este artículo, exploraremos 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 nuevos formatos ha mejorado nuevamente. Los formatos de imagen modernos, como WebP y AVIF, pueden acelerar significativamente las páginas web al codificar la misma información en archivos más pequeños.

Mientras que WebP ha sido ampliamente soportado por más de dos años, el soporte para AVIF apareció en Safari solo en septiembre de este año con el lanzamiento de iOS 16 y macOS Ventura. Tenga en cuenta que no todos los usuarios de Safari han realizado la actualización y que Edge aún no soporta AVIF. Sin embargo, puede usar WebP con bastante confianza.

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

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

La metodología de medición de la métrica Cumulative Layout Shift ha cambiado varias veces, la última vez de manera bastante significativa. Si quiere entender términos como Session Window, Session Gap y cómo todo esto funciona en conjunto, lea nuestro artículo sobre CLS.

3) Early Hints: cargue recursos antes que con el preload#

Una novedad interesante llegó a Chrome en 2022 bajo el nombre de Early Hints. Se trata de un código de estado HTTP (103 Early Hints) que permite enviar al servidor una "pista" sobre los recursos críticos parciales.

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

4) Priority Hints en Chrome y Edge a partir de la versión 101#

Chrome y Edge a partir de la versión 101 traen una novedad que lleva el manejo de prioridades mucho más lejos. Priority Hints (sugerencias de prioridad) trabajan con el atributo fetchpriority, que se puede agregar a un elemento HTML para aumentar o disminuir la prioridad de su descarga. Puede aprender más en web.dev.

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

Martin Michálek ha preparado para usted una guía actual sobre la medición de la velocidad web. ¿Está midiendo correctamente? ¿Y está midiendo el dominio, la URL específica y también grupos de páginas según lo que Google nos pide? El texto está destinado principalmente a personas no técnicas y muestra cómo facilitar las mediciones 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 la interacción del usuario. Google afirma que eventualmente debería reemplazar a First Input Delay (FID) en Core Web Vitals, ya que actualmente el 95% de los sitios cumplen con FID. Además, FID solo mide la primera interacción y una parte del ciclo de interacción. INP medirá todas las interacciones durante la navegación y su límite actualmente está fijado en 200 ms. Puede encontrar más en nuestro artículo sobre la métrica INP. También añadimos algunos consejos sobre cómo optimizar INP.

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

Si desea ajustar la velocidad, pero la pestaña de Performance en Chrome DevTools le parece complicada, pruebe Performance Insights. Muestra solo la información más relevante, principalmente relacionada con Web Vitals. Una guía detallada sobre cómo usar la herramienta está disponible en el sitio de Chrome Developers.

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

Hemos comenzado a usar ampliamente la regla CSS size-adjust, que ya tiene un alto soporte en los navegadores. La diferencia entre la fuente web del diseño de su sitio y la fuente del sistema puede causar desplazamientos no deseados del layout (CLS). Para estas situaciones, aquí está la nueva propiedad CSS size-adjust y ascent-override y esta herramienta que facilita su implementación.

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

Jake Archibald en su artículo describe dos técnicas para lograr un layout estable que incluya imágenes. Una de ellas es la propiedad CSS aspect-ratio, y la otra son los buenos atributos antiguos width y height en HTML. El autor también agrega muchos detalles interesantes. ¿Conocía, por ejemplo, la escritura aspect-ratio: auto 16/9? Esto asegura que al elemento se le asigne una proporción de 16

, pero si la imagen tiene una proporción diferente, se aplicará tras la carga.

10) Soporte completo para lazyload nativo también 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" para imágenes. Para el soporte de carga diferida en <iframe>, aún es necesario habilitar la función en algunos navegadores. La carga diferida nativa de imágenes asegura que estas se carguen solo cuando están a punto de aparecer en el viewport, lo que ahorra ancho de banda y da prioridad a contenido más importante de la página.

11) Back/Forward Cache en Chrome#

Bfcache es una caché en memoria del navegador que almacena una instantánea completa de la página (incluyendo mucho JavaScript), mientras el usuario se aleja. Si toda la página 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 del navegador 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) Prerendering completo de la página en el navegador Chrome#

A veces es muy probable que el usuario pase pronto a una nueva página, y desde la versión 108 de Chrome, el navegador comienza a cargar la página incluso antes de que el usuario navegue a ella.

Cuando el usuario navega a esta página, la página que se cargó en segundo plano se "pre-renderiza" o, alternativamente, se muestra de inmediato.

Así concluye nuestro resumen del año 2022. ¿Qué esperamos en 2023? Seguramente habrá mejoras en el soporte de las características ya presentadas en todos los navegadores.

Además, esperamos ver cómo y cuándo exactamente Google utilizará la métrica INP. Definitivamente seguiremos las novedades alrededor del rendimiento web y les traeremos información fresca. Síganos en Twitter, LinkedIn o Facebook.

Etiquetas:Web PerformanceINP