Agora suas ferramentas para desenvolvedores favoritas podem medir as Core Web Vitals.
A iniciativa Métricas da Web anunciada recentemente oferece orientações unificadas sobre indicadores de qualidade essenciais para que todos os sites ofereçam uma ótima experiência do usuário na Web. Temos o prazer de anunciar que todas as ferramentas mais usadas do Google para desenvolvedores da Web agora são compatíveis com a medição das Core Web Vitals, o que ajuda a diagnosticar e corrigir problemas de experiência do usuário com mais facilidade. Isso inclui o Lighthouse, o PageSpeed Insights, o Chrome DevTools, o Search Console, a ferramenta de medição da web.dev, a extensão de Métricas da Web do Chrome e uma nova (!) API do Chrome UX Report.
Agora que a Pesquisa Google inclui as Core Web Vitals como base para avaliar a experiência na página, é importante que essas métricas estejam disponíveis e possam ser transformadas em ações.
Para começar sua jornada otimizando a experiência do usuário com as Core Web Vitals, siga este fluxo de trabalho:
- Use o novo relatório de Core Web Vitals do Search Console para identificar grupos de páginas que precisam de atenção (com base nos dados de campo).
- Depois de identificar páginas que precisam de trabalho, use o PageSpeed Insights (com a tecnologia Lighthouse e o Chrome UX Report) para diagnosticar problemas de laboratório e campo em uma página. O PageSpeed Insights (PSI) está disponível no Search Console, ou você pode inserir um URL diretamente no PSI.
- Tudo pronto para otimizar seu site localmente no laboratório? Use o Lighthouse e o Chrome DevTools para medir as Core Web Vitals e receber orientações práticas sobre exatamente o que corrigir. A extensão do Chrome "Métricas da Web" oferece uma visualização em tempo real das métricas no computador.
- Precisa de um painel personalizado das Core Web Vitals? Use o Painel do CrUX atualizado ou a nova API Chrome UX Report para dados de campo ou a API PageSpeed Insights para dados de laboratório.
- Procurando orientação? O web.dev/measure pode medir sua página e mostrar um conjunto priorizado de guias e codelabs para otimização, usando dados de PSI.
- Por fim, use o Lighthouse CI em solicitações de envio para garantir que não haja regressões nas Core Web Vitals antes de implantar uma alteração na produção.
Agora vamos conhecer as atualizações específicas de cada ferramenta.
Farol
O Lighthouse é uma ferramenta automatizada de auditoria de sites que ajuda os desenvolvedores a diagnosticar problemas e identificar oportunidades para melhorar a experiência do usuário nos sites. Ele mede várias dimensões da qualidade da experiência do usuário em um ambiente de laboratório, incluindo desempenho e acessibilidade. A versão mais recente do Lighthouse (6.0, lançada em meados de maio de 2020) inclui outras auditorias, novas métricas e uma nova pontuação de desempenho.
O Lighthouse 6.0 introduz três novas métricas no relatório. Duas dessas novas métricas, Maior exibição de conteúdo (LCP) e Mudança de layout cumulativa (CLS, na sigla em inglês), são implementações em laboratório das Core Web Vitals e fornecem informações de diagnóstico importantes para otimizar a experiência do usuário. Dada a importância delas para avaliar a experiência do usuário, as novas métricas não são apenas medidas e incluídas no relatório, mas também são levadas em consideração no cálculo da pontuação de desempenho.
A terceira métrica nova incluída no Lighthouse, Tempo total de bloqueio (TBT, na sigla em inglês), se correlaciona bem com a métrica de campo Latência na primeira entrada (FID), outra métrica das Core Web Vitals. Seguir as recomendações fornecidas no relatório do Lighthouse e otimizar as pontuações permite oferecer a melhor experiência possível aos usuários.
Todos os produtos que são compatíveis com o Lighthouse são atualizados para refletir a versão mais recente, incluindo o Lighthouse CI, que permite medir facilmente as Core Web Vitals em solicitações de envio antes que elas sejam mescladas e implantadas.
Para saber mais sobre as atualizações mais recentes do Lighthouse, confira nossa postagem do blog O que há de novo no Lighthouse 6.0.
PageSpeed Insights
O PageSpeed Insights (PSI) gera relatórios sobre o desempenho em laboratório e em campo de uma página em dispositivos móveis e computadores. A ferramenta oferece uma visão geral da experiência dos usuários reais na página (com tecnologia do Chrome UX Report) e um conjunto de recomendações práticas sobre como um proprietário de site pode melhorar a experiência na página (disponibilizada pelo Lighthouse).
O PageSpeed Insights e a API PageSpeed Insights também foram atualizados para usar o Lighthouse 6.0 em segundo plano e agora oferecem suporte à medição das Core Web Vitals nas seções de laboratório e de campo do relatório. As Core Web Vitals são anotadas com uma barra azul, como mostrado abaixo.
Enquanto o Search Console oferece aos proprietários de sites uma ótima visão geral dos grupos de páginas que precisam de atenção, o PSI ajuda a identificar oportunidades por página para melhorar a experiência na página. No PSI, é possível ver claramente se a página atende ou não aos limites de uma boa experiência em todas as Core Web Vitals na parte de cima do relatório, o que é indicado por aprovado na avaliação das Core Web Vitals ou não aprovado na avaliação.
CrUX
O Chrome UX Report (CrUX, na sigla em inglês) é um conjunto de dados públicos sobre a experiência do usuário real em milhões de sites. Ela mede as versões de campo de todas as Core Web Vitals. Ao contrário dos dados de laboratório, os dados do CrUX são provenientes de usuários que aceitaram campo. Com esses dados, os desenvolvedores podem entender a distribuição de experiências reais dos usuários nos sites deles ou até mesmo dos concorrentes. Mesmo que você não tenha RUM no seu site, o CrUX pode oferecer uma maneira rápida e fácil de avaliar suas Core Web Vitals. O conjunto de dados CrUX no BigQuery inclui dados de desempenho refinados de todas as Core Web Vitals e está disponível em resumos mensais no nível da origem.
A única maneira de saber realmente o desempenho do seu site para os usuários é medir o desempenho dele no campo à medida que os usuários carregam e interagem com ele. Esse tipo de medição é comumente chamado de Real User Monitoring (monitoramento de usuários reais) ou RUM (na sigla em inglês). Mesmo que você não tenha RUM no seu site, o CrUX pode oferecer uma maneira rápida e fácil de avaliar suas Core Web Vitals.
Introdução à API CrUX
Hoje estamos felizes em anunciar a API CrUX, uma maneira rápida e sem custo financeiro de integrar facilmente seus fluxos de trabalho de desenvolvimento com a medição de qualidade no nível da origem e do URL para as seguintes métricas de campo:
- Maior exibição de conteúdo
- Cumulative Layout Shift
- Latência na primeira entrada
- Primeira exibição de conteúdo
Os desenvolvedores podem consultar uma origem ou um URL e segmentar os resultados por diferentes formatos. A API é atualizada diariamente e resume os dados dos últimos 28 dias (diferente do conjunto de dados do BigQuery, que é agregado mensalmente). A API também tem as mesmas cotas públicas flexíveis que colocamos em nossa outra API, a PageSpeed Insights (25.000 solicitações por dia).
Confira abaixo uma demonstração usando a API CrUX para visualizar as Core Web Vitals com distribuições como bom, precisa de melhorias e ruim:
Em versões futuras, planejamos expandir a API para permitir o acesso a outras dimensões e métricas do conjunto de dados do CrUX.
Painel do CrUX reformulado
Com o novo Painel CrUX, você pode acompanhar com facilidade o desempenho de uma origem ao longo do tempo. Agora é possível usá-lo para monitorar a distribuição de todas as métricas das Core Web Vitals. Para começar a usar o painel, confira nosso tutorial em web.dev.
Lançamos uma nova página de destino das Core Web Vitals para facilitar ainda mais a visualização rápida do desempenho do seu site. Queremos saber sua opinião sobre as ferramentas do CrUX. Para compartilhar suas ideias e dúvidas, entre em contato pela conta do Twitter @ChromeUXReport ou pelo Grupo do Google.
Painel "Performance" do Chrome DevTools
Depurar eventos de mudança de layout na seção "Experiência"
O painel Desempenho do Chrome DevTools tem uma nova seção "Experiência" que pode ajudar você a detectar mudanças inesperadas de layout. Isso é útil para encontrar e corrigir problemas de instabilidade visual na página que contribuem para a Mudança de layout cumulativa.
Selecione uma Shift de layout para visualizar os detalhes na guia Resumo. Para visualizar onde a mudança ocorreu, passe o cursor sobre os campos Movido de e Movido para.
Depurar a prontidão da interação com o tempo total de bloqueio no rodapé
A métrica Tempo total de bloqueio (TBT, na sigla em inglês) pode ser medida nas ferramentas do laboratório e é um excelente substituto da latência na primeira entrada. O TBT mede o tempo total entre a Primeira exibição de conteúdo (FCP) e o Tempo para interação da página (TTI, na sigla em inglês) em que a linha de execução principal ficou bloqueada por tempo suficiente para impedir a capacidade de resposta da entrada. As otimizações de desempenho que melhoram o TBT no laboratório devem melhorar a FID no campo.
Agora o TBT é exibido no rodapé do painel Desempenho do Chrome DevTools quando você mede o desempenho da página:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Desempenho.
- Clique em Gravar.
- Atualize a página manualmente.
- Aguarde o carregamento da página e interrompa a gravação.
Para saber mais, consulte Novidades no DevTools (Chrome 84).
Search Console
O novo relatório de Core Web Vitals no Search Console ajuda a identificar grupos de páginas do site que precisam de atenção com base em dados reais (de campo) do CrUX. O desempenho do URL é agrupado por status, tipo de métrica e grupo de URLs (grupos de páginas da Web semelhantes).
O relatório é baseado nas três métricas Core Web Vitals: LCP, FID e CLS. Se um URL não tiver uma quantidade mínima de dados para essas métricas, ele vai ser omitido do relatório. Teste o novo relatório para ter uma visão holística da performance da sua origem.
Depois de identificar um tipo de página com problemas relacionados às Core Web Vitals, você pode usar o PageSpeed Insights para conferir sugestões de otimização específicas para páginas representativas.
web.dev
https://pagespeed.web.dev/ (link em inglês) permite medir a performance da sua página ao longo do tempo, oferecendo uma lista priorizada de guias e codelabs sobre como melhorar. A medição é feita pelo PageSpeed Insights. A ferramenta de medida agora também oferece suporte às Core Web Vitals, conforme mostrado abaixo:
Extensão de Métricas da Web
A extensão Métricas da Web avalia as três Core Web Vitals em tempo real para o Google Chrome (computadores). Isso é útil para detectar problemas no início do fluxo de trabalho de desenvolvimento e como ferramenta de diagnóstico para avaliar a performance das Core Web Vitals enquanto você navega na Web.
A extensão já está disponível para instalação na Chrome Web Store. Esperamos que ele seja útil. Agradecemos todas as contribuições para melhorá-lo, bem como feedback sobre o repositório GitHub do projeto.
Destaques rápidos
Acabamos! O que você pode fazer agora:
- Use o Lighthouse no DevTools para otimizar a experiência do usuário e garantir o sucesso com as Core Web Vitals na área.
- Use o PageSpeed Insights para comparar o desempenho das Core Web Vitals no laboratório e no campo.
- Teste a nova API Chrome User Experience Report para acessar facilmente o desempenho da sua origem e do seu URL em relação às Core Web Vitals nos últimos 28 dias.
- Use a seção Experiência e o rodapé no painel Desempenho do DevTools para analisar e depurar em relação a Core Web Vitals específicas.
- Use o relatório de Core Web Vitals do Search Console para ver um resumo do desempenho das suas origens em campo.
- Use a extensão de Métricas da Web para acompanhar o desempenho de uma página em relação às Core Web Vitals em tempo real.
Falaremos mais sobre nossas ferramentas das Core Web Vitals na página web.dev Live em junho. Inscreva-se para receber atualizações sobre o evento.
~ de Elizabeth e Addy, WebPerf Janitors