Cómo quitar CSS y JavaScript no utilizados en Shopify (2026)

Soluciona advertencias de CSS y JS no utilizados en 60 segundos

Realiza una prueba de velocidad gratuita en tu tienda : busque "Reducir CSS no utilizado" y "Reducir JavaScript no utilizado" en la sección Oportunidades. Estas advertencias le muestran exactamente cuántos kilobytes de código inactivo están bloqueando la visualización de su página. Thunder Page Speed Optimizer aborda ambos automáticamente:

• Pospone CSS no crítico para que se cargue después de que se renderice la página
• Pospone JavaScript no crítico (aplicaciones, análisis, widgets)
• Incluye CSS crítico para contenido en la mitad superior de la página
• Optimiza el orden de ejecución del script para reducir el bloqueo del hilo principal

Instalación con un clic. Es posible que las advertencias no desaparezcan por completo (los scripts principales de Shopify no se pueden posponer), pero Thunder reduce el impacto entre un 60 y un 80 % en la mayoría de las tiendas.

Por qué las tiendas Shopify tienen tanto código sin usar

Cada tienda Shopify carga CSS y JavaScript no utilizados. No es un error, así es como funciona la arquitectura de Shopify. comprensión por qué te ayuda a saber qué puedes arreglar y qué no.

1. CSS de tema global

Los temas de Shopify compilan todo el CSS en uno o dos archivos (como base.css o theme.css) que se cargan en cada página. Este archivo contiene estilos para la página de inicio, páginas de productos, páginas de colección, carrito, blog, páginas de cuenta, todo. Cuando alguien visita la página de su producto, descarga estilos de cajón de carrito, estilos de cuadrícula de colección, estilos de publicaciones de blog y estilos de página de cuenta que nunca usará en esa página.

Un tema estándar de Dawn carga ~60 KB de CSS. Después de personalizaciones y CSS adicional, que crece a 100-200 KB. Los temas premium pueden alcanzar entre 200 y 400 KB. En cualquier página, normalmente solo se utiliza entre el 30% y el 50% de este CSS.

2. Código inyectado en la aplicación

Cada aplicación de Shopify que instales puede inyectar JavaScript y CSS en tu tema. La mayoría de las aplicaciones inyectan su código globalmente (en cada página), incluso si la aplicación solo hace algo en las páginas de productos o en el carrito. Una aplicación de revisión carga su CSS en su página Acerca de. Una aplicación de venta adicional de carritos carga su JS en publicaciones de blog. Cada aplicación normalmente agrega entre 50 y 300 KB de CSS/JS.

Con 10 aplicaciones instaladas, es posible que estés cargando 500 KB-3 MB de código de aplicación en cada página, y cada página usa solo una fracción. Vea nuestro análisis de aplicaciones que ralentizan tu tienda para ejemplos específicos.

3. Código huérfano de aplicaciones desinstaladas.

Cuando desinstala una aplicación de Shopify, se elimina su funcionalidad de backend pero a menudo deja código en su tema. Las etiquetas de script en theme.liquid, los fragmentos Liquid en la carpeta snippets/ y el CSS en línea permanecen después de que se elimina la aplicación. Este es un código inactivo que se carga en cada página sin ningún beneficio.

4. Scripts propios de Shopify

Shopify inyecta su propio JavaScript en cada página de la tienda, para análisis, funcionalidad del carrito, cuentas de clientes y pago. Estos scripts suman entre 100 y 200 KB y no se pueden eliminar ni aplazar sin interrumpir la funcionalidad principal.

Cómo encontrar CSS y JavaScript no utilizados en tu tienda Shopify

Antes de retirar algo, es necesario identificar lo que no se utiliza y de dónde procede. La herramienta Cobertura de Chrome es la mejor opción gratuita.

Paso 1: Abra la cobertura de Chrome DevTools

1. Abre tu tienda en Chrome
2. Presione F12 (o Cmd+Opción+I en Mac) para abrir DevTools
3. Presione Ctrl+Mayús+P (Cmd+Shift+P en Mac) para abrir la paleta de comandos
4. Tipo "Cobertura" y selecciona "Mostrar cobertura"
5. Haga clic en Pestaña botón de recarga (⟳) en el panel Cobertura
6. Espere a que la página se cargue por completo

Paso 2: Lea los resultados

El panel Cobertura muestra cada archivo CSS y JS con una barra roja/verde:

• Verde = código que se ejecutó/aplicó en esta página
• Rojo = código que se cargó pero nunca se usó en esta página
• Bytes totales = tamaño de archivo completo
• Bytes no utilizados = ancho de banda desperdiciado que bloquea el renderizado

Haga clic en cualquier archivo para ver el uso línea por línea. Las líneas rojas son reglas CSS o funciones de JavaScript no utilizadas. Para una tienda Shopify típica, verás:

• base.css o theme.css — 50-70 % sin usar (estilos globales del tema)
• vendor.js o theme.js — 40-60% sin usar (tema JavaScript)
• Archivos específicos de la aplicación: 70-90 % sin usar por página (la mayoría del código de la aplicación no es necesario)
• Scripts propios de Shopify: 30-50% sin usar (código de plataforma principal)

Paso 3: Identificar a los mayores infractores

Ordenar por "Bytes no utilizados" (haga clic en el encabezado de la columna). Los archivos con la mayor cantidad de bytes no utilizados son los objetivos de mayor impacto. Normalmente: CSS de tema, 1 o 2 paquetes de aplicaciones grandes y scripts de análisis de Shopify. Para el lado de JavaScript específicamente, nuestro Guía de optimización de JavaScript cubre un análisis más profundo.

Qué código no utilizado realmente puedes eliminar en Shopify

