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

Combine as ferramentas do Google para auditar, melhorar e monitorar seu site de forma eficaz.

Publicado em: 28 de maio de 2020

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

Neste guia, vamos analisar um fluxo de trabalho para melhorar as Core Web Vitals do seu site, mas o ponto de partida desse fluxo depende de você estar coletando seus próprios dados de campo. Onde ela termina pode depender de quais ferramentas do Google você vai achar úteis para diagnosticar e corrigir problemas de experiência do usuário.

As Core Web Vitals são medidas melhor em campo

As Core Web Vitals são projetadas especificamente para medir como os usuários interagem com 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 práticas recomendadas. As ferramentas de laboratório são executadas em determinadas condições predefinidas e podem não refletir as medições reais das Core Web Vitals que seus usuários experimentam.

Por exemplo, o Lighthouse é uma ferramenta de laboratório que executa testes com limitação simulada em um ambiente simulado de computador ou dispositivo móvel. Embora essas simulações de condições de rede e dispositivo mais lentas sejam úteis ao tentar diagnosticar problemas de desempenho, elas são apenas uma pequena parte da grande variedade de condições de rede e recursos de dispositivos. Por isso, talvez não reflitam o que os usuários dos seus sites estão enfrentando.

Ferramentas de laboratório como o Lighthouse também costumam fazer um "carregamento a frio" de uma página da Web como um visitante totalmente novo. Esse costuma ser o carregamento mais lento, mas, na vida real, os visitantes podem ter alguns recursos armazenados em cache se já tiverem acessado o site antes ou quando estiverem navegando por ele. Novos visitantes e ferramentas também podem ter uma experiência diferente com o site devido a banners de cookies ou outros conteúdos apresentados a eles.

Em resumo, embora as ferramentas de 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 de laboratório, como o Lighthouse, para diagnosticar como melhorá-lo. Consulte também a seção Quando usar o Lighthouse.

O Google mede as Core Web Vitals usando o Chrome User Experience Report (CrUX). Esse é 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. Muitas vezes, ele pode informar quando há um problema, mas geralmente não tem dados suficientes para informar por que.

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

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

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

No entanto, talvez você não faça parte de uma grande organização ou de uma que tenha condições de pagar por uma solução de terceiros. Nesses casos, a biblioteca web-vitals do Google vai ajudar você a coletar todos os Web Vitals. No entanto, você será responsável por como esses dados são informados, armazenados e analisados.

Se você já usa o Google Analytics, mas ainda não começou a coletar seus próprios dados de campo, use a biblioteca web-vitals para enviar as Web Vitals coletadas em campo ao Google Analytics e use as exportações do BigQuery do GA4 para gerar relatórios sobre os dados.

Entender as ferramentas do Google

Mesmo que você não esteja coletando seus próprios dados de campo, há várias ferramentas do Google que podem ser úteis para analisar os Core Web Vitals. Antes de estabelecer um fluxo de trabalho, uma visão geral de cada ferramenta pode ajudar você a entender quais delas são as melhores para seu caso.

Chrome User Experience Report (CrUX)

Como mencionado anteriormente, o CrUX é um conjunto de dados de campo público coletados de um segmento de usuários reais do Google Chrome em milhões de sites. Ele inclui as métricas do 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 CrUX estão disponíveis em várias ferramentas do CrUX para acesso programático e ferramentas visuais para uso dos usuários.

Quando usar o CrUX

Mesmo que você colete seus próprios dados de campo, o CrUX ainda é útil. Embora o CrUX represente um subconjunto de usuários do Chrome, é útil comparar os dados de campo do seu site para ver como eles se alinham aos dados do CrUX. Cada uma tem vantagens e desvantagens, o que pode resultar em diferenças. Se você não coleta nenhum dado de campo do seu site, o CrUX é especialmente útil para fornecer uma visão geral de alto nível, desde que seu site esteja representado no conjunto de dados dele.

