Mejorar el rendimiento de la tienda online

La tienda online se compone de un conjunto de funciones, como el código del tema, aplicaciones, imágenes, videos, carruseles, feeds de redes sociales e informes y estadísticas. Estas funciones pueden mejorar la experiencia de quienes visitan la tienda y ampliar las capacidades del sitio.

Sin embargo, cada función que agregues a la tienda online puede afectar el rendimiento. Algunas pueden ralentizar el sitio o generar comportamientos inesperados que afecten la experiencia de usuario.

El rendimiento web se enfoca en optimizar la experiencia de usuario. Actualmente se concentra en tres áreas principales, que también se reflejan en las Core Web Vitals:

• Velocidad de carga, medida por Largest Contentful Paint (LCP)
• Estabilidad del diseño, medida por Cumulative Layout Shift (CLS)
• Respuesta ante la interacción de la persona usuaria, medida por Interaction to Next Paint (INP)

Optimizar el rendimiento web aumenta la probabilidad de que los clientes permanezcan en el sitio y realicen una compra.

Optimizaciones para la tienda online

La tienda online ya incluye optimización web. Las nuevas funciones también la incluyen. No hace falta hacer nada especial para aprovechar lo siguiente:

• La tienda online se aloja en servidores rápidos y globales y no limita el ancho de banda de la tienda. Puedes consultar el estado de la tienda Shopify en Shopify Status.
• La tienda online usa una red de distribución de contenido (CDN) operada por Cloudflare, que garantiza cargas rápidas en todo el mundo. Puedes consultar el estado de la CDN en la página de estado de Cloudflare.
• Para mantener tiempos de carga rápidos, las imágenes se optimizan automáticamente con image CDN. Junto con el código del tema, el image CDN puede servir el formato de imagen más adecuado, además de redimensionarlas y comprimirlas para mantener tamaños de archivo pequeños.

Factores que afectan el rendimiento web

En las tiendas Shopify, los siguientes son los factores que más afectan el rendimiento web:

• El tema de la tienda online
• Las aplicaciones que instalaste
• Cualquier código externo adicional que agregaste manualmente a la tienda, incluidos los administradores de etiquetas y las etiquetas que contienen

Esto significa que conviene enfocarse en lo siguiente para mejorar el rendimiento web:

• Usa un tema actualizado y optimizado. Todos los Horizon family of themes y los temas de Online Store 2.0 de Shopify son gratuitos y están optimizados para el rendimiento web. Además, muchos otros temas externos también están optimizados para el rendimiento web. Puedes consultar los últimos datos de rendimiento de temas.
• Si el tema ofrece transiciones de página u otras animaciones, compara el rendimiento web antes y después de activarlas. Las animaciones pueden ralentizar las páginas.
• Evita agregar demasiadas secciones a las plantillas de página del tema. Un número elevado de secciones en las páginas puede reducir el rendimiento web.
• Si tienes colecciones con una gran cantidad de productos, considera activar la paginación para limitar cuántos productos se cargan a la vez.
• Evalúa las aplicaciones instaladas y el código externo para asegurarte de que aportan suficiente valor como para compensar posibles pérdidas de rendimiento.
• Audita el administrador de etiquetas para eliminar cualquier etiqueta sin uso o de poco valor. Más información sobre mejores prácticas para etiquetas y administradores de etiquetas.

Herramientas de prueba

Puedes usar las siguientes herramientas para analizar el rendimiento de la tienda online:

• Informes de rendimiento web: Los informes de rendimiento web de Shopify usan Core Web Vitals para medir cómo experimentan la tienda online las personas usuarias reales.
• PageSpeed Insights: Puedes generar informes propios con PageSpeed Insights de Google para ver métricas más detalladas de las páginas de la tienda.

Cómo interpretar las recomendaciones de rendimiento de terceros

Las herramientas de análisis de rendimiento de terceros pueden sugerir cambios para mejorar la velocidad de la tienda. Sin embargo, muchas de esas recomendaciones ya están implementadas por Shopify o no aplican a las tiendas Shopify.

Optimizaciones ya incluidas en Shopify

La tienda Shopify incluye automáticamente las siguientes optimizaciones de rendimiento:

Red de distribución de contenido (CDN): Shopify proporciona una CDN de primer nivel sin costo adicional, lo que garantiza un rendimiento rápido a nivel global. Todos los recursos se sirven con HTTP/2, lo que reduce la sobrecarga frente a protocolos más antiguos.

Almacenamiento en caché del navegador: Shopify establece en un año la caché para los recursos que se pueden almacenar, que es la duración máxima posible. Esto hace que quienes regresan a la tienda tengan tiempos de carga más rápidos.

Compresión gzip: Shopify aplica compresión gzip a CSS, JavaScript, documentos y páginas para reducir el ancho de banda y mejorar los tiempos de carga. También se habilita keep-alive para la recuperación de múltiples archivos.

Optimización de imágenes: Shopify comprime automáticamente las imágenes JPG con algoritmos avanzados, logrando un equilibrio entre compresión y calidad visual. Con frecuencia, las imágenes se sirven en formato WebP para obtener mejor compresión y cargas más rápidas.

Minificación de archivos: Shopify minifica automáticamente los archivos CSS y JavaScript cuando los solicita la tienda online, lo que reduce el tamaño sin afectar la funcionalidad.

