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@