Build with Gemini, our largest and most capable AI model. Get an API key.

Esta página foi traduzida pela API Cloud Translation.

Medir as Principais métricas da Web de uma página da Web com a biblioteca de métricas da Web

1. Antes de começar

Neste codelab, você aprenderá a medir as Principais métricas da Web de uma página da Web com a biblioteca JavaScript web-vitals.

O Google recomenda que você avalie as Principais métricas da Web e que elas fiquem dentro do 75o percentil dos carregamentos de página segmentados em dispositivos móveis e computadores.

As Principais métricas da Web incluem estas três métricas, que se aplicam a todas as páginas da Web e oferecem insights essenciais sobre a experiência do usuário:

Maior exibição de conteúdo (LCP). avalia o desempenho de carregamento e ocorre em até 2,5 segundos após o início do carregamento da página;
Atraso na primeira entrada (FID, na sigla em inglês). Mede a interatividade e deve ocorrer em até cem milésimos de segundo.
Mudança de layout cumulativa (CLS). Mede a estabilidade visual e precisa estar dentro de 0,1.

Prerequisites

O que você aprenderá

Adicione a biblioteca web-vitals a uma página da Web.
Meça as Principais métricas da Web da página da Web nas Ferramentas para Desenvolvedores do Google Chrome.
Opcional: informe as Principais métricas da Web da página da Web ao Google Analytics.

Pré-requisitos

Um editor de texto de sua escolha, como o Sublime Text ou o Visual Studio Code
Um navegador da Web baseado no Chromium, como o Google Chrome ou o Microsoft Edge. Para saber mais sobre por que você precisa de um navegador da Web baseado no Chromium, acesse Suporte ao navegador (link em inglês).

2. Adicionar a biblioteca das Principais métricas da Web a uma página da Web

No editor de texto, crie um arquivo web-vitals-test.html e insira o seguinte código HTML no arquivo:

web-vitals-test.html (em inglês)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Esse código cria a página da Web que você usa para este codelab.

No elemento <body> do código HTML após o segundo elemento <p>, digite este script de módulo e salve o arquivo:

web-vitals-test.html (em inglês)

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Este script de módulo carrega a biblioteca web-vitals de uma rede de fornecimento de conteúdo. Agora seu arquivo se parece com este snippet de código:

web-vitals-test.html (em inglês)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Todos os navegadores modernos são compatíveis com scripts de módulo, que são uma boa opção para códigos que usam apenas novas APIs, como as necessárias para medir as Principais métricas da Web. Os navegadores que não são compatíveis com módulos ou com as APIs Principais métricas da Web não tentarão carregar esse script.

3. Medir as Principais métricas da Web da página da Web nas Ferramentas para Desenvolvedores do Google Chrome

No navegador da Web, abra o arquivo salvo.
Clique com o botão direito na página da Web e depois em Inspecionar na caixa de diálogo.
No painel Ferramentas para Desenvolvedores do Google Chrome, clique na guia Console e selecione Configurações do Console > Preserve log. Essa configuração garante que os registros persistam quando você atualiza a página da Web.

Clique na guia Rede, depois na seta de expansão do menu suspenso de limitação e selecione Conexão 3G lenta. Essa configuração simula uma conexão de rede lenta.

A guia "Rede" com a configuração "Conexão 3G lenta" selecionada no menu suspenso "Limitação".

Volte para a guia Console e clique em qualquer lugar da página. As métricas do LCP e do FID são impressas na guia Console.

Guia "Console" depois das métricas LCP e FID

atualize a página da Web; A métrica CLS é impressa na guia Console.

Guia "Console" após a impressão da métrica CLS

Volte para a guia Rede, clique na seta de expansão do menu suspenso de limitação e selecione Fast 3G. Essa configuração simula uma conexão de rede rápida.
Volte à guia Console e clique em qualquer lugar na página da Web.As métricas de LCP e FID são impressas na guia Console novamente, mas melhoraram em relação à anterior.

A guia "Console" depois que as métricas de LCP e FID forem impressas novamente

atualize a página da Web; A métrica CLS é impressa novamente na guia Console, mas melhorou mais cedo.

A guia "Console" depois que a métrica CLS é impressa novamente

4. Opcional: informar as Principais métricas da Web da página da Web ao Google Analytics

No arquivo web-vitals-test.html após a instrução de importação do script do módulo, insira esta função sendToGoogleAnalytics() e salve o arquivo:

web-vitals-test.html (em inglês)

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Esse código envia as Principais métricas da Web ao Google Analytics, onde você pode vê-las no Relatório de principais eventos:

Relatório de principais eventos no Google Analytics

Agora seu arquivo se parece com este snippet de código:

web-vitals-test.html (em inglês)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Parabéns

Parabéns! Você aprendeu a medir e informar as Principais métricas da Web de uma página da Web com a biblioteca web-vitals.

Saiba mais

Métricas da Web