Gerador de link rel=preload
Monta a tag link rel=preload com as (script, style, font, image). Carrega recursos críticos cedo.
Link preload: o hint de performance que os navegadores sempre honram
A tag <link rel="preload"> é um resource hint que diz ao navegador para começar a baixar um asset crítico assim que o <head> é parseado, sem esperar o CSS ou o JavaScript que normalmente faria essa requisição. Diferente de prefetch (hint de baixa prioridade para a próxima navegação) ou de preconnect (que só abre handshake TCP/TLS), o preload baixa os bytes de fato e os guarda no cache de memória. Usado cirurgicamente nos assets certos, derruba centenas de milissegundos no LCP (Largest Contentful Paint); usado sem critério desperdiça banda e dispara warnings no console.
Sintaxe, atributos obrigatórios e a famosa pegadinha do "as"
O atributo as é obrigatório e informa ao navegador qual política CSP aplicar, qual cabeçalho Accept enviar e qual content-type esperar. Valores válidos: font, script, style, image, fetch, video, audio, document, track e worker. Para fontes, o atributo crossorigin também é obrigatório — fontes são sempre buscadas com CORS anônimo, e um preload sem crossorigin baixa o arquivo duas vezes (uma para o hint, outra para o uso real). Para imagens e formatos modernos, adicione type para que o navegador pule o preload quando o formato não for suportado.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app.js" as="script">
<link rel="preload" href="/img/hero.avif" as="image" type="image/avif" fetchpriority="high">
<link rel="modulepreload" href="/js/main.mjs">Preload vs prefetch vs preconnect vs prerender
Esses quatro hints são confundidos com frequência, mas resolvem problemas diferentes. Preload quer dizer "vou usar isto na página atual, baixa agora"; o navegador trata como fetch de alta prioridade. Prefetch quer dizer "provavelmente vou usar isto na próxima navegação"; baixado com prioridade mínima em tempo ocioso. Preconnect quer dizer "sei que vou precisar dessa origem, faça DNS, TCP e TLS já"; não baixa nada, só abre a conexão. Prerender (e sua substituta, a Speculation Rules API) renderiza toda a próxima página em segundo plano. Use preload para hero image e fonte crítica; preconnect para origens terceiras como Google Fonts ou seu CDN; prefetch para a página seguinte mais provável; prerender (com cautela) em sites com navegação previsível.
Modulepreload para módulos ES e seus imports
O preload normal com as="script" não parseia o JavaScript, então qualquer cadeia de import dentro do arquivo ainda dispara uma cascata sequencial de downloads. A variante <link rel="modulepreload"> manda o navegador baixar o módulo E resolver seus imports estáticos em paralelo, exatamente o que se quer em ESM moderno sem bundler. Os navegadores ainda guardam o módulo parseado no module map, então a instrução import futura consome só ciclos.
<link rel="modulepreload" href="/js/router.mjs">
<link rel="modulepreload" href="/js/store.mjs">
<link rel="modulepreload" href="/js/components/Hero.mjs">103 Early Hints, fetchpriority e Core Web Vitals
Duas adições recentes amplificam o que o preload pode fazer. O status HTTP 103 Early Hints permite ao servidor enviar cabeçalhos Link: ...; rel=preload antes da resposta final 200, dando ao navegador uma vantagem enquanto a página ainda está sendo montada. O atributo fetchpriority (Chrome 102+) sobrescreve a prioridade padrão: fetchpriority="high" na imagem LCP geralmente economiza 100 a 300 ms; fetchpriority="low" em imagens abaixo da dobra libera banda para o conteúdo above-the-fold. Use Lighthouse, WebPageTest ou o painel Performance do Chrome para confirmar que o preload está sendo honrado — às vezes o navegador o ignora porque o asset já foi descoberto pelo preload scanner.
Erros comuns e o warning "preloaded but not used"
- Preloadar tudo — quanto mais você preloadar, menos crítico cada preload se torna. Reserve para os 2 a 4 recursos verdadeiramente bloqueadores.
- Faltar
crossoriginem fontes — a fonte baixa duas vezes, dobrando o atraso de LCP que você queria resolver. - Valor errado em
as— o navegador ignora o preload em silêncio e você desperdiça uma requisição. - Preloadar bundles com hash cuja URL muda a cada build sem atualizar o HTML — todo deploy emite um preload stale.
- Warning "preloaded but not used within a few seconds" — em geral, significa que o asset não é necessário nessa página, ou que seu consumidor real foi lazy-loaded e o preload disparou cedo demais.
Perguntas frequentes
Devo preloadar todo CSS e JS? Não. Só recursos que bloqueiam a renderização e que o navegador descobriria tarde. Preloadar tudo inverte causa e efeito — nada fica priorizado.
Quanto preload ajuda no LCP? Números realistas de estudos públicos: 100 a 300 ms em 4G rápido para uma única fonte crítica ou hero image, às vezes 500 ms+ em conexões lentas.
Preload funciona cross-origin? Sim, mas você precisa especificar crossorigin compatível com a configuração CORS do servidor de origem, senão o preload é descartado.
Que tamanho de asset se beneficia mais? Contra-intuitivamente, assets críticos pequenos se beneficiam mais porque terminam o download antes do parser descobri-los. Hero images de 50-200 KB e subsets de fontes de 20-40 KB são o sweet spot.
Por que o navegador está ignorando meu preload? Em geral por um destes motivos: as errado, falta de crossorigin, CSP bloqueando a origem, ou o preload scanner já encontrou o asset antes no HTML.
Ferramentas Relacionadas
Gerador de link rel=prefetch
Monta a tag link rel=prefetch para baixar recursos antecipadamente. Acelera próxima navegação.
Gerador de QR Code
Gere QR Codes a partir de qualquer texto, URL, email ou telefone. Download em PNG instantâneo, processado diretamente no seu navegador.
Formulário Contato HTML
Gere o HTML de um formulário de contato com campos de nome, e-mail e mensagem, pronto para colar no seu site. Copie o código e conecte ao seu backend.