Seamos realistas: no puedes eliminar todos los CSS/JS no utilizados en Shopify. pero tu puede realizar reducciones significativas. Esto es lo que es procesable:

{% comment %} Only load review CSS on product pages {% endcomment %}
{% if template contains 'product' %}
  {{ 'review-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

{% comment %} Only load collection JS on collection pages {% endcomment %}
{% if template contains 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}

Por qué es mejor aplazar que eliminar el código no utilizado de Shopify

En un sitio estático, eliminar CSS no utilizado es sencillo: cada página tiene contenido fijo conocido. En Shopify, es peligroso porque:

• Contenido dinámico : las plantillas líquidas agregan clases CSS de forma condicional. Un producto con 5 variantes carga CSS diferente que uno con 2. PurgeCSS no puede detectar clases generadas por Liquid.
• Elementos agregados en JavaScript : los cajones del carrito, los modales de vista rápida y el complemento AJAX al carrito crean elementos DOM dinámicamente. Su CSS parece "sin usar" hasta que la interacción del usuario los activa.
• Dependencias entre páginas — El CSS que no se usa en tu página de inicio es crítico en tu página de producto. Eliminarlo de la hoja de estilo global rompe otras páginas.
• Actualizaciones de la aplicación : las aplicaciones pueden cambiar los nombres de sus clases CSS en las actualizaciones. Si ha eliminado su CSS "no utilizado", la actualización altera el estilo.

Aplazamiento es la alternativa segura. CSS/JS diferido todavía se carga y funciona, simplemente se carga después la página se muestra en lugar de bloquearla. El visitante ve la página más rápido, todas las funciones siguen funcionando y nada se interrumpe con las actualizaciones.

Esto es exactamente lo que hace Thunder con recursos de bloqueo de renderizado. Identifica qué CSS y JavaScript no son necesarios para la pintura inicial y lo difiere, al tiempo que incluye el CSS crítico necesario para el contenido de la mitad superior de la página.

Paso a paso: limpiar el código de la aplicación huérfana

Esta es la única limpieza que debes hacer manualmente — es gratis, segura y da resultados inmediatos. Así es como puedes encontrar y eliminar código de las aplicaciones que has desinstalado:

1. Haz una copia de seguridad de tu tema — Vaya a Tienda en línea → Temas → Acciones → Duplicar. Siempre tenga un recurso alternativo.
2. Enumera tus aplicaciones actuales : vaya a Configuración → Aplicaciones y canales de venta. Tenga en cuenta cada aplicación instalada.
3. Abre el editor de temas : vaya a Tienda en línea → Temas → Editar código.
4. Revise theme.liquid: abra layout/theme.liquid y busque etiquetas <script> y <link> que hagan referencia a dominios externos. Si un dominio no corresponde a ninguna aplicación instalada, probablemente se trate de código huérfano.
5. Revise snippets/: explore la carpeta de fragmentos. Archivos con nombres de aplicaciones (por ejemplo, bold-options.liquid, loox-reviews.liquid) que no corresponden a aplicaciones instaladas son archivos huérfanos. Elimínelos junto con las llamadas correspondientes a {% render %} o {% include %}.
6. Búsqueda de patrones conocidos : utilice la búsqueda del editor de código (Ctrl+F) en todos los archivos para:
   • Nombres de aplicaciones que usaste anteriormente
   • Referencias a ScriptTag
   • Dominios externos en los atributos src de los scripts
7. Pruebe minuciosamente : obtenga una vista previa del tema, pruebe el complemento al carrito, el flujo de pago y todos los tipos de páginas antes de publicar.

Ganancias de limpieza comunes: fragmentos de aplicaciones de revisión eliminados (50-100 KB), scripts de análisis antiguos (20-50 KB) y código de banner/ventana emergente abandonado (30-80 KB). No es enorme individualmente, pero sí acumulativamente significativo. Para una auditoría temática completa, consulte nuestro Guía de auditoría de velocidad de Shopify.

Expectativas realistas: ¿Cuánto se puede reducir?

La advertencia "Reducir CSS/JS no utilizado" en PageSpeed Insights nunca desaparece por completo en una tienda Shopify. Esto es lo que es realista:

La medida de mayor impacto casi siempre es eliminar aplicaciones que no necesitas activamente. Cada eliminación de aplicación elimina tanto su código y sus solicitudes HTTP. Para profundizar en la optimización del JavaScript restante, consulte nuestra Guía de optimización de JavaScript. Para CSS específicamente, nuestro Guía de optimización de CSS cubre CSS crítico, minificación y técnicas avanzadas.

Preguntas frecuentes

Detenga el código no utilizado de ralentizar su tienda Shopify.

No puedes eliminar completamente el CSS y JavaScript no utilizados en Shopify: la arquitectura de la plataforma carga estilos y scripts globales por diseño. Pero puedes marcar una diferencia significativa con tres pasos: limpiar el código de la aplicación huérfana (gratis, inmediato), reducir las aplicaciones instaladas a solo lo que necesitas (gratis, de alto impacto) y posponer todo lo demás con Thunder Page Speed Optimizer (60 segundos, mayor impacto).

Es posible que las advertencias "Reducir CSS/JS no utilizados" en PageSpeed ​​Insights nunca desaparezcan por completo. Eso es normal para Shopify. Centrarse en las métricas reales: LCP inferior a 2,5 segundos, CLS por debajo de 0.1 y carga rápida percibida.

Prueba tu tienda ahora y comprueba cuánto código no utilizado está bloqueando tu renderizado. Para conocer la estrategia de optimización de velocidad completa, consulte nuestra guía completa de optimización de velocidad de Shopify.