Cadenas de solicitudes críticas de Shopify: Corregir la advertencia de PageSpeed (2026)

Solución rápida con Thunder

Qué significa PageSpeed con cadenas de solicitudes críticas

Una solicitud crítica es un recurso que el navegador considera importante para representar la página actual. Una cadena aparece cuando un recurso crítico retrasa a otro: el HTML descubre el CSS, el CSS descubre una fuente, un script de bloqueo retrasa el marcado de la imagen o un script carga otro script antes de que la página pueda volverse útil.

Los informes más recientes de Lighthouse lo llaman el Árbol de dependencia de la red. Los informes más antiguos y muchos hilos de la comunidad Shopify todavía lo llaman evitar encadenar solicitudes críticas. De cualquier manera, la pregunta práctica es la misma: ¿qué recurso está haciendo esperar a la primera ventana gráfica?

Este diagnóstico no es una métrica de campo de Core Web Vitals, pero a menudo explica una debilidad Informe Core Web Vitals. Las cadenas largas aumentan el retraso de carga para LCP, retrasan First Contentful Paint y hacen que las puntuaciones de los dispositivos móviles oscilen enormemente porque los teléfonos lentos sienten cada dependencia de forma más marcada.

La cadena específica de Shopify que sueles ver

Un tema limpio de Shopify aún puede crear una cadena crítica como esta:

document
  -> theme.css
    -> storefront font file
  -> theme.js
    -> app embed script
      -> widget script
  -> imagen destacada descubierta tarde

El navegador no puede pintar la página visible hasta que haya suficiente CSS disponible. No puede priorizar una imagen que no ha descubierto. No puede responder rápidamente si la aplicación JavaScript toma el hilo principal mientras la página aún se está cargando. Es por eso que el trabajo de la cadena de solicitudes se superpone con recursos de bloqueo de renderizado, trabajo del hilo principal, y Optimización de JavaScript.

Paso 1: Identificar la ruta crítica real

Run PageSpeed Insights, open the Network Dependency Tree or critical request chain section, and write down the deepest chain. Then open Chrome DevTools -> Red, deshabilitar caché, recargar con aceleración móvil y ordenar por hora de inicio.

No arregle todos los archivos de la cascada. Busque recursos de alta prioridad que bloqueen la primera ventana gráfica: CSS global, fuentes, imágenes principales, scripts de temas en el encabezado, scripts de aplicaciones y solicitudes de terceros que comienzan antes de que la página sea útil. Si la advertencia apunta a 30 archivos pero solo uno está en la mitad superior de la página, corríjalo primero.

Para un flujo de trabajo más amplio, utilice nuestro Guía de auditoría de velocidad de Shopify before touching code. It keeps you from spending an hour on request chains when the bigger problem is oversized images or an app stack.

Paso 2: Aplazar los scripts de aplicaciones y temas no críticos

Los scripts en el encabezado pueden bloquear el análisis y crear nuevas solicitudes críticas. Si no se necesita un script para representar la primera ventana gráfica, pospóngalo:

<script src="{{ 'theme.js' | asset_url }}" defer></script>

Uso aplazar para scripts que necesitan orden de documentos. uso asíncrono only for independent scripts such as simple analytics beacons. For app scripts you do not control, Thunder is safer because dependency-aware deferral prevents common breakage from blindly moving files.

Paso 3: Precargar solo el activo real en la mitad superior de la página

La precarga es poderosa porque cambia el orden de descubrimiento. También es fácil abusar de él. Precargue la imagen principal solo si es el elemento LCP real, o precargue la fuente crítica solo si la representación del texto está bloqueada por una solicitud de fuente tardía.

{%- if template.name == 'index' and settings.hero_image != blank -%}
  <link
    rel="preload"
    as="image"
    href="{{ settings.hero_image | image_url: width: 1600 }}"
    imagesrcset="{{ settings.hero_image | image_url: width: 800 }} 800w, {{ settings.hero_image | image_url: width: 1600 }} 1600w"
    imagesizes="100vw"
    fetchpriority="high"
  >
{%- endif -%}

Nunca precargue cada diapositiva del carrusel. Nunca cargue previamente una imagen de escritorio que los visitantes móviles no utilizarán. El objetivo es una cadena más corta, no una cola más ruidosa. Si su imagen LCP tiene carga diferida, corríjalo también con cargando="ansioso" y fetchpriority="alta".

Paso 4: Reducir el CSS que bloquea el renderizado

Los temas de Shopify a menudo incluyen un archivo CSS grande para cada plantilla. Eso crea una cadena simple pero costosa: HTML espera CSS antes de renderizarse, incluso si la mayor parte del CSS pertenece a secciones debajo de la página.

La ruta manual segura es mantener el CSS de diseño global en el archivo principal y luego acercar el CSS de la sección pesada a la sección que lo necesita. Si su tema admite recursos específicos de una sección, utilícelos para controles deslizantes, lookbooks, secciones de videos y galerías de productos complejos.

{%- comment -%}Load section CSS only where the section appears{%- endcomment -%}
{{ 'featured-collection.css' | asset_url | stylesheet_tag }}

Para una limpieza más profunda, siga nuestra Guía de optimización de CSS de Shopify y Limpieza de CSS y JavaScript no utilizados.

Paso 5: Mueva las aplicaciones incrustadas fuera de la primera ventana gráfica

Las reseñas, paquetes, suscripciones, chat, ventanas emergentes y herramientas de análisis a menudo crean cadenas de dependencia adicionales. Cargan un pequeño script de arranque, luego otro script, luego CSS, luego una llamada API y luego un widget. Esa cadena puede estar bien debajo del pliegue pero ser dolorosa en la cabeza.

In Shopify Admin, open Online Store -> Themes -> Customize -> La aplicación se integra. Deshabilite todo lo que no necesite todas las páginas. Luego, consulte las plantillas de productos, colecciones y carritos para ver si hay fragmentos de aplicaciones antiguas. Si se necesita una aplicación solo en las páginas de productos, no la cargue globalmente desde tema.liquido.

Este también es un buen momento para comparar tu stack con el nuestro. investigación sobre el impacto en la velocidad de la aplicación y aplicaciones que ralentizan las tiendas Shopify.

Solución manual frente a solución Thunder

Vuelva a probar la cadena de solicitudes

Después de cada cambio, ejecute la misma URL nuevamente en el dispositivo móvil. Compruebe si la cadena más profunda es más corta, si la solicitud LCP comienza antes y si el tiempo total de bloqueo disminuye. Si un número mejora y otro empeora, inspecciona la cascada antes de quedarte con el cambio.

Para un plan completo, utilice el Guía de optimización de velocidad de Shopify. Si desea automatización en lugar de editar manualmente el código del tema, compare Funciones de optimización de Thunder o marcar precio actual.

Referencias y Validación

Para el diagnóstico subyacente, compare su informe con Guía de la cadena de solicitudes críticas de Chrome y el lenguaje más nuevo del árbol de dependencia de Lighthouse Network. Para precargar, utilice Guía de precarga de imágenes responsivas de web.dev.

Los ejemplos de Shopify Community generalmente muestran el mismo patrón: los comerciantes siguen la advertencia después de agregar aplicaciones, creadores de páginas, controles deslizantes o medios multimedia pesados. La solución ganadora no es más etiquetas precargadas. Elimina dependencias innecesarias, pospone scripts y hace que el primer recurso visible sea obvio para el navegador.