CSS Crítico no Shopify: elimine o CSS que bloqueia a renderização
CSS Crítico no Shopify em resumo
O CSS crítico é 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 CSS crítico automatizado. Ele possui uma excelente infraestrutura (dados do Web Almanac 2025 mostram o Shopify liderando todas as plataformas de e-commerce com 95% de bom TTFB e 92% de bom LCP no desktop), mas apenas 48% das lojas Shopify passam em todos os Core Web Vitals no mobile. O CSS que bloqueia a renderização é um dos principais motivos. O Web Almanac 2025 descobriu que 85% das páginas mobile ainda falham na auditoria de recursos que bloqueiam a renderização.
Última revisão por Arjen Karel em março de 2026
O que é CSS crítico?
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 ser facilmente bloqueada por 100ms ou mais.
O CSS crítico 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 folhas 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 assets:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Isso insere o conteúdo do arquivo CSS inline como um bloco <style>, eliminando inteiramente a solicitação que bloqueia a renderização. Você também pode inserir 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 -%}
As 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 carrega como uma folha de estilo regular. Esta é a abordagem que eu recomendo para temas modernos do Shopify.
A abordagem clássica: gerar e inserir CSS crítico inline
Se o seu tema usa uma grande folha de estilo (comum em temas mais antigos e lojas fortemente personalizadas), você mesmo precisará extrair o CSS crítico. Este é um processo de seis etapas.
1. Duplique seu tema
Ao editar o comportamento central de um template no Shopify, sempre trabalhe primeiro em uma cópia. Navegue até o seu tema atual via 'Online Store' > 'Themes' e duplique-o clicando em 'Actions' > 'Duplicate'.
2. Gere o CSS crítico
Eu uso 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 CSS Crítico faz isso por você. Insira sua URL, copie o CSS crítico gerado e prossiga para a próxima etapa.
3. Faça upload do CSS crítico
Em seu tema duplicado, navegue até a pasta de snippets e crie um novo arquivo chamado critical-css.liquid. Envolva o CSS gerado nas tags <style> e cole-o no seu novo arquivo.
4. Edite o arquivo de layout
Abra theme.liquid na pasta Layout. São necessárias duas alterações.
Primeiro, renderize o snippet de CSS crítico no <head>:
<head>
{% render 'critical-css' %}
Nota: O Shopify descontinuou {% include %} em favor de {% render %}. Se o seu tema ainda usa include, ele funciona, mas você deve migrar.
Em seguida, altere as referências de CSS existentes para carregar em segundo plano. O padrão mais limpo (usado pelo próprio tema Dawn do Shopify) é o truque 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 folha de estilo como uma folha de estilo de impressão (não bloqueia a renderização) durante o carregamento inicial e, em seguida, alterná-la para media="all" assim que for baixada. Seu CSS crítico renderiza a página imediatamente enquanto a folha de estilo completa é carregada em segundo plano. Essa abordagem media="print" substituiu o antigo padrão rel="preload" porque é mais simples e não precisa de um fallback <noscript>.
5. Teste o novo tema
Na página do tema, clique em 'Actions' > 'Preview' para testar o tema copiado. Preste atenção especial ao Cumulative Layout Shift (CLS). Um CSS crítico incompleto ou incorreto causa um flash de conteúdo não estilizado onde os elementos são renderizados sem seus estilos finais e, em seguida, saltam para a posição quando o CSS completo é carregado. Isso é uma mudança de layout (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 monitoramento contínuo após o lançamento, acompanhe seus dados de campo com Real User Monitoring para verificar se a melhoria se mantém para visitantes reais.
6. Publique o novo tema
Navegue até Themes no menu esquerdo em 'Online Store' e em 'Actions' selecione '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 de plataforma que você não pode diferir ou modificar. Todo aplicativo Shopify instalado pode adicionar scripts através deste mecanismo. Este é um custo inevitável que bloqueia a renderização, o que torna a otimização de tudo que você controla (seu CSS, suas fontes, seus próprios scripts) ainda mais importante. Desinstalar aplicativos não utilizados é uma das coisas mais eficazes que você pode fazer.
Outra limitação: o Shopify não permite ler ou enviar cookies no editor Liquid. Idealmente, você serviria o CSS crítico apenas para visitantes de primeira viagem e serviria a folha de estilo completa em cache para visitantes recorrentes. Isso não é possível no Shopify. Ainda assim, o ganho de velocidade com o CSS crítico faz valer a pena. A loja mediana do Shopify no mobile tem um LCP de 2.26 segundos, de acordo com o benchmark de 2025 da Shero Commerce, bem no limite de 2.5 segundos. Reduzir até mesmo 200ms disso eliminando o CSS que bloqueia a renderização pode ser a diferença entre passar ou falhar nos Core Web Vitals.
O que mais você pode fazer?
O CSS crítico é uma peça do quebra-cabeça. Para uma estratégia completa de otimização do Shopify, consulte nosso guia de Core Web Vitals para Shopify. Outras vitórias de alto impacto incluem fazer preload da sua imagem LCP, hospedar suas próprias Google Fonts e entender a priorização de recursos. O Shopify também suporta Speculation Rules para navegações instantâneas de página e 103 Early Hints para fazer preload de recursos antes mesmo de o HTML chegar.
Se você ainda está lutando contra avisos de unused CSS, resolva isso primeiro. Remover o CSS que você não precisa é sempre melhor do que inserir inline o CSS que você precisa.
I write the code, not the report.
I join your team for 1 to 2 sprints. I set up the monitoring and make sure your team keeps the metrics green after I leave.
Get in touch
