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 com eficiência.

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, capacidade de resposta à entrada do usuário e estabilidade do layout.

Neste guia, vamos explicar um fluxo de trabalho para melhorar as Core Web Vitals do seu site. No entanto, o início desse fluxo depende de você estar coletando seus próprios dados de campo. O fim do processo depende de quais ferramentas do Google você considera úteis para diagnosticar e corrigir problemas de experiência do usuário.

As Core Web Vitals são melhor medidas no 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. Ferramentas baseadas em laboratório, como o Lighthouse, são ferramentas de diagnóstico para destacar possíveis problemas de performance e práticas recomendadas. As ferramentas baseadas em laboratório são executadas em condições específicas e predefinidas e podem não refletir as medições reais das Principais métricas da Web que seus usuários têm.

Por exemplo, o Lighthouse é uma ferramenta baseada em 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 performance, elas são apenas uma pequena parte da grande variedade de condições de rede e recursos de dispositivos. Portanto, elas podem não refletir o que os usuários estão vivenciando 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. Esse é geralmente o carregamento mais lento, mas, na vida real, os visitantes podem ter alguns recursos em cache se já tiverem acessado o site antes ou enquanto navegam por ele. Novos visitantes e ferramentas também podem ter uma experiência diferente no site com banners de cookies ou outros conteúdos apresentados a eles.

Em resumo, embora as ferramentas baseadas em laboratório possam indicar possíveis problemas de performance e ajudar na depuração e iteração, elas talvez não representem a experiência real de muitos visitantes do seu site. Use dados de campo para medir o desempenho no mundo real e ferramentas baseadas em laboratório, como o Lighthouse, para diagnosticar como melhorar. Consulte também a seção Quando usar o Lighthouse.

O Google mede as Core Web Vitals com o Chrome User Experience Report (CrUX). É um conjunto de dados públicos coletados de usuários reais do Chrome. É a base de muitas ferramentas do Google e de terceiros que informam as Core Web Vitals de um site.

No entanto, a CrUX tem limitações. Ele geralmente informa quando há um problema, mas muitas vezes não tem dados suficientes para informar por quê.

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

O melhor conjunto de dados para melhorar a performance do site no 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 a sua própria.

As soluções pagas quase certamente medem as Core Web Vitals (e outras métricas de performance) e geralmente oferecem várias 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 uma solução de terceiros. Nesses casos, a biblioteca web-vitals do Google ajuda você a coletar todas as métricas vitais da Web. No entanto, você é responsável pela forma 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, talvez seja possível 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.

Conheça as ferramentas do Google

Independente de você estar coletando seus próprios dados de campo, há várias ferramentas do Google que podem ser úteis para analisar as Core Web Vitals. Antes de estabelecer um fluxo de trabalho, uma visão geral de cada ferramenta pode ajudar você a entender quais são as melhores opções para você.

Chrome User Experience Report (CrUX)

Como mencionado anteriormente, 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 métricas do Core Web Vitals e outras métricas para sites com tráfego suficiente.

A 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 da CrUX. Os dados do CrUX estão disponíveis em várias ferramentas do CrUX para acesso programático e ferramentas visuais para uso por usuários.

Quando usar a 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 coletar nenhum dado de campo do 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.

Você pode usar a CrUX diretamente ou com outra ferramenta, incluindo as mencionadas abaixo. Usar o conjunto de dados do CrUX diretamente, 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. Também é possível ver as métricas adicionais no CrUX, que também não aparecem em outras ferramentas.

Quando não usar a CrUX

A CrUX representa apenas 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 das Web Vitals.

Sites que não recebem tráfego suficiente não são representados no conjunto de dados do CrUX. Se for esse 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ê pode usar dados de laboratório, mas com as limitações de que eles podem não ser representativos, conforme descrito anteriormente.

Como os dados fornecidos pela CrUX são uma média móvel dos últimos 28 dias, ela não é uma ferramenta ideal durante o desenvolvimento, já que leva um tempo considerável para que as melhorias sejam refletidas no conjunto de dados da CrUX.

Por fim, como um conjunto de dados público, a CrUX tem limitações quanto à quantidade de informações que pode disponibilizar e como esses dados podem ser consultados. Ao capturar seus próprios dados de RUM, você coleta mais detalhes (por exemplo, o elemento LCP) e segmenta os dados para identificar problemas. Os usuários conectados têm Core Web Vitals melhores ou piores do que os desconectados? Os usuários com uma LCP lenta têm um elemento 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 essas 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 visualizar dados de Core Web Vitals de outros sites, como os da concorrência.

