Optimización de la velocidad de la tienda Shopify: una guía completa

Un retraso de un segundo en el tiempo de carga de la página le cuesta a las tiendas de comercio electrónico el 7% de las conversiones. La velocidad de la tienda Shopify no es un lujo: es una línea directa hacia los ingresos. Esta guía revela los seis principales culpables de la ralentización de su tienda y le muestra exactamente cómo solucionarlos.

Por qué la velocidad de la tienda Shopify es importante para las ventas

Google publicó una investigación que muestra que un retraso de 100 milisegundos en la carga de una página puede provocar una caída del 1% en las conversiones. Para una tienda con ingresos mensuales de 50.000 dólares, se pierden 500 dólares por cada décima de segundo adicional. La velocidad afecta más que sólo la experiencia del usuario; es un factor de clasificación fundamental para la Búsqueda de Google.

Los comerciantes de Shopify enfrentan un desafío único. A diferencia de los sitios autohospedados en los que usted controla todos los activos, está construyendo sobre una plataforma compartida que alberga millones de tiendas. Su tema, aplicaciones y scripts de terceros compiten por el ancho de banda. Una tienda mal optimizada puede parecer lenta a pesar de que la infraestructura de Shopify sea de clase mundial.

Las tiendas lentas también dañan la confianza. Los usuarios esperan que el pago sea instantáneo. Una página de pago que se arrastra indica riesgo, especialmente en dispositivos móviles. Las mejoras en la velocidad a menudo se correlacionan con un menor abandono del carrito y un mayor valor de vida del cliente.

Cómo medir la velocidad de tu tienda Shopify

Antes de poder fijar la velocidad, necesitas datos. La mayoría de los comerciantes adivinan qué pasa. Las métricas correctas le dicen exactamente dónde concentrarse.

Estadísticas de PageSpeed de Google

Empiece aquí. Visitapagespeed.web.deve ingresa la URL de tu tienda Shopify. PageSpeed ​​Insights mide la experiencia del usuario en el mundo real (datos de campo) y el rendimiento del laboratorio. Asigna puntuaciones de 0 a 100 y señala problemas específicos.

Concéntrese primero en la sección "Core Web Vitals". Estas tres métricas impactan directamente en la experiencia del usuario y en las clasificaciones de búsqueda. Una puntuación superior a 90 es excelente; más de 50 es aceptable; por debajo de 50 requiere acción inmediata.

Pruebe su página de inicio y una página de producto. Las páginas de inicio y las páginas de colección a menudo se cargan de manera diferente a las páginas de productos individuales debido al recuento de imágenes y los scripts de las aplicaciones.

Informe de velocidad de tienda en línea integrado de Shopify

Inicie sesión en su administrador de Shopify y navegue hasta Canales de ventas > Tienda en línea > Temas. Haga clic en "Abrir su tema actual" y busque "Velocidad de la tienda en línea". Este informe muestra tendencias de rendimiento e identifica las aplicaciones que ralentizan su tienda.

El informe de velocidad se basa en datos de usuario reales de sus visitantes reales. Es más preciso para su audiencia y patrones de tráfico específicos que las pruebas de laboratorio. Compruébelo mensualmente para seguir el progreso.

GTmetrix y WebPageTest

GTmetrix y WebPageTest proporcionan gráficos en cascada que muestran la secuencia de carga de cada recurso en su página. Revelan qué scripts bloquean el renderizado y qué activos desperdician ancho de banda.

Úselos para profundizar en activos lentos específicos. Por ejemplo, si ve el script de una aplicación cargándose antes que las imágenes del producto, esa es una solución prioritaria. Estas herramientas son más técnicas, pero vale la pena aprenderlas para los comerciantes que administran tiendas con ingresos de más de $100 000 al mes.

Las seis causas principales de la lentitud de las tiendas Shopify

1. Imágenes no optimizadas

Las imágenes representan entre el 50% y el 70% del peso de la página de una tienda Shopify típica. Una foto de producto sin comprimir tomada de una cámara puede tener entre 3 y 5 MB. Subir directamente a Shopify sin optimización reduce el rendimiento.

Shopify sirve imágenes automáticamente a través de su CDN y crea variantes responsivas, pero no las comprime. Una imagen de 4000x3000px mostrada con un ancho de 500px aún carga la resolución completa, luego el navegador cambia su tamaño.

Los formatos de imagen modernos como WebP son entre un 25 y un 35 % más pequeños que JPG con idéntica calidad. La mayoría de los comerciantes no los utilizan. Combinadas con la carga diferida (que se explica a continuación), las imágenes optimizadas suelen ser la mayor ganancia.

2. Demasiadas aplicaciones de terceros (especialmente aquellas que inyectan scripts)

