Fluxos de trabalho das Principais métricas da Web com ferramentas do Google

Combine ferramentas do Google para auditar, melhorar e monitorar seu site com eficiência.

As Core Web Vitals são um conjunto de métricas que avaliam a experiência do usuário em critérios como desempenho de carregamento, capacidade de resposta à entrada do usuário e estabilidade do layout.

Neste guia, vamos abordar um fluxo de trabalho para melhorar as Core Web Vitals, mas o início desse fluxo depende da coleta dos seus próprios dados de campo. O local de término pode depender das ferramentas do Google que você considera úteis para diagnosticar e corrigir problemas na experiência do usuário.

As Core Web Vitals são mais bem avaliadas em campo

As Core Web Vitals foram criadas especificamente para avaliar a experiência dos usuários no seu site. Elas são métricas centradas no usuário. As ferramentas baseadas em laboratório, como o Lighthouse, são ferramentas de diagnóstico para destacar possíveis problemas de desempenho e as práticas recomendadas. Essas ferramentas são executadas em determinadas condições predefinidas e podem não refletir as medições reais das Core Web Vitals.

Por exemplo, o Lighthouse é uma ferramenta baseada em laboratório que executa testes com limitação simulada em um ambiente simulado para computadores ou dispositivos móveis. Embora essas simulações de condições de rede e dispositivo mais lentas sejam úteis ao tentar diagnosticar problemas de desempenho, elas representam apenas uma fração da grande variedade de condições de rede e recursos do dispositivo e podem não refletir o que os usuários estão enfrentando nos seus sites.

Ferramentas baseadas em laboratório, como o Lighthouse, também costumam fazer um "carregamento a frio" de uma página da Web como um visitante totalmente novo. Geralmente, esse é o carregamento mais lento, mas, na vida real, os visitantes podem ter alguns recursos armazenados em cache, caso já os tenham visitado antes ou quando estiverem navegando pelo site. Novos visitantes e ferramentas também podem ter uma experiência diferente com banners de cookies ou outro conteúdo.

Em resumo, embora as ferramentas baseadas em laboratório possam indicar possíveis problemas de desempenho e ajudar você a depurar e iterar, elas podem não representar quantos visitantes realmente acessam seu site. Use dados de campo para medir o desempenho no mundo real e ferramentas baseadas em laboratórios, como o Lighthouse, para diagnósticos sobre melhorias. Consulte também a seção Quando usar o Lighthouse.

O Google mede as Core Web Vitals pelo Chrome User Experience Report (CrUX). Este é um conjunto de dados público coletado de usuários reais do Chrome. Ele é a base de muitas ferramentas do Google e de terceiros que informam as Core Web Vitals de um site.

No entanto, o CrUX tem limitações. Ele geralmente informa quando há um problema, mas geralmente não tem dados suficientes para informar o motivo.

Colete seus próprios dados de campo, se possível.

O melhor conjunto de dados para melhorar o desempenho de um site no campo é aquele que você cria. Isso começa com a coleta de dados de campo dos visitantes do seu site. A forma de fazer isso depende do tamanho da sua organização e se você quer pagar por uma solução de terceiros ou criar a sua.

As soluções pagas certamente avaliam as Core Web Vitals (e outras métricas de desempenho) e geralmente oferecem uma variedade de ferramentas para analisar os dados resultantes. Em grandes organizações com recursos significativos, este pode ser o método preferido.

No entanto, talvez você não faça parte de uma grande organização — nem mesmo uma que tenha meios de arcar com uma solução de terceiros. Nesses casos, a biblioteca web-vitals do Google ajudará você a coletar todas as Métricas da Web. No entanto, você vai ser responsável pela forma como esses dados são reportados, armazenados e analisados.

Se você já usa o Google Analytics, mas não começou a coletar seus próprios dados de campo, talvez haja a oportunidade de usar a biblioteca web-vitals para enviar as Métricas da Web coletadas no campo ao Google Analytics e usar as exportações do BigQuery do GA4 para gerar relatórios sobre os dados.

Entender as ferramentas do Google