Você pode usar o CrUX diretamente ou com outra ferramenta (incluindo as mencionadas abaixo). Usar o conjunto de dados do CrUX diretamente, seja com o BigQuery ou a API, é útil para expor dados que não são mostrados em outras ferramentas. Por exemplo, dados de países geralmente não estão disponíveis em outras ferramentas, ou para conferir as métricas adicionais no CrUX, que também não costumam aparecer em outras ferramentas.

Quando não usar o CrUX

O CrUX representa apenas os usuários do Chrome e, mesmo assim, apenas um subconjunto deles. Uma solução completa de RUM pode incluir mais experiências no Chrome e em outros navegadores que oferecem suporte às 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 caso, você precisará coletar seus próprios dados de campo para entender o desempenho do seu site, já que o CrUX não será uma opção. Como alternativa, você precisará depender de dados de laboratório, mas com as limitações de que eles podem não ser representativos, conforme descrito anteriormente.

Como os dados fornecidos pelo CrUX são uma média contínua dos últimos 28 dias, ele não é uma ferramenta ideal durante o desenvolvimento, já que as melhorias levam um tempo considerável para serem refletidas no conjunto de dados do CrUX.

Por fim, como um conjunto de dados público, o CrUX é limitado em relação à quantidade de informações que pode disponibilizar e como esses dados podem ser consultados. Ao capturar seus próprios dados de RUM, você pode 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 com as Core Web Vitals do que os usuários desconectados? Os usuários com uma LCP lenta têm um elemento de LCP específico? Quais interações estão causando valores altos de FID e INP?

PageSpeed Insights (PSI)

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

Quando usar o PSI

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

O PSI também fornece dados do Lighthouse, que dão recomendações úteis para melhorar as Core Web Vitals, se as métricas estiverem alinhadas. Quando não há alinhamento, as recomendações do Lighthouse podem ser menos relevantes.

Como o Lighthouse é executado no servidor, ele pode formar um valor de referência mais consistente do que quando é executado no DevTools.

Quando não usar o PSI

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

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

Da mesma forma, se você tiver apenas dados do CrUX no nível da origem, em vez do URL específico que está sendo testado, isso também vai 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. Os dados de campo no nível da origem ainda são informações muito úteis para resumir o desempenho do site, e as auditorias do Lighthouse podem ajudar, mas é preciso ter mais cuidado nesse caso.

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

Search Console

O Search Console mede o tráfego de pesquisa e o desempenho do seu site, incluindo os Core Web Vitals. Ele está disponível apenas 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 única avaliação de grupo. O Search Console também inclui um relatório de Core Web Vitals com base em dados de campo do CrUX.

Quando usar o Search Console

O Search Console é adequado para desenvolvedores e não desenvolvedores avaliarem o desempenho da pesquisa e da página de maneiras que outras ferramentas do Google não fazem. A apresentação dos dados do CrUX e o agrupamento de páginas por similaridade oferecem 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 similaridade ou se um site não estiver representado no conjunto de dados do 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 falhar em determinadas Core Web Vitals em geral, mas as páginas de exemplo parecerem passar nas mesmas Core Web Vitals. Isso pode acontecer quando um grupo contém páginas de cauda longa ou raramente visitadas que podem demorar mais 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 de aprovação geral do grupo.

Farol

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

O Lighthouse-CI é uma ferramenta relacionada que executa o Lighthouse durante as versões e implantações do projeto para ajudar nos testes de regressão de desempenho. Ele apresenta um relatório do Lighthouse com solicitações de pull e monitora as métricas de performance 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 preparo. O Lighthouse CI é igualmente útil nas fases de build e implantação em 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 é principalmente uma ferramenta de diagnóstico que lista possíveis problemas e práticas recomendadas de um carregamento de página predefinido. As recomendações que ele mostra nem sempre correspondem à performance que os usuários têm.

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 eles cheguem à produção.

As auditorias do Lighthouse também estão disponíveis em "insights" no painel "Performance" do Chrome DevTools, que oferece uma análise mais detalhada do desempenho de uma página.

O painel "Performance" no Chrome DevTools

O Chrome DevTools é uma coleção de ferramentas para desenvolvedores no navegador, incluindo o painel de desempenho. O painel "Performance" é uma ferramenta de laboratório que consiste em dois "modos":

