Como uso o CSS crítico extraído na minha página?

Copie a saída do snippet e cole dentro da sua tag . Depois carregue sua folha de estilos completa de forma assíncrona: . Isso elimina o CSS que bloqueia a renderização e garante que a folha completa carregue para o conteúdo abaixo da dobra.

Extrator e compressor de CSS crítico

Extraia o CSS mínimo necessário para renderizar o conteúdo visível inicial e comprima-o para inserir em linha. O extrator de css crítico analisa os elementos do seu HTML, compara-os com sua folha de estilos CSS completa e gera CSS crítico minificado pronto para inserir em linha no seu <head> — eliminando o CSS que bloqueia a renderização e melhorando as pontuações de Largest Contentful Paint (LCP). Todo o processamento acontece no seu navegador, sem necessidade de cadastro.

Critical CSS Extractor & Compressor

Paste your HTML and CSS, click "Extract Critical CSS", and get the minimal CSS needed to render above-the-fold content - minified and ready to inline in your <head>. All processing happens locally in your browser. Your code never leaves your device.

HTML Markup

Upload .html

Paste your above-the-fold HTML

Full CSS Stylesheet

Upload .css

Paste your full CSS file

What is critical CSS?

Critical CSS is the minimal set of CSS rules needed to render above-the-fold content without waiting for the full stylesheet to load. Inlining it in your <head> eliminates render-blocking CSS and improves Largest Contentful Paint (LCP) scores.

Por que usar nosso extrator de CSS crítico?

Extração instantânea de CSS crítico no seu navegador: extraia o CSS crítico na hora, direto no navegador — sem envio para servidor, sem Puppeteer e sem navegador headless. O extrator de css crítico analisa os elementos do seu HTML e os compara com suas regras CSS em milissegundos, inteiramente no seu dispositivo.
Extrator de CSS crítico online seguro: seu HTML e seu CSS nunca saem do seu dispositivo. O extrator de css crítico roda inteiramente no navegador — sem upload para servidores, sem transmissão de dados, 100% privado. Seguro para folhas de estilos proprietárias, ferramentas internas e bases de código de produção.
Três formatos de saída para cada fluxo de trabalho: o extrator de css crítico gera CSS minificado, um snippet <style> pronto para colar ou CSS formatado legível — alterne entre os formatos com um clique. Mostra a contagem exata de regras e a economia em bytes para você medir o impacto no LCP.
100% grátis para sempre: o extrator de css crítico é totalmente gratuito, sem cadastro, sem plano premium, sem limite de tamanho de arquivo e sem anúncios. Extraia CSS crítico de páginas ilimitadas sem nenhum custo, para sempre.

Casos de uso comuns do extrator de CSS crítico

Otimização de LCP em Core Web Vitals: elimine o CSS que bloqueia a renderização para melhorar as pontuações de Largest Contentful Paint (LCP), uma métrica essencial de Core Web Vitals. O extrator de css crítico identifica o CSS mínimo necessário para renderizar o conteúdo visível inicial, que você insere em linha no <head> enquanto carrega a folha de estilos completa de forma assíncrona.
Otimização de desempenho em Next.js e React: extraia CSS crítico para páginas Next.js, React e Vue a fim de reduzir o Time to First Byte (TTFB) e o First Contentful Paint (FCP). O extrator de css crítico funciona com qualquer framework — cole o HTML renderizado e o seu bundle CSS para obter os estilos críticos prontos para inserir em linha.
Otimização de velocidade em Shopify e e-commerce: melhore as pontuações de velocidade de uma loja Shopify inserindo em linha o CSS crítico de páginas de produto, páginas de coleção e da página inicial. O extrator de css crítico ajuda a identificar quais regras CSS do tema Shopify são necessárias na parte visível inicial para eliminar requisições de folhas de estilos que bloqueiam a renderização.
Melhoria de velocidade em WordPress: extraia CSS crítico para temas WordPress a fim de reduzir recursos que bloqueiam a renderização sinalizados pelo Google PageSpeed Insights. O extrator de css crítico funciona com qualquer tema WordPress — cole o HTML da página e o CSS do seu tema para obter os estilos críticos em linha.
Otimização de desempenho de landing pages: maximize a velocidade de carregamento das suas landing pages inserindo em linha apenas o CSS necessário para o conteúdo visível inicial. O extrator de css crítico é ideal para landing pages de marketing, onde cada milissegundo de melhoria no LCP impacta diretamente a taxa de conversão.
Otimização de geradores de sites estáticos: automatize a extração de CSS crítico para sites Astro, Hugo, Eleventy e Jekyll — cole o HTML gerado e seu CSS para obter os estilos críticos em linha. O extrator de css crítico ajuda você a implementar o padrão de CSS crítico sem depender de Puppeteer em tempo de build.

O que é CSS crítico?

