Mejorar la velocidad de tu tienda online
Varios factores afectan la velocidad de tu tienda online, puedes controlar algunos.
Si no conoces la rapidez de rendimiento actual de tu tienda online, consulta el informe de Velocidad de tu tienda online.
En esta página
Factores que no puedes controlar
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 si se está en la última versión de su navegador, si recién eliminaron su caché y que su proveedor de servicios de internet no esté experimentando interrupciones o rendimientos deficientes.
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 tu puntuación de velocidad.
A continuación se presentan algunas funciones que afectan la velocidad de tu tienda online.
Red de distribución de contenido (CDN)
CDN significa red de distribución de contenido. Shopify ofrece a los comerciantes una red CDN de primera clase ejecutada por Cloudfare que garantiza la carga rápida de tu tienda online en todo el mundo. Puedes verificar el estado de CDN en la Página de 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, 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 tu 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 la velocidad de tu 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 de la tienda online y la velocidad.
- Si estás eliminando una aplicación, considera eliminar el código que se agregó como parte del proceso de instalación de la aplicación. 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 práctica recomendada que evita el uso de código para funciones no utilizadas y facilita la lectura del código de tu tema.
- Consulta a tu desarrollador de aplicaciones.
- Contrata un experto de Shopify para obtener más ayuda. Más información sobre cómo contratar a expertos de Shopify.
Temas
Los temas están conformados por códigos Liquid, HTML, CSS y JavaScript. Cuando editas o personalizas temas, los tamaños de archivo pueden aumentar y afectar la velocidad de tu tienda.
Si crees que algo en tu tema está ralentizando tu tienda, sigue los pasos siguientes:
- Desactiva las funciones de tema que no usas. Considera el equilibrio entre las funciones de la tienda online y la velocidad.
- Considera la posibilidad de usar una fuente de sistema.
- Consulta a tu desarrollador de temas. Si usas un tema gratis de Shopify, puedes contactar al equipo de atención al cliente para obtener orientación.
- Si usas un tema externo, puedes contactar a tu desarrollador de tema o contratar un experto de Shopify.
- Considera instalar un tema optimizado para el rendimiento, como Dawn.
- Contrata un experto de Shopify para obtener más ayuda. Más información sobre cómo contratar a expertos de Shopify.
Funciones del tema o de la aplicación
Ciertas funciones, cuando están habilitadas, también pueden afectar la velocidad de tu tienda. Por ejemplo, algunas ventanas emergentes de vista rápida cargan previamente la información de cada página de producto al cargar una página de colección. Cargar datos adicionales que tus clientes no usen puede afectar la velocidad de tu tienda sin agregar valor.
Si crees que una función está ralentizando tu tienda, sigue los siguientes pasos:
- Usa una herramienta de Heatmap para ver si los clientes están utilizando ciertas funciones. Desactiva funciones si no están en uso.
- Desactiva la función si no la necesitas. Considera el equilibrio entre las funciones de la tienda online y la velocidad.
- Consulta a tus desarrolladores de temas y aplicaciones para saber si hay una carga previa de datos.
- Contrata un experto de Shopify para obtener más ayuda. Más información sobre cómo contratar a expertos de Shopify.
Código de Liquid complejo o ineficiente
Puedes editar casi todo el Liquid que se usa para renderizar tu tienda. Existen formas eficaces e ineficaces de escribir un código de Liquid. Repetir operaciones complejas puede aumentar el tiempo de renderización de Liquid, afectando la velocidad total de tu tienda.
Por ejemplo, si deseas ordenar por precio los productos de una colección, debes hacerlo antes de hacer un bucle en 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 experto de Shopify 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 están en la 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.
- Contrata un experto de Shopify para obtener más ayuda. Más información sobre cómo contratar a expertos de Shopify.
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 la velocidad de tu 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.
Lighthouse
El informe de velocidad de tienda online de Shopify usa Lighthouse para medir la velocidad de tu tienda. Puedes obtener tu propio informe de Lighthouse usando Google PageSpeed Insights para ver métricas más detalladas de las páginas de tu tienda. Para entender el significado de estas métricas, consulta la documentación de puntuación de rendimiento de Google Lighthouse. También puedes contratar a un experto de Shopify para que te ayude a entender las métricas y te ofrezca sugerencias para mejorar. Más información sobre cómo contratar a expertos de Shopify.
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 la velocidad de la tienda online
Si usas un tema gratis de Shopify, el equipo de 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 tu desarrollador de tema o contratar un experto de Shopify. Más información sobre cómo contratar a expertos de Shopify.
Si tienes un equipo de desarrollo o un partner de agencia, también puedes contactarlos para obtener más ayuda.