La tienda Shopify promedio ejecuta entre 20 y 30 aplicaciones. Cada aplicación puede inyectar JavaScript en su tienda. Más scripts significan una carga de página más lenta, más trabajo de CPU y métricas de Core Web Vitals más largas.

Algunas aplicaciones son inevitables. Procesadores de pagos, captura de correo electrónico, reseñas: estos agregan valor. Pero muchos comerciantes instalan aplicaciones sin auditar si realmente se utilizan.

Los peores culpables son las aplicaciones de marketing que rastrean el comportamiento de los usuarios, los programas de fidelización y las herramientas de personalización visual. Estos descargan paquetes pesados ​​de JavaScript en cada página. Una aplicación de revisión mal codificada puede agregar 300 ms a su LCP (Pintura con contenido más grande).

3. Temas inflados o mal codificados

Tu tema de Shopify es la base. Algunos temas incluyen jQuery, marcos CSS no utilizados y bibliotecas obsoletas. Un tema de hace 10 años puede cargar dependencias que ya no sirven para nada.

Los temas premium pagos a menudo tienen más contenido que los temas gratuitos livianos. Su objetivo es hacer de todo, lo que significa cargar código para funciones que no utilizas. Las capas de personalización añaden más peso.

Problemas comunes con los temas: fuentes personalizadas no utilizadas, imágenes base64 en línea en CSS, múltiples versiones de Bootstrap y bibliotecas de utilidades duplicadas. Audite el código de su tema para identificar el peso muerto.

4. Grandes paquetes de JavaScript y scripts de bloqueo de renderizado

La ejecución de JavaScript es costosa. Mientras se ejecuta el JavaScript de su tema, el navegador no puede pintar la página. Si sus guiones son grandes o están mal secuenciados, los visitantes sentirán que su página está congelada.

Los scripts de terceros de las aplicaciones a menudo se cargan de forma sincrónica, lo que significa que bloquean todo lo demás. El administrador de scripts nativo de Shopify permite la carga asíncrona, pero muchas aplicaciones no siguen ese patrón.

Muchas tiendas cargan píxeles de seguimiento, análisis, widgets de chat y scripts de optimización de conversión antes de que la página se vuelva interactiva. Estos pueden agregar de 2 a 3 segundos al tiempo de interacción (TTI).

5. Sin carga diferida en imágenes de la mitad inferior de la página

Cada imagen de la página de su producto se carga inmediatamente, incluso si los visitantes nunca se desplazan hacia abajo. Esto desperdicia ancho de banda en imágenes que nunca verán.

La carga diferida pospone la carga de imágenes hasta que el usuario está a punto de desplazarse hacia la vista. Combinado con la optimización de imágenes, esto puede reducir el tiempo de carga inicial de la página entre un 30% y un 50%.

Los temas de Shopify creados en los últimos tres años a menudo tienen carga diferida incorporada. Los temas más antiguos no. Es una ganancia rápida si su tema es compatible conloading="lazy"atributo.

6. Almacenamiento en caché de CDN faltante o mal configurado

Shopify ofrece imágenes a través de su CDN a nivel mundial, lo cual es excelente. Pero los encabezados de almacenamiento en caché y las políticas de caché del navegador pueden estar mal configurados.

Algunas tiendas no configuran encabezados de caché en los activos, lo que obliga a los navegadores a volver a validar o descargar archivos estáticos en cada visita. Otros establecen una vida útil de la caché demasiado corta (por ejemplo, 1 día en lugar de 30 días).

El almacenamiento en caché mal configurado no aparecerá en PageSpeed ​​Insights, pero los visitantes habituales verán penalizaciones en el rendimiento. Verifica la configuración de caché de tu tema y asegúrate de que la CDN de Shopify esté configurada correctamente.

Cómo acelerar tu tienda Shopify: soluciones prácticas

Optimización de imagen

Comience con una auditoría de imágenes masiva. Descargue las imágenes de sus productos y ejecútelastinypng.como ImageOptim. Verás cuánto peso se puede reducir sin perder calidad.

Para Shopify, la mejor práctica es cargar imágenes que no midan más de 2000 a 2500 px de ancho. La CDN de Shopify cambia su tamaño automáticamente para dispositivos móviles y de escritorio. Evite cargar imágenes de 6000 px "por si acaso".

Considere utilizar una aplicación de optimización de imágenes dedicada si tiene cientos de productos. Aplicaciones como Crush.pics o Image Optimizer automatizan la compresión en todo su catálogo. A menudo se amortizan con ahorros de ancho de banda en cuestión de semanas.

Implemente la carga diferida para las imágenes de la mitad inferior de la página. La mayoría de los temas modernos de Shopify admiten esto de forma nativa. Si el tuyo no lo hace, agrega elloading="lazy"atribuya las imágenes del producto en el código de su tema.