CSS crítico é o conjunto mínimo de regras CSS necessárias para renderizar o conteúdo visível inicial de uma página web — a parte visível sem rolagem. Quando o navegador encontra uma tag <link rel="stylesheet">, ele bloqueia a renderização até que toda a folha de estilos seja baixada e analisada. Ao inserir o CSS crítico em linha diretamente no <head> e carregar a folha de estilos completa de forma assíncrona, você elimina o CSS que bloqueia a renderização — uma das otimizações de maior impacto nas pontuações de Largest Contentful Paint (LCP) e First Contentful Paint (FCP). Nosso extrator de css crítico identifica quais regras CSS correspondem aos seus elementos HTML e gera uma folha de estilos minificada e pronta para inserir em linha.

Como funciona nosso extrator de CSS crítico

1 Cole seu HTML e seu CSS: insira seu markup HTML visível inicial e sua folha de estilos CSS completa nos dois painéis de entrada. Use "Carregar exemplo" para testar o extrator com um exemplo realista. Envie arquivos .html e .css diretamente pelos botões de upload.
2 Clique em "Extrair CSS crítico": o extrator analisa seu HTML para identificar todos os elementos (tags, classes, IDs, atributos) e depois compara cada regra CSS com esses elementos. As regras correspondentes entram na saída de CSS crítico. As regras base (html, body, *, :root), @keyframes e @font-face sempre são incluídas. O processamento roda inteiramente no seu navegador.
3 Escolha o formato de saída e copie: alterne entre CSS minificado, um snippet <style> pronto para colar ou CSS formatado legível. Copie para a área de transferência ou baixe. Insira o snippet <style> em linha no seu <head> e carregue a folha de estilos completa de forma assíncrona.

O que é incluído no CSS crítico

Seletores correspondentes: regras CSS cujos seletores correspondem a elementos presentes no seu HTML — por nome de tag, classe, ID ou atributo. Seletores separados por vírgula são verificados individualmente.
Estilos base: regras direcionadas a html, body, *, :root, ::before e ::after sempre são incluídas — elas afetam todo o layout da página e precisam estar disponíveis imediatamente.
@keyframes e @font-face: keyframes de animação e declarações @font-face sempre são incluídas — outras regras críticas as referenciam e elas precisam estar disponíveis antes da renderização.
Regras de @media: blocos de media query são incluídos se seus seletores internos correspondem aos seus elementos HTML — garantindo que os estilos responsivos da parte visível inicial estejam disponíveis em todos os tamanhos de tela.

Limitações importantes

O extrator de css crítico usa análise estática do HTML — ele compara os seletores CSS com os elementos HTML que você fornece. Ele não executa JavaScript, portanto classes e elementos adicionados dinamicamente não são detectados. Para os resultados mais precisos, cole o HTML renderizado no servidor da sua página (o HTML inicial antes da execução do JavaScript). Seletores CSS complexos com combinadores descendentes (por exemplo, .parent .child ) são comparados apenas com o último token — isso pode incluir algumas regras não críticas. Revise sempre a saída antes de inseri-la em linha em produção.

Perguntas frequentes

Um extrator de css crítico identifica o conjunto mínimo de regras CSS necessárias para renderizar o conteúdo visível inicial e as gera como uma folha de estilos minificada e pronta para inserir em linha. Nosso extrator de css crítico online gratuito analisa os elementos do seu HTML e os compara com suas regras CSS inteiramente no seu navegador.

Copie a saída do snippet <style> e cole dentro da sua tag <head>. Depois carregue sua folha de estilos completa de forma assíncrona: <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">. Isso elimina o CSS que bloqueia a renderização e garante que a folha completa carregue para o conteúdo abaixo da dobra.

Sim, totalmente. O extrator de css crítico roda inteiramente no seu navegador. Seu HTML e seu CSS nunca são enviados para nenhum servidor e nunca saem do seu dispositivo.

Sim — 100% grátis, para sempre. Sem cadastro, sem conta, sem plano premium, sem limite de tamanho de arquivo e sem anúncios.

O extrator de css crítico usa análise estática do HTML. Seletores descendentes complexos são comparados apenas com o último token, o que pode incluir regras de elementos que não estão visíveis inicialmente. Revise sempre a saída antes de inseri-la em linha em produção.

Não — o extrator de css crítico usa análise estática do HTML e não executa JavaScript. Para os resultados mais precisos, cole o HTML renderizado no servidor da sua página antes da execução do JavaScript.

O extrator de css crítico suporta seletores de tag, classe, ID, atributo, separados por vírgula e de pseudoclasse/pseudoelemento. Combinadores complexos são suportados comparando com o último token da cadeia de seletores.

Páginas típicas alcançam redução de 60% a 90% no tamanho do CSS do caminho crítico — uma folha de estilos de 100 KB costuma ter apenas 5 a 15 KB de CSS crítico. O extrator mostra a contagem exata de regras e a economia em bytes.

Não há limite artificial de tamanho de arquivo. O limite prático depende da memória disponível no seu navegador. Para folhas de estilos típicas, o extrator de css crítico as processa instantaneamente.