Astro Creator: Nova métrica da Web prejudicará sites JS Framework

No próximo mês, o Google apresentará o Interaction to Next Paint (INP) em seus principais sinais vitais da web. É uma medida que deve levantar preocupações sobre o que fará com os sites existentes, afirmou o criador do Astro em um tweet.

Fred Schott, que criou o Astro, tuitou sua preocupação de que sites construídos com algumas estruturas JavaScript populares possam sofrer um impacto quando o Google apresentar o INP, que atualmente é considerado uma métrica Core Web Vital pendente.

Schott postou um gráfico que sugeria que quando o Google abandonasse a “métrica notoriamente aceitável (First Input Delay, ou FID) por algo muito mais difícil (Interaction to Next Paint, ou INP)” que o desempenho cairia para estruturas, especialmente para sites construídos em Nuxt e Next.js.

Fred Schott, criador do Astro, tuitou sobre o impacto da Interação no Next Paint.

Os dados baseiam-se em cerca de 9 milhões de sites, de acordo com um tweet de acompanhamento de Schott (The New Stack tentou, mas não conseguiu agendar uma entrevista com Schott).

Nuxt: renovado e pronto

Esses 9 milhões de sites incluem uma grande parte de sites construídos em uma versão mais antiga do Nuxt, bem como sites desenvolvidos em versões mais antigas do Next.js, apontou Daniel Roe, que lidera a equipe principal do Nuxt.

“A razão pela qual Nuxt e Next – no meu entendimento – têm os resultados que obtêm é que são os frameworks mais antigos da lista e, portanto, têm um grande número de sites por aí, muitos dos quais foram criados há algum tempo e não usamos as melhores práticas para o desenvolvimento web moderno”, disse Roe ao The New Stack. “Isso não é necessariamente uma reflexão sobre a estrutura. É uma reflexão sobre o conjunto de sites que existem por aí.”

Por exemplo, o Nuxt foi completamente reescrito no ano passado com práticas modernas da web, mas não há como separar esses dados, acrescentou.

Astro, uma nova estrutura, parece ter melhor desempenho no gráfico, mas também se baseia em um conjunto menor de sites, destacou Roe.

O desempenho é muito importante para a estrutura Nuxt, acrescentou.

“A equipe do Google Chrome trabalha diretamente com os autores da estrutura, então eles trabalham diretamente com Next.js e diretamente conosco. Acontece que também sou um desenvolvedor do Google especialista em desempenho web”, disse ele. “Então eu me importo muito com o desempenho.”

Next.js é mantido pela Vercel. A equipe recusou uma entrevista, mas referiu ao The New Stack várias postagens que Vercel escreveu sobre o assunto, incluindo Como o React 18 melhora o desempenho do aplicativo e Melhorando o INP com React 18 e Suspense.

Interação com a próxima pintura

A métrica existente, First Input Delay, relata a capacidade de resposta da primeira vez que um usuário interage com a página, de acordo com uma postagem de Annie Sullivan, engenheira de software sênior do Google, e Rick Viscomi, engenheiro de DevRel da equipe e líder de desempenho da web para Google. Portanto, a primeira interação não é necessariamente representativa de todas as interações posteriores na página, escreveram eles. Além disso, o First Input Delay mede apenas a quantidade de tempo que o navegador teve que esperar antes de começar a lidar com a primeira interação, acrescentaram.

Eles afirmam que o INP é uma métrica mais precisa porque leva em consideração todas as interações.

“E, em vez de apenas medir a parte do atraso, o INP mede a duração total desde o início da interação, através do manipulador de eventos, e até que o navegador seja capaz de pintar o próximo quadro”, escreveram Sullivan e Viscomi. “Esses detalhes de implementação tornam o INP uma medida muito mais abrangente da capacidade de resposta percebida pelo usuário do que o FID.”

Mas também é importante notar que JavaScript pode impactar o INP.

“Tenha em mente que, por padrão, o JavaScript é de thread único”, observou o post do Vercel. “Se você estiver carregando um script JS grande, nada mais poderá acontecer em sua página até que o thread principal esteja ocioso – até mesmo reagindo ao clique de um usuário em um link HTML simples. Melhorar o INP significa melhorar a rapidez com que este thread principal pode responder à interação do usuário.”

Preparando-se para o INP

Existem maneiras de reduzir o INP com React, como hidratação seletiva com Suspense, observou a equipe Vercel, acrescentando que essas técnicas também podem melhorar outras métricas – como FID, Tempo Total de Bloqueio (TBT) e Tempo de Interação (TTI).

Como os threads principais devem estar ociosos para processar manipuladores de eventos, outras opções para melhorar a interação com o Next Paint incluem:

• Usar CSS em vez de JavaScript para animações, já que um thread separado lida com CSS;
• Eventos de limitação ou debounce que podem ser chamados repetidamente pela entrada do usuário; e
• Reduzir o tamanho do DOM para que o navegador não precise recalcular muitos elementos em cada renderização.

Da mesma forma, “SVGs in-line podem ser especialmente problemáticos se você tiver muitos ou se eles acabarem no pacote JS do lado do cliente (por exemplo, in-line-os em JSX)”, escreveu Vercel. “Você pode precisar referenciá-los em uma tag ou procurar maneiras alternativas de renderizá-los, como mantê-los nos componentes do React Server.”

Se houver um aplicativo complexo, use “web workers para executar JavaScript arbitrariamente em threads separados, mantendo o thread principal aberto para entrada do usuário”, escreveu Vercel.

O CTO da Vercel, Malte Ubl, e a engenheira de conteúdo Alice Alexandra Moore também escreveram recentemente um post sobre Como os principais sinais vitais da Web afetam o SEO, que aborda como a Vercel pode ajudar com os principais sinais vitais da web.

A postagem Astro Creator: Nova métrica da Web prejudicará sites do JS Framework apareceu pela primeira vez em The New Stack.