# Remover CSS critico bloqueante: 5 passos para destravar o LCP Remover CSS critico bloqueante é extrair só o estilo do above-the-fold, inline ele no head e adiar o resto. Segundo a web.dev (2024), o critical CSS cabe em cerca de 14 KB do primeiro roundtrip TCP. No WordPress, isso costuma cortar de 0,8 s a 2 s do LCP. Faça por template, nunca um arquivo único para o site todo. Remover CSS critico bloqueante é separar o estilo que a primeira tela precisa do estilo que pode esperar. O navegador trava a renderização até baixar toda folha CSS referenciada no ``, e em um WordPress com tema pesado isso adia o LCP em segundos. A técnica certa não deleta CSS: ela extrai o critical CSS do above-the-fold, faz inline dele direto no HTML e carrega o resto de forma assíncrona. Quando bem feita, o conteúdo aparece antes mesmo de o arquivo grande chegar. Para o panorama de métricas, veja os conteúdos de performance WordPress da FULL. --- ## Diagnóstico rápido: Como remover CSS critico bloqueante e medir o ganho Remover CSS critico bloqueante começa por medir: rode o site no PageSpeed Insights e procure o aviso "Eliminate render-blocking resources". Em um tema com folha global acima de 200 KB, esse aviso costuma apontar de 600 a 1.800 ms de bloqueio só de CSS. Esse número é a sua linha de base. O relatório lista cada arquivo `.css` que atrasa a pintura e estima a economia ao adiá-lo. A meta é levar esses recursos para fora do caminho crítico, um a um.
Remover CSS critico bloqueante: etapa, objetivo e check de validacao
Etapa Objetivo Check de validacao
Auditar no PageSpeedListar cada CSS render-blockingAviso "render-blocking resources" zerado
Gerar critical CSSExtrair estilo do above-the-foldInline menor que 14 KB no head
Adiar o restoCarregar a folha grande asyncCSS sai do caminho critico
Testar templatesValidar páginas internasZero FOUC em home, post e checkout
A medição antes e depois separa otimização de chute. Salve o LCP atual antes de mexer em qualquer plugin; o guia de LCP da FULL traz a definição. --- ## Por que o CSS critico bloqueante trava a renderizacao O CSS é render-blocking por design: o navegador não pinta nada na tela até construir o CSSOM completo, e ele só completa o CSSOM depois de baixar toda folha do ``. Em uma conexão 4G mediana, baixar 250 KB de estilo custa de 400 a 900 ms, e a tela fica branca esse tempo todo. Por isso remover CSS critico bloqueante ataca a causa, não o sintoma: o problema não é o tamanho do CSS, é ele estar no caminho da primeira pintura. CSS crítico bloqueante no `` mais tema com folha global única em servidor sem HTTP/2 resulta em render adiado até o download terminar, com LCP acima de 4 s. A gente vê no suporte da FULL que a maioria dos sites lentos no mobile carrega o CSS inteiro antes de pintar um pixel. O detalhe está em como eliminar o JavaScript que bloqueia a renderização, o gargalo gêmeo do CSS. --- ## O que e critical CSS e como ele resolve o render-blocking Critical CSS é o subconjunto de regras necessárias para pintar só a primeira tela, e segundo a web.dev ele cabe em cerca de 14 KB para passar no primeiro roundtrip TCP. Você faz inline desse pedaço mínimo no ``, dentro de uma tag `