Quando o preload de stylesheets (não) faz sentido
Por que fazer o preload do seu CSS geralmente não ajuda, e o único caso em que ajuda
Quando o Preload de Stylesheets (Não) Faz Sentido
Encontro regularmente stylesheets com preload e muita desinformação em torno deles. Fazer o preload de um recurso altera o momento em que ele é agendado para download. Mas, na maioria das vezes, fazer o preload de stylesheets não ajuda. Em cinco casos, mostrarei quando funciona e quando não funciona.
Última revisão por Arjen Karel em março de 2026
Table of Contents!
- Quando o Preload de Stylesheets (Não) Faz Sentido
- A ideia de fazer o preload de stylesheets
- Caso 1: fazendo o preload do stylesheet logo antes de declará-lo
- Caso 2: fazendo o preload do stylesheet com um link header
- Caso 3: 103 Early Hints para stylesheets
- Caso 4: fazer o preload de stylesheets para obter um CSS assíncrono
- Caso 5: pré-cachear stylesheets
- O que realmente funciona para a performance do CSS
A ideia de fazer o preload de stylesheets
Stylesheets bloqueiam a renderização. Enquanto os stylesheets estão sendo baixados, a página não será renderizada pelo navegador e tudo o que o visitante verá é uma tela em branco.
Para minimizar o tempo necessário para baixar stylesheets, os desenvolvedores às vezes recorrem ao preload deles. O preload diz ao navegador para buscar um recurso antes de descobri-lo no HTML, para que fique pronto mais cedo. Isso é feito usando a tag <link> com o atributo rel="preload".
De acordo com o Web Almanac de 2025, apenas 13% das páginas em desktop passam na auditoria de recursos que bloqueiam a renderização. O preload não é a solução. A solução é eliminar recursos desnecessários que bloqueiam a renderização e adiar stylesheets não críticos.
Caso 1: fazendo o preload do stylesheet logo antes de declará-lo
Às vezes, os desenvolvedores, com todo o seu entusiasmo, tentam minimizar o impacto do CSS fazendo o preload dele no HTML logo antes da declaração real do CSS. Isso ficará mais ou menos assim:
<link rel="preload" as="style" href="style.css"> <link rel="stylesheet" href="style.css">
Isso não faz sentido nenhum e, na melhor das hipóteses, você não deixará a página mais lenta. Os navegadores possuem um preload scanner integrado que examina o HTML em busca de recursos para baixar antes que o parser principal os alcance. Se o seu <link> de stylesheet já estiver no <head>, o preload scanner o encontrará imediatamente. Adicionar uma dica rel="preload" para a mesma URL dá ao navegador informações que ele já possui. Você apenas adicionou uma linha extra, isso é tudo.
3 stylesheets com preload
3 stylesheets normais
Caso 2: fazendo o preload do stylesheet com um link header
Essa ideia é interessante. Podemos usar o header Link do servidor para fazer o preload de um stylesheet. Isso seria parecido com isso:
Link: <style.css>; rel=preload; as=style
A ideia é fazer com que o navegador coloque o stylesheet na fila antes de começar a fazer o parsing do HTML. Gosto de como funciona a mente de um desenvolvedor que pensou nisso! Mas, na vida real, você obterá muito pouco benefício. Estamos falando de alguns microssegundos. Resultados bem decepcionantes, mas essa ideia nos leva a algo que realmente funciona.
Caso 3: 103 Early Hints para stylesheets
Essa é a única ideia que realmente trará resultados no Core Web Vitals. Enviar early hints para stylesheets melhorará métricas como o First Contentful Paint e o Largest Contentful Paint.
Os headers 103 Early Hint são enviados antes da resposta HTML real. Isso significa que, enquanto você baixa o HTML, o navegador também pode começar a baixar os stylesheets em paralelo. O melhor cenário é que, no momento em que o HTML terminar de ser baixado, os stylesheets também terão sido baixados. Tempo zero de bloqueio de renderização desses stylesheets. Isso pode acontecer e acontece em redes mais lentas. Em redes mais rápidas, o efeito é menos óbvio, mas usar 103 Early Hints ainda é mais rápido em quase todos os casos.
Uma resposta 103 Early Hint se parece muito com um header de preload link. Para usar 103 Early Hints, você precisará configurar o seu servidor web ou a sua CDN.
HTTP/1.1 103 Early Hints Link: </style.css>; rel=preload; as=style
Algumas CDNs, como a Cloudflare, permitirão que você acione um 103 Early Hint simplesmente definindo um header de link preload (conforme descrito no Caso 2). Para um guia completo sobre implementação e suporte de navegadores, veja 103 Early Hints: Faça o Preload de Recursos Críticos Durante o Tempo de Processamento do Servidor.
Em sites monitorados pelo CoreDash, as páginas que usam 103 Early Hints para o seu stylesheet principal mostram um FCP 120ms mais rápido no 75º percentil em comparação com páginas sem Early Hints. A melhoria é mais visível em conexões móveis, onde o tempo de processamento do servidor e a latência da rede se sobrepõem mais.
Caso 4: fazer o preload de stylesheets para obter um CSS assíncrono
Um truque muito conhecido para tornar o CSS não bloqueador de renderização é fazer o preload do stylesheet e, uma vez carregado, adicioná-lo à página. A ideia é simples e se parece com isso:
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'" >
É baseado no código normal de preload <link rel="preload" as="style" href="style.css"> e adiciona um ouvinte de evento onload onload="this.onload=null;this.rel='stylesheet'" que altera o link para a sua forma final <link rel="stylesheet" href="style.css">
Esta é outra ideia que simplesmente faz sentido. Se um stylesheet não estiver bloqueando a renderização, o navegador pode continuar a analisar e renderizar a página sem esperar pelo stylesheet. No entanto, tenha cuidado!
- Não torne o CSS assíncrono na viewport visível. Isso provavelmente causará um Cumulative Layout Shift e isso levará a uma péssima user experience.
- Considere o custo-benefício. O CSS assíncrono provavelmente causará uma nova renderização de diferentes partes da página. Isso impactará métricas como o Interaction to Next Paint.
Uma alternativa moderna mais simples é usar fetchpriority="low" em um link de stylesheet comum: <link rel="stylesheet" href="style.css" fetchpriority="low">. Isso diz ao navegador para despriorizar o download sem usar o hack de JavaScript. Recomendo isso no lugar do truque do onload para a maioria dos casos de uso.
Caso 5: pré-cachear stylesheets
Em raras ocasiões, vejo soluções engenhosas que tentam pré-aquecer os arquivos em cache para pageviews subsequentes. E embora eu aplauda o entusiasmo com o qual essas soluções são feitas: por favor, NÃO faça isso.
A ideia é simples: na página inicial, você poderia, se quisesse, já fazer o pré-cache dos estilos para outra página. Digamos, a página de produto. Em algum momento após o carregamento da página, você faria o preload de stylesheets para adicioná-los ao cache do navegador.
function preloadStylesheet(url) {
var link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = 'style';
document.head.appendChild(link);
}
window.addEventListener('load', function () {
preloadStylesheet('cart.css');
preloadStylesheet('shop.css');
});
À primeira vista, isso não parece nada mal. Em qualquer página de produto, cart.css e shop.css agora estão disponíveis e não bloquearão mais a renderização. Existem algumas razões para não fazer isso:
- Existem maneiras melhores, por exemplo, o prerendering especulativo com Speculation Rules ou usando um service worker.
- Você provavelmente desperdiçará recursos e o custo-benefício não valerá a pena. Se fazer o preload de recursos fosse fácil, os navegadores seriam melhores nisso.
- Soluções como essa são difíceis de manter e provavelmente causarão problemas em algum momento no futuro.
- Você precisará fazer o preload de todos os stylesheets, não apenas de alguns. Como todos os stylesheets bloqueiam a renderização e são baixados em paralelo, apenas um stylesheet pode ter o mesmo efeito que múltiplos stylesheets.
O que realmente funciona para a performance do CSS
Em vez de recorrer a dicas de preload, concentre-se nestes fundamentos de priorização de recursos:
- Remova CSS não utilizado e redundante. Arquivos menores baixam mais rápido. Esta é a maior vitória individual para a maioria dos sites.
- Use 103 Early Hints para os seus stylesheets críticos, caso o seu servidor ou CDN ofereça suporte a isso.
Em nossos dados de Real User Monitoring, sites que removem CSS redundante e usam 103 Early Hints passam consistentemente no LCP no 75º percentil. Sites que apenas fazem o preload de seus stylesheets sem resolver a causa raiz (muito CSS, carregado muito tarde) raramente veem uma melhoria significativa.
I make sites pass Core Web Vitals.
500K+ pages for major European publishers and e-commerce platforms. I write the fixes and verify them with field data.
How I work
