As regras de especulação podem ser usadas para pré-buscar e pré-renderizar as navegações na próxima página, conforme detalhado no post anterior. Isso pode permitir carregamentos de página muito mais rápidos ou até instantâneos, melhorando significativamente as Core Web Vitals para essas navegações nas páginas adicionais.
Depurar regras de especulação pode ser complicado. Isso é especialmente verdadeiro para páginas pré-renderizadas, já que elas são renderizadas em um renderizador separado, como uma guia de segundo plano oculta que substitui a guia atual quando ativada. Portanto, nem sempre é possível usar as opções comuns do DevTools para depurar problemas.
A equipe do Chrome tem trabalhado muito para melhorar o suporte do DevTools à depuração de regras de especulação. Nesta postagem, você vai conhecer as várias maneiras de usar essas ferramentas para entender as regras de especulação de uma página, por que elas podem não estar funcionando e quando os desenvolvedores podem usar as opções mais conhecidas do DevTools.
Explicação dos termos "pré-"
Há muitos termos com o prefixo "pré-" que são confusos. Por isso, vamos começar com uma explicação deles:
- Pré-busca: busca um recurso ou documento com antecedência para melhorar o desempenho futuro. Nesta postagem, abordamos a pré-busca de documentos usando a API Speculation Rules, em vez da opção
<link rel="prefetch">, que é semelhante, mas mais antiga, e geralmente usada para pré-buscar sub-recursos. - Pré-renderização: vai além da pré-busca e renderiza toda a página como se o usuário tivesse navegado até ela, mas a mantém em um processo do renderizador em segundo plano oculto, pronto para ser usado se o usuário realmente navegar até lá. Novamente, este documento se refere à versão mais recente da API Speculation Rules, e não à opção
<link rel="prerender">mais antiga (que não faz mais uma pré-renderização completa). - Navegações especulativas: o termo coletivo para as novas opções de pré-busca e pré-renderização acionadas por regras de especulação.
- Pré-carregamento: um termo sobrecarregado que pode se referir a várias tecnologias e processos, incluindo
<link rel="preload">, o scanner de pré-carregamento e pré-carregamentos de navegação do service worker. Esses itens não serão abordados aqui, mas o termo foi incluído para diferenciá-los claramente do termo "navegações especulativas".
Regras de especulação para prefetch
As regras de especulação podem ser usadas para pré-buscar o documento da próxima navegação. Por exemplo, ao inserir o JSON a seguir em uma página, next.html e next2.html serão pré-buscados:
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
O uso de regras de especulação para pré-buscas de navegação tem algumas vantagens em relação à sintaxe <link rel="prefetch"> mais antiga, como uma API mais expressiva e os resultados sendo armazenados no cache em memória em vez do cache em disco HTTP.
Depurar regras de especulação de prefetch
As pré-buscas acionadas por regras de especulação podem ser vistas no painel Rede da mesma forma que outras buscas:
As duas solicitações destacadas em vermelho são os recursos pré-buscados, como pode ser visto na coluna Type. Eles são buscados com prioridade Lowest, já que são para navegações futuras, e o Chrome prioriza os recursos da página atual.
Ao clicar em uma das linhas, o cabeçalho HTTP Sec-Purpose: prefetch também é mostrado, que é como essas solicitações podem ser identificadas no lado do servidor:
Depurar prefetch com as guias de carregamento especulativo
Uma nova seção Carregamentos especulativos foi adicionada ao painel Application do Chrome DevTools, na seção Serviços em segundo plano, para ajudar na depuração de regras de especulação:
Há três guias disponíveis nesta seção:
- Carregamentos especulativos, que lista o status de pré-renderização da página atual.
- Regras, que lista todos os conjuntos de regras encontrados na página atual, designados como URLs ou tags de regra, se houver.
- Especulações, que lista todos os URLs pré-buscados e pré-renderizados dos conjuntos de regras.
A guia Speculations é mostrada na captura de tela anterior, e podemos ver que essa página de exemplo tem um único conjunto de regras de especulação para pré-carregar três páginas. Duas dessas pré-buscas foram bem-sucedidas, e uma falhou. Clique no ícone ao lado de Conjunto de regras para acessar a origem do conjunto de regras no painel Elementos. Se preferir, clique no link Status para acessar a guia Speculations filtrada para esse conjunto de regras.
A guia Speculations lista todos os URLs de destino, além da ação (pré-busca ou pré-renderização), o conjunto de regras de origem (já que pode haver vários em uma página) e o status de cada especulação:
Acima dos URLs, um menu suspenso pode ser usado para mostrar URLs de todos os conjuntos de regras ou apenas de um conjunto específico. Abaixo, todos os URLs são listados. Clique em um URL para ver informações mais detalhadas.
Nesta captura de tela, podemos ver o motivo da falha na página next3.html, que não existe e, portanto, retorna um 404, que é um código de status HTTP diferente de 2xx.
A guia de resumo, Carregamentos especulativos, mostra um relatório de Status de carregamento especulativo desta página para mostrar se uma pré-busca ou pré-renderização foi usada para esta página ou não.
Para uma página pré-buscada, você vai receber uma mensagem de sucesso quando ela for acessada:
Especulações sem correspondência
Quando uma navegação ocorre em uma página com regras de especulação que não resulta no uso de uma pré-busca ou pré-renderização, uma seção adicional da guia mostra mais detalhes sobre o motivo de o URL não corresponder a nenhum dos URLs de especulação. Isso é útil para identificar erros de digitação nas regras de especulação.
Por exemplo, aqui navegamos para next4.html, mas apenas next.html, next2.html ou next3.html são pré-buscas. Portanto, podemos ver que isso não corresponde a nenhuma dessas três regras.
As guias Carregamentos especulativos são muito úteis para depurar as próprias regras de especulação e encontrar erros de sintaxe no JSON.
Quanto às pré-buscas em si, o painel Rede provavelmente é um lugar mais familiar. No exemplo de falha de pré-busca, você pode ver o erro 404 aqui:
No entanto, as guias Carregamentos especulativos se tornam muito mais úteis para regras de especulação de pré-renderização, que são abordadas a seguir.
Regras de especulação para prerender
As regras de especulação de pré-renderização seguem a mesma sintaxe das regras de especulação de pré-busca. Exemplo:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
Esse conjunto de regras aciona um carregamento e uma renderização completos das páginas especificadas (sujeito a certas restrições). Isso pode proporcionar uma experiência de carregamento instantâneo, embora com custos extras de recursos.
No entanto, ao contrário das pré-buscas, elas não estão disponíveis para visualização no painel Rede, porque são buscadas e renderizadas em um processo do renderizador separado no Chrome. Isso torna as guias Carregamentos especulativos mais importantes para depurar regras de especulação de pré-renderização.
Depurar prerender com as guias de carregamentos especulativos
As mesmas telas de Carregamentos especulativos podem ser usadas para regras de especulação de pré-renderização, conforme demonstrado com uma página de demonstração semelhante que tenta pré-renderizar, em vez de pré-buscar as três páginas:
Aqui, vemos novamente que um dos três URLs não foi pré-renderizado, e os desenvolvedores podem conferir os detalhes de cada URL na guia Speculations clicando no link 2 Ready, 1 Failure.
No Chrome 121, lançamos o suporte a regras de documentos. Isso permite que o navegador os selecione em links de mesma origem na página, em vez de listar um conjunto específico de URLs:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
Este exemplo seleciona todos os links de mesma origem, exceto aqueles que começam com /not-safe-to-prerender como candidatos à pré-renderização.
Ele também define a pré-renderização eagerness como moderate, o que significa que as navegações são pré-renderizadas quando o link é focalizado (no computador), com base na janela de visualização (no dispositivo móvel) ou quando é clicado.
Há regras semelhantes a essa no site de demonstração de regras especulativas. O uso da nova seção Carregamentos especulativos nesse site mostra a utilidade dessa nova guia, já que todos os URLs qualificados que o navegador encontrou na página estão listados:
O Status é Não acionado porque o processo de pré-renderização não foi iniciado. No entanto, ao manter o ponteiro sobre os links, o status muda conforme cada URL é pré-renderizado:
O Chrome tem limites para pré-renderizações, incluindo um máximo de 2 pré-renderizações para a expectativa moderate. Portanto, depois de passar o cursor sobre o terceiro link, vemos o motivo da falha para esse URL:
Depurar prerender com os outros painéis do DevTools
Ao contrário das pré-buscas, as páginas pré-renderizadas não aparecem nos processos de renderização atuais nos painéis do DevTools, como o painel Rede, porque são renderizadas no próprio renderizador em segundo plano.
No entanto, agora é possível alternar o renderizador usado pelos painéis do DevTools com o menu suspenso no canto superior direito ou selecionando um URL na parte de cima do painel e escolhendo Inspecionar:
Esse menu suspenso (e o valor selecionado) também é compartilhado com todos os outros painéis, como o painel Network, em que é possível ver que a página solicitada é a pré-renderizada:
Ao analisar os cabeçalhos HTTP desses recursos, podemos ver que todos eles serão definidos com o cabeçalho Sec-Purpose: prefetch;prerender:
Ou o painel Elementos, em que é possível ver o conteúdo da página, como na captura de tela a seguir, em que o elemento <h1> é para a página pré-renderizada:
Ou o painel Console, em que é possível ver os registros do console emitidos pela página pré-renderizada:
Depurar regras de especulação na página pré-renderizada
As seções anteriores discutem como depurar páginas pré-renderizadas na página que inicia a pré-renderização. No entanto, também é possível que as próprias páginas pré-renderizadas forneçam informações de depuração, seja fazendo chamadas de análise ou registrando no console (que pode ser visualizado conforme descrito na seção anterior).
Além disso, quando uma página pré-renderizada é ativada pelo usuário que navega até ela, a guia Carregamentos especulativos mostra esse status e se ela foi pré-renderizada ou não. Se não for possível fazer a pré-renderização, uma explicação do motivo será fornecida:
Além disso, como no caso das pré-buscas, ao navegar de uma página com regras de especulação que não correspondem à página atual, o DevTools vai tentar mostrar por que os URLs não correspondem aos que estão nas regras de especulação da página anterior na guia Carregamentos especulativos:
Conclusão
Nesta postagem, mostramos as várias maneiras de depurar regras de especulação de pré-busca e pré-renderização. A equipe continua trabalhando em ferramentas para regras de especulação, e gostaríamos de receber sugestões dos desenvolvedores sobre outras maneiras de depurar essa nova API. Recomendamos que os desenvolvedores usem o Issue Tracker do Chrome para informar solicitações de recursos ou bugs encontrados.
Agradecimentos
Imagem em miniatura por Nubelson Fernandes no Unsplash.