Critical CSS no Shopify: elimine o CSS de bloqueio de renderização
Critical CSS no Shopify em resumo
Critical CSS é uma coleção de regras CSS necessárias para a primeira renderização. Essas regras são colocadas inline no head da página para que o navegador possa começar a renderizar sem esperar o download de arquivos CSS externos.
O Shopify não suporta critical CSS automatizado. Ele possui uma infraestrutura excelente (os dados do Web Almanac de 2025 mostram o Shopify liderando todas as plataformas de e-commerce com 95% de TTFB bom e 92% de LCP bom no desktop), mas apenas 48% das lojas Shopify passam em todos os Core Web Vitals no mobile. O CSS de bloqueio de renderização é um dos principais motivos. O Web Almanac de 2025 descobriu que 85% das páginas mobile ainda falham na auditoria de recursos de bloqueio de renderização.
Última revisão por Arjen Karel em março de 2026
O que é critical CSS?
Todos os navegadores modernos bloqueiam a renderização até que os arquivos CSS externos tenham sido baixados e analisados. Quando uma página carrega um ou mais arquivos CSS, a renderização pode facilmente ser bloqueada por 100ms ou mais.
O critical CSS resolve isso extraindo apenas as regras CSS necessárias para renderizar a parte visível da página (above the fold) e colocando-as inline no <head>. O navegador pode começar a renderizar imediatamente, enquanto as planilhas de estilo completas são baixadas em segundo plano. Isso melhora diretamente o First Contentful Paint (FCP) e o Largest Contentful Paint (LCP).
A abordagem moderna: inline_asset_content
Se o seu tema usa arquivos CSS separados por seção ou componente (como o tema Dawn do Shopify e a maioria dos temas da Online Store 2.0), você pode usar o filtro Liquid inline_asset_content para inserir o CSS inline diretamente de seus arquivos de ativos:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Isso insere o conteúdo do arquivo CSS inline como um bloco <style>, eliminando totalmente a solicitação de bloqueio de renderização. Você também pode inserir o CSS inline condicionalmente apenas para seções above-the-fold:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Seções com um índice abaixo de 2 (as duas primeiras seções da página, que quase sempre estão above the fold) têm seu CSS inserido inline. Todo o resto é carregado como uma planilha de estilo normal. Essa é a abordagem que recomendo para temas modernos do Shopify.
A abordagem clássica: gerar e inserir critical CSS inline
Se o seu tema usa uma planilha de estilo grande (comum em temas mais antigos e lojas altamente personalizadas), você precisará extrair o critical CSS por conta própria. Este é um processo de seis etapas.
1. Duplique seu tema
Ao editar o comportamento principal de um modelo no Shopify, sempre trabalhe primeiro em uma cópia. Navegue até o seu tema atual em 'Loja Virtual' > 'Temas' (Online Store > Themes) e duplique-o clicando em 'Ações' > 'Duplicar' (Actions > Duplicate).
2. Gere o critical CSS
Eu utilizo o módulo Node.js Critical em combinação com ajustes manuais. Isso exige algum esforço, mas produz os melhores resultados.
Se isso for muito técnico para você, use um gerador online. Nosso próprio Gerador de Critical CSS faz isso por você. Insira sua URL, copie o critical CSS gerado e prossiga para a próxima etapa.
3. Faça o upload do critical CSS
No seu tema duplicado, navegue até a pasta snippets e crie um novo arquivo chamado critical-css.liquid. Envolva o CSS gerado com tags <style> e cole-o em seu novo arquivo.
4. Edite o arquivo de layout
Abra o theme.liquid na pasta Layout. Duas alterações são necessárias.
Primeiro, renderize o snippet de critical CSS no <head>:
<head>
{% render 'critical-css' %}
Nota: O Shopify descontinuou o uso de {% include %} em favor de {% render %}. Se o seu tema ainda usa include, ele funcionará, mas você deve migrar.
Em seguida, altere as referências CSS existentes para carregar em segundo plano. O padrão mais limpo (usado pelo próprio tema Dawn do Shopify) é o truque do media="print":
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Isso diz ao navegador para tratar a planilha de estilo como uma planilha de estilo de impressão (non-render-blocking) durante o carregamento inicial, e então alternar para media="all" assim que o download for concluído. O seu critical CSS renderiza a página imediatamente enquanto a planilha de estilo completa é carregada em segundo plano. Essa abordagem de media="print" substituiu o padrão mais antigo de rel="preload" porque é mais simples e não precisa de um fallback de <noscript>.
5. Teste o novo tema
Na página do tema, clique em 'Ações' > 'Visualizar' (Actions > Preview) para testar o tema copiado. Preste atenção especial ao Cumulative Layout Shift (CLS). Um critical CSS incompleto ou incorreto causa um flash de conteúdo sem estilo, onde os elementos são renderizados sem seus estilos finais e, em seguida, saltam para a posição assim que o CSS completo é carregado. Isso é layout shift.
Execute o PageSpeed Insights na URL de visualização e compare o FCP e o LCP antes e depois. Você deve ver uma clara melhoria em ambos. Para um monitoramento contínuo após ir ao ar, rastreie seus dados de campo com Real User Monitoring para verificar se a melhoria se mantém para os visitantes reais.
6. Publique o novo tema
Navegue até Temas no menu esquerdo, em 'Loja Virtual' (Online Store) e, em 'Ações' (Actions), selecione 'Publicar' (Publish) para o seu novo tema.
Limitações que você não pode controlar
O Shopify força o content_for_header no <head> de cada página. Isso injeta scripts de analytics, scripts de aplicativos e outros códigos da plataforma que você não pode adiar (defer) ou modificar. Todo aplicativo Shopify instalado pode adicionar scripts por meio desse mecanismo. Esse é um custo de bloqueio de renderização inevitável, o que torna ainda mais importante otimizar tudo o que você controla (seu CSS, suas fontes, seus próprios scripts). Desinstalar aplicativos não utilizados é uma das coisas mais eficazes que você pode fazer.
Outra limitação: o Shopify não permite a leitura ou envio de cookies no editor Liquid. Idealmente, você forneceria o critical CSS apenas para visitantes de primeira viagem e serviria a planilha de estilo completa em cache para os visitantes recorrentes. Isso não é possível no Shopify. Ainda assim, o ganho de velocidade com o critical CSS faz valer a pena. A loja mediana do Shopify em dispositivos móveis tem um LCP de 2,26 segundos, de acordo com o benchmark de 2025 da Shero Commerce, bem no limite do limite de 2,5 segundos. Reduzir até mesmo 200ms disso eliminando o CSS de bloqueio de renderização pode ser a diferença entre passar ou falhar nos Core Web Vitals.
O que mais você pode fazer?
O critical CSS é uma peça do quebra-cabeça. Para uma estratégia de otimização completa do Shopify, veja nosso guia de Core Web Vitals para o Shopify. Outras vitórias de alto impacto incluem fazer o preload de sua imagem LCP, hospedar suas fontes do Google localmente (self-hosting) e entender a priorização de recursos. O Shopify também oferece suporte a Speculation Rules para navegações de página instantâneas e a 103 Early Hints para fazer o preload de recursos antes mesmo que o HTML chegue.
Se você ainda está lutando contra avisos de CSS não utilizado, resolva isso primeiro. Remover o CSS que você não precisa é sempre melhor do que inserir inline o CSS que você precisa.
CoreDash já vem com MCP.
Conecta no Claude ou em qualquer agente de IA. Pergunta pra ele por que seu INP disparou terça passada.
Vê como funciona
