Gerador de Dicas de Recursos Web
Gere tags de dica de recurso <link rel> corretos (preload, prefetch, preconnect, dns-prefetch, modulepreload) e o header HTTP Link equivalente a partir de uma lista simples de recursos, com orientação automática de as= e crossorigin.
Entrada
Um recurso por linha: url | hint type | resource type (as=) | crossorigin | media. Apenas url e hint type são obrigatórios — campos à direita podem ser omitidos. Hint types: preload, prefetch, preconnect, dns-prefetch, modulepreload. Linhas começando com # são ignoradas.
Saída
Correções aplicadas automaticamente (como adicionar crossorigin para fontes) e qualquer coisa que valha a pena verificar.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"resources": "https://fonts.gstatic.com | preconnect | | anony…"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/web-resource-hints-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Dicas de Recursos Web — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O Gerador de Dicas de Recursos Web transforma uma lista simples de recursos em tags HTML <link rel> corretamente formatadas e o header HTTP Link: equivalente para preload, prefetch, preconnect, dns-prefetch e modulepreload. Ele aplica as regras de atributo que os navegadores realmente implementam — as= para preload, crossorigin para fontes — automaticamente e informa o que foi alterado.
Como usar a ferramenta
Digite um recurso por linha no formato:
url | hint type | resource type | crossorigin | mediaApenas a URL e o hint type são obrigatórios — os campos à direita podem ser omitidos. Por exemplo:
https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | fontA ferramenta gera tanto as tags HTML <link> (para seu <head>) quanto as linhas de header HTTP Link: equivalentes (para configuração em nível de servidor, já que um hint de header é aplicado antes mesmo do HTML ser analisado). Copie o formato que sua configuração utiliza.
Tipos de dica
preload— busque um recurso que essa página definitivamente vai precisar, com alta prioridade, sem bloquear a renderização. Requeras=.prefetch— busque um recurso que uma navegação futura provavelmente vai precisar, com baixa prioridade, durante tempo ocioso.preconnect— abra a conexão (DNS + TCP + TLS) com um host de origem cruzada antecipadamente, sem buscar nada ainda.dns-prefetch— resolva DNS para um host antecipadamente; um fallback mais barato para navegadores que não suportampreconnect.modulepreload— preload um módulo JavaScript e seu gráfico de dependências.
Por que as= e crossorigin são importantes
preload sem um valor as= correspondente (script, style, image, font, fetch, document, audio, video, track, worker, embed, object, manifest) é buscado com prioridade incorreta ou ignorado completamente, porque o navegador não consegue determinar como associá-lo à requisição eventual. Fontes especificamente devem ser buscadas em modo CORS mesmo quando de mesma origem — a ferramenta adiciona crossorigin automaticamente para qualquer linha as=font e explica por que no painel de Orientação.
Por que a ferramenta às vezes adiciona crossorigin sem valor?
Um atributo crossorigin simples (sem ="anonymous") é a abreviação padrão para o modo CORS anônimo — a forma que os próprios navegadores usam em seus próprios exemplos de preload. Use crossorigin="use-credentials" explicitamente apenas se o recurso exigir cookies ou autenticação HTTP.
Tag HTML ou header HTTP — qual devo usar?
O header HTTP Link: é descoberto antes mesmo do navegador começar a analisar o HTML, permitindo que ele dê uma dica ligeiramente mais cedo que a mesma tag <link> colocada em <head> — útil para um CDN ou proxy reverso que possa injetar o header, ou para dicas preconnect/dns-prefetch que você queira aplicar em todo o site. Caso contrário, a tag HTML é mais simples de manter já que fica ao lado da marcação que suporta.
Para verificar quais headers um site ativo já está enviando, use o Analisador de Headers HTTP. Para o header de segurança HSTS relacionado, veja o Gerador de Header de Preload HSTS. Para redirecionar URLs antigas em vez de dar dicas de novas, veja o Gerador de Regras de Redirecionamento.