Quando o painel "Performance" é aberto pela primeira vez, uma tela de métricas em tempo real mostra as métricas atuais das Core Web Vitals, com a opção de importar dados de campo do CrUX. Ele é útil como uma visualização "ao vivo" da performance enquanto você interage com a página para tentar descobrir problemas de desempenho, principalmente para problemas pós-carregamento que podem aparecer com as métricas CLS e INP.

Em segundo lugar, o painel "Desempenho" permite que os desenvolvedores capturem um perfil (ou trace) de todas as atividades da página durante o carregamento de página ou um período registrado. Essa visualização 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 de uma página. Ele também inclui insights, semelhantes aos fornecidos pelo Lighthouse.

Quando usar o painel de desempenho

O painel "Desempenho" deve ser usado por desenvolvedores para entender melhor o desempenho de uma página específica.

A visualização de métricas em tempo real pode ser usada para entender rapidamente as características de desempenho atuais da página e também identificar possíveis problemas durante a interação com ela.

A visualização de trace é especialmente útil para depurar problemas de responsividade que afetam a INP. Depois que uma interação com resposta ruim é identificada e repetível, o painel "Performance" pode fornecer uma grande quantidade de dados 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 do JavaScript e o trabalho de renderização.

Quando não usar o painel "Desempenho"

O painel "Desempenho" é uma ferramenta para desenvolvedores que fornece principalmente dados de laboratório, mas com algum contexto de campo do CrUX. Não é um substituto para os dados de campo.

A visualização de trace contém muitas informações de depuração, mas, por isso, pode ser difícil de entender para desenvolvedores iniciantes ou pessoas em funções não relacionadas ao desenvolvimento. No entanto, a visualização de métricas em tempo real que o painel abre resolve isso ao fornecer uma interface mais fácil de usar para quem não precisa de todos os detalhes.

Um fluxo de trabalho em três etapas para garantir que as Core Web Vitals do seu site permaneçam íntegras

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 performance, uma abordagem pode ser:

  1. Avaliar a integridade do site e identificar problemas.
  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 pontos de pintura", a segunda é "Depurar e otimizar" e a terceira é "Monitorar e desenvolver continuamente".
Fluxo de trabalho em três etapas

Etapa 1: avaliar a integridade do site e identificar oportunidades de melhoria

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

  1. Use o PageSpeed Insights para conferir as métricas gerais de experiência das 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, já que o recurso de agrupamento de páginas funciona bem no seu site.
  3. Se você tiver dados de RUM, essa costuma ser a melhor opção para identificar páginas ou segmentos de tráfego específicos com problemas.

Seja analisando dados de campo coletados por você ou dados do CrUX, essa primeira etapa é fundamental. Se você não estiver coletando dados de campo, os dados do CrUX podem ser suficientes para orientar você, desde que seu site esteja representado no conjunto de dados.

Analisar o desempenho do site com o PageSpeed Insights

Como o PageSpeed Insights mostra os dados do CrUX para as Core Web Vitals de um URL. Cada uma das Core Web Vitals é exibida separadamente, agrupando cada uma delas nos limites "Bom", "Precisa de melhorias" e "Ruim" dos últimos 28 dias.
Analisar a performance do site com o PageSpeed Insights

O PageSpeed Insights mostra os dados do CrUX que cobrem os últimos 28 dias de dados da experiência do usuário no 75º percentil. Isso significa que, se 75% das experiências do usuário atenderem ao limite definido para uma determinada métrica, a experiência será considerada "boa".

Se você tiver uma página específica em mente para analisar a performance, use essa página. Para ter uma visão geral de um site ao começar a otimização, comece pela página inicial, que costuma ser uma das mais acessadas em muitos sites.

