Mejorar el rendimiento de la tienda online

Varios factores afectan el rendimiento de la tienda online; puedes controlar algunos.

Para conocer cuál es el rendimiento actual de tu tienda online, consulta el informe Rendimiento web.

Factores que no puedes controlar

Estos factores pueden afectar el rendimiento de la tienda, pero ninguna configuración o ajuste que puedas realizar en la tienda de Shopify puede controlarlos. Esto incluye factores de los clientes, como su dispositivo o velocidad de Internet, así como factores de Shopify, como actualizaciones de su infraestructura.

El dispositivo, la red y la ubicación de tu cliente

Los clientes que visitan tu tienda viven en distintas partes del mundo y usan diferentes dispositivos y conexiones a internet. Es así que tu tienda podría cargarse de forma más rápida o lenta según estos factores.

Si un cliente te consulta sobre la velocidad de tu tienda, pídele que compruebe que utiliza la última versión de su navegador, que borró su caché recientemente y que su proveedor de servicios de Internet no está experimentando interrupciones ni un rendimiento deficiente.

Infraestructura de Shopify

Shopify aloja tu tienda online en servidores mundiales rápidos y no limita el ancho de banda de tu tienda. Puedes verificar el estado de tu tienda Shopify en el Estado de Shopify.

Shopify está constantemente mejorando su código e infraestructura. Algunas de estas mejoras podrían reflejarse en las métricas de rendimiento.

A continuación se presentan algunas funciones que afectan la velocidad de la tienda online.

Red de distribución de contenido (CDN)

CDN significa red de entrega de contenido. La CDN almacena las imágenes y otros archivos, como el contenido en la página Contenido > Archivos del panel de control de Shopify. La CDN es donde Shopify ofrece a los comerciantes una red CDN de primera clase ejecutada por Cloudflare que garantiza la carga rápida de la tienda online en todo el mundo. Puedes verificar el estado de CDN en la página Estado de Cloudflare.

Caché del navegador local

Tu tienda almacena o guarda temporalmente algunos elementos en el almacenamiento local de tu cliente. La próxima vez que tu cliente visite tu tienda online, el navegador puede cargar recursos del caché en lugar de enviar otra solicitud al servidor.

Shopify establece la memoria caché del navegador para recursos almacenables en caché en tu tienda hasta un año por cada archivo. Los archivos almacenables incluyen archivos de imagen, PDFs, archivos JS y CSS.

Caché de página ejecutado por el servidor

Además del caché del navegador local, Shopify almacena páginas en el servidor. La primera vez que se carga una página, es posible que sea más lenta, pero las cargas posteriores son más rápidas porque los clientes reciben una copia almacenada en caché.

Los recursos dentro del objeto Liquid content_for_header

El objeto Liquid `` inserta los recursos que usan distintas funciones de la tienda online, por ejemplo, informes y estadísticas de rendimiento, y funciones opcionales, como los botones de pago dinámicos. Cargar este objeto y los recursos relacionados afecta a la velocidad de la tienda. Shopify está optimizando la etiqueta y sus recursos para que sea más rápida.

Factores que puedes controlar

A continuación, se presentan algunos factores que pueden afectar el rendimiento de la tienda online y cómo puedes corregirlos.

Aplicaciones

Cuando agregas aplicaciones para cambiar la funcionalidad o apariencia de tu tienda en línea, agregan código al tema para que puedan ejecutarse. Se puede eliminar o reordenar algún código para mejorar el rendimiento de tu tienda online. Si no estás utilizando una aplicación, puedes eliminarla.

Si crees que una aplicación está ralentizando tu tienda, sigue los pasos siguientes:

  • Desactiva las funciones de la aplicación que no usas o elimina la aplicación si no la necesitas. Considera el equilibrio entre las funciones y la velocidad de la tienda online.
  • Si estás eliminando una aplicación, considera la posibilidad de eliminar el código que se agregó como parte del proceso de instalación de dicha aplicación. La mayoría de las aplicaciones eliminarán su código automáticamente por ti, pero puedes consultar con el desarrollador de la aplicación para asegurarte. Algunas aplicaciones te ayudan con este proceso al incluir su código en las etiquetas {% comment %} que mencionan el nombre de la aplicación. Eliminar el código de la aplicación no utilizada es una de las mejores prácticas que evita la ejecución del código para funciones no utilizadas y facilita la lectura del código del tema.
  • Consulta a tu desarrollador de aplicaciones.

Temas

Los temas están conformados por código Liquid, HTML, CSS y JavaScript. Cuando editas o personalizas los temas, el tamaño de los archivos puede aumentar y afectar al rendimiento web.

Si crees que algo en tu tema está ralentizando tu tienda, sigue los pasos siguientes:

Funciones del tema o de la aplicación