Independentemente de você coletar seus próprios dados de campo, existem várias ferramentas do Google que podem ser úteis na análise das Core Web Vitals. Antes de estabelecer um fluxo de trabalho, uma visão geral de alto nível de cada ferramenta pode ajudá-lo a entender quais ferramentas podem (ou não) ser melhores para você.

Chrome User Experience Report (CrUX)

Como mencionado antes, o CrUX é um conjunto de dados públicos de dados de campo coletados de um segmento de usuários reais do Google Chrome em milhões de sites. Ele inclui as Core Web Vitals e outras métricas para sites com tráfego suficiente.

O CrUX está disponível como um conjunto de dados mensal do BigQuery no nível da origem ou como uma API diária no nível do URL ou da origem, desde que um URL ou uma origem tenha amostras suficientes no conjunto de dados do CrUX. Os dados do BigQuery também podem ser acessados no painel do CrUX para que os sites analisem as tendências históricas do site.

Quando usar o CrUX

O CrUX é útil mesmo que você colete seus próprios dados de campo. Embora o CrUX represente um subconjunto de usuários do Chrome, é útil comparar os dados de campo do seu site para saber como ele se alinha com os dados do CrUX. Cada uma delas tem vantagens e desvantagens, o que pode resultar em diferenças. Se você não coletar nenhum dados de campo para seu site, o CrUX será especialmente útil para fornecer uma visão geral de alto nível, desde que seu site esteja representado no conjunto de dados.

É possível usar o CrUX diretamente ou outra ferramenta (incluindo as mencionadas abaixo). Usar o conjunto de dados CrUX diretamente, seja com o BigQuery ou a API, é útil para expor dados que não são mostrados em outras ferramentas. Por exemplo, os dados no nível do país geralmente não estão disponíveis em outras ferramentas ou para visualizar as métricas adicionais no CrUX que geralmente não aparecem em outras ferramentas.

Quando não usar o CrUX

O CrUX representa apenas usuários do Chrome e, mesmo assim, apenas um subconjunto de usuários do Chrome. Uma solução RUM completa pode incluir mais experiências no Chrome e em outros navegadores compatíveis com as métricas do Web Vitals.

Os sites que não recebem tráfego suficiente não são representados no conjunto de dados do CrUX. Se esse for o seu caso, você precisará coletar seus próprios dados de campo para entender o desempenho do seu site em campo, já que o CrUX não será uma opção. Como alternativa, você vai precisar depender dos dados do laboratório, mas com as limitações de que podem não ser representativos, como descrito anteriormente.

Como os dados fornecidos pelo CrUX são uma média contínua dos últimos 28 dias, essa não é uma ferramenta ideal durante o desenvolvimento, porque levará um bom tempo para que as melhorias sejam refletidas no conjunto de dados do CrUX.

Por fim, como um conjunto de dados público, o CrUX é limitado à quantidade de informações que pode disponibilizar e como esses dados podem ser consultados. Com a captura dos seus próprios dados RUM, é possível coletar mais detalhes (por exemplo, o elemento LCP) e segmentar mais os dados para identificar problemas. Os usuários conectados têm uma experiência melhor ou pior nas Core Web Vitals do que os usuários desconectados? Os usuários com uma LCP lenta têm um elemento específico da LCP? Quais interações estão causando valores altos de FID e INP?

PageSpeed Insights (PSI)

A PSI é uma ferramenta que informa dados de campo do CrUX e do laboratório do Lighthouse para uma determinada página. Consulte essas seções individuais para mais detalhes.

Quando usar o PSI

O PSI é ótimo para avaliar a performance do CrUX no nível da página ou da origem, tanto para usuários de dispositivos móveis quanto para computadores. Ele é uma boa opção para ter uma visão geral inicial das Core Web Vitals para uma página ou site. Ela também permite que você confira os dados das Core Web Vitals de outros sites, como concorrentes.

O PSI também disponibiliza dados do Lighthouse, com recomendações úteis para melhorar suas Core Web Vitals, caso elas estejam alinhadas. Quando isso não está alinhado, as recomendações do Lighthouse podem ser menos relevantes.