Auditoría de aplicaciones

Enumere todas las aplicaciones que haya instalado. Revise cada uno y pregunte: ¿Estoy usando esto activamente? ¿Sirve para mis objetivos comerciales?

Desinstala todo lo que no estés usando. Luego, para tus aplicaciones activas, verifica su impacto en el informe de velocidad de Shopify. Las aplicaciones con un impacto de milisegundos (menos de 50 ms) suelen estar bien. Vale la pena reconsiderar las aplicaciones que agregan más de 200 ms.

Si una aplicación es esencial pero lenta, comuníquese con el desarrollador. Muchos creadores de aplicaciones pueden optimizar la entrega de scripts o proporcionar alternativas de carga asíncrona. A veces, un cambio de configuración mejora drásticamente el rendimiento.

Optimización del tema

Audita el código de tu tema. La mayoría de las tiendas Shopify pueden acceder a sus archivos de temas a través de Administrador > Temas > Acciones > Editar código. Busque hinchazón:

• Marcos CSS o bibliotecas de utilidades no utilizados
• Las fuentes personalizadas no se muestran realmente en ninguna página
• JavaScript en línea que podría diferirse
• Varias versiones de la misma biblioteca (jQuery, Bootstrap, etc.)
• Polyfills obsoletos para navegadores antiguos que ya no admite

Si tu tema tiene más de 3 años, considera actualizar a un tema moderno de Shopify. Los nuevos temas se crean teniendo en cuenta el rendimiento y utilizan los estándares web actuales. El costo vale la pena si su tema actual está desacelerando las ventas.

JavaScript y CSS

Aplazar JavaScript no crítico. El editor de scripts de Shopify te permite marcar scripts como asíncronos o diferidos. Esto les impide bloquear la pintura de la página.

Minimice y combine archivos CSS siempre que sea posible. Múltiples archivos CSS significan múltiples solicitudes HTTP. La mayoría de los creadores de temas modernos ya hacen esto, pero los temas personalizados a veces no lo hacen.

Elimine el CSS no utilizado. Herramientas como PurgeCSS pueden identificar reglas CSS que nunca se aplicaron a su página y eliminarlas. Esto por sí solo puede reducir el tamaño del paquete CSS entre un 40% y un 60%.

Carga diferida

Habilite la carga diferida para todas las imágenes de la mitad inferior de la página. En una página de producto típica de Shopify, esto incluye productos relacionados, reseñas y secciones de pie de página.

Agregue el atributo HTML:<img src="..." loading="lazy">. Los navegadores modernos se encargan del resto automáticamente. Para imágenes en secciones personalizadas, es posible que necesite una biblioteca de carga diferida de JavaScript comolozad.js.

Prueba en el móvil. Un visitante de una red lenta puede ver espacios en blanco si las imágenes se cargan demasiado lentamente. Equilibre la carga diferida con una precarga agresiva para imágenes en la mitad superior de la página.

CDN y almacenamiento en caché

Verifica que la CDN de Shopify esté activa para tus imágenes. En tu panel de control de Shopify, todas las imágenes deben publicarse desdecdn.shopify.com. Si ve URL de dominio personalizadas, es posible que tenga una configuración obsoleta.

Establece encabezados de caché en el archivo de configuración de tu tema. Las recomendaciones de Shopify suelen ser de 30 días para activos versionados, 1 día para CSS/JS y 5 minutos para HTML. Esto garantiza que los visitantes habituales carguen desde la memoria caché en lugar de volver a descargarlo.

Si usa Cloudflare, configúrelo para almacenar en caché activos estáticos de manera agresiva. Las políticas de caché en conflicto crean penalizaciones de velocidad: establezca reglas claras y pruebe con una nueva sesión del navegador después de realizar cambios.

Shopify Core Web Vitals: LCP, CLS e INP explicados

Los Core Web Vitals de Google son tres métricas que influyen directamente en el ranking de búsqueda y en la puntuación de la experiencia del usuario. Shopify los muestra específicamente en el informe de velocidad.

LCP (pintura con contenido más grande)Mide el tiempo hasta que el bloque de texto o imagen más grande ingresa a la ventana gráfica. Objetivo: menos de 2,5 segundos. La mayoría de los problemas de lentitud de Shopify se manifiestan como un LCP deficiente. Las imágenes no optimizadas, los scripts que bloquean el procesamiento y los recursos lentos de terceros amplían LCP.

CLS (cambio de diseño acumulativo)Mide el movimiento inesperado de los elementos de la página a medida que se cargan. Objetivo: menos de 0,1. Un problema clásico de CLS es que las imágenes se cargan sin espacio reservado, lo que hace que el texto salte hacia abajo. O un widget de chat que aparece en mitad de la página y cambia todo. CLS rara vez ralentiza el rendimiento percibido, pero daña la experiencia del usuario y el SEO.

