Esta página foi traduzida pela API Cloud Translation.

Tipos de navegação agora disponíveis no CrUX

Barry Pollard

Johannes Henkel

A partir do conjunto de dados de março de 2024, o Chrome User Experience Report (CrUX, na sigla em inglês) inclui uma métrica navigation_types. Fornece estatísticas agregadas sobre os tipos de navegação de carregamentos de página para a dimensão consultada.

Diferentes tipos de navegação resultam em métricas de desempenho distintas. Por isso, ao analisar o desempenho do seu site, é útil entender a frequência relativa desses tipos diferentes. Por exemplo, quando uma navegação usa a volta para frente (bfcache), isso geralmente resulta em uma navegação quase instantânea, que é refletida em métricas muito pequenas de LCP e FCP, e métricas de CLS e INP reduzidas.

Ao expor o detalhamento dos tipos de navegação, esperamos incentivar os proprietários de sites a estar mais cientes dos tipos de navegação usados nos sites e incentivar alguns dos tipos mais rápidos analisando a configuração de armazenamento em cache, os bloqueadores de bfcache e a pré-renderização.

A métrica navigation_types está disponível na API CrUX diária, na API CrUX History (com histórico de três semanas disponível inicialmente e aumentando semanalmente para cobertura completa nos próximos seis meses), no conjunto de dados CrUX mais recente do BigQuery e no Painel do CrUX. Com o histórico, os proprietários de sites também podem conferir as mudanças no uso do tipo de navegação ao longo do tempo. Isso pode permitir o rastreamento de melhorias (por exemplo, remoção de bloqueio do bfcache). Ela também pode ajudar a explicar as alterações nas métricas, mesmo quando nenhuma alteração tiver sido feita nos sites.

O CrUX distingue os tipos de navegação na tabela abaixo:

Tipo	Descrição
`navigate`	Um carregamento de página que não se encaixa em nenhuma das outras categorias.
`navigate_cache`	Um carregamento de página para o qual o recurso principal (o documento HTML principal) foi veiculado do cache HTTP. Os sites geralmente usam o armazenamento em cache para sub-recursos, mas o documento HTML principal costuma ser armazenado em cache consideravelmente menos. Quando possível, o armazenamento em cache local e em uma CDN pode resultar em melhorias perceptíveis no desempenho.
`reload`	O usuário recarregou a página pressionando o botão "Atualizar", pressionando Enter na barra de endereço ou desfazendo o fechamento de guia. Os recarregamentos de página frequentemente resultam em revalidação para o servidor para verificar se a página principal foi alterada. Uma alta porcentagem de atualizações de página pode indicar usuários frustrados.
`restore`	A página foi atualizada após a reinicialização do navegador ou de uma guia que foi removida por motivos de memória. No Chrome no Android, eles são informados como `reload`.
`back_forward`	Um histórico de navegação, ou seja, a página foi acessada e acessada recentemente. Com o armazenamento em cache correto, as experiências devem ser razoavelmente rápidas, mas ainda exigem que a página seja processada e o JavaScript seja executado, o que o bfcache evita.
`back_forward_cache`	Uma navegação histórica que foi veiculada pelo bfcache. Otimizar suas páginas para aproveitar o bfcache resulta em experiências mais rápidas. Os sites precisam remover os bloqueadores do bfcache para melhorar a porcentagem de navegações nessa categoria.
`prerender`	A página foi pré-renderizada, o que, como o bfcache, pode resultar em carregamentos de página quase instantâneos.

Em alguns casos, um carregamento de página pode ser uma combinação de vários tipos de navegação. Nesse caso, o CrUX informa a primeira correspondência na ordem inversa da tabela anterior (de baixo para cima).

Limitações dos tipos de navegação no CrUX

Como o CrUX é um conjunto de dados público, a granularidade dos relatórios é limitada. Para muitas origens e URLs, a métrica navigation_types não está disponível devido ao tráfego qualificado insuficiente. Consulte a metodologia CrUX para mais informações.

Além disso, o CrUX não pode fornecer detalhamentos de outras métricas por tipo de navegação, porque isso reduziria ainda mais o número de origens e URLs disponíveis no CrUX.

Recomendamos que os sites implementem o próprio Monitoramento de usuário real (RUM, na sigla em inglês) para poder dividir o tráfego de acordo com critérios como os tipos de navegação. Você pode notar diferenças nos tipos de navegação nessas soluções, dependendo dos tipos informados e das visualizações de página incluídas. Consulte o artigo Por que os dados do CrUX são diferentes dos meus dados RUM?.

O RUM também pode fornecer mais detalhes sobre problemas específicos de desempenho. Por exemplo, embora o CrUX possa sugerir que vale a pena melhorar a qualificação do bfcache, a API bfcache notRestoredReasons pode informar exatamente por que um carregamento de página específico não pôde ser veiculado do bfcache.

Tipos de navegação na API CrUX

Para ver os tipos de navegação na API, inclua a métrica navigation_types na solicitação ou não defina uma métrica para que todas as métricas sejam incluídas:

