As regras de especulação podem ser usadas para pré-buscar e pré-renderizar as navegações da próxima página, conforme detalhado na postagem anterior. Isso pode permitir carregamentos de página muito mais rápidos ou até mesmo instantâneos, melhorando muito as Core Web Vitals para essas navegações adicionais.
A depuração das regras de especulação pode ser complicada. 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, as opções usuais do DevTools nem sempre podem ser usadas para depurar problemas.
A equipe do Chrome tem trabalhado muito para melhorar o suporte do DevTools para depuração de regras de especulação. Neste post, 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 das Ferramentas do desenvolvedor e quando não.
Explicação dos termos "pré-"
Há muitos termos "pré-" que são confusos, então vamos começar com uma explicação deles:
- Pré-busca: busca um recurso ou documento com antecedência para melhorar o desempenho no futuro. Esta postagem aborda o pré-carregamento de documentos usando a API Speculation Rules, em vez da opção
<link rel="prefetch">semelhante, mas mais antiga, usada com frequência para pré-carregar subrecursos. - 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 de renderização em segundo plano oculto, pronto para ser usado se o usuário realmente navegar até ela. 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ção especulativa: o termo coletivo para as novas opções de pré-carregamento 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 verificador de pré-carregamento e os pré-carregamentos de navegação do service worker. Esses itens não serão abordados aqui, mas o termo é incluído para diferenciá-los claramente do termo "navegação especulativa".
Regras de especulação para prefetch
As regras de especulação podem ser usadas para fazer preempção do 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="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
O uso de regras de especulação para previsões de navegação tem algumas vantagens em relação à sintaxe <link rel="prefetch"> mais antiga, como uma API mais expressiva e os resultados armazenados no cache de memória em vez do cache de disco HTTP.
Depurar regras de especulação prefetch
As pretransferências acionadas por regras de especulação podem ser vistas no painel Rede da mesma forma que outras transferências:
As duas solicitações destacadas em vermelho são os recursos pré-buscados, conforme mostrado na coluna Type. Eles são buscados na prioridade Lowest, porque são para navegações futuras, e o Chrome prioriza os recursos da página atual.
Clicar em uma das linhas também mostra o cabeçalho HTTP Sec-Purpose: prefetch, que é como essas solicitações podem ser identificadas no lado do servidor:
Depurar prefetch com as guias de carregamento especulativo
Uma nova seção Speculative loads foi adicionada ao painel Application do Chrome DevTools, na seção Background services, para ajudar na depuração de regras de especulação:
Há três guias disponíveis nesta seção:
- Carregamentos especulativos, que listam o status de pré-renderização da página atual.
- Regras, que lista todos os conjuntos de regras encontrados na página atual.
- Especulação, que lista todos os URLs pré-carregados e pré-renderizados dos conjuntos de regras.
A guia Speculations é mostrada na captura de tela anterior, e podemos ver que esta página de exemplo tem um único conjunto de regras de especulação para pré-carregar três páginas. Duas dessas previsões 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. Você também pode clicar no link Status para acessar a guia Especulação filtrada para essa regra.
A guia Especulação lista todos os URLs de destino, junto com a ação (pré-carregar ou pré-renderizar), de qual conjunto de regras eles vieram (já que pode haver vários em uma página) e o status de cada especulação:
Acima dos URLs, é possível usar um menu suspenso para mostrar URLs de todos os conjuntos de regras ou apenas de um conjunto específico. Abaixo disso, todos os URLs são listados. Clique em um URL para conferir informações mais detalhadas.
Nesta captura de tela, podemos ver o motivo da falha da página next3.html, que não existe e, portanto, retorna um 404, que é um código de status HTTP que não é 2xx.
A guia de resumo Carregamentos especulativos mostra um relatório Status de carregamento especulativo desta página para mostrar se um pré-carregamento ou pré-renderização foi usado para essa página ou não.
Para uma página pré-buscada, você vai receber uma mensagem de sucesso quando ela for acessada:
Especulações não correspondentes
Quando uma navegação ocorre em uma página com regras de especulação que não resultam em uma pré-busca ou pré-renderização, uma seção adicional da guia mostra mais detalhes sobre por que o URL não corresponde a nenhum dos URLs de especulação. Isso é útil para detectar erros de digitação nas suas regras de especulação.
Por exemplo, aqui navegamos para next4.html, mas apenas next.html, next2.html ou next3.html são pré-carregamentos. Portanto, podemos ver que isso não corresponde a nenhuma dessas três regras.
As guias Cargas especulativas são muito úteis para depurar as regras de especulação e encontrar erros de sintaxe no JSON.
Quanto aos próprios prefetches, o painel Rede provavelmente é um lugar mais conhecido. Para o exemplo de falha de pré-carregamento, confira o 404 para o pré-carregamento aqui:
No entanto, as guias Cargas especulativas se tornam muito mais úteis para a pré-renderização de regras de especulação, que serã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é-carregamento. Exemplo:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Esse conjunto de regras aciona o carregamento e a renderização completos das páginas especificadas (sujeito a determinadas restrições). Isso pode proporcionar uma experiência de carregamento instantâneo, embora com custos de recursos extras.
No entanto, ao contrário dos pré-carregamentos, eles não estão disponíveis para visualização no painel Rede, porque são buscados e renderizados em um processo de renderização separado no Chrome. Isso torna as guias Cargas especulativas mais importantes para depurar regras de especulação de pré-renderização.
Depurar prerender com as guias de carregamentos especulativos
As mesmas telas de cargas especulativas 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é-carregar as três páginas:
Aqui, vemos novamente que um dos três URLs não foi pré-renderizado, e os desenvolvedores podem acessar os detalhes por 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 colete esses dados de links de mesma origem na página, em vez de listar um conjunto específico de URLs:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/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 a pré-renderização.
Ele também define o eagerness de pré-renderização como moderate, o que significa que as navegações são pré-renderizadas quando o cursor passa sobre o link ou clica nele.
Há regras semelhantes a essa no site de demonstração de regras especulativas. O uso da nova seção Cargas especulativas nesse site mostra a utilidade dessa nova guia, já que todos os URLs qualificados encontrados pelo navegador na página sã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 à medida que cada URL é pré-renderizado:
O Chrome define limites para pré-renderizações, incluindo um máximo de duas pré-renderizações para a prontidão de moderate. 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 dos pré-carregamentos, as páginas que foram renderizadas previamente não aparecem nos processos de renderização atuais nos painéis do DevTools, como o Network, 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 selecionando Inspecionar:
Esse menu suspenso (e o valor selecionado) também é compartilhado em todos os outros painéis, como o painel Network, em que você pode conferir que a página solicitada é a renderizada previamente:
Analisando 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 Elements, em que você pode conferir 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 do console, onde é possível conferir 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, 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, a guia Cargas especulativas mostra esse status e se ela foi pré-renderizada ou não. Se não foi possível fazer a pré-renderização, uma explicação sobre o motivo é fornecida:
Além disso, como acontece com as pré-buscas, a navegação de uma página com regras de especulação que não correspondem à página atual vai tentar mostrar por que os URLs não correspondem aos cobertos pelas regras de especulação da página anterior na guia Carregamentos especulativos:
Conclusão
Neste post, mostramos as várias maneiras de depurar regras de especulação de pré-carregamento e pré-renderização. A equipe continua trabalhando nas ferramentas para regras de especulação. Gostaríamos de receber sugestões dos desenvolvedores sobre outras maneiras de depurar essa nova API. Recomendamos que os desenvolvedores relatem um problema no Issue Tracker do Chrome para solicitações de recursos ou bugs encontrados.
Agradecimentos
Imagem em miniatura de Nubelson Fernandes no Unsplash.