Como o Lighthouse é executado no servidor, ele pode formar uma linha de base mais consistente do que a execução do Lighthouse no DevTools.

Quando não usar o PSI

O PSI só está disponível para URLs públicos. Ele não pode ser usado em sites de desenvolvimento que não são acessíveis publicamente.

Os dados do CrUX só estão disponíveis quando os sites atendem a determinados critérios de qualificação, incluindo os limites de popularidade do site. O PSI é menos útil quando os dados do CrUX não estão disponíveis para uma página ou origem, já que ele só mostra os dados de laboratório do Lighthouse nesses casos.

Da mesma forma, se você só tiver dados CrUX no nível da origem, em vez do URL específico que está sendo testado, isso também limitará a utilidade de correlacionar os dados de campo no nível da origem com os diagnósticos de laboratório no nível da página. Ter os dados de campo no nível da origem ainda é uma informação muito útil para resumir o desempenho do site e as auditorias do Lighthouse podem ajudar, mas é necessário ter mais cuidado nesse caso.

Por fim, quando os dados no nível da página estão disponíveis no CrUX, mas diferem dos dados de laboratório do Lighthouse, as recomendações do Lighthouse podem ter valor limitado. Isso pode acontecer principalmente nos problemas de CLS pós-carregamento (em inglês) e nas Core Web Vitals (FID e INP) de interatividade, onde as auditorias baseadas em laboratórios são menos úteis.

Search Console

O Search Console mede o tráfego de pesquisa e o desempenho do seu site, incluindo as Core Web Vitals. Ele só está disponível para proprietários que confirmaram a propriedade do site.

Um recurso valioso do Search Console é que ele agrupa páginas semelhantes (por exemplo, páginas que usam o mesmo modelo) em uma avaliação de grupo único. O Search Console também inclui um relatório de Core Web Vitals com base nos dados de campo do CrUX.

Quando usar o Search Console

O Search Console é adequado para desenvolvedores e pessoas em funções que não são desenvolvedores avaliarem o desempenho na pesquisa e na página de maneiras que outras ferramentas do Google não conseguem. A apresentação dos dados do CrUX e o agrupamento de páginas por semelhança oferece novos insights sobre como as melhorias de desempenho afetam categorias inteiras de páginas.

Quando não usar o Search Console

O Search Console pode não ser adequado para projetos que usam ferramentas de terceiros diferentes que agrupam páginas por semelhança ou quando um site não está representado no conjunto de dados CrUX.

O agrupamento de páginas também pode ser um pouco confuso quando as páginas de exemplo em um grupo têm características diferentes do restante do grupo. Por exemplo, se o grupo for reprovado em determinadas Core Web Vitals em geral, mas todas as páginas de exemplo parecerem aprovadas nas mesmas. Isso pode acontecer quando um grupo tem páginas longas ou páginas raramente visitadas e que demoram para carregar, já que é menos provável que sejam armazenadas em cache. Quando há volumes suficientes dessas páginas na cauda longa, elas podem influenciar a taxa geral de aprovação do grupo.

Farol

O Lighthouse é uma ferramenta de laboratório que oferece oportunidades específicas para melhorar o desempenho da página. Os fluxos de usuários do Lighthouse também permitem que os desenvolvedores criem scripts de fluxos de interação para testes de desempenho além do carregamento da página.

O Lighthouse-CI é uma ferramenta relacionada que executa o Lighthouse durante as criações e implantações do projeto para auxiliar nos testes de regressão de desempenho. Ele apresenta um relatório do Lighthouse com solicitações de envio e rastreia métricas de desempenho ao longo do tempo.

Quando usar o Lighthouse

O Lighthouse é excelente para encontrar oportunidades de melhoria de desempenho durante o desenvolvimento em ambientes locais e de teste. O Lighthouse CI também é útil nas fases de compilação e implantação para ambientes de preparo e produção, em que o teste de regressão de desempenho é necessário para preservar boas experiências do usuário.

Quando não usar o Lighthouse