export API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"origin": "https://example.com", metrics: ["navigation_types"]}'

O formato da solicitação é descrito com mais detalhes na documentação da API, incluindo uma explicação sobre como conseguir a chave de API e no guia de API. Isso retornará um objeto como este:

{
  "record": {
    "key": {  "origin": "https://example.com" },
    "metrics": {
      "navigation_types": {
        "fractions": {
          "navigate": 0.5335,
          "navigate_cache": 0.2646,
          "reload": 0.0885,
          "restore": 0.0023,
          "back_forward": 0.0403,
          "back_forward_cache": 0.0677,
          "prerender": 0.0031
        }
      }
    },
    "collectionPeriod": {
      "firstDate": { "year": 2024, "month": 3, "day": 6 },
      "lastDate": { "year": 2024, "month": 4, "day": 2 }
    }
  }
}

Na resposta, o CrUX informa a métrica navigation_types como um objeto com as frações de carregamentos de página para cada um dos tipos de navegação. Cada fração é um valor entre 0.0 (indicando 0% dos carregamentos de página) e 1.0 (indicando 100% dos carregamentos de página) para a chave especificada.

Observe nessa resposta que, do período de coleta que começa em 6 de março de 2024, até 2 de abril de 2024, 6,77% das navegações (carregamentos de página) foram veiculadas pelo bfcache do navegador. Da mesma forma, algumas das outras frações podem ajudar a identificar oportunidades para otimizações de carregamento de página. Observe que, para qualquer chave (incluindo uma combinação de URL ou origem e um formato), as frações navigation_types totalizarão aproximadamente 1,0.

Tipos de navegação na API CrUX History

A API CrUX History pode fornecer uma série temporal para tipos de navegação com até 25 pontos de dados por fração, o que permite visualizar essas frações ao longo do tempo. Para mudar sua solicitação da API CrUX para a API CrUX History, execute-a no endpoint queryHistoryRecord em vez de queryRecord. Por exemplo, o CrUX History Colab mostra a métrica navigation_types como barras empilhadas:

Gráfico de barras empilhadas mostrando o histórico dos tipos de navegação ao longo de três semanas, sendo que a maior parte das navegações é "navegar" e sem grandes alterações ao longo das três semanas. — Tipos de navegação ao longo do tempo

Na captura de tela anterior, o histórico está disponível apenas para três períodos de coleta (28 dias cada, com sete dias de intervalo). Depois de totalmente preenchido, isso abrangerá todos os 25 períodos de coleta. A visualização desse histórico permite confirmar se as otimizações entraram em vigor ou regrediram. Isso vale principalmente para a configuração de cache HTTP, a otimização de uma página para bfcache e pré-renderização.

Tipos de navegação no CrUX do BigQuery

As tabelas CrUX do BigQuery agora incluem um registro navigation_type, feito de cada tipo, enquanto as visualizações materializadas resumidas incluem várias colunas navigation_types_*, uma para cada tipo.

Tabelas detalhadas

O esquema de tabela detalhado no BigQuery CrUX fornece histogramas detalhados para as métricas de desempenho da Web, o que nos permite mostrar nesta análise de exemplo como determinados tipos de navegação podem ser correlacionados com o desempenho de carregamento instantâneo ou bom.

Como exemplo, analisamos a fração back_forward_cache e a correlação dela com a frequência de carregamento instantâneo das páginas (instant_lcp_density definido como LCP <= 200 ms) e com que frequência uma boa LCP foi observada (good_lcp_density definida como LCP <= 2.500 ms). Observamos uma forte correlação estatística entre back_forward_cache e instant_lcp_density (ensina a=0,87), mostrada no gráfico a seguir, e uma correlação moderada entre back_forward_cache e good_lcp_density (DLP=0,29).

Gráfico de correlação que mostra uma forte correlação entre a fração de carregamentos de página instantâneos e a fração de carregamentos de página do bfcache — Correlação dos carregamentos de página instantâneos com o uso do bfcache

O Colab para esta análise está bem comentado. aqui, discutiremos apenas a consulta que extrai as frações de browse_types para as 10 mil origens mais populares das tabelas detalhadas no BigQuery do CrUX:

Acessamos a tabela all.202403 aqui (consulte a cláusula FROM), filtramos form_factor por phone e selecionamos origens com classificação de popularidade menor ou igual a 10.000 para as 10.000 origens mais populares (consulte a cláusula WHERE).
Ao consultar a métrica navigation_types no BigQuery, é necessário dividir pelo total das frações navigation_types, já que elas serão somadas apenas por origem, mas não por combinação (origem, formato).
Nem todas as origens terão navigation_types, então é recomendável usar SAVE_DIVIDE.

