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.

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 mostrar um fluxo de trabalho para melhorar as Core Web Vitals do seu site, mas o início desse fluxo depende de você coletar seus próprios dados de campo. O fim pode depender de quais ferramentas do Google você achar ú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 foram projetadas especificamente para medir a experiência dos usuários no 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 desempenho e práticas recomendadas. As ferramentas baseadas em laboratório são executadas em determinadas condições predefinidas e podem não refletir as medições das Core Web Vitals que os usuários encontram na vida real.

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 para diagnosticar problemas de desempenho, elas são apenas uma pequena parte da grande variedade de condições de rede e recursos do dispositivo. Por isso, elas 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 frio" de uma página da Web como um visitante totalmente novo. Essa é geralmente a carga mais lenta, mas, na vida real, os visitantes podem ter alguns recursos em cache se já visitaram o site antes ou quando navegam pelo site. Os novos visitantes e as ferramentas também podem ter uma experiência diferente no site com banners de cookies ou outros conteúdos.

Em resumo, embora as ferramentas baseadas em laboratório possam indicar possíveis problemas de desempenho e ajudar na depuração e iteração, elas não representam quantos visitantes realmente usam seu site. Use dados de campo para medir o desempenho 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 pelo Chrome User Experience Report (CrUX). Esse é um conjunto de dados públicos coletados 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 a performance do site no campo é o 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 vão medir as Core Web Vitals (e outras métricas de performance) e geralmente oferecem várias ferramentas para analisar os dados resultantes. Em organizações grandes com recursos significativos, esse pode ser o método preferido.

No entanto, talvez você não faça parte de uma organização grande ou que tenha os recursos para pagar 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ê é responsável por como esses dados são informados, armazenados e analisados.

Se você já usa o Google Analytics, mas não começou a coletar seus próprios dados de campo, talvez seja uma 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.

Entenda 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 na análise dos Core Web Vitals. Antes de estabelecer um fluxo de trabalho, uma visão geral de cada ferramenta pode ajudar você a entender quais ferramentas podem ou não ser as melhores para você.

Chrome User Experience Report (CrUX)

Como mencionado anteriormente, o CrUX é um conjunto de dados de campo público coletado 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.

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 URL ou no nível da origem, desde que um URL ou origem tenha amostras suficientes no conjunto de dados do CrUX. Os dados do BigQuery também podem ser visualizados no Painel do Crux, permitindo que os sites analisem as tendências históricas.

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 ver como ele se alinha aos dados do CrUX. Cada uma delas tem vantagens e desvantagens, o que pode resultar em diferenças. Se você não coletar nenhum dado 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 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, os dados de nível de país geralmente não estão disponíveis em outras ferramentas ou para ver as métricas adicionais no CrUX, que geralmente não são exibidas 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. Nesse caso, você vai precisar coletar seus próprios dados de campo para entender o desempenho do seu site, já que o CrUX não é uma opção. Como alternativa, você vai precisar depender dos dados de laboratório, mas com as limitações de que eles podem não ser representativos, conforme descrito anteriormente.

Como os dados do CrUX são uma média móvel dos 28 dias anteriores, ele não é uma ferramenta ideal durante o desenvolvimento, porque leva 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. A captura dos seus próprios dados do RUM permite 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 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 laboratório do CrUX e 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, para usuários de dispositivos móveis e computadores. Ele é uma boa opção para ter uma visão geral inicial das Core Web Vitals para uma página ou site. Também é possível conferir dados das Core Web Vitals de outros sites, como os dos concorrentes.

O PSI também fornece dados do Lighthouse, que oferecem 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 uma referência 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, porque só é possível 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, e não o URL específico que está sendo testado, isso também limita a utilidade de correlacionar os dados de campo no nível da origem aos 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 como um resumo do 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 do 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 Métricas da Web principais 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 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 única avaliação em grupo. 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 que não são desenvolvedores para avaliar a pesquisa e a performance da página de maneiras que outras ferramentas do Google não têm. A apresentação dos dados do CrUX e o agrupamento de páginas por semelhança oferecem insights novos 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 ferramentas de terceiros diferentes que agrupam páginas por semelhança 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 de um grupo têm características diferentes do restante do grupo. Por exemplo, se o grupo falhar em determinadas Core Web Vitals, mas as páginas de exemplo parecerem passar nas mesmas Core Web Vitals. 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 pull e rastreia as 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 é útil de maneira semelhante nas fases de build e implantação para ambientes de teste e de produção, em que testes de regressão de desempenho são necessários para preservar boas experiências do usuário.

Quando não usar o Lighthouse

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

Painel "Performance" no Chrome DevTools

O Chrome DevTools é um conjunto 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 "Métricas ao vivo" mostra a métrica atual das Core Web Vitals, com a capacidade de importar dados de campo do CrUX. Ela é útil como uma visualização "em tempo real" 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.

Segundo, o painel de desempenho permite que os desenvolvedores capturem um perfil (ou rastreamento) de toda a atividade da página durante o carregamento da 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.

Quando usar o painel de desempenho

O painel "Performance" deve ser usado pelos desenvolvedores para ter insights detalhados sobre a performance 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 detectar possíveis problemas à medida que a página é usada.

A visualização de rastros é útil principalmente para depurar problemas de capacidade de resposta que afetam o INP. Depois que uma interação com resposta ruim é identificada e repetida, 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é as pilhas de chamadas do JavaScript e o trabalho de renderização.

Quando não usar o painel de desempenho

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

A visualização de rastros 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 sejam desenvolvedores. No entanto, a visualização de métricas em tempo real que o painel abre resolve esse problema, fornecendo 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 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 performance, uma abordagem pode ser:

  1. Avalie a integridade do site e identifique os pontos 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 pontos de pintura", a segunda é "Depurar e otimizar", e a terceira é "Monitorar e desenvolvimento contínuo".
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 da 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, em que o recurso de agrupamento de páginas funciona bem para seu site.
  3. Se você tiver dados do RUM, essa é geralmente a melhor opção para identificar páginas ou segmentos de tráfego específicos com problemas.

Essa primeira etapa é vital, seja para analisar dados de campo coletados por você ou dados do CrUX. 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 retrata os dados do CrUX para as Core Web Vitals de um URL. Cada uma das Core Web Vitals é mostrada separadamente, agrupando cada uma delas nos limites "Boa", "Melhorias necessárias" e "Ruim" dos últimos 28 dias.
Analisar o desempenho do site com o PageSpeed Insights

O PageSpeed Insights mostra os dados do CrUX cobrindo os últimos 28 dias de dados de experiência do usuário na 75ª 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".

Se você tem uma página específica em mente para analisar a performance, use essa. Para ter uma visão geral de um site quando você começar a otimização, comece pela página inicial, que geralmente é uma das páginas mais acessadas.

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: dispositivos móveis e computadores para o URL inserido e toda a origem. Compare as duas e veja as diferenças. O dispositivo móvel geralmente tem um desempenho inferior ao do computador, porque é um dispositivo com mais restrições de recursos que opera em condições de rede potencialmente menos estáveis. Se os dados de origem e do URL forem significativamente diferentes, tente entender o motivo: as páginas iniciais geralmente são as primeiras a serem visitadas (ou seja, uma página de destino), então podem ser mais lentas do que os usuários de origem que recebem todo o impacto de um cache de navegador não inicializado. As páginas seguintes provavelmente vão carregar mais rápido, já que os recursos compartilhados vão ser 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 TTFB e FCP de diagnóstico. Alguma das Core Web Vitals está com falhas? Se sim, em quanto? Isso indica onde concentrar seus esforços.

Entenda as relações entre esses números, principalmente para a LCP. Se a LCP for lenta, como neste exemplo, analise o TTFB e a FCP, que são marcos para essa métrica. Neste exemplo, temos um TTFB de 1,8 segundo, o que dificulta muito o cumprimento do 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 de HTML. Consulte o guia de otimização do 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 é muito depois da FCP neste exemplo, sugerindo que o recurso de LCP está bem otimizado quando a 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 "Otimizar CLS".

