A interação com a Next Paint agora é uma métrica estável das Core Web Vitals, substituindo "First Input Delay".
Hoje é o dia! Após anos de trabalho, finalmente estamos prontos para tornar a Interaction to Next Paint (INP) uma métrica estável do Core Web Vitals. Isso marca um avanço significativo na forma como medimos a capacidade de resposta da interação, abordando muitas das deficiências da First Input Delay (FID).
Nesta postagem, vamos recapitular rapidamente o que está mudando hoje, definir um cronograma mais específico para a descontinuação e a remoção da FID das ferramentas do Chrome e compartilhar alguns recursos para encontrar e corrigir problemas de INP.
O que muda hoje
No Chrome, todas as nossas ferramentas Core Web Vitals agora refletirão o status estável da INP, sempre que aplicável. Por exemplo, ferramentas como o PageSpeed Insights, o Painel CrUX e a extensão de Métricas da Web mostram a INP com mais destaque no trio de métricas das Core Web Vitals. Especificamente no PageSpeed Insights, a lógica de avaliação das Core Web Vitals vai avaliar o desempenho da INP em vez da FID. Para saber mais sobre as mudanças correspondentes no Search Console, consulte a postagem do blog da equipe de pesquisa.
Além disso, a partir de hoje, algumas ferramentas podem mostrar um aviso de descontinuação do FID como um aviso de que a métrica não faz mais parte das Core Web Vitals e será removida. A seção a seguir do Cronograma de descontinuação do FID discute as datas necessárias para garantir que você saia totalmente da FID.
Cronograma de descontinuação da FID
Agora que o INP substituiu a FID como uma métrica das Core Web Vitals, o Chrome está oficialmente descontinuando o suporte a FID. Isso significa que as ferramentas do Chrome não vão mais garantir a disponibilidade de FID, e os desenvolvedores terão até 9 de setembro de 2024 para fazer a transição para a INP.
Isso é importante principalmente para os consumidores do Chrome User Experience Report (CrUX) ou das APIs PageSpeed Insights. Os aplicativos que processam dados de FID de qualquer uma dessas APIs precisam ser transferidos para o INP até 9 de setembro para evitar falhas ou interrupções no serviço. Para esclarecer, essa será uma alteração interruptiva nas versões mais recentes das APIs, e não haverá um aumento nos números das versões principais.
Recursos para otimizar o INP
Não importa se você está analisando o INP pela primeira vez ou se for profissional em capacidade de resposta, a coleção de recursos de otimização da INP é um ótimo ponto de partida para encontrar o que está procurando. Essa coleção permanente de documentos abrange tudo, desde a definição da métrica em si, técnicas para medi-la localmente e com usuários reais, conselhos práticos para otimizar uma variedade de casos de uso e uma lista de estudos de caso do mundo real mostrando a orientação em ação.
Com esses documentos, confira um fluxo de trabalho geral para encontrar e corrigir problemas de INP no seu site:
Confira como o INP mede a capacidade de resposta às interações do usuário nos documentos canônicos do INP.
Veja dados de usuários reais para avaliar o desempenho de INP do seu site. Pelo menos 75% das experiências de INP precisam responder à entrada do usuário em menos de 200 milissegundos para serem consideradas boas. Se o seu site já tem um bom INP, não se preocupe.
Conecte seu URL ao PageSpeed Insights ou confira o relatório de Core Web Vitals no Search Console, caso seu site esteja incluído no conjunto de dados do CrUX.
Verifique com seu provedor de análise se ele é compatível com o monitoramento de INP.
Implemente sua solução de INP usando web-vitals.js.
Se necessário, prepare seu site para coletar informações de diagnóstico sobre as experiências dos usuários. Esses metadados são importantes, como com qual elemento da página o usuário interagiu e por que o processo estava lento, além de outros dados úteis. Em conjunto, essas informações ajudarão você a entender as maiores oportunidades de melhoria.
Reproduza as interações lentas localmente com o Chrome DevTools. Isso vai ajudar você a saber exatamente o que está acontecendo nos bastidores e qual é o código com problemas.
Otimize seu código para fazer o mínimo de trabalho possível ao lidar com uma interação do usuário:
Avalie suas alterações localmente e monitore as experiências do usuário real para garantir que o desempenho de INP esteja sendo (e se mantenha) rápido.
Esperamos que esta orientação o coloque no caminho certo para otimizar a INP. Se você encontrar problemas durante o processo, poste uma pergunta com a tag interaction-to-next-paint no Stack Overflow para receber ajuda.
O lançamento do INP como Core Web Vitals já está sendo há muito tempo. Voltando à nossa primeira postagem sobre a criação de uma métrica de capacidade de resposta melhor em 2021, Desde então, levamos em consideração todo o incrível feedback da comunidade e desenvolvemos uma métrica que, na nossa opinião, vai orientar os desenvolvedores a melhorar uma área pouco atendida de experiências do usuário, levando a uma Web melhor. Agradecemos a todos pela ajuda na definição dessa métrica e por todo o trabalho árduo para melhorar o estado da capacidade de resposta.