Gerador de preload, preconnect e dns-prefetch

Gerador de preload, preconnect e dns-prefetch: para que serve

Resource hints são tags no <head> que avisam o navegador do que a página vai precisar, para ele adiantar conexões e downloads. Usados com moderação, encurtam o tempo até o conteúdo principal aparecer; usados demais, atrapalham.

Cole os endereços ou o HTML da página e a ferramenta escolhe: preconnect (com crossorigin quando é fonte) para até três domínios importantes, dns-prefetch para o resto e para scripts de análise, preload só para uma ou duas fontes e para a imagem principal com fetchpriority=high, e prefetch para a próxima página provável. Cada tag vem com o motivo.

Como usar

1. Cole os endereços ou o HTML.
2. Confira o domínio, a imagem principal e a próxima página.
3. Copie as tags para o <head>.

Quando usar

• Sites com Google Fonts.
• Páginas com imagem grande no topo.
• Melhorar o LCP do Core Web Vitals.

Perguntas frequentes

Qual a diferença entre preconnect e dns-prefetch?

O preconnect abre a conexão inteira com o outro domínio (DNS, TCP e TLS) antes de o navegador precisar dela. O dns-prefetch só resolve o DNS, é mais barato e serve para domínios menos importantes. Use preconnect em poucos domínios, dois ou três, e dns-prefetch no resto.

Quando usar preload?

Só para recursos críticos que o navegador descobre tarde, como a fonte do título (que fica escondida dentro do CSS) ou a imagem principal colocada como fundo pelo CSS. Preload demais disputa banda com o que importa e deixa o site mais lento.

Por que a fonte precisa de crossorigin?

Fontes são sempre buscadas em modo CORS. Sem o atributo crossorigin no preload ou no preconnect, o navegador não reaproveita o que já baixou e acaba pedindo a fonte duas vezes.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas