Acelera tu página de inicio de Shopify en 60 segundos
Realiza una prueba de velocidad gratuita en tu página de inicio para ver exactamente qué lo está ralentizando. Los diagnósticos mostrarán qué recursos bloquean la renderización y qué imágenes necesitan optimización. Para una solución instantánea, Thunder Page Speed Optimizer aborda automáticamente los problemas de velocidad de la página de inicio más impactantes:
- Defers render-blocking JavaScript from apps and theme (often 500KB-2MB on homepages)
- Optimiza la carga de CSS para que el contenido de la mitad superior de la página se muestre inmediatamente
- Lazy carga imágenes fuera de pantalla en colecciones destacadas y secciones debajo de la página
- Precarga recursos críticos como tu imagen de héroe
Instalación con un clic, cero cambios de código, funciona con todos los temas de Shopify. Las optimizaciones manuales a continuación le brindan ganancias adicionales además de las mejoras automáticas de Thunder.
Por qué tu página de inicio de Shopify es la más lenta
Las páginas de productos cargan entre 5 y 10 secciones. Las páginas de colección cargan una cuadrícula y algunos filtros. ¿Pero las páginas de inicio? Son un escaparate de todo : banners destacados, colecciones destacadas, bestsellers, novedades, testimonios, historias de marcas, feeds de Instagram, ventanas emergentes de boletines y más. Cada sección agrega:
- Nodos DOM : más elementos HTML para que el navegador los analice y represente. Una página de inicio de 20 secciones puede tener entre 3000 y 5000 nodos DOM.
- Imágenes : cada colección destacada carga de 4 a 16 imágenes de productos, las secciones principales cargan de 1 a 5 diapositivas y los testimonios agregan avatares. Una página de inicio típica carga entre 40 y 80 imágenes en total.
- JavaScript : bibliotecas de presentaciones de diapositivas, temporizadores de cuenta regresiva, guiones de animación, carrusel JS. JS específico de la página de inicio puede agregar entre 200 y 500 KB además de los scripts de temas y aplicaciones.
- Widgets de aplicaciones : chat en vivo, insignias de revisión, consentimiento de cookies, barras de anuncios, ventanas emergentes. Cada uno carga su propio paquete JS/CSS.
El resultado: las páginas de inicio obtienen constantemente entre 10 y 20 puntos menos que las páginas de productos en Estadísticas de PageSpeed de Google. Arreglemos eso sección por sección.
Sección de héroe: el asesino de velocidad número uno en la página de inicio de Shopify
Tu sección de héroe casi siempre es la Elemento de pintura con contenido (LCP) más grande : la métrica más importante para la velocidad de carga percibida. La optimización de héroes tiene el mayor impacto de cualquier cambio.
Imagen única versus presentación de diapositivas
La presentación de diapositivas de un héroe parece impresionante, pero mata el rendimiento. Aquí está el costo real:
| Factor | Imagen de héroe único | Presentación de diapositivas de 3 diapositivas |
|---|---|---|
| Imágenes cargadas | 1 (200-400KB) | 3 (600KB-1,2MB) |
| Se requiere JavaScript | 0KB | 30-100KB |
| Riesgo de CLS | Ninguno | Alto (diferentes tamaños de imagen) |
| Impacto del LCP | Rápido (precargable) | Lento (descargas competitivas) |
| Datos de conversión | CTR más alto (mensaje enfocado) | CTR inferior (ceguera de banner) |
Lista de verificación de optimización de imágenes destacadas
- Usar una única imagen de héroe estática : un mensaje claro, un CTA, sin animaciones
- Precargar la imagen principal — agregar
<head>confetchpriority="alta" - Tamaño apropiado : héroe de escritorio a 1920×700-900px, móvil a 750×900px. No cargues una imagen de 3000px.
- Utilice imágenes responsivas : ofrece diferentes tamaños para dispositivos móviles y de escritorio a través de
conjunto de origenytamañosatributos - Evite las superposiciones de texto sobre imágenes cuando sea posible: utilice texto HTML sobre la imagen para que el texto se muestre antes de que se cargue la imagen.
- Nunca cargues perezosamente al héroe : este es el elemento LCP. Debería cargarse inmediatamente con
cargando="ansioso"
Secciones destacadas de la colección: Menos es más
Las colecciones destacadas son la segunda mayor pérdida de velocidad de la página de inicio. Cada sección de colección carga entre 4 y 16 imágenes de productos, y la mayoría de las páginas de inicio tienen entre 2 y 4 secciones de colección. Eso es potencialmente 64 imágenes de productos en una sola página.
Estrategias de optimización
- Mostrar 4-8 productos por colección en lugar de 12-16. Más productos = más imágenes = página más lenta.
- Una colección arriba del pliegue, resto abajo : carga diferida todas las secciones de la colección debajo de la página
- Utilice imágenes de productos más pequeñas : las miniaturas de productos de la página de inicio no necesitan una resolución de 1000 px. Un ancho de 400-600 px es suficiente.
- Límite a 2 secciones de colección destacadas : la mayoría de los visitantes hacen clic en las páginas de la colección de todos modos. La página de inicio sólo necesita dirigirlos.
- Evitar los carruseles de recogida : cargan todas las imágenes por adelantado para un desplazamiento fluido. Una cuadrícula con el enlace "Ver todo" es más rápida e igualmente efectiva.
Para las páginas de colección (que cargan muchos más productos), consulte nuestra guía de velocidad de la página de colección.
Fondos de vídeo e incrustaciones en su página de inicio
Un video de héroe o de historia de marca puede agregar entre 2 y 5 MB a su página de inicio si se carga directamente. Las incrustaciones de YouTube y Vimeo son más livianas pero aún cargan entre 500 KB y 1 MB de recursos de iframe. La solución es la patrón de fachada:
- Mostrar una imagen en miniatura estática en lugar del reproductor de video real
- Cuando el visitante haga clic en la miniatura, reemplácela con el video real insertado.
- Esto ahorra entre 500 KB y 5 MB en la carga inicial de la página para los visitantes que nunca reproducen el video (la mayoría de ellos)
Para obtener detalles completos de la implementación, incluido el código de fachada de YouTube Lite y Vimeo, consulte nuestra Guía de optimización de vídeos de Shopify.
Si usas un video de fondo en tu sección de héroe: reemplázalo con una imagen estática en el móvil. Las conexiones móviles son más lentas, las pantallas son más pequeñas y la mayoría de los usuarios de dispositivos móviles tienen límites de datos. El impacto visual de un vídeo de fondo en una pantalla de 375 píxeles es mínimo en comparación con el coste de rendimiento.
Widgets de aplicaciones de la página de inicio: el impuesto de velocidad oculto
Cada aplicación de Shopify que instales puede inyectar JavaScript y CSS en tu página de inicio. Incluso las aplicaciones que parecen ligeras suman. Este es el costo real de los widgets comunes de la página de inicio:
| Tipo de widget | JS/CSS agregado | Impacto de velocidad | Recomendación |
|---|---|---|---|
| Chat en vivo (Tidio, Gorgias) | 200-500KB | Alto | Aplazar o cargar en la interacción |
| Insignias de revisión (Judge.me, Loox) | 100-300KB | Medio | Cargar solo en páginas de productos |
| Consentimiento de cookies (GDPR) | 50-200KB | Medio | Utilice un banner ligero |
| Feed de Instagram | 500KB-1MB | Alto | Reemplazar con imágenes estáticas |
| Temporizador de cuenta regresiva | 50-100KB | Medio bajo | Usar solo CSS o posponer JS |
| Ventana emergente del boletín | 100-300KB | Medio | Cargar después de renderizar la página |
Se está cargando una tienda con 5 o 6 de estos widgets 1-3 MB de JavaScript adicional solo para widgets de la página de inicio. Esto se suma al tema JS, el propio JS de Shopify y los scripts de análisis. Obtenga más información sobre cómo identificar aplicaciones problemáticas en nuestra aplicaciones que ralentizan tu tienda .
Thunder pospone automáticamente los scripts de aplicaciones no críticas: la página se muestra primero y luego los widgets se cargan en segundo plano. Este es el cambio de mayor impacto para la mayoría de las páginas de inicio.
Audita las secciones de tu página de inicio de Shopify
Abre tu administrador de Shopify → Tienda en línea → Personalizar → Página de inicio. Cuente sus secciones. Si tiene más de 12, probablemente esté perjudicando el rendimiento sin un beneficio de conversión proporcional. Aquí hay un marco para decidir qué se queda:
✅ Mantener (valor de conversión alto)
- Banner de héroe con CTA principal
- 1-2 cuadrículas de colección destacadas (4-8 productos cada una)
- Pruebas sociales/testimonios (basados en texto, no widgets integrados)
- Propuestas de valor (envíos, devoluciones, garantías)
- CTA de pie de página/suscripción al boletín
❌ Considere la posibilidad de eliminar (valor bajo, costo alto)
- Feed de Instagram (alto ancho de banda, baja conversión)
- Múltiples presentaciones de diapositivas/carruseles
- Secciones de publicaciones de blog (en su lugar, enlace al blog)
- Mapa/localizador de tiendas en la página de inicio
- Secciones de colección redundantes (más de 3 colecciones destacadas)
- Fondos de vídeo de reproducción automática
Cada sección que elimina son imágenes que no se cargan, nodos DOM que no se analizan y JavaScript que no se ejecuta. Para una auditoría más profunda en todo el sitio, siga nuestra Lista de verificación de auditoría de velocidad de Shopify.
Velocidad de la página de inicio móvil: donde más importa
Over 70% of Shopify traffic comes from mobile devices — and mobile is where homepage speed problems are most severe. Slower connections, less RAM, smaller screens mean every extra kilobyte hurts more. Here's what to focus on:
- Ofrecer imágenes destacadas optimizadas para dispositivos móviles : no cargues un héroe de 1920×900px en una pantalla de 375px. uso
Atributos
conjunto de origenytamañospara publicar una imagen de 750 píxeles en dispositivos móviles. Esto por sí solo puede ahorrar entre 200 y 400 KB. - Reducir los productos visibles en el móvil : una cuadrícula de productos de 4 columnas en una computadora de escritorio se convierte en una cuadrícula de 2 columnas en un dispositivo móvil. Muestre 4 productos en lugar de 8; el resto requiere desplazamiento de todos modos.
- Desactivar fondos de vídeo en dispositivos móviles : reemplácela con una imagen estática usando una consulta de medios CSS o una configuración de tema. Los vídeos de fondo en el móvil desperdician ancho de banda y batería.
- Simplifica la navegación móvil : los megamenús que cargan docenas de imágenes de colección al pasar el mouse se traducen en pesados menús de hamburguesas móviles que precargan esas mismas imágenes.
- Prueba en dispositivos reales : La limitación de Chrome DevTools no simula perfectamente el rendimiento móvil real. uso nuestra herramienta de prueba de velocidad o PageSpeed Insights de Google con una conexión móvil real.
Para una optimización móvil integral más allá de la página de inicio, consulte nuestra guía de optimización de la velocidad móvil.
Optimización de la mitad superior de la página para las páginas de inicio de Shopify
El navegador muestra su página de arriba hacia abajo. Lo que aparece "en la mitad superior de la página" (la ventana gráfica visible antes de desplazarse) determina su puntuación LCP y la primera impresión del visitante. Optimice esta área sin piedad:
- Identifique su elemento LCP : ejecuta PageSpeed Insights y busca el diagnóstico "Elemento de pintura con contenido más grande". Suele ser la imagen del héroe. Precargue esta imagen con alta prioridad.
- CSS crítico en línea : el CSS necesario para representar el contenido de la mitad superior debe estar incluido en el
<head>, no en una hoja de estilo externa que bloquea la representación. Nuestro Guía de optimización de CSS cubre esto en detalle. - Aplazar las secciones del pliegue inferior : todo después del héroe y la primera sección visible debería cargarse lentamente. Las imágenes obtienen
cargando="perezoso"y las secciones con mucho JavaScript deben usar el observador de intersección para cargarse solo cuando se desplazan a la vista. - Minimizar los recursos que bloquean el renderizado : cada archivo CSS y JavaScript sincrónico en el
<head>bloquea la primera pintura. Thunder elimina los recursos que bloquean el renderizado automáticamente al aplazar scripts no críticos.
⚡ Solución rápida frente a optimización manual de la página de inicio
| Optimización | Trueno (Automático) | Manual (se necesita desarrollador) |
|---|---|---|
| Aplazar secuencias de comandos de bloqueo de renderizado | ✅ Un clic | Editar theme.liquid, corre el riesgo de romper aplicaciones |
| Optimizar la carga de CSS | ✅ Automático | Extraer CSS crítico manualmente |
| Carga diferida de imágenes | ✅ Automático | Agregar carga="lazy" por imagen |
| Precargar imagen de héroe | ✅ Automático | Agregar etiqueta de enlace de precarga en el tema |
| Hora de implementar | 60 segundos | 4-8 horas de tiempo de desarrollador |
| Riesgo | Cero (reversible) | Puede romper el tema/las aplicaciones |
Instalar Trueno para la optimización automática de la página de inicio, luego aplique las ganancias manuales (reducción de sección, intercambio de imagen principal) para obtener el máximo efecto. Ver precios.
Preguntas frecuentes
¿Por qué mi página de inicio de Shopify es más lenta que las páginas de productos?
Las páginas de inicio suelen ser la página más pesada en una tienda Shopify porque contienen la mayor cantidad de secciones: controles deslizantes de héroe, colecciones destacadas (cargando de 8 a 16 imágenes de productos), pancartas promocionales, fondos de video, carruseles de testimonios, feeds de Instagram, barras de anuncios y widgets de aplicaciones. Cada sección agrega nodos DOM, CSS, JavaScript e imágenes. Una página de inicio típica tiene entre 15 y 30 secciones, mientras que una página de producto tiene entre 5 y 10. Esta es la razón por la que las páginas de inicio suelen obtener entre 10 y 20 puntos menos en PageSpeed Insights que las páginas de productos.
¿Debo usar una presentación de diapositivas o una imagen principal única en mi página de inicio de Shopify?
Una sola imagen principal es significativamente más rápida que una presentación de diapositivas. Las presentaciones de diapositivas cargan de 3 a 5 imágenes de tamaño completo por adelantado (aunque solo una es visible), agregan JavaScript para animación/navegación y, a menudo, provocan CLS (cambio de diseño acumulativo) cuando las imágenes se cargan a diferentes velocidades. Una única imagen principal estática carga una imagen, no requiere JavaScript y es predecible para el escáner de precarga del navegador. Si debe utilizar una presentación de diapositivas, limítela a 2-3 diapositivas y cargue las diapositivas de forma diferida 2+.
¿Cuántas secciones debe tener una página de inicio de Shopify?
Para una velocidad óptima, mantenga su página de inicio en entre 8 y 12 secciones como máximo. Cada sección aumenta el tamaño del DOM, la complejidad del CSS y, a menudo, carga sus propias imágenes o scripts. Las secciones de la mitad superior de la página (principal, barra de anuncios, navegación) deberían cargarse inmediatamente. Todo lo que aparece a continuación debería cargarse de forma diferida. Muchas tiendas Shopify de alto rendimiento utilizan solo entre 6 y 8 secciones: héroe, colección destacada, propuestas de valor, testimonios, productos destacados y CTA en el pie de página.
¿Los widgets de la aplicación de la página de inicio ralentizan mi tienda Shopify?
Sí, significativamente. Los widgets comunes de la página de inicio incluyen chat en vivo (Tidio, Gorgias – 200-500 KB JS), insignias de revisión (Judge.me, Loox – 100-300 KB), pancartas de consentimiento de cookies (50-200 KB), barras de anuncios con temporizadores de cuenta regresiva (50-100 KB JS) y feeds de Instagram (500 KB-1 MB incluidas las imágenes). Cada widget carga su propio JavaScript y CSS, a menudo bloqueando el procesamiento. Una tienda con 5 o 6 widgets en la página de inicio puede agregar fácilmente entre 1 y 2 segundos al tiempo de carga. Thunder pospone estos scripts para que se carguen después de que se procese la página.
¿Cuál es una buena puntuación de PageSpeed para una página de inicio de Shopify?
En dispositivos móviles, una puntuación de 50 a 70 es realista para una página de inicio de Shopify con colecciones destacadas y widgets de aplicaciones. Se puede lograr una puntuación de 70-90 con la optimización (Trueno + optimización de imagen + reducción de sección). Las puntuaciones superiores a 90 en dispositivos móviles son raras en páginas de inicio con contenido real. En el escritorio, apunte a 80-95. No se obsesione con el número de puntuación: céntrese en las métricas del mundo real: LCP por debajo de 2,5 segundos, CLS por debajo de 0,1 e INP por debajo de 200 ms.
¿Cómo hago para que mi página de inicio de Shopify se cargue en menos de 2 segundos?
Para lograr una carga de la página de inicio en menos de 2 segundos: (1) Utilice una única imagen principal optimizada en lugar de una presentación de diapositivas, precargada con fetchpriority='high'. (2) Límite de 8 a 10 secciones en total. (3) Cargar de forma diferida todo lo que se encuentra debajo del pliegue. (4) Eliminar o posponer los widgets de aplicaciones no esenciales. (5) Utilice un tema rápido de Shopify 2.0 como Dawn. (6) Instale Thunder Page Speed Optimizer para diferir automáticamente los scripts de bloqueo de procesamiento y optimizar el orden de carga de recursos. (7) Limite las secciones de colección destacadas a 4-8 productos en lugar de 16+.
Haz que tu página de inicio de Shopify sea la página más rápida de tu tienda
Your homepage doesn't have to be your slowest page. The biggest wins are structural: replace the slideshow with a single hero image, cut sections from 20 to 10, limit featured collections to 4-8 products each, and defer app widgets that aren't needed for first render. These changes alone can cut 1-3 seconds off your homepage load time.
Para las optimizaciones técnicas (aplazamiento de secuencias de comandos, optimización de CSS, precarga de imágenes, eliminación del bloqueo de renderizado) Thunder Page Speed Optimizer los maneja automáticamente. Un clic, mejora de más de 27 puntos, funciona en todos los temas.
Pruebe la velocidad de su página de inicio ahora y mira dónde estás parado. Para obtener el manual de estrategia completo más allá de su página de inicio, consulte nuestro guía completa de optimización de velocidad de Shopify.
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