Acompanhar a velocidade do usuário com gtag.js

Reduzir o tempo de carregamento da página pode melhorar a experiência geral do usuário no site. Esta página descreve como enviar informações de velocidade do usuário para o Google Analytics.

Implementação

Use o comando event para enviar um evento timing_complete:

gtag('event', 'timing_complete', {<timing_parameters>});

em que <timing_parameters> é um ou mais pares de parâmetros e valores. Separe cada par com uma vírgula. Por exemplo, o comando a seguir envia um evento de velocidade do usuário ao Google Analytics indicando que levou 3.549 milissegundos para a página da Web atual carregar todas as dependências de JavaScript externas:

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

Parâmetros de velocidade do usuário

A tabela a seguir resume os parâmetros de velocidade do usuário:

Nome do parâmetro Tipo de dado Obrigatório Descrição
name string Sim Uma string para identificar a variável que está sendo registrada (por exemplo, 'load').
value integer Sim O número de milissegundos em tempo decorrido para informar ao Google Analytics (por exemplo, 20).
event_category string Não Uma string para classificar todas as variáveis de velocidade do usuário em grupos lógicos (por exemplo, 'JS Dependencies').
event_label string Não Uma string que pode ser usada para adicionar flexibilidade à visualização da velocidade do usuário nos relatórios (por exemplo, 'Google CDN').

Medição de tempo

O evento timing_complete requer um parâmetro value, que especifica o tempo decorrido em milissegundos. Você precisa escrever o código que captura esse valor.

A maneira mais fácil de fazer isso é criando um timestamp no início de um período e outro no final. Em seguida, calcule o tempo decorrido entre timestamps.

A maioria dos navegadores modernos é compatível com a API de tempo de navegação, que inclui métodos no objeto window.performance para avaliar o desempenho de páginas da Web por meio de dados de tempo de alta resolução.

O exemplo a seguir usa o método performance.now(), que retorna a quantidade de tempo decorrido desde que a página começou a ser carregada pela primeira vez:

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

Considerações sobre a amostragem

O Google Analytics faz uma análise por amostragem dos eventos de velocidade do usuário para garantir uma distribuição equitativa da capacidade do sistema durante o uso desse recurso.

A taxa em que os eventos de velocidade são analisados é determinada pelo número total de exibições de página recebidos pela propriedade no dia anterior. A tabela a seguir descreve como a taxa de amostragem de velocidade é determinada:

Contagem total de exibições de página (dia anterior) Número máximo de eventos de velocidade processados
De 0 a 1.000 100
De 1.000 a 100.000 10% da contagem total da exibições de página
De 100.000 a 1.000.000 10.000
Mais de 1 milhão 1% da contagem total da exibições de página