Gerador de Speculation Rules
Crie um script JSON de Speculation Rules com o gerador de regras
Speculation Rules Generator
Your Rules
No rules saved yet.
Output
Add rules above to generate output.
Gerador de Speculation Rules
Esta ferramenta cria configurações de prefetch e prerender para a Speculation Rules API. Gere JSON otimizado para o <head> do seu documento para melhorar o desempenho da navegação.
Guia de Configuração
Siga este processo para criar speculation rules válidas.
Passo 1: Selecionar 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 na navegação.
- Prerender (Até o Script): Renderiza o DOM e 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 computacionais reduzidos.
Passo 2: Definir Gatilhos
Defina a condição que ativa a regra:
- Documento: Ativa quando a URL da página atual corresponde a um padrão definido.
- Lista: Ativa quando a URL da página atual existe dentro de uma lista fornecida manualmente.
Passo 3: Definir Eagerness
Controle o tempo e a prioridade da busca:
- Imediato: Prioridade mais alta. Busca assim que a regra é analisada.
- Eager: Idêntico ao imediato (atualmente atua como um alias).
- Moderado: Aciona ao passar o ponteiro (após 200ms) ou eventos distintos de pressionar o ponteiro.
- Conservador: Prioridade baixa. Aciona apenas ao pressionar o ponteiro ou iniciar o toque.
Passo 4: Recursos Alvo
Filtre links específicos para pré-carregamento usando padrões de URL ou seletores CSS:
- Href Matches: Inclua URLs que correspondam a esses padrões curinga (ex: /product/* visa todos os links no diretório de produtos).
- Href Does Not Match: Exclua URLs que correspondam a esses padrões curinga.
- Selector Matches: Inclua links identificados por seletores CSS (ex: .nav-link visa elementos de navegação).
- Selector Does Not Match: Exclua links identificados por esses seletores CSS.
- URLs: Especifique URLs exatas para pré-carregar (necessário apenas quando a Fonte estiver definida como 'Lista').
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.
Configuração de Exemplo
Os seguintes parâmetros fazem o prerender de todas as páginas de produtos:
- Modo: Prerender
- Gatilho: Documento
- Eagerness: Moderado
- Href Matches: /product/*
Esta regra faz o prerender de URLs dentro do diretório /product/ com prioridade moderada (hover/interação) quando um usuário visita uma página correspondente.