Para saber a capacidade de resposta, consulte as pontuações de INP. Analise as auditorias de TBT no Lighthouse para saber se há muito processamento de JavaScript durante o carregamento inicial da página, o que provavelmente afeta a 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 baixa performance no Search Console

Relatório do Core Web Vitals no Search Console. O relatório é dividido em categorias de computador e dispositivo móvel, com gráficos de linhas detalhando a distribuição de páginas com as Core Web Vitals nas categorias "Bom", "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 segmentar seus esforços para tipos específicos de páginas. Isso é útil principalmente quando muitas páginas compartilham temas ou tecnologias em comum e o Search Console consegue identificá-los.

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

  • Identifique os grupos de páginas individuais que precisam de melhorias e os que proporcionam uma boa experiência ao 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 de produtos 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.

Depois de analisar algumas páginas específicas, você pode 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 também quais das 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. Execute uma auditoria do Lighthouse para receber orientações no nível da página
  2. Use a visualização de métricas ao vivo do painel "Desempenho" para analisar as Core Web Vitals em tempo real.
  3. Use o rastreamento do painel de 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ê. 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 divide as pontuações em cinco categorias, com foco na categoria "Performance", e os resultados na parte de baixo da janela.
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 lenta ou CLS). Por padrão, o Lighthouse só avalia 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 de seu interesse e se concentrar em correções de problemas relacionados a uma métrica específica:

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

Para o 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 é limitado em quanto pode diagnosticar.

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

A tela de métricas ao vivo do Chrome DevTools no painel "Performance" mostra as Core Web Vitals em tempo real durante o carregamento da página e durante a navegação. Por isso, ele pode capturar INP e mudanças de layout que ocorrem após o carregamento. Também é possível conferir 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 de desempenho do Chrome DevTools

Essa visualização oferece muitas informações úteis para identificar problemas de desempenho, mas você pode detalhar ainda mais com um rastreamento.

Acessar detalhes com o painel "Performance"

O painel de desempenho no Chrome DevTools permite registrar um perfil (ou rastreamento) de todo o comportamento da página durante um período registrado.

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

Os tempos principais, como o LCP, são mostrados na faixa "Tempos". Clique neles para saber 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 causar problemas de 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 identificam a causa de todos os problemas das Core Web Vitals que afetam seus usuários. Essa é uma das razões pelas quais é tão importante coletar seus próprios dados de campo, já que eles consideram fatores que os dados de laboratório não podem.

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

Depois de corrigir os problemas, é importante garantir que eles tenham o efeito necessário e que novos problemas não atrapalhem 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.

Monitorar 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 que regressões de desempenho entrem no 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 detectar e corrigir todos os problemas de desempenho antes que eles cheguem à produção, é essencial monitorar seus dados de campo usando o RUM para encontrar os que passam despercebidos. Há muitos produtos comerciais do 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 criar painéis e sistemas de alerta personalizados.

Para sites sem uma solução RUM, use o painel do CrUX como uma análise básica de tendências dos dados de campo. Ele informa o seguinte para sites no CrUX:

  • Visão geral do site, que segmenta as Core Web Vitals em tipos de dispositivos móveis e computadores.
  • Tendência histórica por tipo de métrica, que é uma distribuição de 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, INP e CLS em categorias para computadores e dispositivos móveis. Cada categoria mostra a distribuição dos valores nos limites "Bom", "Precisa melhorar" e "Ruim" no mês anterior.
Painel CrUX

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

Conclusão

Para garantir experiências rápidas e agradáveis para os usuários, é preciso ter uma mentalidade de foco na performance e adotar um fluxo de trabalho para garantir o progresso. Com as ferramentas e os processos certos para auditar, depurar e monitorar, você pode criar ótimas experiências do usuário e ficar dentro dos limites definidos para boas Core Web Vitals.