Medir as Core Web Vitals com a API PageSpeed Insights e a API Chrome UX Report (CrUX)

1. Antes de começar

Neste codelab, você vai aprender a medir as Core Web Vitals de uma página da Web com as APIs PageSpeed Insights e CrUX.

As duas APIs retornam dados idênticos das Core Web Vitals, mas cada uma oferece benefícios distintos. Além dos dados do CrUX do campo, a API PageSpeed Insights 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, então ela é executada mais rápido.

O Google recomenda que você meça as Core Web Vitals em dispositivos móveis e computadores. As Core Web Vitals incluem estas três métricas, que se aplicam a todas as páginas da Web e oferecem insights importantes sobre a experiência do usuário:

• Maior exibição de conteúdo (LCP). Mede o desempenho de carregamento e deve ocorrer em até 2,5 segundos após o início do carregamento da página.
• First Input Delay (FID). Mede a interatividade e deve ocorrer em até 100 milissegundos.
• Cumulative Layout Shift (CLS). Mede a estabilidade visual e precisa estar dentro de 0,1.

Pré-requisitos

• Artigo sobre as Métricas da Web
• Conhecimento básico da linha de comando
• Artigo sobre como definir os limites das métricas do Core Web Vitals

O que você vai aprender

• Meça as Core Web Vitals de uma página da Web com a API PageSpeed Insights.
• Meça as Core Web Vitals de uma página da Web com a API CrUX.

O que é necessário

• Uma Conta do Google
• Acesso a uma linha de comando
• Um editor de texto de sua preferência
• Um navegador da Web da sua escolha
• Um URL de sua escolha. Este codelab usa https://developers.google.com.

2. Medir as Core Web Vitals com a API PageSpeed Insights

1. Se você precisar dos dados de desempenho da versão para computador de um URL, solicite os dados da API PageSpeed Insights e salve-os em um arquivo response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Substitua o marcador YOUR_URL pelo seu URL.

No final da string da API, observe que o parâmetro de consulta strategy está definido como um valor desktop, que especifica a solicitação de dados de computador.

2. Se você precisar dos dados de desempenho da versão para dispositivos móveis de um URL, solicite os dados da API PageSpeed Insights e salve-os em um arquivo response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Substitua o marcador YOUR_URL pelo seu URL.

No final da string da API, observe que o parâmetro de consulta strategy está definido como um valor mobile, que especifica a solicitação de dados móveis.

3. No editor de texto, abra o arquivo response.txt e encontre a propriedade loadingExperience:

response.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 informa esses dados para cada uma das Core Web Vitals com base no URL e no tipo de dispositivo indicados na solicitação da API:

• A propriedade percentile indica o 75º percentil de cada métrica.
• A propriedade distributions indica a porcentagem de visualizações de página que tiveram uma experiência boa, precisa de melhorias ou ruim para cada métrica.
• A propriedade category classifica o desempenho de cada métrica como lento, médio ou rápido.

Se o conteúdo da propriedade loadingExperience estiver vazio, o URL não terá dados de performance suficientes disponíveis. Esse problema geralmente ocorre quando você testa páginas da Web com pouco tráfego.

4. Encontre a propriedade originLoadingExperience:

response.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 informa as experiências agregadas de toda a origem, e não apenas do URL. Ele fornece as mesmas informações para cada uma das Core Web Vitals, conforme explicado na etapa anterior.

3. Medir as Core Web Vitals com a API CrUX

consiga uma chave de API

1. No console do Google Cloud, pesquise Chrome UX e selecione API Chrome UX Report no menu suspenso.
2. Na página API Chrome UX Report, clique em Ativar e aguarde até que o botão Ativar mude para Gerenciar. Depois, selecione Gerenciar.
3. No menu de navegação, clique em Credenciais e selecione Criar credenciais > Chave de API. Copie a chave de API.

Fazer uma solicitação

1. Na linha de comando, solicite dados de performance do seu URL à 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 marcador de posição YOUR_API_KEY pela sua chave de API e o marcador YOUR_URL pelo seu URL.

Atenção:esse comando se aplica ao macOS, Linux e Git BASH para Windows. Se a máquina executar um sistema operacional ou uma linha de comando diferente, talvez seja necessário modificar um pouco o comando. Por exemplo, se você usa o shell de comando no Windows, precisa usar aspas duplas em vez de simples em torno dos parâmetros. Em seguida, coloque uma barra antes das aspas duplas para fazer o escape das aspas internas.

2. No editor de texto, abra o arquivo response.txt:

response.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 estas informações para cada uma das Core Web Vitals:

• A propriedade histogram indica a porcentagem de usuários que tiveram uma experiência lenta, média ou rápida para uma determinada métrica.
• A propriedade percentiles indica a observação do 75º percentil para uma determinada métrica.

Se você receber uma mensagem de erro informando que os dados não foram encontrados, isso significa que não há dados de performance suficientes disponíveis para o URL em questão. Esse problema geralmente ocorre quando você testa páginas da Web com pouco tráfego.

4. Parabéns

Parabéns! Você mediu as Core Web Vitals de uma página da Web com as APIs PageSpeed Insights e CrUX.

Saiba mais

• Começar a usar a API PageSpeed Insights
• Como usar a API CrUX
• Métricas da Web