No início, concentre-se na seção O que seus usuários reais estão enfrentando do PSI. Você vai encontrar até quatro visualizações dos dados: para dispositivos móveis e computadores do URL inserido e de toda a origem. Compare as duas e veja as diferenças. Os dispositivos móveis geralmente têm um desempenho inferior ao dos computadores, porque têm mais restrições de recursos e operam em condições de rede potencialmente menos estáveis. Se os dados do URL e da origem forem significativamente diferentes, tente entender o motivo: as páginas iniciais geralmente são as primeiras páginas visitadas (ou seja, uma página de destino), então podem ser mais lentas do que a origem, já que os usuários sofrem o impacto total de um cache do navegador não preparado. As páginas seguintes provavelmente serão carregadas mais rápido, 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 INP), além das métricas de diagnóstico TTFB e FCP. Alguma das Core Web Vitals está falhando e por quanto? Isso vai indicar onde concentrar seus esforços.

Entenda as relações entre esses números, principalmente para a LCP. Se a LCP estiver lenta, como neste exemplo, observe o TTFB e a FCP, que são marcos para essa métrica. Neste exemplo, temos um TTFB de 1,8 segundo, o que vai dificultar muito o cumprimento do limite recomendado de 2,5 segundos para uma boa LCP. Isso sugere 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 para otimizar o TTFB para mais informações. A FCP leva mais um segundo, o que também pode indicar redes mais lentas. Neste exemplo, a LCP não demora muito depois da FCP, o que sugere que o recurso de LCP está bem otimizado quando a página é carregada. O CrUX agora também mostra mais informações de diagnóstico em tipos de recursos e subpartes, o que também ajuda a diagnosticar problemas de LCP.

Para CLS, confira as pontuações de CLS do CrUX e do Lighthouse para ver se é um problema de CLS de carregamento (que o Lighthouse vai detectar e informar) ou um problema de CLS pós-carregamento que o Lighthouse não vai detectar. Para mais informações, consulte o guia sobre como otimizar a CLS.

Para responsividade, confira as pontuações de INP. Confira as auditorias de TBT no Lighthouse para ver se há muito processamento de JavaScript durante o carregamento inicial da página, o que provavelmente vai afetar a INP. A INP pode ser uma métrica difícil de melhorar. Por isso, consulte o guia de otimização da INP para mais informações.

Identificar páginas com desempenho ruim no Search Console

Relatório de Core Web Vitals no Search Console. O relatório é dividido nas categorias "Computador" e "Dispositivo móvel", com gráficos de linha que detalham a distribuição de páginas com Core Web Vitals nas categorias "Bom", "Melhorias necessárias" e "Ruim" ao longo do tempo.
Identificar páginas com desempenho ruim no Search Console

O PSI é útil quando você tem um URL específico que quer testar ou o site como um todo, mas o Search Console pode ajudar a direcionar seus esforços para tipos específicos de páginas. Isso é útil principalmente se muitas páginas compartilham temas ou tecnologias comuns e o Search Console consegue identificá-los.

O Relatório Core Web Vitals no Search Console mostra o panorama geral do desempenho do seu site, mas você ainda pode analisar páginas específicas que requerem atenção. Com o Search Console, você também pode:

  • Identifique grupos de páginas individuais que precisam de melhorias e aqueles que oferecem uma boa experiência do usuário.
  • Receba dados granulares sobre o desempenho por URL agrupados 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).
  • Receba relatórios detalhados que agrupam URLs em cada categoria de qualidade da experiência do usuário para dispositivos móveis e computadores.

Depois de identificar algumas páginas específicas para analisar, use o PSI, conforme explicado anteriormente, para entender melhor os problemas delas.

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. Use as ferramentas do Google para receber mais informações e entender a causa raiz para identificar o problema.

  1. Confira as auditorias do Lighthouse para receber orientações gerais sobre a página.
  2. Use a visualização de métricas em tempo real do painel "Desempenho" para analisar as Core Web Vitals em tempo real.
  3. Use o rastreamento do painel "Desempenho" 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ê. Também é possível executar o Lighthouse no Chrome DevTools, o que é útil para validar correções localmente, embora o painel de desempenho (abordado a seguir) seja uma ferramenta mais abrangente para identificar e corrigir problemas de desempenho localmente.

Um ponto importante é validar se a auditoria do Lighthouse replica os problemas que você está tentando resolver (por exemplo, LCP lento ou problemas de CLS). Por padrão, o Lighthouse avalia apenas a experiência do usuário durante o carregamento da página. Como é uma ferramenta de laboratório, ela também exclui a 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 nas auditorias pode ajudar a identificar problemas e sugerir soluções.

