La forma más rápida de optimizar la carga de recursos
Las sugerencias de recursos manuales requieren editar el código Liquid de su tema y comprender qué recursos son críticos. Si prefieres omitir los cambios de código, Thunder Page Speed Optimizer gestiona automáticamente la prioridad de carga de recursos:
- Pospone secuencias de comandos no críticas para que los recursos críticos (imágenes, CSS, fuentes) se carguen primero
- Gestiona automáticamente el orden de ejecución de scripts de terceros
- No es necesario editar el código del tema: instálelo y listo
Prueba la velocidad de tu tienda para ver el rendimiento actual de carga de recursos, luego siga leyendo para conocer el enfoque manual.
¿Qué son las sugerencias de recursos y por qué son importantes para Shopify?
Cuando un navegador carga tu tienda Shopify, lee el HTML de arriba a abajo y descubre recursos (imágenes, CSS, fuentes, scripts) a medida que avanza. Algunos recursos críticos, como la imagen principal o la fuente principal, están enterrados en archivos CSS o cargados a través de JavaScript. El navegador no los encontrará hasta que haya analizado una gran cantidad de código.
Las sugerencias de recursos le permiten indicarle al navegador: "Oye, empieza a trabajar en estos recursos ahora; no esperes a descubrirlos de forma natural". Son <head> de tu HTML.
Hay cuatro tipos, cada uno con diferentes casos de uso:
| Sugerencia | Qué hace | Cuándo utilizar |
|---|---|---|
| precarga | Descarga un archivo específico inmediatamente | Imágenes destacadas, fuentes críticas, CSS clave |
| preconexión | Abre una conexión a un dominio (DNS + TCP + TLS) | Dominios de terceros que definitivamente usarás |
| captación previa de DNS | Resuelve solo el DNS de un dominio | Dominios de terceros que podrías utilizar |
| captación previa | Descarga un archivo para una futura navegación | Recursos necesarios en la siguiente página probable |
Cada pista tiene un perfil costo-beneficio diferente. Usados sabiamente, aceleran LCP, reduce la latencia de la conexión y mejora el rendimiento percibido. Si se usan sin cuidado, desperdician ancho de banda y, de hecho, pueden ralentizar sus recursos más importantes.
Precarga: Priorizar recursos críticos en Shopify
precarga es la sugerencia de recurso más poderosa y la que se utiliza incorrectamente con más frecuencia. Le dice al navegador: "Descarga este archivo ahora mismo, es fundamental para la página actual". El navegador lo considera obligatorio y recupera el recurso con alta prioridad.
Precargando tu imagen de héroe (mayor victoria en LCP)
La imagen principal suele ser el elemento de pintura con contenido más grande en su página de inicio y páginas de destino. Sin precarga, el navegador lo descubre solo después de descargar y analizar el CSS de su tema, lo que puede retrasar LCP entre 1 y 2 segundos. Aquí se explica cómo precargarlo en Shopify:
{% comment %} Add to theme.liquid inside <head> {% endcomment %}
{'
'}
{'{% if template == "index" %}'}{'
'}
{' {% comment %} Preload hero image on homepage {% endcomment %}'}{'
'}
{' '}{'
'}
{'{% endif %}'}{'
'}
{'
'}
{'{% if template contains "product" %}'}{'
'}
{' {% comment %} Preload main product image {% endcomment %}'}{'
'}
{' {% if product.featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}Esta técnica normalmente mejora LCP en 500 ms-1,5 s porque el navegador comienza a descargar la imagen principal en paralelo con CSS y JavaScript en lugar de esperar. Equipo de rendimiento de Shopify recomienda este enfoque específicamente.
Precarga de fuentes
If your theme uses custom web fonts, preloading the most critical font file prevents the browser from blocking text rendering while it discovers the font through CSS. See our full guía de optimización de fuentes para más detalles. La implementación básica:
{% comment %} Preload primary body font {% endcomment %}
{''}} Importante: El origen cruzado
El atributo es obligatorio para las precargas de fuentes, incluso cuando la fuente está en el mismo dominio. Sin él, el navegador descarga la fuente dos veces.
Uso de los filtros de precarga líquida de Shopify
Las plantillas Liquid de Shopify brindan soporte de precarga integrado a través del etiqueta_imagen
El filtro y etiqueta_hoja de estilo filtros:
{% comment %} Preload via Liquid image_tag filter {% endcomment %}
{"{{ section.settings.hero_image | image_url: width: 1200 | image_tag: preload: true, fetchpriority: 'high' }}"}{'
'}
{'
'}
{'{% comment %} Preload critical stylesheet {% endcomment %}'}{'
'}
{"{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}"}}
Estos filtros de líquido generan automáticamente la cantidad correcta
Etiquetas
Preconexión: Reducir el tiempo de conexión de terceros
Every time your browser needs a resource from a new domain, it performs three steps: DNS resolution (50-200ms), TCP handshake (50-150ms), and TLS negotiation (100-200ms). That's 200-550ms of connection setup antes de descargar un solo byte.
preconexión le dice al navegador que complete estos pasos temprano, de modo que cuando el recurso realmente sea necesario, la conexión ya esté establecida.
Objetivos comunes de preconexión para tiendas Shopify
{% comment %} Add to theme.liquid <head> — before stylesheet and script tags {% endcomment %}
{'
'}
{'{% comment %} Shopify CDN — your images, fonts, and assets {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Fonts (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Analytics/GTM {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} YouTube embeds (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}} Cuándo utilizar origen cruzado
El atributo: Añade el origen cruzado
El atributo attribute when the resources from that domain will be fetched with CORS (fonts, images loaded via <img> con origen cruzado, recuperar llamadas API). Si no está seguro, inclúyalo; el peor de los casos es una conexión adicional.
Límites de preconexión
Cada preconexión utiliza una ranura de conexión del navegador y una pequeña cantidad de CPU/memoria. Los navegadores suelen tener 6 conexiones por dominio y un total limitado. Limitar las preconexiones a 3-5 dominios : solo aquellos que tu página definitivamente usará.
Para los dominios que podrías usar (por ejemplo, un widget de chat que solo se carga para algunos visitantes), usa el encendedor captación previa de DNS en su lugar.
DNS-Prefetch: preparación de conexión ligera
captación previa de DNS es la sugerencia de recursos más ligera: solo resuelve la dirección IP del dominio (ahorro de 50 a 200 ms) sin establecer una conexión completa. Úselo para dominios de terceros que su página podría necesita:
{% comment %} DNS-prefetch for optional third-party services {% endcomment %}
{''}{'
'}
{''}{'
'}
{''}{'
'}
{''}} Mejores prácticas: Uso preconexión para sus 3-5 dominios críticos principales. uso captación previa de DNS como respaldo para todos los demás dominios de terceros. Un patrón común es incluir ambos:
{% comment %} Belt and suspenders: preconnect with dns-prefetch fallback {% endcomment %}
{''}{'
'}
{''}}
Navegadores antiguos que no son compatibles preconexión will still benefit from the captación previa de DNS. Los navegadores modernos utilizan la preconexión e ignoran la captación previa de DNS redundante. Esto es especialmente relevante para las tiendas Shopify con visitantes que utilizan dispositivos móviles más antiguos.
Precarga: precarga de recursos para la página siguiente
captación previa le dice al navegador: "El usuario probablemente visitará esta página o necesitará este recurso a continuación; descárguelo en segundo plano durante el tiempo de inactividad". Esto es útil para recorridos de varias páginas, como explorar colecciones → páginas de productos.
{% comment %} On collection pages: prefetch the first few product pages {% endcomment %}
{'{% for product in collection.products limit: 3 %}'}{'
'}
{' '}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} Prefetch critical CSS for product pages {% endcomment %}'}{'
'}
{""}}Utilice la captación previa con cuidado: Descarga de recursos captados previamente usando ancho de banda inactivo, para que no bloqueen contenido crítico. Pero en dispositivos móviles con planes de datos limitados, la captación previa innecesaria desperdicia ancho de banda. Precapture únicamente recursos con alta probabilidad de navegación.
Buenos candidatos para la captación previa en Shopify: la página del producto cuando un usuario pasa el cursor sobre un artículo de la colección, la hoja de estilo de pago en la página del carrito y las imágenes del producto que son visibles en una cuadrícula de colección.
5 errores comunes en sugerencias de recursos en Shopify
Las sugerencias de recursos pueden resultar contraproducentes si se implementan incorrectamente. Estos son los errores que vemos con más frecuencia al auditar las tiendas Shopify (ejecutar un prueba de velocidad y revisa tu página <head> para detectarlos):
❌ Error 1: Precargar todo
Agregar precarga a más de 10 recursos anula el propósito. Cuando todo es "crítico", no se prioriza nada. Las conexiones limitadas del navegador se dividen por igual entre todas las precargas, lo que ralentiza las verdaderamente importantes.
Solución: Precargue solo de 2 a 4 recursos: imagen principal, fuente principal y CSS crítico en la mitad superior de la página.
❌ Error 2: Falta origen cruzado en las precargas de fuentes
Las fuentes requieren la origen cruzado
El atributo attribute on preload links, even when served from the same domain. Without it, the browser downloads the font twice — once from the preload (without CORS) and once from the CSS (with CORS).
Solución: Agregar siempre origen cruzado
El atributo para precargas de fuentes: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
❌ Error 3: Precargar recursos que no se utilizan
La consola Chrome DevTools muestra "El recurso se precargó pero no se usó en unos segundos" si precarga algo que la página realmente no necesita. Esto desperdicia ancho de banda y ranuras de conexión.
Solución: Solo precargue los recursos que realmente utiliza la página actual. Utilice lógica líquida condicional: {% if template == "index" %} para precargas solo de la página de inicio.
❌ Error 4: Preconexión a dominios no utilizados
Una preconexión que no se utiliza mantiene abierta una conexión durante ~10 segundos antes de que se agote el tiempo de espera. Esto desperdicia recursos del navegador y, de hecho, puede retrasar las conexiones a los dominios que necesita.
Solución: Audite qué dominios de terceros carga realmente su página (Chrome DevTools → Red → ordenar por dominio). Preconéctese únicamente a dominios con recursos en la ruta crítica.
❌ Error 5: URL de imagen incorrecta en la precarga del héroe
El sistema de imágenes responsivo de Shopify ofrece diferentes tamaños según el ancho de la ventana gráfica. Si su URL de precarga no coincide con la URL que el CSS/HTML realmente solicita, la precarga se desperdicia y el navegador descarga la imagen dos veces.
Solución: Haga coincidir la URL de precarga exactamente con lo que solicitará el navegador. Usa Shopify imagen_url filtra con el mismo parámetro de ancho que usa tu tema para la imagen principal.
Dónde colocar sugerencias de recursos en los temas de Shopify
El orden de colocación importa. Sugerencias de recursos en el <head> de tu tema.liquido debe seguir este orden para lograr la máxima eficacia:
<head>
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {% if template == "index" %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {{ "theme.css" | asset_url | stylesheet_tag }}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' ...'}{'
'}
{''}}
Las preconexiones deben llegar lo antes posible en el <head> porque el navegador inicia la conexión inmediatamente. Deben seguir las cargas previas, luego las hojas de estilo y luego las sugerencias de captación previa de DNS. Lea nuestro guía de recursos para bloquear el renderizado para obtener una imagen completa de cómo estructurar tu tema. <head> para un orden de carga óptimo.
Sugerencias de recursos manuales frente a Thunder: comparación
| Factor | Sugerencias sobre recursos manuales | Thunder |
|---|---|---|
| Configuración | Editar theme.liquid, comprender las prioridades de recursos | Instalación con un clic |
| Mejora del LCP | 500 ms-1,5 s (precarga de imagen principal) | Ganancias similares mediante la optimización automática |
| Cubre el aplazamiento del guión | No: las sugerencias no difieren los guiones | Sí: gestión completa de scripts |
| Riesgo de sobreoptimización | Alto si se agregan demasiadas pistas | Baja: priorización automática |
| Mantenimiento | Actualizar cuando el tema cambia o las aplicaciones cambian | Automático |
Para máxima velocidad, combine ambos: precarga manual de imagen de héroe + Thunder para una optimización integral del script. Ver precios para obtener detalles del plan.
Cómo medir el impacto de las sugerencias de recursos
Después de agregar sugerencias de recursos, mida la mejora utilizando estas herramientas:
- Prueba de velocidad gratuita de Thunder : Comparación rápida antes/después del rendimiento general de su tienda.
- Pestaña Red de Chrome DevTools — Mira el gráfico de cascada. Los recursos precargados deberían comenzar a descargarse antes (más a la izquierda en el gráfico). Los dominios preconectados deberían mostrar barras de conexión más cortas.
- Lighthouse : compruebe si la auditoría "Precargar la imagen de pintura con contenido más grande" pasa después de agregar la precarga de la imagen principal. También verifique que no aparezcan advertencias de "precargas no utilizadas".
- Prueba de página web : la vista en cascada muestra exactamente cuándo comienza a descargarse cada recurso. Compare las cascadas antes y después de agregar sugerencias para ver el cambio de tiempo.
Para obtener una guía completa para interpretar estos resultados, lea nuestra guía de resultados de la prueba de velocidad y nuestro guía completa de optimización de velocidad.
Preguntas frecuentes sobre sugerencias de recursos de Shopify
¿Qué son las sugerencias de recursos en Shopify?
Las sugerencias de recursos son elementos de enlace HTML que le indican al navegador que prepare los recursos antes de que sean necesarios. Los cuatro tipos son: precarga (descarga este recurso inmediatamente; es necesario para la página actual), preconexión (establece una conexión a este dominio; la necesitaremos pronto), dns-prefetch (resuelve el DNS de este dominio; una versión más ligera de preconexión) y prefetch (descarga este recurso para una futura navegación de la página). En Shopify, las sugerencias de recursos van en el <head> de tu archivo theme.liquid o se aplican a través de filtros Liquid como image_tag con precarga.
¿Debo precargar mi imagen principal en Shopify?
Sí: precargar la imagen principal es una de las formas más efectivas de mejorar Largest Contentful Paint (LCP). La imagen principal suele ser el elemento LCP en la página de inicio y en las páginas de destino. Sin precarga, el navegador descubre la imagen solo después de descargar y analizar HTML y CSS. Con la precarga, el navegador comienza a descargar la imagen principal inmediatamente, lo que a menudo reduce entre 500 ms y 1,5 s el tiempo de LCP. Utilice <link rel='preload' as='image'> en su tema.liquid head para la imagen principal.
¿Cuál es la diferencia entre precarga y preconexión?
Preload tells the browser to download a specific file immediately — you know the exact URL of the resource. Preconnect tells the browser to establish a connection (DNS + TCP + TLS) to a domain — you know you'll need resources from that domain but don't know the exact URLs yet. Use preload for known critical resources like hero images and key fonts. Use preconnect for third-party domains like Google Fonts, YouTube, or analytics services.
¿Demasiadas sugerencias de recursos pueden afectar el rendimiento de Shopify?
Sí. Cada precarga y preconexión compite por los espacios de conexión y el ancho de banda limitados del navegador. Si precargas más de 10 recursos, básicamente le estás diciendo al navegador que todo es crítico, lo que significa que no se prioriza nada. Mejores prácticas: precargue solo de 2 a 4 recursos verdaderamente críticos (imagen principal, fuente principal, CSS crítico), preconéctese a 2 o 3 dominios clave de terceros y use la captación previa con moderación para posibles navegaciones a la siguiente página. Insinuar demasiado es peor que no dar ninguna pista.
¿Thunder Page Speed Optimizer maneja sugerencias de recursos?
Thunder optimiza la prioridad de carga de recursos automáticamente, lo que incluye administrar cómo y cuándo se conectan y descargan recursos de terceros. En lugar de agregar etiquetas de preconexión o precarga manual, el aplazamiento de scripts y la priorización de recursos de Thunder garantiza que los recursos críticos se carguen primero mientras los scripts de terceros no críticos esperan. Esto logra resultados similares a las sugerencias de recursos manuales sin requerir cambios en el código del tema.
¿Cómo precargo fuentes en Shopify?
Add a preload link in your theme.liquid <head> para su archivo de fuente más importante (normalmente la fuente del texto del cuerpo en formato WOFF2). La sintaxis es: <link rel='preload' href='your-font.woff2' as='font' type='font/woff2' crossorigin>. The crossorigin attribute is required for fonts even if they're on the same domain. Only preload 1-2 font files — preloading all font weights wastes bandwidth on files the current page may not need.
Haga que cada milisegundo cuente con sugerencias de recursos
Las sugerencias de recursos son una de las optimizaciones de velocidad de Shopify de menor esfuerzo y mayor impacto que puedes implementar. Una precarga de una sola imagen de héroe puede mejorar el LCP en más de un segundo. Las preconexiones estratégicas eliminan cientos de milisegundos de tiempo de configuración de la conexión. La clave es la moderación: precarga sólo lo que es realmente crítico y deja que el navegador se encargue del resto.
Comience con los dos cambios de mayor impacto: precargue su imagen principal y preconéctese a sus dominios de terceros más utilizados. Entonces usa Thunder Page Speed Optimizer para una priorización integral de recursos y administración de scripts de terceros en toda tu tienda Shopify.
Prueba la velocidad de tu tienda ahora para ver dónde te ralentiza la carga de recursos y utiliza las técnicas de esta guía para solucionarlo.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more