Ciertas funciones, cuando están activadas, también pueden afectar el rendimiento de la tienda. Por ejemplo, algunas ventanas emergentes de vista rápida cargan previamente la información de cada página de producto al cargarse una página de colección. La carga de datos adicionales que los clientes no usen puede afectar la velocidad de carga sin agregar valor.

Si crees que una función está ralentizando tu tienda, sigue los siguientes pasos:

Código de Liquid complejo o ineficiente

Puedes editar casi todo el código Liquid que se usa para renderizar tu tienda. Existen formas eficaces e ineficaces de escribir código Liquid. Realizar operaciones complejas repetidamente puede aumentar el tiempo de renderización de Liquid, y eso afectaría al rendimiento global de la web.

Por ejemplo, si deseas ordenar por precio los productos de una colección, debes hacerlo antes de recorrer en bucle los productos de tu colección, y no como parte del código de bucle. Esto se debe a que el orden no cambia para cada producto, y calcularlo aumenta el tiempo de procesamiento de la solicitud.

Si te preocupa que el código no esté optimizado, puedes seguir los pasos siguientes:

  • Ejecuta el Inspector de temas de Shopify para Chrome para identificar las líneas de código que ralentizan las páginas en tu tienda online.
  • Contrata a un Shopify Partner para que te ayude a encontrar un código ineficaz o inútil.

Imágenes y videos

Las imágenes de gran tamaño y las que se ocultan a la vista pueden interferir con la carga de otras partes más importantes de una página. Si los usuarios tienen que esperar a que se carguen imágenes grandes, quizá piensen que tu tienda es lenta.

Shopify agrega algunas medidas de seguridad para evitar que sobrecargues tu tienda online con imágenes o videos. Por ejemplo:

  • No puedes tener más de 50 productos en una página de colección o 25 secciones en tu página de inicio.
  • Muchos temas posponen la carga de imágenes que actualmente no se muestran en pantalla.
  • Muchos temas también cargan un tamaño específico de una imagen en función del tamaño de pantalla en el que se muestra.

Sin embargo, estas medidas de seguridad no evitan por completo que las imágenes o videos afecten el rendimiento de tu tienda online.

Si crees que las imágenes están ralentizando tu tienda, sigue los siguientes pasos:

  • Revisa la guía de optimización de imágenes.
  • Mantén las presentaciones de diapositivas de imágenes destacadas en 2-3 diapositivas o usa una imagen destacada.
  • Solicita a tu desarrollador de temas consejos sobre la mejor manera de usar imágenes con su tema.

Fuentes

Puedes elegir entre varias fuentes para el texto de tu tienda online. Sin embargo, si usas una fuente que todavía no existe en la computadora de tu cliente, debe descargarse la fuente antes de poder mostrar el texto. Esto afecta al tiempo de carga de tu tienda.

Para evitar que se descargue una fuente nueva en la computadora de tu cliente, puedes usar una fuente de sistema. Una fuente de sistema es una fuente que ya está instalada en la mayoría de las computadoras.

Puedes seleccionar una familia tipográfica mono, serif o sans-serif. Igual puedes usar estilos de fuente, como negrita o cursiva, cuando uses cualquiera de estas familias tipográficas.

La fuente que se muestra en la computadora de tu cliente depende de su sistema operativo. A continuación te presentamos algunos ejemplos de las fuentes que se pueden usar para renderizar el texto cuando seleccionas una familia tipográfica de sistema:

  • Mono: Menlo, Consolas, Monaco, Liberation Mono o Lucida Console
  • Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu o Helvetica Neue
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times o Source Serif Pro

Herramientas de resolución de problemas

Puedes usar las siguientes herramientas para comprobar el rendimiento de la tienda online.

Si eres un desarrollador, puedes optimizar aún más tu tema para el rendimiento usando las herramientas y las mejores prácticas de Shopify. Más información en Shopify.dev.

Información útil de PageSpeed

El informe Panel de control de rendimiento web de Shopify utiliza Métricas web principales para medir la experiencia de los usuarios reales en tu tienda online. Puedes crear tus propios informes mediante Google PageSpeed Insights para ver métricas más detalladas de las páginas de tu tienda.

Inspector de temas de Shopify para Chrome

El Inspector de temas de Shopify para Chrome es una herramienta de generación de perfiles que usa una gráfica de flama para mostrar el rendimiento de Liquid. Esta herramienta te ayuda a identificar las líneas de código que ralentizan las páginas en tu tienda online. Aprende cómo usar el inspector de temas de Shopify.

Obtener 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 las mejoras básicas de rendimiento.

Si usas un tema externo y necesitas ayuda, debes ponerte en contacto con el desarrollador de temas o contratar un Shopify Partner. Obtén más información sobre cómo contratar a un Shopify Partner.

Si tienes un equipo de desarrollo o un partner de agencia, también puedes contactarlos para obtener más ayuda.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis