Prefetch e prerender: navegação rápida sem efeitos colaterais

Resposta direta: prefetch baixa antecipadamente o documento de uma provável próxima página; prerender vai além e carrega, renderiza e executa a página antes da navegação. Use prefetch quando a probabilidade é razoável e o custo deve ser baixo. Reserve prerender para destinos muito prováveis e seguros. Nunca antecipe logout, compra, exclusão, URLs personalizadas ou páginas que disparam analytics e efeitos colaterais antes da ativação.

A Speculation Rules API permite declarar regras de prefetch e prerender para documentos. Ela pode produzir navegação quase instantânea em navegadores compatíveis, mas ainda não está disponível de forma uniforme. Deve ser tratada como melhoria progressiva, com funcionamento normal quando o navegador ignora a dica.

Prefetch e prerender não são a mesma coisa

O prefetch busca o corpo do documento provável e o guarda para uso posterior. Subrecursos como imagens e scripts da página não são necessariamente todos processados. O custo é menor e a ativação ainda exige renderização.

O prerender prepara uma aba invisível: baixa documento e recursos, executa JavaScript e monta a página. Quando o usuário navega, o navegador ativa o conteúdo pronto. O ganho potencial é maior, mas memória, rede e risco também aumentam.

A MDN compara um prerender ao custo aproximado de um iframe carregado. Por isso, não prerenderize uma lista longa de links. Escolha poucos destinos com alta probabilidade.

Speculation Rules API

As regras podem aparecer num script com tipo speculationrules ou ser fornecidas por cabeçalho apontando para JSON externo. É possível listar URLs ou usar condições baseadas em links. O navegador decide se executa a especulação conforme suporte, memória, rede e preferências.

A API substitui abordagens antigas de prerender específicas do Chrome. Para prefetch de documentos, oferece controle mais expressivo. O elemento link rel prefetch continua útil para certos recursos e cenários, mas é diferente de preparar uma navegação completa.

Como a tecnologia não é Baseline, confirme compatibilidade e mantenha fallback. O site precisa continuar acessível e rápido sem especulação.

Escolha páginas seguras

Uma página segura pode ser carregada com GET sem alterar estado. Artigos, páginas de serviço e listagens públicas são candidatas. Acesso antecipado não deve criar pedido, confirmar ação, consumir cupom ou modificar preferência.

Evite URLs de logout, carrinho, exclusão, geração de relatório, token único e área autenticada sensível. Também exclua links com parâmetros que disparam campanhas ou variações personalizadas se o resultado puder ficar incorreto.

Mesmo GET pode ter efeitos colaterais por erro de arquitetura. Corrija o endpoint. A especificação não deve servir como desculpa para ações mutáveis via link.

Analytics e impressões falsas

No prerender, JavaScript pode executar antes de a pessoa visualizar a página. Se o analytics registra page_view no carregamento, uma visita especulativa pode virar sessão falsa. Anúncios, pixels e testes também podem contar impressão indevida.

Use Document.prerendering e o evento prerenderingchange para adiar ações até a ativação. Valide bibliotecas de terceiros, porque nem todas respeitam esse estado. No servidor, o cabeçalho Sec-Purpose ajuda a identificar requisições de prefetch ou prerender.

Não gere conteúdo diferente apenas para manipular métricas. O objetivo é impedir efeitos antes da visualização real. Documente o tratamento e teste em modo compatível.

Privacidade e personalização

Prefetch envia uma requisição antes do clique. Isso pode revelar interesse ao servidor e consumir dados. Para origem cruzada, existem restrições e opções de privacidade, mas o suporte varia. Evite antecipar terceiros sem necessidade.

Páginas personalizadas podem mudar entre especulação e ativação. Estado de login, carrinho, consentimento e localização precisam ser avaliados. Quando o conteúdo ficar obsoleto, descarte ou atualize a especulação.

Respeite economia de dados e sinais do navegador. A dica é opcional; não tente contornar a decisão do agente do usuário.

Como escolher candidatos com dados

Analise a sequência real de navegação. Se a maioria das pessoas que abre uma categoria visita um dos três serviços, o link mais provável pode receber prefetch por interação ou visibilidade. Não especule com base apenas na ordem do menu.

Prerender funciona melhor quando a probabilidade é muito alta: por exemplo, após a pessoa iniciar gesto claro em direção ao link ou num fluxo linear. Regras moderadas equilibram velocidade e desperdício.

Segmente por dispositivo e rede. Um desktop em banda larga tolera mais preparação que celular limitado. Deixe o navegador aplicar heurísticas e não crie scripts agressivos.

Estratégias de eagerness

Regras podem expressar diferentes níveis de prontidão, conforme suporte. Uma estratégia imediata começa cedo; moderada espera sinais como hover ou pointer down. Quanto mais antecipada, maior o ganho e o desperdício possível.

Comece conservador. Prefetch em interação é boa primeira etapa. Depois meça acerto: quantas páginas preparadas foram realmente visitadas? Se a taxa é baixa, refine seleção.

Prerender deve focar poucas rotas. Em páginas com muitos links, condições e seletores excluem ações inseguras, nofollow e parâmetros.

Exemplo prático

Um site de serviços possui uma página de visão geral com cards para tráfego pago, criação de sites e SEO. Dados mostram que, após filtrar a necessidade, a maioria abre exatamente o card em foco. O time adiciona prefetch moderado ao link quando recebe interação.

Na etapa seguinte, testa prerender somente após pointer down para a página do serviço. Exclui formulário enviado, WhatsApp, área administrativa e qualquer rota com efeito. Analytics aguarda ativação.

O resultado é comparado com grupo controle: tempo de navegação, taxa de acerto, bytes desperdiçados, conversão e erros. Se a melhora é mínima, a regra é removida. A otimização precisa pagar seu custo.

Como medir

Use PerformanceNavigationTiming e activationStart para identificar ativação de prerender quando disponível. Observe tempo até primeira renderização da nova página, Core Web Vitals e consumo de rede. Diferencie carregamento normal, prefetch e prerender.

No servidor, registre Sec-Purpose separadamente para não confundir pageviews. Compare requisições preparadas com ativações. Monitore respostas não 2xx, redirecionamentos e cache.

Meça no campo. Laboratório demonstra potencial, mas dispositivos, rede e comportamento real decidem benefício. Uma página pesada continua desperdiçando recursos mesmo quando carregada cedo.

Relação com cache

Cache-Control influencia reutilização. Prefetch tradicional pode ser bloqueado ou limitado por cache; a Speculation Rules API tem comportamento próprio. Garanta que documentos públicos usem políticas coerentes e que conteúdo privado não seja armazenado indevidamente.

Não confunda antecipação com correção de servidor lento. Otimize TTFB, imagens, JavaScript e cache. O guia sobre cache e CDN mostra a base que deve existir antes.

Evite cadeia de redirecionamento no destino especulado. A preparação deve apontar para URL final e canônica.

Aplicações e frameworks

Frameworks podem fazer prefetch automático de links. Verifique o comportamento antes de adicionar outra camada. Duas estratégias podem duplicar requisições, aumentar consumo ou dificultar métricas.

Em aplicações de página única, o roteador pode antecipar chunks e dados em vez de documentos completos. A Speculation Rules API é voltada principalmente para navegações de documentos em aplicações multipágina. Escolha mecanismo compatível com arquitetura.

Teste navegação direta, histórico, autenticação e erro. Uma implementação rápida em cenário ideal pode falhar quando sessão expira.

Checklist de segurança

• Destinos usam GET sem alterar estado.
• Logout, compra e exclusão foram excluídos.
• Analytics espera ativação real.
• Scripts de terceiros foram auditados.
• Regras têm fallback normal.
• Compatibilidade de navegador foi verificada.
• Seleção usa probabilidade de navegação.
• Taxa de acerto e bytes desperdiçados são medidos.
• URLs finais não passam por redirecionamento.
• Privacidade, consentimento e cache foram revisados.

Erros frequentes

Os erros mais comuns são prerenderizar todos os links, contar pageview antes da ativação, preparar rotas com efeitos colaterais, ignorar dados móveis e duplicar prefetch do framework. Outro problema é usar a técnica para mascarar página pesada.

Também evite assumir suporte universal. APIs experimentais devem entrar como melhoria progressiva, nunca como requisito de navegação. Teste ainda o comportamento quando a aba fica em segundo plano, quando a conexão muda e quando o destino exige novo consentimento.

Perguntas frequentes

Prefetch melhora Core Web Vitals?

Pode reduzir espera da próxima navegação, mas não substitui otimização da página. O efeito nas métricas depende de ativação e medição.

Prerender executa JavaScript?

Sim. Ele carrega recursos e executa scripts numa página invisível, por isso efeitos e analytics precisam aguardar ativação.

Funciona em todos os navegadores?

Não. A Speculation Rules API ainda tem disponibilidade limitada. Implemente fallback e confirme compatibilidade atual.

Posso prerenderizar página externa?

Há restrições fortes. Prerender é principalmente mesma origem; cenários relacionados exigem opt-in e suporte específicos.

Como impedir uma rota?

Exclua por URL, seletor ou regra e corrija a semântica da ação. Não dependa apenas do navegador para proteger operações mutáveis.

Qual começar primeiro?

Prefetch moderado de destinos seguros costuma ser etapa inicial mais simples. Prerender vem depois, para rotas muito prováveis.

Conclusão

Prefetch e prerender tornam a próxima página mais rápida quando probabilidade, segurança e medição estão alinhadas. A boa implementação é conservadora, progressiva e sem efeitos antes do clique. A Open Leads considera desempenho, SEO e conversão na criação de sites. Veja outros guias no blog.

Quer transformar tráfego em oportunidades reais? A Open Leads integra mídia paga, mensuração e criação de sites focados em conversão. Conheça os serviços da Open Leads.

Fontes consultadas

Consulte os materiais originais usados na pesquisa deste artigo.

• Speculation Rules API — MDN Web Docs
• Speculative loading — MDN Web Docs
• Speculation rules script type — MDN Web Docs
• Prerender pages in Chrome for instant page navigations — Chrome for Developers