O PSI também fornece dados do Lighthouse, que oferece recomendações úteis para melhorar as Core Web Vitals, se as métricas estiverem alinhadas. Quando isso não acontece, 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 a execução 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 da CrUX só estão 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, já que só pode mostrar os dados do laboratório do Lighthouse nesses casos.

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. Ter os dados de campo no nível da origem ainda é muito útil como um resumo da performance 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 do laboratório do Lighthouse, as recomendações do Lighthouse podem ter valor limitado. Isso pode acontecer principalmente com problemas de CLS após o 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 a performance do seu site, incluindo as Core Web Vitals. Ele só está disponível para proprietários de sites que confirmaram a propriedade.

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 do Core Web Vitals com base em dados de campo do CrUX.

Quando usar o Search Console

O Search Console é adequado para desenvolvedores e pessoas que não trabalham nessa área. Ele avalia 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 um novo insight sobre como as melhorias de performance 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 diferentes ferramentas de terceiros 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 não atender a determinadas Core Web Vitals no geral, mas as páginas de exemplo parecem passar nas mesmas Core Web Vitals. Isso pode acontecer quando um grupo contém uma cauda longa ou páginas 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 a performance 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 de páginas.

O Lighthouse-CI é uma ferramenta relacionada que executa o Lighthouse durante builds e implantações de projetos para ajudar com testes de regressão de performance. Ele apresenta um relatório do Lighthouse com solicitações de pull e rastreia métricas de desempenho ao longo do tempo.

Quando usar o Lighthouse

O Lighthouse é excelente para encontrar oportunidades de melhoria de performance durante o desenvolvimento em ambientes locais e de teste. O Lighthouse CI também é útil nas fases de build e implantação em ambientes de preparação 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 é um substituto para 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 apresenta nem sempre correspondem à performance dos seus usuários.

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

As auditorias fornecidas pelo 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 de desenvolvimento 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 a métrica atual de Core Web Vitals, com a capacidade de importar dados de campo da CrUX. É útil como uma visualização "ao vivo" do desempenho 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 "Performance" permite que os desenvolvedores capturem um perfil (ou rastreamento) de toda a atividade da página durante o carregamento ou um período gravado. Essa visualização oferece insights detalhados sobre tudo o que ela observa 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 performance

O painel "Performance" deve ser usado por desenvolvedores para ter insights detalhados sobre a performance de uma página específica.

A visualização de métricas dinâmicas pode ser usada para entender rapidamente as características de desempenho atuais da página e também identificar possíveis problemas à medida que a página é acessada.

A visualização de rastreamento é especialmente útil para depurar problemas de capacidade de resposta que afetam o INP. Depois que uma interação com resposta ruim é identificada e repetível, o painel "Performance" pode fornecer muitos dados sobre o que está acontecendo no navegador para ajudar a entender o problema, desde o bloqueio da linha de execução principal até pilhas de chamadas JavaScript e trabalho de renderização.

Quando não usar o painel "Performance"

O painel "Performance" é uma ferramenta para desenvolvedores que fornece principalmente dados de laboratório, mas com algum contexto de campo do CrUX. Ele não substitui os dados de campo.

A visualização de rastreamento contém muitas informações de depuração, mas, por isso, pode ser difícil de entender para desenvolvedores iniciantes ou pessoas que não trabalham nessa área. 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 de três etapas para garantir que as Core Web Vitals do seu site permaneçam boas

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. Avalie a integridade do site e identifique os pontos problemáticos.
  2. Depure e otimize.
  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 diz "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 de três etapas

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

É melhor começar com 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. O recurso de agrupamento de páginas funciona bem para seu site.
  3. Se você tiver dados de RUM, essa será a melhor opção para identificar páginas ou segmentos de tráfego específicos com problemas.

Se você analisa dados de campo coletados por você ou dados da CrUX, essa primeira etapa é vital. 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 a performance 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 é mostrada separadamente, agrupando cada uma nos limites "Boa", "Melhorias necessárias" e "Ruim" dos últimos 28 dias.
Analisar a performance do site com o PageSpeed Insights

O PageSpeed Insights mostra os dados do CrUX dos últimos 28 dias de 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 otimizar, comece pela página inicial, já que ela geralmente é uma das mais acessadas em muitos sites.

Primeiro, concentre-se na seção O que seus usuários reais estão vivenciando do PSI. Você vai encontrar até quatro visualizações dos dados: dispositivos móveis e computadores para o URL inserido e toda a origem. Compare e veja as diferenças. Os dispositivos móveis geralmente têm um desempenho menor do que os computadores porque são aparelhos com mais restrições de recursos e que operam em condições de rede potencialmente menos estáveis. Se os dados de URL e origem forem muito diferentes, tente entender o motivo: as páginas iniciais geralmente são as primeiras páginas visitadas (ou seja, uma página de destino) e podem ser mais lentas do que a origem. Os usuários sofrem todo o impacto de um cache do navegador não inicializado. 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.

