Gerador de regras de especulação

Crie um script JSON de regras de especulação com o gerador de regras

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2026-02-08

Speculation Rules Generator

AND = all must match. OR = any can match. 
Add matches to see preview...

Your Rules

No rules saved yet.

Output 

Add rules above to generate output.

Gerador de Regras de Especulação

Esta ferramenta cria configurações de prefetch e prerender para a Speculation Rules API. Gere um JSON otimizado para o <head> do seu documento para melhorar o desempenho da navegação.

Guia de Configuração

Siga este processo para criar regras de especulação válidas.

Etapa 1: Selecionar a Estratégia

Determine como o navegador lida com o recurso especulado:

  • Prefetch: Baixa o corpo da resposta em segundo plano sem renderizar. Ideal para recursos de alta probabilidade onde o uso de memória deve permanecer baixo.
  • Prerender: Baixa e renderiza totalmente a página (incluindo JavaScript) em uma guia em segundo plano. Fornece uma transição instantânea após a navegação.
  • Prerender (Until Script): Renderiza o DOM e o CSS, mas pausa a execução do JavaScript até que o usuário navegue para a página. Equilibra a velocidade de renderização com custos de computação reduzidos.

Etapa 2: Definir Gatilhos

Defina a condição que ativa a regra:

  • Document: Ativa quando a URL da página atual corresponde a um padrão definido.
  • List: Ativa quando a URL da página atual existe em uma lista fornecida manualmente.

Etapa 3: Definir Eagerness

Controle o tempo e a prioridade da busca:

  • Immediate: Prioridade mais alta. Busca assim que a regra é analisada.
  • Eager: Idêntico ao imediato (atualmente atua como um alias).
  • Moderate: Acionado ao passar o ponteiro (após 200 ms) ou em eventos distintos de pressionar o ponteiro.
  • Conservative: Baixa prioridade. Acionado apenas ao pressionar o ponteiro ou no início do toque.

Etapa 4: Recursos de Destino

Filtre links específicos para pré-carregamento usando padrões de URL ou seletores CSS:

  • Href Matches: Inclui URLs correspondentes a esses padrões curinga (por exemplo, /product/* tem como alvo todos os links no diretório do produto).
  • Href Does Not Match: Exclui URLs correspondentes a esses padrões curinga.
  • Selector Matches: Inclui links identificados por seletores CSS (por exemplo, .nav-link tem como alvo elementos de navegação).
  • Selector Does Not Match: Exclui links identificados por esses seletores CSS.
  • URLs: Especifique URLs exatas para pré-carregar (necessário apenas quando Source está definido como 'List').

Implementação

Copie o JSON gerado e coloque-o dentro de uma tag <script type="speculationrules"> no <head> do seu site. Para verificar, abra o Chrome DevTools (Ctrl+Shift+I), navegue até o painel Application e selecione Speculation Rules na barra lateral.

Exemplo de Configuração

Os seguintes parâmetros pré-renderizam todas as páginas de produtos:

  • Mode: Prerender
  • Trigger: Document
  • Eagerness: Moderate
  • Href Matches: /product/*

Esta regra pré-renderiza URLs dentro do diretório /product/ com prioridade moderada (hover/interação) quando um usuário visita uma página correspondente.

Gerador de regras de especulaçãoCore Web Vitals Gerador de regras de especulação