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) inclui uma métrica navigation_types. Isso 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 diferenças nas métricas de desempenho. Por isso, ao analisar o desempenho do seu site, é útil entender a frequência relativa desses diferentes tipos. Por exemplo, quando uma navegação usa o backforward (bfcache), isso geralmente resulta em uma navegação quase instantânea, o que é refletido em métricas de LCP e FCP muito pequenas e em métricas de CLS e INP reduzidas.

Ao expor o detalhamento dos tipos de navegação, esperamos incentivar os proprietários de sites a estarem mais cientes dos tipos de navegação usados nos sites deles 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 três semanas de histórico disponível inicialmente e aumentando semanalmente para cobertura total nos próximos seis meses), no conjunto de dados do 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, a remoção do bloqueio bfcache. Ela também pode ajudar a explicar alterações nas métricas mesmo quando nenhuma alteração tiver sido feita nos sites.

O CrUX distingue os seguintes 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 a partir do cache HTTP. Os sites geralmente usam o armazenamento em cache para sub-recursos, mas o principal documento HTML costuma ser armazenado em cache consideravelmente menos. Quando possível, isso pode resultar em melhorias perceptíveis no desempenho, porque podemos usar o armazenamento em cache local e em uma CDN.
`reload`	O usuário recarregou a página, seja pressionando o botão "Atualizar", pressionando Enter na barra de endereço ou desfazendo o fechamento de uma guia. Os recarregamentos de página muitas vezes resultam em revalidação de volta ao servidor para verificar se a página principal foi alterada. Uma alta porcentagem de atualizações da página pode indicar usuários frustrados.
`restore`	A página foi recarregada após a reinicialização do navegador ou uma guia foi removida por motivos de memória. No Chrome no Android, elas são informadas como `reload`.
`back_forward`	O histórico de navegação, ou seja, a página foi vista e retornada recentemente. Com o armazenamento em cache correto, essas experiências devem ser razoavelmente rápidas, mas ainda assim a página precisa ser processada e o JavaScript executado. O bfcache evita isso.
`back_forward_cache`	Uma navegação de histórico que foi veiculada a partir do bfcache. Otimizar suas páginas para aproveitar o bfcache resulta em experiências mais rápidas. Os sites devem tentar remover bloqueadores do bfcache para melhorar a porcentagem de navegações nessa categoria.
`prerender`	A página foi pré-renderizada, o que, de maneira semelhante ao 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 a um tráfego qualificado insuficiente. Consulte a metodologia CrUX para mais informações.

Além disso, o CrUX não é capaz de fornecer detalhamentos de outras métricas por tipo de navegação, já que 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 por critérios como os tipos de navegação. Você pode ver 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 do RUM?.

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

Tipos de navegação na API CrUX

Para conferir os tipos de navegação na API, inclua a métrica navigation_types na solicitação ou não defina uma 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 em mais detalhes na documentação da API, incluindo uma explicação sobre como conseguir a chave de API e o 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) a 1.0 (indicando 100% dos carregamentos de página) para a chave especificada.

Nessa resposta, é possível notar que, para o período de coleta que começa em 6 de março de 2024 e inclui 2 de abril de 2024, 6,77% das navegações (carregamentos de páginas) foram veiculadas pelo bfcache do navegador. Da mesma forma, algumas das outras frações podem ajudar a identificar oportunidades de otimizações de carregamento de página. Para qualquer chave (incluindo uma combinação de URL ou origem e um formato), a soma das frações navigation_types equivale a 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 a solicitação da API CrUX para a API CrUX History, execute-a no endpoint queryHistoryRecord em vez de queryRecord. Por exemplo, nosso CrUX History Colab traça 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 da navegação está no tipo "navegação" e nenhuma mudança significativa nas 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 7 dias de diferença). Depois de totalmente preenchido, ele abrange 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 é ainda mais relevante na configuração do cache HTTP, na otimização de uma página para bfcache e pré-renderização.

Tipos de navegação no CrUX BigQuery

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

Tabelas detalhadas

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

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

Gráfico de correlação mostrando 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 entre carregamentos de páginas instantâneas e uso do bfcache

O Colab para esta análise está bem comentado. Aqui, vamos discutir apenas a consulta que extrai as frações de Navigation_types para as 10 mil origens mais conhecidas das tabelas detalhadas no CrUX BigQuery:

Acessamos a tabela all.202403 aqui (consulte a cláusula FROM), filtramos form_factor por phone e selecionamos origens com classificação de popularidade <= 10.000 para as 10 mil origens mais comuns (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 só serão somadas por origem, mas não por combinação (origem, formato).
Nem todas as origens terão navigation_types, portanto, é uma prática recomendada 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, muitas vezes é mais conveniente (e mais barato) consultar as tabelas materializadas. Por exemplo, a consulta a seguir extrai os dados 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 somarão 1,0 por linha, portanto, é necessário dividir cada fração pela soma dos resultados sobre os quais a consulta deve ser interpretada.

Isso acontece porque as frações navigation_type em chrome-ux-report.materialized.device_summary, como densidades de histograma, somam 1,0 por origem em vez de por origem e dispositivo por data. Isso permite visualizar a distribuição dos tipos de navegação em vários 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 origem https://www.google.com: 6,63% desses carregamentos de página tinham o tipo de navegação back_forward em smartphones, 1,79% em computadores e 0,09% em tablets.

A porcentagem de back_forward consideravelmente mais alta em phone sugere que poderíamos tentar otimizar esses 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á é atendida pelo bfcache, ou seja, a taxa de ocorrências do bfcache. A consulta a seguir sugere que essa origem específica já pode estar bem otimizada, considerando as taxas de hit superiores a 60% para smartphones e computadores.

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 menos uso do bfcache, mas mais a um reflexo de como os usuários navegam e avancem 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 por uma origem neste link. Como é possível observar na captura de tela a seguir, apenas os dados de um mês estão inicialmente disponíveis, mas com o tempo o histórico será preenchido, permitindo que você veja alterações nos tipos mês a mês.

Captura da tela "Navigation Types Distribution" no painel CrUX mostrando dados de um mês. — Tipos de navegação no painel do CrUX

Como você também pode notar, destacamos os tipos de navegação mais rápidos, que as vistas devem buscar otimizar, no topo desta página do painel de controle.

Conclusão

Esperamos que os detalhes dos tipos de navegação no CrUX 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 alcançar carregamentos de página muito mais rápidos do que os carregamentos de página que exigem viagens de volta ao servidor.

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

Queremos receber seu feedback sobre essa novidade nas mídias sociais ou no grupo de discussão do CrUX.