Avalie os principais Web Vitals com a API PSI e a API CrUX

1. Antes de 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

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

  1. Se você precisar dos dados de desempenho para a versão para desktop de um URL, execute este comando curl para solicitar 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 espaço reservado YOUR_URL pelo seu URL.

  1. Se você precisar dos dados de desempenho para a versão móvel de um URL, defina o parâmetro de consulta da strategy como um valor mobile no 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.

  1. Em seu editor de texto, abra o arquivo response.txt e localize a propriedade loadingExperience :

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 percentile indica o 75º percentil para cada métrica.
  • A propriedade de distributions indica 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 category classifica 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.

  1. 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

  1. No Google Cloud Console , pesquise Chrome UX e selecione Chrome UX Report API no menu suspenso.
  2. 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 .
  3. 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

  1. 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.

  1. 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 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 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.

Saiba mais