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 permite carregamentos de página muito mais rápidos ou até mesmo instantâneos, melhorando muito as Core Web Vitals para essas navegações adicionais.
Depurar as regras de especulação pode ser complicado. Isso é particularmente verdadeiro para páginas pré-renderizadas, porque essas páginas são renderizadas em um renderizador separado, como uma guia oculta em segundo plano que substitui a guia atual quando ativada. Portanto, as opções comuns do DevTools nem sempre podem ser usadas para depurar problemas.
A equipe do Chrome está trabalhando duro para melhorar o suporte do DevTools à depuração de regras de especulação. Nesta postagem, você vai conhecer todas as diversas 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 (e quando não).
Explicação dos termos "pré-"
Há muitos termos "pré-" que são facilmente confundidos, então vamos começar com uma explicação deles:
- Pré-busca: busca um recurso ou documento com antecedência para melhorar o desempenho futuro. Esta postagem aborda a pré-busca de documentos usando a API Speculation Rules, em vez da opção
<link rel="prefetch">semelhante, mas mais antiga, geralmente usada para pré-buscar subrecursos. - Pré-renderização: vai além da pré-busca. Na verdade, ela renderiza a página inteira como se o usuário tivesse navegado até ela, mas a mantém em um processo oculto de renderização em segundo plano pronta para ser usada se o usuário realmente acessar a página. Novamente, este documento trata da versão mais recente da API Speculation Rules, em vez da opção
<link rel="prerender">mais antiga, que não faz mais uma pré-renderização completa. - Especulações de navegação: 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">, verificador de pré-carregamento e pré-carregamentos de navegação do service worker. Esses itens não serão abordados aqui, mas o termo está incluído para diferenciá-los claramente do termo "especulações de navegação".
Regras de especulação para prefetch
As regras de especulação podem ser usadas para fazer a pré-busca do documento da próxima navegação. Por exemplo, ao inserir o seguinte JSON 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 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 armazenados no cache de memória em vez do cache de disco HTTP.
Como depurar regras de especulação 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 de pré-busca, como mostrado na coluna Type. Elas são buscadas com a prioridade Lowest, já que 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:
Como depurar prefetch com as guias de carregamento especulativo.
Uma nova seção Carregamentos especulativos foi adicionada ao painel Aplicativo do Chrome DevTools, na seção Serviços em segundo plano, para ajudar na depuração das regras de especulação:
Há três guias disponíveis nessa seção:
- Carregamentos especulativos, que listam o status pré-renderizado da página atual.
- Regras, que lista todos os grupos de regras encontrados na página atual.
- Especulações, que lista todos os URLs pré-buscados e pré-renderizados dos conjuntos de regras.
A guia Especulações é mostrada na captura de tela anterior, e esta página de exemplo tem um único conjunto de regras de especulação para a pré-busca de 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. Como alternativa, é possível clicar no link Status para acessar a guia Especulações filtrada para esse conjunto de regras.
A guia Especulações lista todos os URLs de destino com a ação (pré-busca ou pré-renderização), 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 os URLs de todos os grupos de regras ou somente os URLs de um grupo específico. Abaixo disso, todos os URLs serã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 código 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 a página ou não.
Para uma página pré-buscada, você vai ver uma mensagem de êxito quando a página for acessada:
Especulações sem correspondência
Quando a navegação acontece a partir de 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 do motivo pelo qual o URL não corresponde a nenhum dos URLs de especulação. Isso é útil para detectar 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, então podemos notar que isso não corresponde a nenhuma dessas três regras.
As guias Carregamentos especulativos são muito úteis para depurar as regras de especulação e encontrar erros de sintaxe no JSON.
Quanto às pré-buscas, o painel Network provavelmente é um lugar mais familiar. Para o exemplo de falha de pré-busca, você pode consultar o erro 404 aqui:
No entanto, as guias Carregamentos especulativos se tornam muito mais úteis para pré-renderizar 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é-busca. 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 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 no painel Rede, porque são buscadas e renderizadas em um processo de renderização separado no Chrome. Isso torna as guias Carregamentos especulativos mais importantes para depurar regras de especulação pré-renderização.
Como depurar prerender com as guias de carregamentos especulativos.
As mesmas telas de Carregamentos especulativos podem ser usadas para regras de especulação pré-renderizadas, conforme demonstrado com uma página de demonstração semelhante que tenta fazer a pré-renderização, em vez de fazer a pré-busca das três páginas:
Aqui vemos novamente que um dos três URLs apresentou falha na pré-renderização, e os desenvolvedores podem ver os detalhes por URL na guia Especulações clicando no link 2 prontos, uma falha.
No Chrome 121, lançamos o suporte a regras de documentos. Isso permite que o navegador colete esses links da 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>
Esse exemplo seleciona todos os links de origem, exceto aqueles que começam com /not-safe-to-prerender, como candidatos de pré-renderização.
Ele também define a eagerness de pré-renderização como moderate, o que significa que as navegações são pré-renderizadas quando o usuário passa o cursor sobre o link ou clica nele.
Há regras semelhantes como esta neste site de demonstração. Usar a nova seção Carregamentos especulativos neste site mostra a utilidade dessa nova guia, já que todos os URLs qualificados encontrados pelo navegador na página estão listados:
O status é Não acionado porque o processo de pré-renderização não foi iniciado. No entanto, quando passamos o cursor sobre os links, vemos a mudança de status, já que cada URL é pré-renderizado:
O Chrome definiu limites para pré-renderizações, incluindo no máximo duas pré-renderizações para a eagerness moderate. Por isso, depois de passar o cursor sobre o terceiro link, vemos o motivo da falha desse URL:
Como depurar prerender com os outros painéis do DevTools
Ao contrário das pré-buscas, as páginas que foram pré-renderizadas não vão aparecer nos processos de renderização atuais nos painéis do DevTools, como o painel 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 superior do painel e Inspect:
Esse menu suspenso (e o valor selecionado) também é compartilhado entre todos os outros painéis, como o painel Rede, em que é possível conferir que a página solicitada é a pré-renderizada:
Analisando os cabeçalhos HTTP desses recursos, podemos ver que todos eles serão definidos com o cabeçalho Sec-Purpose: prefetch;prerender:
O painel Elementos, que mostra o conteúdo da página, como na captura de tela a seguir, em que o elemento <h1> é para a página pré-renderizada:
O painel do Console, em que é possível consultar os registros 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 (o que pode ser visualizado conforme descrito na seção anterior).
Além disso, quando uma página pré-renderizada é ativada pelo acesso do usuário, a guia Carregamentos especulativos mostra esse status e se ela foi pré-renderizada ou não. Se não for possível pré-renderizar, uma explicação sobre o motivo disso foi fornecida:
Além disso, como é o caso das pré-buscas, navegar em 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 incluídos nas regras de especulação da página anterior na guia Carregamentos especulativos:
Conclusão
Nesta postagem, mostramos as várias maneiras pelas quais os desenvolvedores podem depurar as regras de especulação de pré-busca e pré-renderização. A equipe continua a trabalhar em ferramentas para regras de especulação, e gostaríamos de receber sugestões dos desenvolvedores sobre quais outras maneiras seriam úteis para depurar essa nova e empolgante API. Incentivamos os desenvolvedores a informar problemas no Issue Tracker do Chrome no caso de solicitações de recursos ou bugs detectados.
Agradecimentos
Imagem em thumbail de Nubelson Fernandes no Unsplash (links em inglês).