É possível filtrar as auditorias para mostrar apenas as Core Web Vitals que você quer focar 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 a INP, use as auditorias de TBT para identificar problemas que podem afetar essas métricas, mas lembre-se de que, sem interações, o Lighthouse tem limitações no que pode diagnosticar.

Analisar em tempo real com a tela de métricas em tempo real do Chrome DevTools

A tela de métricas em tempo real do Chrome DevTools no painel "Performance" mostra as Core Web Vitals em tempo real durante o carregamento da página e enquanto você navega por ela. Por isso, ela pode capturar a INP e as mudanças de layout que ocorrem após o carregamento. Também é possível ver informações mais detalhadas sobre cada métrica:

Visualização de métricas em tempo real no painel "Performance" do Chrome DevTools
Visualização de métricas em tempo real no painel "Performance" do Chrome DevTools

Essa visualização oferece muitas informações úteis para identificar problemas de desempenho e pode até mesmo extrair informações de campo do CrUX. Para mais informações, você pode detalhar com um trace.

Analisar em detalhes com o painel de desempenho

O painel "Desempenho" no Chrome DevTools permite gravar um perfil (ou rastro) 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 destacada
Trace do painel de desempenho do Chrome DevTools

Os insights de performance estão disponíveis no painel lateral Insights. Isso também mostra as métricas das Core Web Vitals com os valores de campo delas, quando disponíveis.

A faixa Mudanças de layout destaca as mudanças de layout. Clique nelas para ver mais detalhes sobre os elementos que mudaram para depurar a CLS.

Os principais tempos, como a LCP, são mostrados em Tempos, na parte de baixo do trace. Clique neles para ver mais detalhes.

As tarefas longas (que podem levar a problemas de INP) também são destacadas com triângulos vermelhos no Flame Chart.

Esses recursos, assim como as informações em outras partes do painel de desempenho, podem ajudar você a determinar se as correções estão tendo algum efeito nas Core Web Vitals de uma página.

Depurar as Core Web Vitals em campo

As ferramentas de laboratório nem sempre conseguem identificar a causa de todos os problemas das Core Web Vitals que afetam os usuários. Esse é um dos motivos pelos quais é tão importante coletar seus próprios dados de campo, já que eles consideram fatores que os dados de laboratório não conseguem.

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

Etapa 3: monitorar mudanças

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" na extrema direita.
Ferramentas do Google para monitorar mudanças

Depois de corrigir os problemas, verifique se as correções tiveram o efeito desejado e se novos problemas não estão afetando as Core Web Vitals. Isso requer o monitoramento de problemas de desempenho como parte do fluxo de trabalho do desenvolvedor para evitar que eles sejam lançados na produção, além do monitoramento regular dos dados de campo para garantir que isso aconteça.

Monitorar solicitações de desempenho em ambientes de integração contínua (CI)

Com o Lighthouse-CI, é possível executar automaticamente auditorias do Lighthouse em commits de código para evitar que regressões de desempenho entrem no código. Isso pode verificar os tempos de desempenho (que estão sujeitos à variabilidade) ou apenas as auditorias de desempenho, como uma ferramenta de linting para evitar práticas ruins no código.

Embora você deva tentar detectar e corrigir todos os problemas de desempenho antes que eles cheguem à produção, monitorar os dados de campo usando o RUM é essencial para encontrar os que passam despercebidos. Há muitos produtos comerciais de RUM disponíveis que podem ajudar com isso. A biblioteca JavaScript web-vitals pode automatizar a coleta de dados de campo de um site e, se quiser, usar esses dados para criar painéis personalizados e sistemas de alerta.

Para sites sem uma solução de RUM, use as várias ferramentas do CrUX como uma análise de tendência básica dos dados de campo.

Conclusão

Para garantir experiências rápidas e agradáveis para os usuários, é preciso ter uma mentalidade que priorize o desempenho e adotar um fluxo de trabalho que garanta 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 as Core Web Vitals.