INP (Interacción con la siguiente pintura)Mide la capacidad de respuesta: qué tan rápido responde la página a los clics o toques del usuario. Objetivo: menos de 200 milisegundos. La ejecución intensa de JavaScript, los detectores de eventos no optimizados y los elementos interactivos mal codificados perjudican a INP.

Las tiendas Shopify suelen tener más problemas con LCP (normalmente imágenes o aplicaciones lentas), seguido de CLS (cambios de diseño desde contenido cargado de forma diferida). Para mejorar los tres: optimice las imágenes primero (mayor impacto de LCP), reserve espacio para contenido dinámico (corrige CLS) y audite el tiempo de ejecución de JavaScript (mejora INP).

Cuándo contratar a un desarrollador de Shopify para optimizar la velocidad

Puedes optimizar mucho tú mismo. Pero algunos problemas requieren experiencia de desarrollador. Aquí hay tres señales de que es hora de buscar ayuda:

Tu puntuación de PageSpeed no pasará de 50incluso después de eliminar aplicaciones y optimizar imágenes. Esto generalmente significa que su tema o aplicación principal requiere correcciones a nivel de código. Un desarrollador puede identificar cuellos de botella en el código del tema, optimizar el orden de renderizado e implementar estrategias de almacenamiento en caché avanzadas que no puede realizar en el administrador.

Su LCP dura más de 4 segundos y no puede identificar por qué.Los gráficos en cascada de GTmetrix muestran el problema, pero solucionarlo puede requerir JavaScript personalizado, modificaciones del tema o negociar la carga asíncrona con un proveedor de aplicaciones. Los desarrolladores saben qué palanca tirar.

Estás pagando miles de dólares en anuncios mensualmente y cada conversión cuenta.A escala, una mejora de 0,5 segundos puede significar miles de ingresos adicionales. La optimización DIY produce el 80% de las ganancias. El último 20% requiere ingeniería de desempeño profesional.

Devmerx se especializa en la optimización de la velocidad de Shopify. Auditamos su tienda, identificamos los cuellos de botella exactos e implementamos soluciones que impulsan sus Core Web Vitals hacia el verde. Echa un vistazo a nuestroServicios de Shopifyoreserve una auditoría de velocidad gratuitapara ver qué es posible para su tienda.

Preguntas frecuentes

¿El tema de Shopify afecta la velocidad de la página?

Sí, significativamente. Su tema representa entre el 30% y el 60% del tiempo de carga de la página, según el tema que utilice y qué tan personalizado esté. Un tema moderno bien codificado se carga en 1 o 2 segundos. Un tema inflado y desactualizado puede tardar entre 3 y 4 segundos antes de agregar aplicaciones o imágenes. Si tienes menos de 50 años en PageSpeed ​​y tus aplicaciones están optimizadas, es probable que tu tema sea el problema.

¿Cuántas aplicaciones de Shopify son demasiadas?

No existe un número mágico. La mayoría de las tiendas funcionan bien con entre 15 y 25 aplicaciones. El impacto depende de lo que hacen las aplicaciones y de cómo están codificadas. Una sola aplicación mal codificada puede dañar a más de cinco aplicaciones bien optimizadas. Audita por impacto en el rendimiento, no por contar: usa el informe de velocidad de Shopify para ver qué aplicaciones agregan más milisegundos.

¿Eliminar aplicaciones mejorará inmediatamente mi puntuación?

Normalmente sí, pero no siempre de forma visible. Es posible que PageSpeed ​​Insights no muestre un salto de 10 puntos después de eliminar una aplicación. Pero sus visitantes reales sentirán la diferencia. Las páginas se muestran más rápido, los botones responden más rápido y los usuarios perciben su tienda como más moderna. Espere entre 24 y 48 horas después de eliminar aplicaciones antes de volver a ejecutar las pruebas.

¿Cuál es el tema de Shopify gratuito más rápido?

El tema oficial Dawn de Shopify se encuentra constantemente entre los más rápidos. Es liviano, está construido según los estándares web actuales y tiene una puntuación de 85+ en PageSpeed ​​para la mayoría de las tiendas. Otros temas rápidos y gratuitos incluyen Prestige y Refresh. El tema más rápido que no coincida con su marca es inútil: elija un tema que se ajuste a sus objetivos de diseño y luego optimícelo.

La optimización de la velocidad es una de las inversiones con mayor retorno de la inversión que puede realizar un comerciante de Shopify. Comience con los beneficios gratuitos (compresión de imágenes, auditoría de aplicaciones, carga diferida) y mida el impacto. Si tocas un techo,reserve una auditoría de velocidad gratuitacon el equipo de Devmerx y le mostraremos exactamente qué está frenando su tienda.