O Lighthouse (ou Lighthouse CI) não substitui os dados de campo. O Lighthouse é uma ferramenta de diagnóstico que lista possíveis problemas e as práticas recomendadas com base em um carregamento de página predefinido. As recomendações exibidas nem sempre correspondem ao desempenho que os usuários esperam.

Embora o Lighthouse possa ser usado para diagnosticar sites de produção com ferramentas como o PageSpeed Insights, o ideal é que ele seja usado em ambientes de desenvolvimento e integração contínua para resolver problemas de desempenho antes que cheguem à produção.

Extensão de Métricas da Web

A extensão do Chrome Métricas da Web é uma ferramenta de diagnóstico que mostra as Core Web Vitals enquanto você navega na Web. Ela também inclui os dados do CrUX da página atual (se estiverem representados no conjunto de dados CrUX) e disponibiliza informações de depuração para ajudar a identificar problemas de desempenho nas Core Web Vitals.

Quando usar a extensão das Métricas da Web

A extensão pode ser usada por qualquer pessoa e em qualquer função para avaliar as Core Web Vitals em todos os pontos do ciclo de vida dela. Ele é útil como uma transmissão do desempenho à medida que você interage com a página para tentar descobrir problemas de desempenho, especialmente para problemas pós-carregamento que podem ser encontrados com as métricas de CLS e INP.

Quando não usar a extensão Web Vitals

A extensão Métricas da Web não é uma avaliação holística do desempenho da página. Além disso, as métricas que ele informa dependem muito do ambiente em que é executado. Além disso, os desenvolvedores geralmente têm máquinas com maior potência ou acesso a redes mais rápidas.

O painel "Desempenho" no Chrome DevTools

O Chrome DevTools é uma coleção de ferramentas para desenvolvedores no navegador, incluindo o painel Performance. O Painel de desempenho é uma ferramenta de laboratório que cria um perfil de todas as atividades da página durante o carregamento da página ou em um período gravado. Ele oferece insights detalhados sobre tudo o que é observado em dimensões como rede, renderização, pintura e atividade de script, além das Core Web Vitals.

Quando usar o painel de desempenho

O painel "Desempenho" deve ser usado pelos desenvolvedores durante o desenvolvimento para receber insights detalhados sobre o desempenho da página. Isso é particularmente útil para depurar problemas de capacidade de resposta que afetam FID ou INP. Depois que uma interação que responde mal é identificada e pode ser repetida, o Painel de desempenho pode fornecer dados valiosos sobre o que está acontecendo no navegador para ajudar a entender o problema, desde o bloqueio da linha de execução principal até as pilhas de chamadas JavaScript e o trabalho de renderização.

Quando não usar o painel de desempenho

O painel "Desempenho" é uma ferramenta para desenvolvedores que só apresenta dados de laboratórios. Ele não substitui os dados de campo. Ele contém muitas informações de depuração, mas, por causa disso, pode ser difícil de entender para desenvolvedores iniciantes ou pessoas em funções que não são de desenvolvedor.

Um fluxo de trabalho de três etapas para garantir a integridade das Core Web Vitals do seu site

Ao trabalhar para melhorar a experiência do usuário, é melhor pensar no processo como um ciclo contínuo. Para melhorar as Core Web Vitals e outras métricas de desempenho, uma abordagem pode ser:

  1. Avaliar a integridade do site e identificar aspectos problemáticos.
  2. Depurar e otimizar.
  3. Monitore com ferramentas de integração contínua para detectar e evitar regressões.
.
O processo de três etapas, renderizado como um ciclo contínuo. A primeira etapa é "Avaliar a integridade do site e identificar os pontos problemáticos", a segunda, "Depurar e otimizar" e a terceira "Monitorar e continuar o desenvolvimento".
Fluxo de trabalho de três etapas

Etapa 1: avalie a integridade do site e identifique oportunidades de melhoria

É melhor começar com dados de campo para avaliar a integridade do site.

  1. Use o PageSpeed Insights para ver as métricas gerais da experiência nas Core Web Vitals na origem e informações específicas sobre um URL individual.
  2. O Search Console pode ser útil para identificar páginas que precisam de melhorias em que o recurso de agrupamento de páginas funcione bem no seu site.
  3. Se você tem dados RUM, essa normalmente é a melhor opção para identificar páginas ou segmentos de tráfego específicos com problemas.

Não importa se você analisa dados de campo coletados por conta própria ou dados do CrUX, essa primeira etapa é vital. Se você não estiver coletando dados de campo, os dados do CrUX podem ser suficientes para orientar você, contanto que seu site esteja representado no conjunto de dados.

Analisar o desempenho do site com o PageSpeed Insights

Como o PageSpeed Insights retrata os dados do CrUX para as Core Web Vitals de um URL. As Core Web Vitals são exibidas separadamente, e as Core Web Vitals são agrupadas em "Bom", "Precisa melhorar" e "Ruim". para os últimos 28 dias.
Analise o desempenho do site com o PageSpeed Insights

O PageSpeed Insights exibe os dados do CrUX referentes aos últimos 28 dias de dados de experiência do usuário no 75o percentil. Isso significa que, se 75% das experiências do usuário atingirem o limite definido para uma determinada métrica, a experiência será considerada "boa".

Use uma página específica para analisar o desempenho dela. Para ter uma visão geral de um site quando você começar a otimizar, convém começar com a página inicial, pois ela normalmente é uma das páginas mais populares em muitos sites.

Inicialmente, concentre-se na seção a experiência dos usuários reais do PSI. Você verá até quatro visualizações dos dados: celular e computador para o URL inserido e a origem inteira. Compare-os e veja as diferenças. Dispositivos móveis costumam ter um desempenho menor do que os desktops, já que são dispositivos com recursos mais limitados e operam em condições de rede potencialmente menos estáveis. Se o URL e os dados de origem forem significativamente diferentes, tente entender o motivo: as páginas iniciais costumam ser as primeiras páginas visitadas (ou seja, uma página de destino). Portanto, elas podem ser mais lentas do que os usuários de origem sofrem todo o impacto de um cache de navegador não preparado. As páginas subsequentes provavelmente serão carregadas mais rapidamente, já que todos os recursos compartilhados serão armazenados em cache, reduzindo os dados agregados no nível da origem.

O PSI também mostra as três Core Web Vitals (LCP, CLS e FID), a métrica de INP pendente, além das métricas de diagnóstico TTFB e FCP. Alguma das Core Web Vitals está apresentando falhas? O valor da falha? Isso indica onde concentrar seus esforços.

Entenda as relações entre esses números, especialmente para LCP. Se a LCP estiver lenta, como neste exemplo, observe o TTFB e a FCP, que são marcos dessa métrica. Neste exemplo, temos um TTFB de 1,8 segundo, o que vai dificultar muito atingir o limite recomendado de 2,5 segundos para uma boa LCP. Isso pode indicar um back-end lento (problemas no servidor ou falta de CDN), redes mais lentas ou redirecionamentos que atrasam os primeiros bytes HTML. Consulte o guia do Optimize TTFB para mais informações. A FCP leva mais um segundo acima disso, o que também pode indicar redes mais lentas. A LCP não está muito depois da FCP neste exemplo, sugerindo que o recurso da LCP está bem otimizado quando a própria página é carregada.

Para CLS, analise as pontuações de CLS do CrUX e de CLS do Lighthouse para ver se esse é um problema de CLS de carga (que o Lighthouse detecta e aconselha) ou um problema de CLS pós-carregamento que o Lighthouse não detecta. Para mais informações, consulte o guia do Optimize CLS.

Para a capacidade de resposta, observe as pontuações de FID e INP. Observe as auditorias TBT no Lighthouse para ver se muito processamento de JavaScript está acontecendo durante o carregamento inicial da página, o que provavelmente afetará o INP. O INP pode ser uma métrica difícil de melhorar, então consulte o guia de otimização de INP para mais informações.

Identificar páginas com baixo desempenho no Search Console

Relatório de Core Web Vitals no Search Console. O relatório é dividido em categorias para computador e dispositivos móveis, com gráficos de linhas detalhando a distribuição de páginas com as Core Web Vitals nas categorias "Bom", "Precisa melhorar" e "Ruim" categorias ao longo do tempo.
Identificar páginas com baixo desempenho no Search Console