Cuando las recomendaciones de terceros no aplican

Las herramientas de análisis de terceros pueden sugerir cambios que no son relevantes para las tiendas Shopify:

• Configuraciones a nivel de servidor: Las recomendaciones sobre la configuración del servidor, encabezados HTTP o políticas de caché ya están optimizadas por la infraestructura de Shopify.
• Implementación de CDN: Las sugerencias para agregar una CDN no son necesarias, ya que Shopify incluye por defecto una CDN de alto rendimiento.
• Configuración de compresión: Las recomendaciones sobre habilitar la compresión ya están implementadas en toda la plataforma de Shopify.

Aplicar las recomendaciones relevantes

Concéntrate en las recomendaciones relacionadas con el contenido y las funciones específicas de la tienda:

• Optimización de imágenes: Asegúrate de que las imágenes que subas tengan el tamaño adecuado y usen los formatos recomendados.
• Evaluación de aplicaciones: Considera si las aplicaciones instaladas aportan suficiente valor para compensar cualquier impacto en el rendimiento.
• Optimización de temas: Elige temas optimizados para el rendimiento y limita la cantidad de secciones en las plantillas de página.

Resolución de problemas de páginas con carga lenta

Si la tienda carga lentamente, sigue estos pasos para identificar y resolver el problema:

Paso 1: verifica el problema

1. Prueba la velocidad de carga de la tienda desde distintos dispositivos y conexiones a internet.
2. Pide a otras personas que prueben la tienda para confirmar que no se trata de un problema local con la conexión a internet.
3. Usa herramientas de prueba como PageSpeed Insights para obtener métricas específicas de rendimiento.

Paso 2: identifica la causa

Verifica si hay demasiadas aplicaciones: demasiadas aplicaciones que cargan recursos en la tienda online pueden ralentizar el rendimiento. Revisa las aplicaciones instaladas y elimina las que no sean esenciales para las ventas.

Revisa las imágenes de gran tamaño: las páginas con muchas imágenes de alta calidad pueden cargar lentamente. Optimiza las imágenes o reduce la cantidad de imágenes mostradas. Obtén más información sobre tamaños de imagen recomendados.

Identifica scripts lentos: si el sitio se queda en blanco y luego carga todo de golpe, usa las herramientas para desarrolladores del navegador para detectar los scripts que cargan lentamente. Comunícate con el desarrollador de la aplicación o del tema para resolverlo.

Paso 3: toma medidas

Elimina las aplicaciones innecesarias: desinstalar una aplicación no elimina su código del tema automáticamente. Es posible que debas comunicarte con el desarrollador de la aplicación para obtener instrucciones de eliminación completa.

Optimiza las imágenes: usa formatos de archivo adecuados (JPG para fotos, PNG para gráficos con transparencia) y ajusta el tamaño de las imágenes al tamaño al que se muestran.

Evalúa el rendimiento del tema: considera cambiar a un tema optimizado para el rendimiento si el tema actual está provocando ralentizaciones significativas.

Obtén ayuda con el rendimiento de la tienda online

Si usas un tema gratis de Shopify, atención al cliente de Shopify podría ayudarte con mejoras básicas de rendimiento.

Si usas un tema externo y necesitas ayuda, debes comunicarte con your theme developer, contratar a un Shopify web performance expert o contratar a un Shopify Partner para rendimiento y velocidad del sitio. Más información sobre hiring a Shopify Partner.

Si el problema de rendimiento proviene de una aplicación, puedes comunicarte con your app developer.

Si cuentas con un equipo de desarrollo o una agencia partner, también puedes comunicarte con ellos para recibir más ayuda.

Información técnica y recursos para la resolución de problemas

Si eres desarrollador y buscas mejorar el rendimiento de una tienda online de Shopify, un tema o una aplicación, revisa los siguientes recursos para cada Core Web Vital. Obtén más información sobre performance best practices for Shopify Themes.

Velocidad de carga

Largest Contentful Paint (LCP) mide la velocidad de carga según qué tan rápido se vuelve visible el elemento más grande en pantalla. El tiempo hasta el primer byte (TTFB) y la first contentful paint (FCP) son métricas de apoyo que ayudan a entender mejor de dónde proviene la causa raíz del problema. Obtén más información sobre debugging common causes for slow loading in Shopify Liquid storefronts.

Estabilidad visual

Cumulative Layout Shift (CLS) mide la estabilidad visual según cuánto se desplaza inesperadamente el contenido durante la carga. Para profundizar en la depuración de CLS, lee How to optimize Cumulative Layout Shift (CLS) on Shopify sites.

Interactividad

Interaction to Next Paint (INP) mide la interactividad según cuánto tarda la página en responder a la mayoría de las acciones de las personas usuarias. Por ejemplo, acciones como hacer clic en un enlace o un botón.

Si tienes un INP deficiente, lo más probable es que haya demasiado JavaScript en la tienda, ya sea del código del tema, del código de aplicaciones o de código de terceros/del administrador de etiquetas. Enfócate en depurar los principales responsables. Más información en 3 ways to find your worst JavaScript offenders for page load. Si sigues teniendo problemas con el INP, consulta los recursos de web.dev.