O que são resource hints como preload, prefetch e preconnect?

Question

Accepted Answer

**Resource hints** são tags `` que informam ao navegador para buscar ou conectar a recursos antecipadamente, otimizando o desempenho de carregamento. Cada uma atende a uma necessidade diferente de timing/prioridade. ```html ``` ## O que cada uma faz - **`preload`** — "Eu preciso disso **para a página atual**, busque agora com alta prioridade." Para recursos críticos que o parser descobri tarde: fontes, imagens hero, assets referenciados por CSS. Requer `as` para que o navegador defina prioridade/headers corretos. - **`preconnect`** — "Vou conectar a essa **origem** em breve; faça a busca DNS + TCP + handshake TLS agora." Economiza as rodadas de latência antes da primeira requisição para um terceiro (API, host de fontes, CDN). Use para poucas origens críticas. - **`dns-prefetch`** — uma versão mais leve do preconnect: apenas a resolução DNS. Boa alternativa / para muitas origens. - **`prefetch`** — "Eu **provavelmente** vou precisar disso para a **próxima** navegação; busque com baixa prioridade quando ocioso." Para páginas/assets provavelmente próximos. Armazenado em cache para o futuro, não para a página atual. ## Um exemplo real comum: fontes ```html ``` Fontes são descobertas tarde (o navegador deve fazer parse do CSS primeiro), então pré-carregar evita atrasos de texto invisível. ## Cuidado: não exagere nos hints Pré-carregar tudo anula o propósito — compete com recursos genuinamente críticos pela largura de banda. Forneça hints apenas para os poucos que importam mais. ## Por que isso importa Resource hints eliminam latência do caminho crítico: `preconnect` remove o atraso do handshake para terceiros, `preload` prioriza assets críticos descobertos tarde (fontes, imagem LCP), e `prefetch` faz a navegação *seguinte* parecer instantânea. Usados cirurgicamente, melhoram significativamente os Core Web Vitals.