Embora o PSI seja útil quando você quer testar um URL específico ou o site como um todo, o Search Console pode ajudar a segmentar seus esforços para determinados tipos de página. Isso é útil principalmente quando muitas páginas compartilham temas ou tecnologias em comum e o Search Console consegue identificá-los.

O relatório de Core Web Vitals no Search Console mostra o panorama geral do desempenho do seu site, mas você ainda pode ver detalhes de páginas específicas que precisam de atenção. Com o Search Console, também é possível:

  • Identifique os grupos de páginas individuais que precisam de melhorias e os que proporcionam uma boa experiência do usuário.
  • Receba dados detalhados sobre a performance por URL agrupado por status, métrica e grupos de páginas da Web semelhantes (como páginas de detalhes do produto em um site de e-commerce).
  • Gere relatórios detalhados que agrupam URLs em cada categoria de qualidade da experiência do usuário em dispositivos móveis e computadores.
.

Assim que tiver algumas páginas específicas para analisar, você poderá usar o PSI, conforme explicado anteriormente, para entender melhor os problemas dessas páginas.

Etapa 2: depurar e otimizar

Na etapa 1, você identificou as páginas que precisam de melhorias de desempenho e quais métricas das Core Web Vitals você quer melhorar. Você pode usar as ferramentas do Google para ter mais informações e entender a causa raiz do problema.

  1. Faça uma auditoria no Lighthouse para receber orientações no nível da página
  2. Use a extensão Web Vitals para analisar as Core Web Vitals em tempo real.
  3. Use o painel Performance no Chrome DevTools para depurar problemas de desempenho e testar mudanças no código.

Para orientações mais detalhadas, consulte estes guias:

Descubra oportunidades com o Lighthouse

O PageSpeed Insights executa o Lighthouse para você. No entanto, para o desenvolvimento local, também é possível executar o Lighthouse no Chrome DevTools, o que é útil para validar correções localmente.

Relatório do Lighthouse no Chrome DevTools. O relatório detalha as pontuações em cinco categorias, com foco no "Desempenho" categoria, com os resultados na parte inferior da janela do relatório.
Relatório do Lighthouse

Um ponto importante é confirmar se a auditoria do Lighthouse replica os problemas que você está tentando resolver (por exemplo, problemas de LCP lento ou CLS). Pronto para uso, o Lighthouse só avalia a experiência do usuário durante o carregamento da página. Por ser uma ferramenta de laboratório, ela também exclui FID e INP em favor do TBT.

Quando as métricas do Lighthouse sugerem um problema semelhante ao que você está tentando resolver, a riqueza de informações contidas nas auditorias pode ajudar a identificar problemas e sugerir soluções.

É possível filtrar as auditorias para mostrar apenas as Core Web Vitals do seu interesse para se concentrar nas correções de problemas relacionados a uma métrica específica:

Opções de filtro do Lighthouse para as principais métricas
Opções de filtro do Lighthouse

Para FID e INP, use as auditorias da TBT para identificar problemas que possam afetar essas métricas, mas esteja ciente de que, sem as interações, o Lighthouse pode diagnosticar limitações.

Analise em tempo real com a extensão Web Vitals

A extensão do Chrome Métricas da Web mostra as Core Web Vitals em tempo real durante o carregamento de página e durante a navegação. Por isso, ele pode capturar FID e INP, bem como mudanças de layout que ocorrem após o carregamento. As opções de depuração mostram informações mais detalhadas sobre cada métrica:

Geração de registros do console da extensão de Métricas da Web mostrando a meta de INP, o tipo de evento e o detalhamento
Geração de registros do console da extensão de Métricas da Web

É melhor pensar na extensão Web Vitals como uma ferramenta de verificação para encontrar problemas de desempenho, e não como uma ferramenta de depuração abrangente. Essa é uma função do painel "Performance" no Chrome DevTools.

Detalhar com o painel de desempenho

