¿Qué son los recursos de bloqueo de renderizado?
When your browser loads a Shopify page, it reads the HTML from top to bottom. When it encounters a asíncrono o aplazar), es deja de renderizar, descarga el script, lo ejecuta y solo entonces continúa. Lo mismo sucede con
Etiquetas
This is why your visitors see a blank white page (or a partially loaded page) for several seconds while the browser processes these files in the background. The browser is literally blocked from rendering visible content.
Tres tipos de recursos de bloqueo de renderizado en Shopify
Archivos JavaScript : guiones de temas, guiones de aplicaciones, rastreadores de análisis. El mayor infractor en la mayoría de las tiendas Shopify. Cada etiqueta de script sin aplazar detiene el procesamiento por completo.
Hojas de estilo CSS — Hojas de estilo externas cargadas en el <head>. El navegador debe descargar y analizar todo el CSS antes de pintar algo.
Fuentes web : fuentes personalizadas que deben descargarse antes de que se muestre el texto. sin visualización de fuente: intercambiar, el navegador muestra texto invisible hasta que llega la fuente.
En una tienda Shopify típica, la advertencia "Eliminar recursos que bloquean el procesamiento" en PageSpeed Insights representa 1 a 4 segundos de retraso. Cuantas más aplicaciones haya instalado, peor se pondrá: cada aplicación puede agregar múltiples scripts de bloqueo de renderizado.
Por qué esto es importante para tu tienda
Los recursos de bloqueo de renderizado no son solo un problema técnico: impactan directamente en tus ingresos:
7%
caída de conversión por 1 segundo de retraso
Fuente: Google/Deloitte
53%
de los visitantes móviles abandonan si una página tarda más de 3 segundos
Fuente: Google
SEO
Core Web Vitals es un factor de clasificación de Google desde 2021
Fuente: Centro de Búsqueda de Google
Si su tienda tarda 5 segundos en mostrar contenido debido a recursos que bloquean el procesamiento, está perdiendo visitantes incluso antes de que vean sus productos. Solucionar este problema es una de las optimizaciones de velocidad con mayor retorno de la inversión que puede realizar. Para obtener una visión más amplia de cada técnica de optimización, consulte nuestra guía completa de optimización de velocidad.
🆕 Actualización de 2026: INP reemplazó a FID como núcleo web vital
Desde marzo de 2024, Google utiliza INP (Interacción con la siguiente pintura) en lugar de FID para medir la capacidad de respuesta. Los scripts de bloqueo de renderizado perjudican a INP porque monopolizan el hilo principal, lo que hace que los toques, clics y desplazamientos parezcan no responder. La reparación de recursos que bloquean el procesamiento ahora mejora dos Core Web Vitals: LCP (pintura inicial más rápida) e INP (interacciones más receptivas). si tu la puntuación de velocidad bajó recientemente, los scripts que bloquean el procesamiento probablemente sean un factor. Lea nuestro Guía de elementos básicos de Web Vitals para ver la imagen completa.
La solución fácil: optimización automática con Thunder
Antes de sumergirnos en el manual, correcciones a nivel de código a continuación: hay una manera mucho más sencilla. Thunder Page Speed Optimizer detecta y repara automáticamente los recursos que bloquean el procesamiento en tu tienda Shopify, sin necesidad de cambios de código.
Lo que Thunder soluciona automáticamente:
Aplazamiento del guión
Aplaza automáticamente los scripts de aplicaciones de terceros, incluso aquellos que no puedes controlar manualmente
Incorporación de CSS crítico
Extrae e inserta CSS en la mitad superior de la página para que su página se muestre al instante
Optimización de fuentes
Agrega visualización de fuentes: intercambia y precarga fuentes críticas automáticamente
Mapeo inteligente de dependencias
Entiende qué scripts dependen unos de otros: pospone de forma segura sin dañar las aplicaciones
Minificación de CSS
Elimina CSS no utilizado y comprime el resto para tamaños de archivos más pequeños
Monitoreo Continuo
Realiza un seguimiento diario de tu velocidad y te avisa si nuevas aplicaciones introducen recursos de bloqueo de renderizado
Mejora media: +27 puntos PageSpeed
Thunder users see an average 27-point improvement in their Google PageSpeed score. Most stores go from red/orange to green within minutes of enabling optimizations.
Plan gratuito disponible · No se requiere tarjeta de crédito · Configuración de 30 segundos · Funciona con todos los temas · Ver todos los planes
¿Por qué utilizar una aplicación en lugar de arreglarla manualmente? Las correcciones manuales a continuación requieren editar archivos de temas de Liquid, comprender las dependencias de los scripts, generar CSS crítico y realizar pruebas exhaustivas. Un error puede arruinar tu pago o tus aplicaciones. También es necesario rehacerlo cada vez que instales una nueva aplicación o actualices tu tema. Thunder maneja todo esto de forma automática y continua.
Cómo identificar recursos que bloquean el procesamiento en su tienda
⚡ Omita este paso: El plan gratuito de Thunder identifica automáticamente todos los recursos que bloquean el procesamiento en su tienda y le muestra exactamente cuáles lo están ralentizando, sin necesidad de pruebas manuales.
Método 1: Google PageSpeed Insights
Ir a pagespeed.web.dev, ingresa la URL de tu tienda y espera el análisis. tu también puedes realiza una prueba de velocidad gratuita usando nuestra herramienta para obtener una descripción general rápida. En los resultados, desplácese hasta la sección "Oportunidades" y busque "Eliminar recursos que bloquean el procesamiento". Haga clic para expandirlo; verá todos los archivos que bloquean el procesamiento y el ahorro de tiempo estimado.
Método 2: Cobertura de Chrome DevTools
Abre tu tienda en Chrome, presiona F12, luego Ctrl+Mayús+P (o Cmd+Mayús+P en Mac) y escribe "Cobertura". Esto muestra qué cantidad de cada archivo CSS y JavaScript se utiliza realmente durante la carga. Barras rojas = código no utilizado que el navegador descargó pero que no necesitaba.
Método 3: Cascada de red
En la pestaña Chrome DevTools → Red, vuelva a cargar la página y observe el gráfico en cascada. Los archivos que se cargan temprano con barras largas bloquean la renderización. Concéntrese en los archivos JavaScript y CSS que se cargan antes de la primera imagen.
💡 Consejo: Prueba en móvil. Cambie Chrome DevTools a la emulación móvil antes de analizar. Los recursos de bloqueo de renderizado tienen un impacto mucho mayor en los dispositivos móviles debido a procesadores y conexiones más lentos; consulte nuestro Guía de optimización de la velocidad móvil de Shopify para más información sobre esto.
Solución manual: JavaScript que bloquea el procesamiento
⚠️ Dificultad: Intermedio a Avanzado. Editar un tema JavaScript requiere comprender las dependencias de los scripts, el orden de ejecución y las plantillas Liquid de Shopify. Los errores pueden afectar su pago, sus aplicaciones y su seguimiento. Siempre haga una copia de seguridad de su tema antes de realizar cambios.
JavaScript es el mayor culpable del bloqueo de renderizado en la mayoría de las tiendas Shopify. A continuación se explica cómo abordar cada tipo manualmente:
1. Agregar aplazar a secuencias de comandos personalizadas
Si ha agregado etiquetas de script personalizadas en sus archivos de tema (tema.liquido, archivos de sección, etc.), agregue el aplazar atributo:
<!-- ❌ Before: render-blocking -->
<script src="https://example.com/custom-script.js"></script>
<!-- ✅ After: non-render-blocking -->
<script src="https://example.com/custom-script.js" defer></script> aplazar le dice al navegador: "Descargue esto en segundo plano y ejecútelo después de que el HTML esté completamente analizado". Esto preserva el orden de ejecución y al mismo tiempo elimina el comportamiento de bloqueo de renderizado.
2. Mover scripts al final
Para scripts en línea (código entre <head> hasta justo antes :
<head>
// análisis o código de seguimiento
</script>
</head>
// análisis o código de seguimiento
</script>
3. Usar asíncrono para guiones independientes
Para scripts que no dependen de otros scripts (como rastreadores de análisis independientes), asíncrono descarga y ejecuta sin bloquear, pero no garantiza el orden de ejecución:
<!-- ✅ Good for independent scripts like analytics -->
<script src="https://analytics.example.com/track.js" async></script>
<!-- ✅ Better for scripts with dependencies -->
<script src="https://cdn.example.com/library.js" defer></script>
<script src="https://cdn.example.com/app.js" defer></script> Cuándo usar cuál: Uso aplazar para la mayoría de los scripts: conserva el orden de ejecución. uso asíncrono solo para guiones verdaderamente independientes. En caso de duda, utilice aplazar.
Solución manual: CSS que bloquea el procesamiento
⚠️Dificultad: Avanzado. La extracción crítica de CSS es una de las optimizaciones de velocidad más difíciles de realizar correctamente. Hacerlo mal provoca un destello de contenido sin estilo (FOUC): su página aparece brevemente rota antes de que se carguen los estilos. Es por eso que la mayoría de los desarrolladores utilizan herramientas automatizadas para esto.
CSS bloquea inherentemente el renderizado: el navegador necesita saber cómo se ven las cosas antes de mostrarlas. No puede simplemente posponer todo el CSS (la página parpadearía sin estilo). El enfoque correcto:
1. CSS crítico en línea
CSS crítico es el CSS mínimo necesario para diseñar el contenido de la mitad superior de la página. Incorpórelo directamente en <head> para que el navegador muestre instantáneamente, luego cargue la hoja de estilo completa de forma asincrónica:
<head>
<!-- ✅ Critical CSS inlined for instant rendering -->
<style>
/* Only styles for above-the-fold content */
header {display:flex;align-items:center;height:64px}
.hero {padding:4rem 1rem;text-align:center}
.hero h1 {font-size:2.5rem;font-weight:800}
</style>
<!-- ✅ Full CSS loaded asynchronously -->
<link rel="preload" href="{{ "theme.css" | asset_url }}" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="{{ "theme.css" | asset_url }}"></noscript>
</head>¿La parte difícil? averiguando cual CSS es fundamental. Es diferente para cada página (página de inicio, colección, producto) y cada tema. Herramientas como Crítico por Addy Osmani puede ayudar, pero deben ejecutarse para cada plantilla de página y actualizarse cada vez que cambie su tema.
2. Eliminar CSS no utilizado
Muchos temas de Shopify incluyen CSS para todas las funciones posibles (megamenús, acordeones, vista rápida) incluso si no los usas. Utilice la pestaña Cobertura de Chrome DevTools para medir. Si se utiliza menos del 50%, hay mucho margen de optimización. Pero eliminar CSS manualmente corre el riesgo de romper características que no sabías que existían.
3. Minimizar CSS externo
Cada archivo CSS externo (Google Fonts, hojas de estilo de aplicaciones, widgets) agrega una solicitud de bloqueo. Hospede fuentes automáticamente, combine pequeñas hojas de estilo y audite qué CSS de aplicación es realmente necesario. Emparejando estas correcciones de CSS con carga diferida adecuada garantiza que el navegador solo cargue lo necesario para la ventana gráfica inicial.
Solución manual: fuentes que bloquean el procesamiento
Web fonts cause two problems: they block text rendering (FOIT — Flash of Invisible Text), and loading them from external domains adds extra network latency.
1. Usar visualización de fuente: intercambiar
Muestra el texto inmediatamente en una fuente alternativa y luego cambia a la fuente personalizada cuando esté lista:
@font-face {
font-family: 'YourCustomFont';
src: url('your-font.woff2') format('woff2');
font-weight: 400;
font-display: swap; /* ✅ Shows fallback text immediately */
}2. Precargar fuentes críticas
Comience a descargar su fuente más importante temprano:
<link rel="preload" href="/fonts/your-font.woff2" as="font"
type="font/woff2" crossorigin>Precargue solo 1 o 2 fuentes críticas. Precargar demasiados desperdicia ancho de banda.
3. Autohospedaje en lugar de fuentes de Google
Cargando desde fonts.googleapis.com
La carpeta requiere búsquedas de DNS adicionales. El autohospedaje coloca fuentes en la CDN de Shopify:
- Descargar fuentes de Ayudante de fuentes web de Google
- Subir
.woff2archivos a la carpeta Activos de su tema - Actualizar CSS
@font-facepara hacer referencia a archivos locales - Eliminar las fuentes de Google
Etiquetas
4. Limitar el peso de las fuentes
Cada peso (normal, negrita, cursiva) es una descarga independiente. La mayoría de las tiendas sólo necesitan texto normal (400) y negrita (700). Cargar de 4 a 6 pesas agrega entre 200 y 600 KB innecesariamente.
El problema de los scripts de terceros (por qué las correcciones manuales no son suficientes)
Aquí está la dura verdad sobre todo lo anterior: las técnicas manuales funcionan muy bien para el código que usted controla, pero en la mayoría de las tiendas Shopify, los mayores infractores del bloqueo de renderizado son los scripts de aplicaciones de terceros que no se pueden editar.
Cuando una aplicación Shopify inyecta un aplazar o asíncrono. El desarrollador de la aplicación tomó esa decisión, y muchos no agregan ninguna de las dos, lo que hace que sus scripts bloqueen el procesamiento de forma predeterminada.
Una tienda Shopify típica tiene entre 5 y 15 aplicaciones instaladas. Incluso si cada uno agrega solo un script de bloqueo de renderizado, son entre 5 y 15 archivos que el navegador debe descargar y ejecutar antes de mostrar cualquier contenido. Cubrimos esto en profundidad en nuestra guía sobre administrar scripts de terceros en Shopify. Y cada vez que instalas una nueva aplicación, puedes deshacer todo tu trabajo de optimización manual.
El enfoque manual frente al trueno
Esta es exactamente la razón por la que construimos Thunder. Funciona a nivel de tema: intercepta y optimiza cómo se cargan todos los scripts, incluidos los de terceros que no puedes tocar manualmente. Y se adapta automáticamente cuando agregas nuevas aplicaciones o actualizas tu tema. Los planes comienzan en $19.99/mes : significativamente menos que contratar a un desarrollador para que realice el aplazamiento manual de scripts. Si también está considerando un cambio de tema, consulte nuestra guía para temas de Shopify más rápidos Guía : combinar un tema rápido con Thunder te brinda la mejor base posible.
Cómo verificar sus correcciones
Ya sea que hayas usado Thunder o hayas arreglado cosas manualmente, aquí te explicamos cómo confirmar que se eliminaron los recursos que bloquean el procesamiento:
Vuelva a ejecutar PageSpeed Insights
La oportunidad "Eliminar recursos que bloquean el procesamiento" debería mostrar ahorros reducidos o desaparecer por completo. tu Puntuación de rendimiento debería mejorar.
Verificar LCP y TBT
El LCP debería disminuir (el contenido se muestra antes). TBT debería disminuir (menos scripts bloquean el hilo principal).
Probar la funcionalidad de la aplicación
Verifique que los widgets de revisión, las ventanas emergentes, la búsqueda, el carrito y el pago sigan funcionando. Aplazar los scripts puede causar problemas de sincronización: Thunder maneja esto automáticamente, pero los cambios manuales necesitan pruebas exhaustivas.
Monitoreo durante 28 días
Los datos de laboratorio cambian inmediatamente, pero las métricas reales del usuario (datos CrUX en Search Console) tardan 28 días. Siga monitoreando para confirmar que se mantienen las mejoras.
Actualización de junio de 2026: Qué solucionar primero
PageSpeed Insights puede enumerar CSS, JavaScript, fuentes y archivos de terceros, todos bajo la misma advertencia "Eliminar recursos que bloquean el procesamiento". La respuesta útil no es "arreglarlo todo"; es el orden de prioridad correcto.
- Primero arregle el JavaScript de la aplicación si las URL del archivo incluyen aplicaciones de revisión, chat, ventanas emergentes, análisis o creadores de páginas. Estos scripts bloquean la pintura inicial y compiten por el tiempo del hilo principal más adelante.
- Arreglar CSS crítico en segundo lugar si la hoja de estilo de su tema principal aparece cerca de la parte superior de la advertencia. Inserte solo CSS en la mitad superior de la página y cargue el resto de forma asincrónica.
- Arreglar las fuentes en tercer lugar precargando el archivo de fuente principal y usando
visualización de fuente: intercambiar. Las fuentes rara vez superan a los scripts de aplicaciones en términos de ahorro total, pero pueden evitar el texto invisible.
Thunder automatiza los dos primeros pasos para las tiendas Shopify: pospone los scripts de aplicaciones no críticas, conserva el orden de los scripts e integra CSS crítico sin editar el tema manualmente. Para obtener el manual completo, combine este artículo con nuestro Guía de optimización de JavaScript de Shopify y Guía de optimización de CSS de Shopify.
Recursos de bloqueo de renderizado en Shopify: números de 2026
Based on data from 2,000+ Shopify stores analyzed by Thunder in Q1 2026, here's the current state of render-blocking resources on the platform:
17
Average render-blocking resources per store (up from 14 in 2025 — apps keep growing)
2,3s
Retraso promedio causado por recursos que bloquean el procesamiento en dispositivos móviles
68%
Of render-blocking resources come from third-party apps, not the theme itself
91%
De las tiendas Shopify tienen al menos una advertencia "Eliminar recursos que bloquean el procesamiento" en PageSpeed Insights
La tendencia es clara: a medida que los comerciantes instalan más aplicaciones para competir (la tienda Shopify promedio ahora tiene más de 10 aplicaciones), los recursos de bloqueo de renderizado se siguen multiplicando. Las correcciones manuales funcionan temporalmente, pero las nuevas instalaciones de aplicaciones reintroducen scripts de bloqueo. Una solución automatizada como Optimización continua de Thunder detecta nuevos recursos de bloqueo tan pronto como aparecen.
Para obtener más contexto sobre cómo estos recursos de bloqueo afectan su Core Web Vitals, especialmente LCP e INP, consulte nuestra guía dedicada. Y para ver exactamente cuántos recursos de bloqueo de renderizado La tienda tu tiene, realiza una prueba de velocidad gratuita.
Preguntas frecuentes
¿Qué son los recursos de bloqueo de renderizado en Shopify?
Render-blocking resources are CSS files, JavaScript files, and fonts that prevent the browser from displaying your page content until they've been fully downloaded and processed. On Shopify, the most common render-blocking resources are third-party app scripts, theme JavaScript, external CSS stylesheets, and web fonts. They force the visitor to stare at a blank or partially loaded page while the browser works through them.
¿Cómo encuentro recursos que bloquean el renderizado en mi tienda Shopify?
La forma más sencilla es instalar Thunder Page Speed Optimizer: escanea automáticamente tu tienda e identifica cada recurso que bloquea el procesamiento, mostrándote exactamente qué scripts y hojas de estilo están ralentizando tu tienda. Para una verificación manual, ejecute la URL de su tienda a través de Google PageSpeed Insights (pagespeed.web.dev) y busque la oportunidad 'Eliminar recursos que bloquean el procesamiento'.
¿Puedo arreglar los recursos que bloquean el renderizado sin codificar?
Sí. Thunder Page Speed Optimizer corrige automáticamente los recursos que bloquean el procesamiento, sin necesidad de cambios de código. Pospone scripts de terceros, incorpora CSS crítico y optimiza la carga de fuentes con un solo clic. El enfoque manual requiere editar archivos de temas de Liquid, lo que corre el riesgo de dañar su tienda si se hace incorrectamente.
¿Puedo agregar aplazar o async a los scripts de la aplicación Shopify?
No directamente: las aplicaciones mismas inyectan scripts de aplicaciones de terceros y usted no controla sus etiquetas de script. Tendría que ponerse en contacto con cada desarrollador de aplicaciones y pedirles que agreguen aplazar/async, lo que rara vez sucede rápidamente. Thunder resuelve esto interceptando y aplazando automáticamente scripts de terceros sin modificar las aplicaciones.
¿El aplazamiento de scripts dañará mis aplicaciones de Shopify?
Puede hacerlo si se hace manualmente. El aplazamiento ingenuo de scripts (simplemente agregar "aplazar" a todo) puede romper aplicaciones que dependen de la carga de scripts en un orden específico. Thunder maneja esto de manera inteligente: asigna cadenas de dependencia entre scripts y las difiere de manera segura mientras preserva el orden de ejecución, para que sus aplicaciones continúen funcionando correctamente.
¿Cuál es la diferencia entre asíncrono y diferido para scripts?
Ambos descargan scripts en segundo plano sin bloquear el renderizado, pero se ejecutan de manera diferente. 'async' se ejecuta tan pronto como se descarga, independientemente del orden; es arriesgado si los scripts dependen unos de otros. 'diferir' espera hasta que el HTML esté completamente analizado y luego se ejecuta en orden. Para la mayoría de las optimizaciones de Shopify, "aplazar" es más seguro. Thunder elige automáticamente la estrategia adecuada para cada guión.
¿Cuánto más rápida será mi tienda después de arreglar los recursos que bloquean el renderizado?
La mayoría de las tiendas Shopify ven una mejora de 1 a 3 segundos en el tiempo de carga después de corregir los recursos que bloquean el procesamiento. La mejora exacta depende de cuántos recursos de bloqueo tenga y del tamaño de sus archivos. Las tiendas con muchas aplicaciones instaladas suelen obtener las mayores ganancias. Los usuarios de Thunder informan una mejora promedio en PageSpeed de más de 27 puntos.
¿Qué significa "tu página tiene recursos CSS que bloquean"?
Esta advertencia de PageSpeed Insights significa que su página tiene hojas de estilo CSS externas en <head> que el navegador debe descargar y analizar por completo antes de poder representar cualquier contenido visible. Cada archivo CSS externo agrega un retraso de ida y vuelta, generalmente de 50 a 200 ms cada uno. En Shopify, esto incluye la hoja de estilo principal de tu tema, CSS inyectado en la aplicación y Google Fonts. La solución es incorporar CSS crítico (los estilos necesarios para el contenido de la mitad superior de la página) y cargar el resto de forma asincrónica.
¿Cuántos recursos de bloqueo de renderizado tiene una tienda Shopify típica?
A typical Shopify store with 8-12 apps installed has 10-25 render-blocking resources: 3-5 from the theme (JavaScript and CSS), 5-15 from installed apps (each app can add 1-3 scripts), and 2-5 from fonts and external services. Each blocking resource adds 50-200ms of delay. Thunder automatically identifies every render-blocking resource on your store and shows you exactly which apps are responsible.
¿Los recursos que bloquean el renderizado afectan la INP (Interacción con la siguiente pintura)?
Sí. El bloqueo de renderizado de JavaScript no sólo retrasa la pintura inicial, sino que también bloquea el hilo principal, retrasando la capacidad del navegador para responder a las interacciones del usuario. Desde que Google reemplazó FID con INP como Core Web Vital en marzo de 2024, esto es aún más importante. Los scripts sincrónicos pesados bloquean el hilo principal durante cientos de milisegundos, lo que hace que los toques y clics se sientan lentos. Aplazar los scripts de bloqueo de renderizado mejora tanto la velocidad de carga inicial como la puntuación INP.
¿El panel de rendimiento integrado de Shopify muestra recursos que bloquean el procesamiento?
El Panel de rendimiento web de Shopify muestra tus Core Web Vitals generales (LCP, INP, CLS), pero no detalla los recursos individuales de bloqueo de renderizado. Para ver exactamente qué archivos están bloqueando el procesamiento, ejecute su tienda a través de Google PageSpeed Insights o use Thunder Page Speed Optimizer, que enumera todos los scripts y hojas de estilo de bloqueo junto con la aplicación que los inyectó.
¿Debo arreglar primero el JavaScript o CSS que bloquea el renderizado en Shopify?
Start with JavaScript if you have many installed apps, because app scripts usually create the biggest delay and also hurt INP. Start with CSS if PageSpeed Insights shows large savings from theme stylesheets or your page flashes blank before rendering. Thunder handles both: it defers non-critical scripts and inlines critical CSS so the first paint can happen sooner.
¿Por qué vuelve a aparecer la advertencia de bloqueo de renderizado después de solucionarlo?
En Shopify, la advertencia suele aparecer después de instalar una nueva aplicación, actualizar un tema, agregar una nueva etiqueta de seguimiento o habilitar un widget que inyecta CSS o JavaScript nuevo. Es por eso que un solo manual corrige el deterioro con el tiempo. Vuelva a realizar la prueba después de cada cambio de aplicación o tema, o utilice la optimización continua para que los nuevos recursos de bloqueo se detecten automáticamente.