A PSI também mostra todas 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? Se sim, em quanto? Isso vai indicar onde concentrar seus esforços.

Entenda as relações entre esses números, principalmente para o LCP. Se o LCP for lento, como neste exemplo, analise o TTFB e o FCP, que são marcos dessa métrica. Neste exemplo, temos um TTFB de 1,8 segundo, o que dificulta muito o atendimento ao limite recomendado de 2,5 segundos para um bom 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 de otimização do TTFB para mais informações. O FCP leva mais um segundo além disso, o que novamente pode ser indicativo de redes mais lentas. Neste exemplo, a LCP não ocorre muito depois da FCP, o que sugere que o recurso de LCP é bem otimizado quando a página é carregada. Agora, a CrUX 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 o CLS, analise as pontuações do CrUX e do Lighthouse para ver se o problema é de CLS de carregamento (que o Lighthouse vai detectar e aconselhar) ou de CLS pós-carregamento, que o Lighthouse não detecta. Para mais informações, consulte o guia de otimização do CLS.

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

Identificar páginas com desempenho ruim no Search Console

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

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

O relatório Core Web Vitals no Search Console mostra o panorama geral da performance do seu site, mas você ainda pode analisar páginas específicas que precisam de 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 a performance 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 ter algumas páginas específicas para analisar, use 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 performance e quais das métricas das Core Web Vitals você quer melhorar. Use as ferramentas do Google para entender a causa raiz e identificar o problema.

  1. Consulte as auditorias do Lighthouse para receber orientações de alto nível sobre a página.
  2. Use a visualização de métricas em tempo real do Painel de performance para analisar as Core Web Vitals em tempo real.
  3. Use o rastreamento do painel "Performance" 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. No entanto, o painel de desempenho (abordado a seguir) é 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 o INP em favor do TBT.

Quando as métricas do Lighthouse sugerem um problema semelhante ao que você está tentando resolver, a grande quantidade 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 e se concentrar em correções para problemas relacionados a uma métrica específica:

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

Para a INP, use as auditorias de TBT para identificar problemas que podem afetar essas métricas. No entanto, sem interações, o Lighthouse tem uma capacidade limitada de diagnóstico.

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 e a navegação em uma página. Por isso, ele pode capturar o 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 fornece muitas informações úteis para ajudar a identificar problemas de desempenho e pode até mesmo extrair informações de campo do CrUX. Para mais informações, faça um detalhamento com um rastreamento.

Detalhar com o painel de performance

O painel "Performance" do Chrome DevTools permite gravar um perfil (ou rastreamento) de todo o comportamento da página durante um período gravado.

Rastreamento do painel de performance do Chrome DevTools mostrando um gráfico de chamas com uma tarefa longa destacada
Rastreamento do painel de performance do Chrome DevTools

Os insights de performance estão disponíveis no painel lateral Insights. Isso também mostra as métricas do Core Web Vitals e os valores dos campos quando disponíveis.

O rastreamento de mudanças de layout destaca essas mudanças. Ao clicar nelas, você tem mais detalhes sobre os elementos que mudaram para depurar a CLS.

Os tempos principais, como o LCP, são mostrados em Tempos, disponível na parte de baixo do rastreamento. Clique neles para saber mais detalhes.

As tarefas longas (que podem causar problemas de INP) também são destacadas com triângulos vermelhos no gráfico de chamas.

Esses recursos, assim como as informações em outras partes do painel Performance, podem ajudar você 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 das Core Web Vitals que afetam seus usuários. Por isso, é 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 a performance no campo para mais informações.

Etapa 3: monitorar as mudanças

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

Depois de corrigir os problemas, verifique se eles tiveram o efeito necessário e se novos problemas não prejudicam suas Core Web Vitals. Isso exige o monitoramento de problemas de performance como parte do fluxo de trabalho do desenvolvedor para evitar que eles sejam lançados na produção, além de monitorar os dados de campo regularmente 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 auditorias do Lighthouse automaticamente em commits de código para evitar regressões de desempenho. Isso pode verificar os tempos de performance (que estão sujeitos a variabilidade) ou apenas as auditorias de performance, como uma ferramenta de linting para evitar práticas inadequadas no código.

Embora o objetivo seja detectar e corrigir todos os problemas de desempenho antes que eles cheguem à produção, é essencial monitorar os dados de campo usando o RUM para encontrar os que passarem 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, opcionalmente, usar esses dados para alimentar 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 básica de tendências dos dados de campo.

Conclusão

Para garantir experiências rápidas e agradáveis aos usuários, é preciso ter uma mentalidade de priorização da performance 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 ficar dentro dos limites definidos para boas Core Web Vitals.