WITH tmp AS (
  SELECT
    origin,
    SUM(navigation_types.navigate.fraction) AS navigate,
    SUM(navigation_types.navigate_cache.fraction) AS navigate_cache,
    SUM(navigation_types.reload.fraction) AS reload,
    SUM(navigation_types.restore AS restore,
    SUM(navigation_types.back_forward.fraction) AS back_forward,
    SUM(navigation_types.back_forward_cache.fraction) AS back_forward_cache,
    SUM(navigation_types.prerender.fraction) AS prerender,
    SUM(navigation_types.navigate.fraction
      + navigation_types.navigate_cache.fraction
      + navigation_types.reload.fraction
      + navigation_types.restore.fraction
      + navigation_types.back_forward.fraction
      + navigation_types.back_forward_cache.fraction
      + navigation_types.prerender.fraction) AS total
  FROM
    `chrome-ux-report.all.202403`
  WHERE
    experimental.popularity.rank <= 10000 AND
    form_factor.name = 'phone'
  GROUP BY
    origin
)

SELECT
  origin,
  ROUND(SAFE_DIVIDE(navigate, total), 4) AS navigate,
  ROUND(SAFE_DIVIDE(navigate_cache, total), 4) AS navigate_cache,
  ROUND(SAFE_DIVIDE(reload, total), 4) AS reload,
  ROUND(SAFE_DIVIDE(restore, total), 4) AS restore,
  ROUND(SAFE_DIVIDE(back_forward, total), 4) AS back_forward,
  ROUND(SAFE_DIVIDE(back_forward_cache, total), 4) AS back_forward_cache,
  ROUND(SAFE_DIVIDE(prerender, total), 4) AS prerender
FROM
  tmp

Tabelas materializadas

Quando um resumo é suficiente, geralmente é mais conveniente (e mais barato) consultar as tabelas materializadas. Por exemplo, a consulta a seguir extrai os dados de navigation_types disponíveis da tabela chrome-ux-report.materialized.device_summary. Essa tabela é codificada por mês, origem e tipo de dispositivo.

SELECT
  yyyymm,
  device,
  navigation_types_navigate,
  navigation_types_navigate_cache,
  navigation_types_reload,
  navigation_types_restore,
  navigation_types_back_forward,
  navigation_types_back_forward_cache,
  navigation_types_prerender
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://example.com' AND
  navigation_types_navigate IS NOT NULL
ORDER BY
  yyyymm DESC,
  device DESC

Observe que essas frações não somam 1,0 por linha.Portanto, é necessário dividir cada fração pela soma dos resultados sobre os quais a consulta será interpretada.

O motivo é que as frações navigation_type em chrome-ux-report.materialized.device_summary, como as densidades do histograma, adicionam até 1,0 por origem, em vez de por origem e dispositivo por data. Assim, você pode conferir a distribuição dos tipos de navegação entre dispositivos:

SELECT
  device,
  navigation_types_back_forward
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

`device`	`navigation_types_back_forward`
`phone`	`0.0663`
`desktop`	`0.0179`
`tablet`	`0.0009`

Neste resultado da consulta, as frações refletem a porcentagem de carregamentos de página para a https://www.google.com de origem: 6,63% desses carregamentos de página usaram o tipo de navegação back_forward no smartphone, 1,79% em computadores e 0,09% em tablets.

A porcentagem de back_forward consideravelmente maior em phone sugere que poderíamos tentar otimizar os carregamentos de página para que eles possam ser veiculados pelo bfcache.

No entanto, também é importante considerar qual fração de carregamentos de página já é veiculada pelo bfcache, ou seja, a taxa de hits do bfcache. A consulta a seguir sugere que essa origem específica já pode estar bem otimizada, dado seu > 60% de taxas de hits para telefone e computador.

SELECT
  device,
  navigation_types_back_forward_cache /
    (navigation_types_back_forward + navigation_types_back_forward_cache)
    AS back_forward_cache_hit_rate
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

`device`	`back_forward_cache_hit_rate`
`phone`	`0.6239`
`desktop`	`0.6805`
`tablet`	`0.7353`

Portanto, parece que a alta taxa de back_forward em smartphones não se deve ao menor uso do bfcache, mas sim a um reflexo de como os usuários navegam e avançam mais nos smartphones.

Tipos de navegação no painel do CrUX

A maneira mais fácil de conferir os tipos de navegação é no painel do CrUX, que pode ser acessado para uma origem neste link. Como você pode ver na captura de tela a seguir, apenas os dados referentes a um mês estão disponíveis inicialmente, mas com o tempo o histórico será preenchido, permitindo que você veja as alterações nos tipos de um mês para outro.

Como você também pode ver, destacamos os tipos de navegação mais rápida, que as vistas devem procurar otimizar, na parte superior desta página do painel de controle.

Conclusão

Esperamos que os detalhamentos dos tipos de navegação no CrUX sejam úteis e ajudem você a entender e otimizar a performance do seu site. Ao garantir o uso eficiente do cache HTTP, do bfcache e da pré-renderização, os sites podem carregar páginas muito mais rapidamente do que os que exigem viagens de volta ao servidor.

Também temos o prazer de disponibilizar os dados em todos os vários pontos de acesso do CrUX para que os usuários possam consumir os dados como quiserem e ver os detalhamentos de tipo por URL para aqueles que são expostos nas APIs do CrUX.

Gostaríamos de receber feedback sobre essa adição ao CrUX nas redes sociais ou no grupo de discussão do CrUX.