O painel "Performance" no Chrome DevTools cria um perfil de todo o comportamento da página durante um período registrado.

Rastro do painel de desempenho do Chrome DevTools mostrando o Flame Chart com uma tarefa longa em destaque
Rastro do painel de desempenho do Chrome DevTools

Os principais momentos, como a LCP, são exibidos na faixa "Timings". Clique para mais detalhes.

A faixa Layout Shifts destaca as mudanças de layout. Ao clicar nelas, você vê mais detalhes sobre os elementos que mudaram para depurar a CLS.

Tarefas longas (que podem levar a problemas de FID e INP) também são destacadas com triângulos vermelhos.

Esses recursos, assim como informações em outras partes do painel "Desempenho", podem ajudar a determinar se as correções estão afetando as Core Web Vitals de uma página.

Depurar as Core Web Vitals no campo

As ferramentas de laboratório nem sempre conseguem identificar a causa de todos os problemas nas Core Web Vitals que afetam os usuários. Esse é um dos motivos por que é tão importante coletar seus próprios dados de campo, já que ele leva em conta fatores que os dados de laboratório não podem.

Consulte depurar o desempenho no campo para mais informações.

Etapa 3: monitorar as alterações

Uma coleção de ícones de ferramentas do Google. Da esquerda para a direita, os ícones representam "CrUX no BigQuery", "API CrUX", "API PSI", "web-vitals.js", com "Lighthouse CI". no canto direito.
Ferramentas do Google para monitorar mudanças

Depois de corrigir os problemas, confira se eles têm o efeito necessário e se novos problemas não atrapalham as Core Web Vitals. Isso exige o monitoramento de problemas de desempenho como parte do fluxo de trabalho do desenvolvedor para evitar que esses problemas sejam lançados na produção, além do monitoramento regular dos dados de campo para garantir que isso aconteça.

Monitore as requisições de desempenho em ambientes de integração contínua (CI)

O Lighthouse-CI permite executar automaticamente auditorias do Lighthouse em confirmações de código para evitar regressões de desempenho na inserção de código. Isso pode verificar os tempos de desempenho (que estão sujeitos a variabilidade) ou apenas para as auditorias de desempenho, como uma ferramenta de inspeção para evitar práticas inadequadas no código.

Embora você deva tentar detectar e corrigir todos os problemas de desempenho antes que cheguem à produção, o monitoramento dos dados de campo usando o RUM é essencial para encontrar aqueles que passarem. Existem muitos produtos comerciais de RUM disponíveis que podem ajudar nisso. A biblioteca JavaScript web-vitals pode automatizar a coleta de dados de campo de um site e, opcionalmente, usar esses dados para aprimorar painéis e sistemas de alertas personalizados.

Para sites sem uma solução RUM, você pode usar o painel CrUX como uma análise básica de tendências dos dados de campo. Para sites no CrUX, ela informa o seguinte:

  • Visão geral do site, que segmenta as Core Web Vitals nos tipos de dispositivos móveis e computadores.
  • Tendência histórica por tipo de métrica: uma distribuição das métricas ao longo do tempo para cada versão mensal disponível dos dados do relatório CrUX.
  • Informações demográficas do usuário, que ilustra a distribuição de visualizações de página em toda a origem para usuários em cada grupo demográfico, incluindo dispositivos e tipos de conexão efetiva.
.
O painel CrUX divide LCP, FID e CLS em categorias para computadores e dispositivos móveis, e cada uma mostra a distribuição dos valores em "Bom" e "Precisa melhorar". e "Ruim" limites mínimos do mês anterior.
Painel CrUX

O painel CrUX é baseado no conjunto de dados CrUX do BigQuery, atualizado uma vez por mês. Este é um bom lembrete para verificar regularmente suas Core Web Vitals.

Conclusão

Para garantir uma experiência do usuário rápida e agradável, é preciso priorizar o desempenho e adotar um fluxo de trabalho para garantir o progresso. Com as ferramentas e os processos certos para auditar, depurar e monitorar, é possível criar ótimas experiências do usuário e permanecer dentro dos limites definidos para boas Core Web Vitals.