La iniciativa Aurora de Chrome es una colaboración entre Chrome y los frameworks y las herramientas de JavaScript de código abierto para mejorar la experiencia del usuario en la Web. Si no tienes experiencia con Aurora, consulta nuestra publicación de introducción para obtener más información sobre nuestra misión y metodología.
Dado que no publicamos una hoja de ruta desde 2021, nos gustaría compartir lo que estuvimos haciendo y algunos proyectos interesantes que tenemos planeados para 2023.
Aspectos destacados del proyecto reciente
Durante los últimos años, nos hemos asociado con frameworks como Next.js, Angular y Nuxt para optimizar las Métricas web esenciales. Estos son algunos aspectos destacados desde la última actualización.
Imágenes
Las imágenes suelen ser una fuente de problemas de rendimiento. Los siguientes son algunos de los métodos que hemos estado buscando con las partes interesadas del framework para garantizar que las prácticas recomendadas estén disponibles de inmediato, de modo que los desarrolladores entreguen imágenes de manera óptima de forma predeterminada cuando usen los frameworks con los que nos asociamos.
Directiva de imágenes de Angular
Publicamos una directiva de imagen estable para el framework de Angular, disponible en Angular 15 y con portabilidad a versiones anteriores especialmente a las versiones 13.4 y 14.3. Esta directiva habilita la carga diferida nativa de forma predeterminada, agrega sugerencias de fetchpriority a las imágenes prioritarias y genera automáticamente atributos srcset apropiados para imágenes responsivas.
Impacto: Las pruebas de laboratorio de Lighthouse se realizaron en el entorno de QA de Land's End antes y después de usar la directiva de imágenes. En computadoras, la mediana del Largest Contentful Paint (LCP) disminuyó de 12.0 s a 3.0 s, una mejora del 75% en el LCP.
Obtén más información sobre la directiva en nuestra entrada de blog, Optimiza imágenes con la directiva de imágenes de Angular.
Renovado next/image
También trabajamos con el equipo de Next.js para actualizar el componente de imagen a fin de usar funciones nuevas del navegador, como la carga diferida nativa y el atributo HTML fetchpriority. La nueva versión está disponible de forma predeterminada a partir de Next 13.
Impacto : Nuestro socio Leboncoin pudo mejorar el LCP de algunas páginas en hasta un 60% cuando se cambió a la nueva versión de next/image.
Fuentes web
La optimización de fuentes web puede ser difícil de lograr, ya que es más complejo que reducir el tamaño de transferencia de los recursos de fuente. Las fuentes web también pueden contribuir significativamente a la métrica Cambio de diseño acumulado (CLS) de una página, y minimizar los cambios de diseño debido al intercambio de fuentes requiere un esfuerzo considerable. Afortunadamente, nos asociamos con frameworks para facilitarles aún más esta tarea a los desarrolladores web.
Herramientas para mejores resguardos de fuentes en Next.js, Nuxt y Vite
Lanzamos una función en Next 13 que ajusta las dimensiones de la fuente de resguardo de una página para que se alinee mejor con la fuente web cuando se carga. Esto reduce el CLS relacionado con la fuente. Compartimos nuestra metodología con el equipo de Nuxt, que nos inspiró para crear el módulo nuxtjs/fontaine y el complemento fontaine Vite, que usan el mismo algoritmo subyacente.
Impacto: Con esta función, nuestro socio Vox Media pudo reducir el CLS en The Verge a 0 en producción en algunas páginas.
Obtén más información en nuestras entradas de blog sobre cómo generar resguardos de fuentes mejorados y herramientas del marco de trabajo de resguardo de fuentes.
Módulo nuxtjs/google-fonts
Nos asociamos con el equipo de Nuxt para lanzar un módulo a fin de optimizar el rendimiento de Google Font. El módulo descarga y aloja automáticamente las fuentes de Google para evitar un proceso de ida y vuelta adicional en el servidor, y también admite opciones de incorporación de fuentes.
Secuencias de comandos de terceros
El JavaScript de terceros es una posible fuente de problemas de rendimiento y puede afectar métricas como la Interacción con el próximo procesamiento de imagen (INP), ya que el trabajo que programan estas secuencias de comandos puede retrasar la ejecución de las interacciones del usuario.
Componente next/script para secuencias de comandos de terceros
Compilamos un componente de secuencia de comandos para Next 12+ que, de forma predeterminada, carga secuencias de comandos después de la hidratación para evitar que se bloquee la ruta de acceso crítica durante la carga. También cuenta con un modo de trabajador web que integra Partytown para quitar secuencias de comandos por completo del subproceso principal.
Impacto: En las pruebas de laboratorio de Lighthouse, CareerKarma experimentó una reducción del 24% en el LCP al usar next/script component con el modo de trabajador habilitado.
Obtén más información en nuestra entrada de blog, Optimiza la carga de secuencias de comandos de terceros en Next.js.
Varios
Nuestras asociaciones con desarrolladores de frameworks no terminan con la mejora de las Métricas web esenciales. También estamos trabajando para aprovechar más las novedades y facilitar aún más que los desarrolladores comiencen a usar las funciones de vanguardia de la plataforma web.
Polyfill de consultas en contenedores
Actualizamos el polyfill de consultas de contenedores para que admita un conjunto más amplio de funciones de CSS y mejoramos su rendimiento, trabajando en el lanzamiento 1.0.
Obtén más información en nuestra entrada de blog, Inside the Container Query Polyfill.
¿Cuál es el próximo paso para Aurora?
Entre 2023 y 2024, tenemos una serie de proyectos interesantes que se incorporarán en la canalización para optimizar las Métricas web esenciales para los desarrolladores de frameworks.
El próximo año, nos enfocaremos en lo siguiente:
Componentes de wrapper de terceros para Next.js y Nuxt: Los componentes de wrapper pueden facilitar la carga de bibliotecas de terceros populares de forma óptima para INP y LCP. Coloca una etiqueta de componente en el DOM para cargar tu tercero en lugar de una etiqueta de secuencia de comandos, y el framework seleccionará la mejor estrategia de carga. Consulta la RFC para obtener más detalles.
Experiencia de los desarrolladores de hidratación y SSR en Angular: Trabajamos estrechamente con el equipo de Angular en el proyecto de SSR y de hidratación. Nos enfocamos en mejorar la experiencia de los desarrolladores con el uso de SSR para que más aplicaciones puedan aprovechar los beneficios del LCP. No te pierdas el RFC oficial sobre las funciones de manipulación del DOM SSR.
Directiva de imagen Angular y funciones de
nuxt/image: Tenemos una serie de funciones emocionantes planificadas para Angular, como la generación automática de sugerencias de preconexión, herramientas de migración para facilitar la transición de elementos<img>básicos, compatibilidad con elementos<picture>y marcadores de posición. También consultaremos al equipo de Nuxt sobre una serie de funciones nuevas paranuxt/image.Investigación de INP (varios frameworks): A medida que Interaction to Next Paint (INP) reemplazará a First Input Delay (FID) en 2024, aumentamos la compatibilidad para mejorar INP en los frameworks. Esto implicará el análisis de las causas raíz de los problemas de INP en los frameworks y la creación de soluciones integradas para los usuarios del framework siempre que sea posible.
Velocímetro 3: También ayudamos a implementar la nueva generación de la herramienta de comparativas Velocímetro para representar el panorama del framework web moderno de 2023.
Mantente al día
Agrega nuestra página de destino a favoritos para mantenerte al tanto de las noticias, charlas sobre tecnología y entradas de blog más recientes del equipo de Aurora. También puedes seguirnos en Twitter:
- Kara Erickson: karaforthewin@
- Houssein Djirdeh (hdjirdeh@)
- Katie Hempenius: katiehempenius@
- Alex Castillo: atcastle@
- Gerald Mónaco, devknoll@
- Janicklas Ralph James: janicklas@
- Thorsten Kober: tckober@