Sobre este codelab
1. Antes de você começar
Neste codelab, você aprenderá a medir as principais Web Vitals de uma página da Web com a API PageSpeed Insights (PSI) e a API Chrome UX Report (CrUX).
Ambas as APIs retornam dados idênticos do Core Web Vitals, mas cada API oferece benefícios distintos. Além dos dados CrUX do campo, a API PSI também fornece dados do Lighthouse, que é a ferramenta automatizada e de código aberto do Google que audita páginas da web e recomenda como melhorá-las. A API CrUX não fornece dados do Lighthouse, portanto, é executada mais rapidamente.
O Google recomenda que você avalie o Core Web Vitals em dispositivos móveis e desktops. Os Core Web Vitals incluem essas três métricas, que se aplicam a todas as páginas da Web e fornecem informações críticas sobre a experiência do usuário:
- Maior pintura de conteúdo (LCP). Mede o desempenho do carregamento e deve ocorrer em até 2,5 segundos após o início do carregamento da página.
- Retardo da primeira entrada (FID). Mede a interatividade e deve ocorrer em 100 milissegundos.
- Mudança de layout cumulativa (CLS). Mede a estabilidade visual e deve estar dentro de 0,1.
Pré-requisitos
- Artigo sobre Web Vitais .
- Definindo o artigo de limites de métricas do Core Web Vitals .
- Conhecimento básico de como usar a linha de comando.
O que você vai fazer
- Avalie as Core Web Vitals de uma página da Web com a API PSI.
- Meça os Core Web Vitals de uma página da Web com a API CrUX.
O que você precisará
- Uma Conta do Google
- Acesso a uma linha de comando
- Um editor de texto à sua escolha
- Um navegador da web de sua escolha
- Um URL de sua escolha (este codelab usa https://developers.google.com .)
2. Avalie os principais Web Vitals com a API PSI
- Se você precisar dos dados de desempenho para a versão para desktop de um URL, execute este comando
curlpara solicitar os dados da API PageSpeed Insights e salve-os em um arquivoresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Substitua o espaço reservado YOUR_URL pelo seu URL.
- Se você precisar dos dados de desempenho para a versão móvel de um URL, defina o parâmetro de consulta da
strategycomo um valormobileno final da string da API no comando fornecido na etapa anterior:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Substitua o espaço reservado YOUR_URL pelo seu URL.
- Em seu editor de texto, abra o arquivo
response.txte localize a propriedadeloadingExperience:
resposta.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
A propriedade loadingExperience relata essas informações para cada um dos Core Web Vitals com base na URL e no tipo de dispositivo indicado na solicitação da API:
- A propriedade
percentileindica o 75º percentil para cada métrica. - A propriedade de
distributionsindica a porcentagem de visualizações de página que tiveram uma experiência boa , precisa melhorar ou ruim para cada métrica. - A propriedade de
categoryclassifica o desempenho de cada métrica como lento, médio ou rápido.
Se o conteúdo da propriedade loadingExperience estiver vazio, a URL não terá dados de desempenho suficientes disponíveis. Esse problema geralmente surge quando você testa páginas da Web de baixo tráfego.
- Encontre a propriedade
originLoadingExperience:
resposta.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
A propriedade originLoadingExperience relata as experiências agregadas para toda a origem, em vez de apenas a URL. Ele fornece as mesmas informações para cada um dos Core Web Vitals, conforme explicado na etapa anterior.
3. Avalie os principais Web Vitals com a API CrUX
Obter uma chave de API
- No Google Cloud Console , pesquise
Chrome UXe selecione Chrome UX Report API no menu suspenso. - Na página da API de relatórios do Chrome UX , clique em Ativar e aguarde até que o botão Ativar mude para um botão Gerenciar e selecione Gerenciar .
- No menu de navegação, clique em Credenciais e selecione Criar credenciais > Chave de API e copie a chave de API.
Faça um pedido
- Na linha de comando, solicite dados de desempenho para sua URL da API CrUX e salve-os em um arquivo
response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
Substitua o placeholder YOUR_API_KEY pela sua chave de API e, em seguida, substitua o placeholder YOUR_URL pelo seu URL.
- Em seu editor de texto, abra o arquivo
response.txt:
resposta.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
A resposta da API CrUX fornece essas informações para cada um dos Core Web Vitals:
- A propriedade do
histogramindica a porcentagem de usuários que tiveram uma experiência lenta, média ou rápida para uma determinada métrica. - A propriedade
percentilesindica a observação do percentil 75 para uma determinada métrica.
Se você vir uma mensagem de erro informando que os dados não foram encontrados, não há dados de desempenho suficientes disponíveis para o URL fornecido. Esse problema geralmente surge quando você testa páginas da Web de baixo tráfego.
4. Parabéns
Parabéns! Você mediu os Core Web Vitals de uma página da Web com a API PSI e a API CrUX.