Saiba mais sobre as novidades do PageSpeed Insights para ajudar você a medir e otimizar melhor a qualidade da página e do site.
Ao longo dos anos, o PageSpeed Insights (PSI) evoluiu para ser uma fonte completa para dados de campo e de laboratório. Ele integra informações do diagnóstico Chrome UX Report (CrUX) e Lighthouse para fornecer insights que ajudam a melhorar o desempenho do seu site.
Hoje, anunciamos uma versão atualizada do PSI. Embora ela seja um elemento crítico no nosso conjunto de ferramentas de velocidade, a base de código PSI tinha 10 anos, continha muito código legado e precisaria de uma reformulação. Usamos isso como uma oportunidade para abordar problemas relacionados à interface no PSI, que às vezes dificultavam a navegação dos usuários no relatório. Nossas principais metas eram:
- Torne a interface mais intuitiva diferenciando claramente entre dados derivados de um ambiente sintético e dados coletados dos usuários em campo.
- Comunique claramente como a avaliação das Core Web Vitals é calculada na interface.
- Modernize a aparência do PSI com o Material Design.
Esta postagem apresenta os novos recursos do PSI que serão lançados ainda este ano.
Novidades?
A reformulação da interface do PSI tem como objetivo melhorar a apresentação dos dados do relatório e adicionar clareza e granularidade aos dados disponíveis. A nova interface foi desenvolvida para ser mais intuitiva e ajudar os desenvolvedores a descobrir rapidamente insights de desempenho de laboratório e campo nas páginas deles. As mudanças fundamentais na interface incluem:
Separação clara dos dados de campo e de laboratório
Mudamos a interface para separar os dados de campo dos dados do laboratório de maneira distinta. Os rótulos de "Dados de campo" e "Dados de laboratório" foram substituídos por um texto que indica o que os dados significam e como podem ajudar. Também trouxemos a seção "Dados de campo" para o topo. A pontuação de desempenho tradicional com base em laboratório, que atualmente está mostrada na parte de cima, foi movida para a seção de dados do laboratório para evitar ambiguidade sobre a origem da pontuação.
Avaliação das Core Web Vitals
O resultado da avaliação das Core Web Vitals, que anteriormente aparecia como uma única palavra "aprovado" ou "reprovado" nos dados de campo, agora se destaca como uma subseção separada com um ícone distinto.
Não há mudanças no processo de avaliação das Core Web Vitals. As métricas das Core Web Vitals FID, LCP e CLS podem ser agregadas no nível da página ou da origem. Para agregações com dados suficientes nas três métricas, a agregação vai passar na avaliação das Core Web Vitals se os 75o percentis de todas as três métricas forem "Bom". Caso contrário, a agregação não vai passar na avaliação. Se a agregação tiver dados de FID insuficientes, ela vai ser aprovada na avaliação se os 75o percentis da LCP e da CLS forem bons. Se a LCP ou CLS tiver dados insuficientes, a agregação no nível da página ou da origem não poderá ser avaliada.
Rótulos de performance em computadores e dispositivos móveis
Mudamos o menu de navegação na parte de cima e incluímos links para dispositivos móveis e computadores centralmente na página do relatório. Os links agora estão facilmente visíveis e indicam de forma distinta a plataforma para a qual os dados são mostrados. Isso também ajudou a tornar a barra de navegação mais limpa.
Resumo da origem
O resumo da origem, que fornece a pontuação agregada do CrUX para todas as páginas da origem, atualmente aparece ao clicar em uma caixa de seleção. Movemos essa seção do relatório para uma nova guia, "Origem", na seção "Dados de campo".
Mais informações úteis
Agora o relatório inclui uma nova seção de informações na parte de baixo de cada campo e o card do laboratório que mostram os seguintes detalhes sobre os dados de amostra:
- Período de coleta de dados
- Durações das visitas
- Dispositivo
- Conexões de rede
- Tamanho da amostra
- Versões do Chrome
Essas informações melhoram a distinção entre dados de laboratório e de campo, além de ajudar os usuários que não têm certeza sobre as diferenças entre as duas fontes de dados (laboratório e campo).
Abrir visualização
Temos um novo recurso "Visualização de expansão" que adiciona uma função de detalhamento à seção de dados de campo e permite visualizar detalhes granulares das métricas das Core Web Vitals.
Imagem da página
Removemos a imagem da página carregada, que aparece ao lado dos dados do campo. A imagem e as miniaturas da página que mostra a sequência de carregamento ficarão disponíveis na seção de dados do laboratório.
Para conferir a documentação atualizada do produto, acesse https://developers.google.com/speed/docs/insights/..
Atualizações em web.dev/measure
Para reduzir a inconsistência entre as diversas ferramentas da nossa caixa de ferramentas de desempenho, também estamos atualizando web.dev/measure para ser compatível com a API PageSpeed Insights.
Antes, os desenvolvedores geravam relatórios usando a ferramenta PSI e /measure e viam números diferentes no Lighthouse. Uma das principais razões das diferenças foi porque /measure originou todos os testes dos EUA (porque anteriormente tinha um back-end de nuvem baseado nos EUA).
Com /measure chamando a mesma API diretamente que a interface do PSI, os desenvolvedores têm uma experiência mais consistente ao usar PSI e /measure. Também fizemos alguns ajustes para /medir com base em como os usuários usam a ferramenta. Isso significa que a experiência de login de /measure será desativada, mas a funcionalidade mais usada, que mostra várias categorias, vai continuar disponível.
PSI hoje
Vamos analisar o que o relatório atual do PageSpeed Insights oferece. O relatório da PSI inclui dados de performance de dispositivos móveis e computadores em guias individuais e sugere como melhorar uma página. Os principais componentes do relatório em cada caso são semelhantes e consistem nos seguintes itens:
Pontuação de desempenho:aparece na parte de cima do relatório de PSI e resume o desempenho geral da página. Essa pontuação é determinada ao executar o Lighthouse para coletar e analisar os dados do laboratório sobre a página. Uma pontuação de 90 ou mais é considerada boa, de 50 a 90 precisa de melhorias e abaixo de 50 é ruim.
Dados de campo:as informações de campo, provenientes do conjunto de dados do relatório CrUX, fornecem insights sobre a experiência real do usuário. Os dados incluem métricas como a Primeira exibição de conteúdo (FCP) e medem as Core Web Vitals (Latência na primeira entrada (FID), Maior exibição de conteúdo (LCP) e Mudança de layout cumulativa (CLS). Junto com os valores das métricas, também é possível conferir a distribuição de páginas em que o valor de uma métrica específica era "Bom", "Precisa de melhorias" ou "Ruim", indicada pelas barras verde, âmbar e vermelha, respectivamente. A distribuição e as pontuações são mostradas com base nos carregamentos de página dos usuários no conjunto de dados do CrUX. As pontuações são calculadas com base nos últimos 28 dias e não estão disponíveis para novas páginas em que não há dados suficientes de usuários reais.
Resumo da origem:os usuários podem clicar na caixa de seleção Mostrar resumo da origem para ver a pontuação agregada das métricas de todas as páginas veiculadas com a mesma origem nos últimos 28 dias.
Dados do laboratório:a pontuação de desempenho do laboratório, calculada com o Lighthouse, ajuda a depurar problemas de desempenho, porque ela é coletada em um ambiente controlado. O relatório mostra a performance usando métricas como Primeira exibição de conteúdo, Maior exibição de conteúdo, Índice de velocidade, Mudança de layout cumulativa, Tempo para interação e Tempo total de bloqueio. Cada métrica é pontuada e rotulada com um ícone indicando "Boa", "Melhorias necessárias" ou "Ruim". Esta seção fornece uma boa indicação de gargalos de desempenho antes do lançamento e pode ajudar a diagnosticar problemas, mas talvez não capture problemas reais.
Auditorias:essa seção lista todas as auditorias executadas pelo Lighthouse e lista as auditorias aprovadas, além de oportunidades de melhoria e outras informações de diagnóstico.
Desafios com o design atual do PSI
Como mostrado na captura de tela acima, os diferentes pontos de dados dos dados de laboratório e campo não estão isolados claramente, e os desenvolvedores que são novos no PSI podem não entender facilmente o contexto dos dados e o que fazer em seguida. Essa confusão resultou em muitas postagens do blog com o guia "Instruções" sobre como decifrar o relatório do PSI.
Com a reformulação, esperamos facilitar a interpretação do relatório para os desenvolvedores para que eles passem rapidamente da geração do relatório de PSI para a implementação dos insights incluídos nele.
Saiba mais
Para mais detalhes sobre atualizações de ferramentas de desempenho, assista à palestra de abertura do Chrome Dev Summit 2021. Vamos informar você sobre a data de lançamento do PSI e as mudanças em web.dev/measure.
Agradeço a Milica Mihajlija, Philip Walton, Brendan Kenny e Ewa Gasperowicz pelo feedback sobre este artigo