O que há de novo no Aurora?

Kara Erickson
Kara Erickson
X

A iniciativa Aurora do Chrome é uma colaboração entre o Chrome e ferramentas e frameworks JavaScript de código aberto para melhorar a experiência do usuário na Web. Se você ainda não conhece o Aurora, confira nossa postagem de introdução para saber mais sobre nossa missão e metodologia.

Como não publicamos nenhum roteiro desde 2021, queremos compartilhar o que temos feito e alguns projetos incríveis que temos para 2023.

Destaques recentes do projeto

Nos últimos anos, fizemos parcerias com frameworks como Next.js, Angular e Nuxt para otimizar as Core Web Vitals. Aqui estão alguns destaques desde nossa última atualização.

Imagens

As imagens costumam ser uma fonte de problemas de desempenho. Confira a seguir alguns dos métodos que temos buscado com as partes interessadas do framework para garantir que as práticas recomendadas estejam prontas para uso, de modo que os desenvolvedores entreguem imagens de maneira ideal por padrão quando usarem os frameworks com que estamos trabalhando.

Diretiva de imagem angular

Publicamos uma diretiva de imagem estável para o framework do Angular, que está disponível no Angular 15 e tem backport especialmente para as versões 13.4 e 14.3. Essa diretiva ativa o carregamento lento nativo por padrão, adiciona dicas fetchpriority a imagens prioritárias e gera automaticamente atributos srcset adequados para imagens responsivas.

O impacto: testes de laboratório do Lighthouse foram realizados no ambiente de controle de qualidade do Land's End antes e depois de usar a diretiva de imagem. Em computadores, a Maior exibição de conteúdo (LCP) mediana diminuiu de 12s para 3s, uma melhoria de 75% na LCP.

Comparação de tira de filme: o site um com tags de imagem nativas e o site dois com a diretiva de imagem Angular.

Leia mais sobre a diretiva na nossa postagem do blog, Como otimizar imagens com a diretiva de imagem do Angular (em inglês).

next/image reformulado

Também trabalhamos com a equipe do Next.js para atualizar o componente de imagem e usar novos recursos do navegador, como o carregamento lento nativo e o atributo HTML fetchpriority. A nova versão está disponível por padrão a partir do Next 13.

O impacto : nossa parceira Leboncoin conseguiu melhorar a LCP de algumas páginas em até 60% ao mudar para a nova versão do next/image.

Fontes da Web

A otimização de fontes da Web pode ser complicada, porque envolve mais do que reduzir o tamanho da transferência dos recursos de fonte. As fontes da Web também podem contribuir significativamente para a métrica Mudança de layout cumulativa (CLS, na sigla em inglês) de uma página. Além disso, minimizar as mudanças de layout devido à troca de fontes exige um esforço considerável. Felizmente, fizemos parcerias com frameworks para tornar essa tarefa ainda mais fácil para os desenvolvedores da Web.

Ferramentas para substitutos de fonte aprimorados em Next.js, Nuxt e Vite

Lançamos um recurso no Next 13 que ajusta as dimensões da fonte substituta de uma página para se alinhar melhor à fonte da Web durante o carregamento. Isso reduz a CLS relacionada a fontes. Compartilhamos nossa metodologia com a equipe do Nuxt e se tornou a inspiração para o módulo nuxtjs/fontaine e o plug-in fontaine Vite, que usam o mesmo algoritmo subjacente.

O impacto: nossa parceira Vox Media conseguiu reduzir a CLS no The Verge para 0 em produção em algumas páginas usando esse recurso.

Leia mais em nossas postagens do blog sobre como gerar substitutos de fonte aprimorados e ferramentas de framework de substituto de fonte.

Módulo nuxtjs/google-fonts

Fizemos uma parceria com a equipe da Nuxt para lançar um módulo que otimiza o desempenho do Google Fonts. O módulo faz o download e hospeda automaticamente as fontes do Google para evitar o trabalho extra do servidor, além de oferecer suporte a opções de fontes em linha.

Scripts de terceiros

O JavaScript de terceiros é uma possível fonte de problemas de desempenho e pode afetar métricas como a Interação com a próxima exibição (INP, na sigla em inglês), já que o trabalho programado pelos scripts pode atrasar a execução das interações do usuário.

Componente next/script para scripts de terceiros

Criamos um componente de script para o Next 12+ que carrega scripts após a hidratação por padrão para evitar o bloqueio do caminho crítico durante o carregamento. Ele também conta com um modo Web worker que integra o Partytown para tirar os scripts completamente da linha de execução principal.

O impacto: nos testes de laboratório do Lighthouse, o CareerKarma teve uma redução de 24% na LCP usando o next/script component com o modo de trabalho ativado.

Comparação de tiras de filme mostrando melhorias em LCP

Leia mais na nossa postagem do blog, Como otimizar o carregamento de scripts de terceiros no Next.js (em inglês).

Diversos

Nossas parcerias com desenvolvedores de framework não acabam por melhorar as Core Web Vitals. Também estamos trabalhando para aproveitar ainda mais as novidades e tornar ainda mais fácil para os desenvolvedores começarem a usar recursos de última geração da plataforma da Web.

Polyfill de consultas de contêiner

Atualizamos o polyfill de consultas de contêiner para oferecer suporte a um conjunto mais amplo de recursos CSS e melhoramos o desempenho desse conjunto até a versão 1.0.

Leia mais na nossa postagem do blog Por dentro do Polyfill de consulta de contêiner (em inglês).

O que vem por aí no Aurora?

Em 2023 e 2024, temos vários projetos interessantes para otimizar as Core Web Vitals para desenvolvedores de framework.

No próximo ano, vamos focar no seguinte:

  • Componentes de wrapper de terceiros para Next.js e Nuxt: os componentes de wrapper podem facilitar o carregamento de bibliotecas de terceiros conhecidas de maneira ideal para LCP e INP. Solte uma tag de componente no DOM para carregar o terceiro, em vez de uma tag de script, e o framework selecionará a melhor estratégia de carregamento. Consulte o RFC para mais detalhes.

  • Experiência do desenvolvedor de SSR e hidratação do Angular: estamos trabalhando com a equipe do Angular no projeto de SSR e hidratação. Nosso foco tem sido melhorar a experiência do desenvolvedor com o uso da SSR, permitindo que mais aplicativos aproveitem os benefícios da LCP. Não perca o RFC oficial sobre os recursos de manipulação do DOM da SSR.

  • Diretiva de imagem angular e recursos nuxt/image: planejamos diversos recursos interessantes para o Angular, como geração automática de dicas de pré-conexão, ferramentas de migração para ajudar na transição de elementos <img> básicos, suporte a elementos <picture> e marcadores de posição. Além disso, consultaremos a equipe da Nuxt sobre vários novos recursos para o nuxt/image.

  • Pesquisa de INP (vários frameworks): à medida que a Interação com a próxima pintura (INP) substituirá a latência na primeira entrada (FID, na sigla em inglês) em 2024, estamos aumentando o suporte para melhorar o INP em estruturas. Isso envolverá a análise das causas-raiz dos problemas de INP em frameworks e a criação de soluções integradas para usuários do framework sempre que possível.

  • Velocímetro 3: também estamos ajudando a implementar a próxima geração da ferramenta de comparação Velocímetro para representar o cenário moderno de framework da Web de 2023.

Fique por dentro

Adicione nossa página de destino aos favoritos para ficar por dentro das últimas notícias, conversas sobre tecnologia e postagens do blog da equipe do Aurora. Você também pode nos seguir no Twitter: