CSS Crítico en Shopify: elimina el CSS que bloquea el renderizado
CSS Crítico en Shopify en resumen
El CSS crítico es una colección de reglas CSS necesarias para el primer renderizado. Estas reglas se colocan en línea en el head de la página para que el navegador pueda comenzar a renderizar sin esperar a que se descarguen los archivos CSS externos.
Shopify no soporta CSS crítico automatizado. Tiene una infraestructura excelente (los datos del Web Almanac 2025 muestran que Shopify lidera todas las plataformas de comercio electrónico con un 95% de buen TTFB y un 92% de buen LCP en escritorio), pero solo el 48% de las tiendas Shopify superan todas las Core Web Vitals en móviles. El CSS que bloquea el renderizado es una de las razones principales. El Web Almanac 2025 descubrió que el 85% de las páginas móviles todavía fallan la auditoría de recursos que bloquean el renderizado.
Última revisión por Arjen Karel en marzo de 2026
¿Qué es el CSS crítico?
Todos los navegadores modernos bloquean el renderizado hasta que los archivos CSS externos se han descargado y analizado. Cuando una página carga uno o más archivos CSS, el renderizado puede bloquearse fácilmente durante 100 ms o más.
El CSS crítico soluciona esto extrayendo solo las reglas CSS necesarias para renderizar la parte visible de la página (above the fold) y colocándolas en línea dentro del <head>. El navegador puede empezar a renderizar inmediatamente, mientras las hojas de estilo completas se descargan en segundo plano. Esto mejora directamente el First Contentful Paint (FCP) y el Largest Contentful Paint (LCP).
El enfoque moderno: inline_asset_content
Si tu tema utiliza archivos CSS separados por sección o componente (como el tema Dawn de Shopify y la mayoría de los temas de la Online Store 2.0), puedes usar el filtro Liquid inline_asset_content para poner en línea el CSS directamente desde tus archivos de assets:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Esto inserta el contenido del archivo CSS como un bloque <style>, eliminando por completo la solicitud que bloquea el renderizado. También puedes poner en línea el CSS de forma condicional solo para las secciones above-the-fold:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Las secciones con un índice inferior a 2 (las dos primeras secciones de la página, que casi siempre están above the fold) obtienen su CSS en línea. Todo lo demás se carga como una hoja de estilos normal. Este es el enfoque que recomiendo para los temas modernos de Shopify.
El enfoque clásico: generar e insertar CSS crítico en línea
Si tu tema utiliza una hoja de estilos grande (común en temas antiguos y tiendas muy personalizadas), necesitas extraer el CSS crítico tú mismo. Este es un proceso de seis pasos.
1. Duplica tu tema
Al editar el comportamiento central de una plantilla en Shopify, trabaja siempre en una copia primero. Navega a tu tema actual a través de 'Online Store' > 'Themes' y duplícalo haciendo clic en 'Actions' > 'Duplicate'.
2. Genera el CSS crítico
Yo uso el módulo de Node.js Critical en combinación con ajustes manuales. Requiere algo de esfuerzo, pero produce los mejores resultados.
Si esto es demasiado técnico para ti, utiliza un generador online. Nuestro propio Generador de CSS Crítico lo hace por ti. Introduce tu URL, copia el CSS crítico generado y pasa al siguiente paso.
3. Sube el CSS crítico
En tu tema duplicado, navega a la carpeta de snippets y crea un nuevo archivo llamado critical-css.liquid. Envuelve el CSS generado en etiquetas <style> y pégalo en tu nuevo archivo.
4. Edita el archivo de layout
Abre theme.liquid en la carpeta Layout. Son necesarios dos cambios.
Primero, renderiza el snippet del CSS crítico en el <head>:
<head>
{% render 'critical-css' %}
Nota: Shopify ha desaprobado {% include %} en favor de {% render %}. Si tu tema aún usa include, funcionará pero deberías migrar.
A continuación, cambia las referencias CSS existentes para que se carguen en segundo plano. El patrón más limpio (utilizado por el propio tema Dawn de Shopify) es el truco media="print":
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Esto le dice al navegador que trate la hoja de estilos como una hoja de estilos de impresión (que no bloquea el renderizado) durante la carga inicial, y luego cambie a media="all" una vez descargada. Tu CSS crítico renderiza la página inmediatamente mientras la hoja de estilos completa se carga en segundo plano. Este enfoque con media="print" reemplazó al antiguo patrón rel="preload" porque es más sencillo y no necesita un fallback <noscript>.
5. Prueba el nuevo tema
En la página del tema, haz clic en 'Actions' > 'Preview' para probar el tema copiado. Presta especial atención al Cumulative Layout Shift (CLS). Un CSS crítico incompleto o incorrecto provoca un destello de contenido sin estilo en el que los elementos se renderizan sin sus estilos finales y luego saltan a su posición una vez que se carga el CSS completo. Eso es un salto de diseño (layout shift).
Ejecuta PageSpeed Insights en la URL de vista previa y compara el FCP y el LCP antes y después. Deberías ver una mejora clara en ambos. Para una monitorización continua después de salir a producción, rastrea tus datos de campo con un Real User Monitoring para verificar que la mejora se mantiene en los visitantes reales.
6. Publica el nuevo tema
Navega a Themes en el menú izquierdo bajo 'Online Store' y bajo 'Actions' selecciona 'Publish' para tu nuevo tema.
Limitaciones que no puedes controlar
Shopify fuerza la inclusión de content_for_header en el <head> de cada página. Esto inyecta scripts de analítica, scripts de aplicaciones y otro código de la plataforma que no puedes diferir ni modificar. Cada aplicación de Shopify instalada puede añadir scripts a través de este mecanismo. Este es un costo inevitable que bloquea el renderizado, lo que hace que optimizar todo lo que sí controlas (tu CSS, tus fuentes, tus propios scripts) sea aún más importante. Desinstalar las aplicaciones que no usas es una de las cosas más efectivas que puedes hacer.
Otra limitación: Shopify no permite leer ni enviar cookies en el editor Liquid. Lo ideal sería que solo sirvieras el CSS crítico a los visitantes primerizos y la hoja de estilos completa en caché a los visitantes recurrentes. Eso no es posible en Shopify. Aun así, la ganancia de velocidad que proporciona el CSS crítico hace que valga la pena. La mediana de las tiendas Shopify en móviles tiene un LCP de 2.26 segundos según el benchmark de Shero Commerce de 2025, justo en el límite de los 2.5 segundos. Ahorrar aunque sea 200 ms eliminando el CSS que bloquea el renderizado puede marcar la diferencia entre aprobar y suspender las Core Web Vitals.
¿Qué más puedes hacer?
El CSS crítico es solo una pieza del rompecabezas. Para una estrategia completa de optimización en Shopify, consulta nuestra guía de Core Web Vitals para Shopify. Otras mejoras de alto impacto incluyen la precarga de tu imagen LCP, autoalojar tus Google Fonts y comprender la priorización de recursos. Shopify también soporta Speculation Rules para navegaciones de página instantáneas y 103 Early Hints para precargar recursos incluso antes de que llegue el HTML.
Si todavía estás luchando contra las advertencias de CSS no utilizado, aborda eso primero. Eliminar el CSS que no necesitas siempre es mejor que poner en línea el CSS que sí usas.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
