Consejos y herramientas para mejorar la velocidad de tu sitio web (2025)

Los usuarios de Internet son más impacientes que nunca. De hecho, la mayoría de los consumidores suelen estar más predispuestos a comprar en minoristas en línea cuyo sitio web cargue rápido. Estos datos implican que es esencial encontrar un equilibrio entre ofrecer experiencias digitales atractivas y ricas en contenido, y asegurarse de que sigan siendo eficientes.

Además, una mayor velocidad de carga del sitio también se traduce en más ventas. Los datos recopilados por Shopify muestran que mejorar la velocidad de tu sitio en solo medio segundo podría aumentar las conversiones.

A continuación, aprenderás los mejores consejos y herramientas para mejorar la velocidad de tu sitio web y así impulsar las ventas.

¿Qué implica mejorar la velocidad de tu sitio web?

Mejorar la velocidad del sitio web es una estrategia que implica optimizar la velocidad de carga de tus páginas. También conocida como optimización del rendimiento del sitio web, su objetivo es hacer que tu tienda de comercio electrónico cargue lo más rápido posible, antes de que los clientes potenciales se frustren con su experiencia en línea y cierren la pestaña del navegador.

Existen dos métricas fundamentales que se utilizan para medir la velocidad:

1. Primer procesamiento de imagen con contenido, que Google explica mide el tiempo que tarda tu navegador en renderizar el primer contenido del DOM después de que un usuario navegue a tu página.
2. Time to First Byte (tiempo hasta el primer byte), que mide el tiempo que tarda el servidor que aloja un sitio web en responder al navegador de un usuario.

¿Por qué es importante mejorar la velocidad de un sitio web?

Cuanto más rápido sea tu sitio, mejor podrás captar clientes, incluidos aquellos que ya han abandonado el sitio de un competidor más lento.

Google recomienda una velocidad de carga de página de dos segundos para un sitio de comercio electrónico. Pero en general, cuanto más rápido, mejor. Un estudio en inglés de Semrush descubrió que la tasa de abandono casi se triplica si tu página tarda más de tres segundos en cargar.

Por ejemplo, si estás operando una tienda con un valor promedio de pedido de 60 € y 5.000 visitantes diarios, un retraso de un segundo en la velocidad del sitio podría estar costándote 9.000 € al día.

Los sitios que cargan lentamente también afectan negativamente tu capacidad de búsqueda y tu clasificación en SEO. Google prioriza los sitios con buenos indicadores de rendimiento web (es decir, el rendimiento del sitio web) en sus resultados de búsqueda.

Además, si estás invirtiendo en búsquedas de pago como canal de adquisición de clientes, las páginas de destino lentas disminuyen tu Calidad de Anuncio en Google, lo que supone un costo por clic más alto. 

Este es un problema costoso en un momento en que los costos de adquisición de clientes y publicidad están aumentando desproporcionadamente en la mayoría de las industrias.

Factores que afectan la velocidad del sitio web

• La plataforma de comercio electrónico
• El alojamiento
• La arquitectura del sitio
• Demasiadas aplicaciones de terceros

La plataforma de comercio electrónico

Tu negocio necesita una plataforma de comercio electrónico que cuente con la infraestructura necesaria para ayudar con los tiempos de carga. Como usuario de la plataforma, debes hablar con tu proveedor sobre las mejoras en el backend de tu sitio para que tus páginas se carguen rápidamente para los compradores y así poder mejorar la velocidad de tu sitio web.

El renderizado es el proceso de crear la marca HTML cuando un usuario carga la página en su navegador. La infraestructura de tu plataforma de ecommerce dicta el proceso de renderizado.

Nuestro Renderizador de Vitrinas (SFR), por ejemplo, es una aplicación dedicada a atender las solicitudes de la vitrina lo más rápido posible. De hecho, las tiendas de Shopify son las más rápidas del mundo,* ya que cargan 1,8 veces más rápido que las tiendas en otras plataformas.

Si tu plataforma de ecommerce no se compromete a hacer de la velocidad una prioridad, entonces el resto de las sugerencias que siguen no marcarán una gran diferencia. 

Teniendo en cuenta que el 93 % de las marcas en Shopify tienen una tienda rápida, más que cualquier otra plataforma de comercio importante, puedes mejorar la velocidad de tu sitio web de ecommerce trabajando en los siguientes elementos.

El alojamiento

Tu servicio de alojamiento de ecommerce y su infraestructura pueden influir en el rendimiento de tu sitio web de ecommerce, especialmente en los días de mucho tráfico y alta transacción.

Cuando investigues los requisitos de la plataforma de alojamiento, busca:

• Limitaciones de memoria o ancho de banda para escalar durante promociones estacionales.
• Tráfico proyectado y carga máxima de usuarios para evitar caídas por un aumento repentino de visitantes.

Además, opta por una plataforma que te permita evitar gestionar tu propio servidor. Los minoristas DTC suelen tener que gastar mucho en infraestructura de TI, y los costos llevan años aumentando. Shopify aloja todos sus planes en sus servidores, servidores en los que algunos de los minoristas más grandes del mundo confían debido a su velocidad y fiabilidad.

Antes de cualquier evento de ventas importante, pide a tu proveedor de plataforma de comercio que te ayude a prepararte para los picos de tráfico inesperados o un aumento de pedidos.

Las caídas del sitio nunca son fáciles de manejar, pero pueden ser especialmente perjudiciales para una empresa valorada en 5.000 millones de dólares durante su mayor temporada de ventas del año. El sitio web australiano de JB Hi-Fi estuvo inactivo durante dos horas durante el Black Friday y el Cyber Monday debido a problemas en el sitio.

“Hemos presenciado cómo se caen los sitios web de minoristas de alto perfil”, dice Chris Lang, gerente general de ingeniería de JB Hi-Fi. “Todo el país se entera. Es malo para los clientes y malo para la marca. Haríamos cualquier cosa para evitar eso”.

Después de migrar a Shopify, JB Hi-Fi experimentó un récord de ventas, gracias a casi el doble de tráfico en línea durante Black Friday y Cyber Monday, todo sin problemas de rendimiento del sitio web. Con la infraestructura basada en la nube de Shopify, la plataforma tiene un tiempo de actividad general del 99,98%, con una vitrina que carga 2,97 veces más rápido que otras plataformas SaaS.

Lee: Lee más sobre la historia de JB Hi-Fi.

La arquitectura del sitio

Los sitios web de ecommerce utilizan distintas arquitecturas para presentar información tanto a los usuarios como a los navegadores. Esto puede convertirse en algo complejo a medida que escalas, dice Javier Moreno, gerente de ciencia de datos en Shopify: 

“A medida que las marcas crecen y se vuelven más sofisticadas, sus sitios web se vuelven más ricos. Esta riqueza conlleva un coste. A menos que estés prestando atención activa a la velocidad, los cambios ralentizarán tu sitio”.

En un intento por mejorar la velocidad del sitio web, algunas empresas recurren al comercio headless, un concepto que desacopla la interfaz de usuario de tu sitio web de ecommerce de la plataforma de backend que lo impulsa.

Los minoristas que utilizan los componentes de comercio de Shopify llevan esto al siguiente nivel. Tan solo toman las tecnologías de ecommerce que necesitan, cuando las necesitan, en lugar de sobrecargar un navegador con demasiados fragmentos de código que afectan negativamente la velocidad del sitio.

Demasiadas aplicaciones de terceros

Si tienes más de 20 complementos de ecommerce instalados en tu tienda, es probable que no los estés utilizando todos. Quizás instalaste algunos como prueba y luego olvidaste eliminarlos. Pero esas aplicaciones siguen funcionando en segundo plano y pueden estar perjudicando activamente el rendimiento de tu sitio web.

Solicita a un desarrollador que elimine cualquier aplicación innecesaria. Luego, haz pruebas de velocidad de página utilizando herramientas como GTmetrix o PageSpeed Insights, o incluso una prueba manual utilizando las herramientas de desarrollador de Chrome. Haz clic en la pestaña Red y vuelve a cargar la página.

Cuando quieras instalar una nueva aplicación, pregúntate si el valor añadido de esta aplicación superará la posible disminución de la velocidad de carga.

La mayoría de los archivos de script/CSS para aplicaciones descargadas utilizando el Administrador de Shopify se inyectan en el <head> de tu archivo theme.liquid dentro de {{ content_for_header }}.

Una aplicación tiene que ser renderizada antes de que se cargue cualquier otro código.

“Navegar por esta tensión entre una carga más rápida y el valor experiencial y de ventas de las aplicaciones es la razón por la que cargamos los scripts de forma asíncrona con la API de Script Tag, para que la carga de la página no se detenga”, dice Jason Bowman, líder del equipo de ingeniería de soluciones en Shopify. “Sin embargo, los <scripts> añadidos directamente en el <head> suelen impactar de inmediato en el rendimiento”.

Cómo mejorar la velocidad de tu sitio web

1. Usa una red de distribución de contenido
2. No te excedas con los ajustes del tema
3. Habilita la vista previa en las páginas de categoría
4. Elimina las ventanas emergentes innecesarias
5. Reduce el uso de diapositivas en la página de inicio
6. Comprime, redimensiona y reduce las imágenes
7. Usa incrustaciones ligeras para vídeos
8. Reduce las redirecciones y los enlaces rotos
9. Habilita la carga diferida
10. Desbloquea el navegador de scripts que bloquean el análisis
11. Organiza el seguimiento con Google Tag Manager
12. Ten cuidado con los bucles excesivos de Liquid
13. Construye páginas móviles aceleradas
14. Desactiva la reproducción automática de vídeos en móviles
15. Optimiza el proceso de pago en móviles

1. Usa una red de distribución de contenido (CDN)

Una red de distribución de contenido (CDN) es un grupo de servidores dispersos por todo el mundo. Distribuye la carga de entrega de contenido a través del servidor más cercano a la ubicación de tu visitante, haciendo que las experiencias locales sean más rápidas.

Dado que cada vez más sitios de ecommerce se están globalizando, una CDN (o en el caso de Shopify, CDNs duales) es un ingrediente imprescindible para el rendimiento de la plataforma.

Shopify ofrece una CDN de clase mundial impulsada por Cloudflare sin costo adicional. En los últimos años, Shopify ha mejorado significativamente la velocidad de los servidores al utilizar alojamiento de dominio único para contenido estático. Esto mejoró el rendimiento del navegador con prioridades HTTP/3 y empleó técnicas inteligentes de carga diferida para elementos de la página.

Como consolida el alojamiento bajo un solo dominio en lugar de cdn.shopify.com, Shopify asegura tiempos de carga más rápidos y una mejor gestión de recursos. 

Los datos de la Experiencia del Usuario de Chrome (CrUX) durante el último año muestran una mejora del 35% en el Time to First Byte (TTFB) para las vitrinas, mejorando la experiencia del usuario a nivel global. 

Estas optimizaciones llevan a renderizados de página más rápidos y a una experiencia de compra más consistente, independientemente de la ubicación del usuario.

En general, las CDN aumentan la velocidad y reducen costos. “Obtener nuestra licencia, alojamiento y CDN de Shopify nos ahorró unos 100.000 € al año desde el principio”, dice Diana Harbour, propietaria de Red Dress Boutique.

Por ejemplo, considera el contenido visual, que suele ser la causa del lento rendimiento del sitio web. Shopify informa a la CDN cuando tus activos (por ejemplo, las imágenes, el JavaScript y el CSS) han cambiado.

Haz esto con Shopify

Las empresas de Shopify pueden usar el filtro asset_url y añadir automáticamente los números de versión a todas las URL generadas. 

Por ejemplo, un número de versión añadido al final de una URL podría verse así: ?v=1384022871. Este filtro le dice a la CDN que extraiga la versión correcta. Sin él, es posible que no veas el activo que esperas después de haber realizado cambios en tu contenido.

Además, si haces referencia a contenido directamente en tu CSS, la URL será estática. Tampoco llevará la versión del activo actualizada automáticamente por Shopify.

Para asegurar actualizaciones automáticas, cambia tu sintaxis CSS para incluir el filtro asset_url. Para obtener información sobre todos los filtros de URL que ayudan a extraer activos, visita el Centro de Ayuda de Shopify.

2. No te excedas con los ajustes del tema

La apariencia de un sitio web determina la probabilidad de que un cliente interactúe con él. Los estudios muestran que las primeras impresiones positivas están relacionadas en un 94% con el diseño, y estas decisiones suceden a una velocidad récord. 

La primera impresión de un visitante en un sitio web se forma en una décima de segundo.

Dicho esto, hay un intercambio entre la velocidad del sitio y un tema atractivo, que suele venir acompañado de un código desordenado y gráficos excesivos. “No necesitas un tema con todos los adornos”, dice Josh Stutt. “Necesitas uno que sea limpio, rápido y fácil de navegar. He visto una mejora de más del 50% en la tasa de rebote de la página de inicio para nuevos visitantes simplemente cambiando a un tema más simple”.

Nirav Sheth, CEO y fundador de Anatta, dice: “Los trucos rápidos para mejorar la velocidad no construirán la base para un rendimiento a largo plazo; solo las mejoras de velocidad reales lo harán, y eso comienza con la optimización de la arquitectura subyacente del tema que escojas”.

3. Habilita la vista previa en las páginas de categoría

Las ventanas emergentes de vista previa muestran un producto (directamente desde una página de listado de productos) en lugar de hacer que visites una nueva página con los detalles del producto.

En teoría, la vista previa debería ahorrar tiempo a tus clientes, pero en realidad puede obstaculizar la experiencia del cliente en tu sitio de ecommerce por las siguientes razones:

• Añade un paso adicional al recorrido del cliente.
• Se puede hacer clic en ella accidentalmente, lo que puede resultar frustrante para el usuario.
• Puede confundirse con una página de producto.
• Lo más importante, puede ralentizar significativamente el tiempo de carga de tu página.

Implementar las ventanas emergentes de vista previa (ya sea integradas en un tema o desde una aplicación) a veces precargan toda la información de una página de producto en caso de que un visitante seleccione el botón de vista previa.

Por lo tanto, este proceso supone cargar una cantidad enorme de datos, especialmente en una página de colección con 20 o 30 miniaturas de productos. 

El mapeo de clics, una herramienta basada en JavaScript que rastrea por dónde se desplazan o mueven el cursor y hacen clic los usuarios, puede ayudarte a saber si tus clientes utilizan esta opción.

Algunas aplicaciones que pueden ayudar incluyen:

• Hindsight
• Hotjar

Encuentra la vista previa en Shopify

Saber si existe la opción de vista previa en las miniaturas de productos de tu página debería ser fácil. Comprueba el personalizador del tema que has escogido para tu tienda en Shopify para ver si hay una opción para habilitar o deshabilitar esta función. 

Si no ves la opción ahí, comprueba si proviene de una aplicación. Si es así, debería haber una manera simple de eliminarla.

Si los dos primeros pasos no ayudan, es probable que la función esté integrada en el propio tema. En ese caso, necesitarás un desarrollador para identificarlo y eliminarlo. 

Usa AJAX para extraer la información del producto cuando un visitante haga clic en el botón de la ventana emergente de vista previa. 

O, guarda una cantidad limitada de información del producto como atributos de datos en el elemento de la cuadrícula del producto. Luego, construye el HTML y la ventana emergente dinámicamente con JavaScript.

En cualquier caso, eliminar la opción de vista previa de tu sitio web sigue siendo mejor opción que cualquiera de las dos opciones anteriores. 

Es cierto que la información del producto sigue teniéndose que cargar para cada producto, pero es algo mejor que tener que descargar todas las imágenes y los enlaces de productos.

4. Elimina las ventanas emergentes innecesarias

Las ventanas emergentes suelen usarse para mostrar ofertas especiales o hacer que las personas pasen al siguiente paso del recorrido del cliente. Ya sea canjeando un cupón o ingresando su dirección de correo electrónico, las ventanas emergentes ayudan a involucrar a los visitantes por primera vez y abren la puerta a futuras comunicaciones.

Sin embargo, en el comercio electrónico, hay que hilar fino con las ventanas emergentes. Demasiados gráficos parpadeantes pueden ser perjudiciales para la velocidad y el rendimiento del sitio, sin mencionar que distraen a los usuarios de interactuar con el contenido del sitio web que ya has optimizando para conversiones.

Establece parámetros acordes a tu uso de ventanas emergentes para evitar que la velocidad del sitio web empeore. Por ejemplo, podrías crear un “trigger” de ventanas emergentes para que ese código adicional no contribuya a un sitio web que carga lentamente.

Haz que las ventanas emergentes, como las de intención de salida o de retraso de tiempo, se muestren inmediatamente al cargar la página. Ambos triggers dan un respiro entre la carga inicial de la página y la carga de la ventana emergente.

5. Reduce el uso de diapositivas en la página de inicio

Los enormes carruseles con múltiples imágenes de calidad son excelentes para mostrar tus productos. Sin embargo, presentan un inconveniente: el tamaño y la calidad requeridos para que una diapositiva se vea bien pueden aumentar los tiempos de carga, especialmente si el carrusel cuenta con cuatro o cinco diapositivas.

Reduce el número de diapositivas en la página de inicio o elimínalas por completo. Una sola imagen principal de alta calidad, bien pensada (con un claro llamado a la acción) ayuda a atraer rápidamente a tus clientes, ya que el cerebro procesa las imágenes 60.000 veces más rápido que procesa el texto.

Si, aun así, quieres usar una diapositiva, sigue las mejores prácticas de UX, como:

• Limitar el carrusel a dos o tres diapositivas.
• Mostrar las diapositivas como secciones de contenido estático en lugar de carruseles que rotan automáticamente.
• Usar srcset o Lazy Load como una solución general.

Por ejemplo, la marca de pantalones cortos Chubbies, utiliza en su página de inicio imágenes optimizadas en lugar de un carrusel tradicional. 

El cofundador Tom Montgomery afirma: “Hemos confiado en Shopify desde el primer día. Ninguno de nosotros es ingeniero, así que es genial poder contar con los expertos de Shopify para que podamos centrarnos en innovar”.

6. Comprime, redimensiona y reduce las imágenes

Las imágenes suponen entre el 50 y el 75% del peso total de las páginas web, por lo que podría convertirse en un problema a medida que tu sitio web y tu negocio crezcan. Cuantos más productos vendas, más archivos de imágenes tendrás en el servidor y cada imagen que usas en una página crea una nueva solicitud HTTP. 

Para mejorar la velocidad de un sitio web, reducir las imágenes y decir más con menos podría ser de gran ayuda.

Alex Mirzaian, gerente de marketing de Eightvape, dice: “Cuando se crea contenido continuamente a través de publicaciones de blog o poniendo a la venta muchos productos al día, se tiende a añadir al sitio web sin pensar. Comprimir imágenes puede ayudar mucho cuando tu sitio ya cuenta con miles de imágenes”.

Puedes reducir el tamaño de las imágenes sin reducir la calidad mediante una compresión sin pérdida gracias a herramientas como TinyJPG o TinyPNG.

Además, ten cuidado con las fuentes de imágenes vacías (<img src = ’ ’>) en tu código, ya que implican una carga excesiva en el navegador al enviar otra solicitud a tus servidores. 

Una solución simple son los “sprites” CSS, que fijan múltiples imágenes como iconos en una sola, limitando el número de solicitudes de imagen individuales del servidor. Al hacer esto, también se mejora la velocidad de tu sitio web. 

Los parámetros de tamaño de imagen integrados de Shopify te permiten descargar la imagen más pequeña posible sin perder calidad. 

Su funcionamiento es simple: estos ajustes piden a Shopify el tamaño exacto de la imagen que va a mostrar, y luego reducen el tamaño del archivo descargado desde la red de distribución de contenidos y disminuyen la escala requerida del lado del navegador.

“Uno de nuestros clientes tenía un sitio que cargaba muy despacio, así que lo primero que hicimos fue optimizar las imágenes”, dice Maria Harutyunyan, cofundadora de Loopex Digital. “Las hicimos más pequeñas y las comprimimos, lo que supuso una gran diferencia en la velocidad de carga de las páginas. De hecho, las imágenes ahora ocupan un 60% menos de espacio y cargan mucho más rápido”.

7. Usa incrustaciones ligeras para vídeos

El vídeo se está convirtiendo rápidamente en el lenguaje de Internet; de hecho, aproximadamente el 91% de las empresas ya utiliza el vídeo como herramienta de marketing. Sin embargo, en función de cómo estén incrustados en tu sitio, pueden afectar mucho los tiempos de carga.

De hecho, no solo el código de incrustación estándar de YouTube hace que tu sitio se vuelva pesado (algunos archivos se descargan incluso antes de que el visitante haga clic en el botón de Reproducir) sino que utiliza la etiqueta <iframe>, en la que el ancho y la altura del reproductor de vídeo están fijos. Es decir, que el vídeo no se ajusta al tamaño de pantalla de diferentes dispositivos.

La solución son las incrustaciones ligeras, que cargan los vídeos directamente en tu página web. Cuando la página se carga, el sitio solo incrusta la miniatura del vídeo de YouTube. El reproductor de vídeo en sí (y todo su JavaScript adicional) solo se carga cuando el usuario hace clic en la miniatura.

Las miniaturas de YouTube pesan aproximadamente 15 kilobytes, por lo que las incrustaciones ligeras pueden reducir el tamaño de las páginas web en casi un megabyte, y por lo tanto, mejorar la velocidad de tu sitio web.

8. Reduce las redirecciones y los enlaces rotos

Demasiadas redirecciones y enlaces rotos pueden afectar negativamente el rendimiento y dañar la clasificación SEO de tu sitio web.

Empieza por hacer una limpieza de tus redirecciones. Por ejemplo, las redirecciones 302, que indican que una página se ha movido temporalmente, pueden perjudicar el SEO, y además desencadenan solicitudes HTTP adicionales que retrasan las transferencias de datos.

En su lugar, utiliza una “redirección de caché” o la función de redirecciones integrada de Shopify —que utiliza las redirecciones 301 por defecto— desde tu panel de administración. Y recuerda: nunca redirijas una URL a una página que ya es una redirección.

Los enlaces rotos para elementos de página como imágenes, CSS y archivos JS aumentan las solicitudes HTTP e impiden mejorar la velocidad de tu sitio web. Usa una herramienta como Broken Link Checker para eliminarlos. Además, crear páginas de error 404 personalizadas ayudará a los visitantes que ingresen una URL incorrecta de tu sitio por error.

9. Habilita la carga diferida

La carga diferida es una técnica que evita que todo el contenido de una página web se cargue inmediatamente. Los sitios de ecommerce que utilizan carga diferida solo muestran contenido cuando los usuarios activan ciertos “triggers”.

Se puede ver claramente cómo funciona la carga diferida cuando un usuario visita la página de producto de tu comercio electrónico. Solo el contenido visible en la parte superior se carga inmediatamente, como el título del artículo, las imágenes y la descripción del producto.

El contenido suplementario aparece cuando los usuarios se desplazan por debajo de esta sección. El contenido generado por el usuario, los carruseles de redes sociales y las reseñas de clientes se cargan en diferido para evitar que el código abrume al servidor con demasiada información.

Chris McCarron de GoGoChimp utilizó esta estrategia para mejorar la velocidad de un sitio web de un cliente de ecommerce: “Cada página tenía muchísimas imágenes bajo la parte visible. El problema era que los navegadores descargaban inmediatamente cada imagen de la página, independientemente de cuáles se veían nada más entrar. Sin embargo, la carga diferida solo descarga una imagen cuando puede verse dentro del navegador”.

10. Desbloquea el navegador de scripts que bloquean el análisis

Antes de que un navegador pueda mostrar una página a tu cliente, debe pasar por un proceso llamado “análisis del HTML”. 

Pero los scripts que bloquean el análisis interrumpen este proceso: cuando un navegador encuentra un script que bloquea el análisis, tiene que detener todo y centrarse solo en ejecutar ese script antes de poder seguir trabajando.

Por suerte, hay una solución fácil y todo lo que se necesita es el atributo “async” o “defer”:

• Bloquear el análisis: <script src="jquery.js"></script>
• No bloquear el análisis: <script src="jquery.js" defer></script>

Cabe destacar que el JavaScript en sí no bloquea los navegadores, sino que la manera en que se carga el JavaScript determina si bloquea o no el navegador. Después de hacer estos cambios en el código, comprueba que tu sitio web siga ofreciendo la misma experiencia que antes.

11. Organiza el seguimiento con Google Tag Manager

Los datos de los clientes alimentan tus estrategias de ecommerce y marketing digital. Pero recopilar todos esos datos también puede ralentizar el rendimiento de tu sitio web. 

De hecho, las etiquetas de seguimiento de JavaScript (por ejemplo, para elaborar análisis generales, analizar las conversiones, los objetivos y el retargeting de comportamiento) suelen ser las culpables.

La recopilación de datos de clientes también puede ser una carga de tiempo y recursos para tu desarrollador, equipo informático o de marketing. Un sistema de gestión de etiquetas (TMS, por sus siglas en inglés) como Google Tag Manager condensa todas tus etiquetas en una sola solicitud de JavaScript. Si un fallo relacionado con una etiqueta es el causante de una caída en tu sitio web, un TMS también te ayuda a eliminar la etiqueta rápidamente.

Nirav Sheth añade que cuando Anatta pretendía mejorar la velocidad del sitio web de un comercio electrónico en el sector de la belleza, “lo que más incidió en la velocidad del sitio fue, por un lado, aprovechar las API de Shopify y por otro, limpiar Google Tag Manager”.

Tan solo necesitas un fragmento de código para gestionar las etiquetas de tu tienda Shopify en un solo lugar con Google Tag Manager. Para aprender más, consulta las pautas en el Centro de Ayuda de Shopify.

12. Ten cuidado con los bucles excesivos de Liquid 

Liquid es un poderoso lenguaje de codificación de Shopify. Pero hay ciertos casos en los que necesitas sopesar los beneficios añadidos frente a los inconvenientes.

La iteración de forloop es uno de esos casos. Forloop significa que el sistema tiene que recorrer (es decir, rastrear o buscar) todos los productos en una colección en los casos en los que está buscando una condición específica, como por ejemplo, un precio o una etiqueta.

Estas funcionalidades pueden ser beneficiosas en ciertos casos, como en la generación de imágenes o variantes de productos. También son útiles cuando no tienes muchos productos en una página de colección, aunque es posible que los tiempos de carga se vean afectados.

Revisa el código de tu tema para asegurarte de que no estés ejecutando bucles Liquid que buscan la misma información muchas veces. 

Esto puede suceder cuando varios desarrolladores trabajan en un tema y duplican tareas o introducen código que entra en conflicto con el existente. Eliminar estas duplicaciones hará que tu página cargue más rápido.

A menudo es más fácil usar un simple bucle product.options_with_values. Echa un vistazo a la documentación para entender cómo funciona el lenguaje de plantillas y los bucles Liquid de Shopify.

13. Construye páginas móviles aceleradas

Las páginas móviles aceleradas o AMP, por sus siglas en inglés son un proyecto patrocinado por Google que reformatea el contenido del sitio web para dispositivos móviles. 

En los sitios con AMP habilitado, Google almacena cada página en el caché y la recarga cada vez que un usuario visita desde el buscador. Esto reduce los tiempos de carga de las páginas, que podría resultar en un aumento del tiempo que los usuarios pasan en la página y en las conversiones.

Implementa el AMP en tu tienda de ecommerce con aplicaciones de Shopify como AMP, Fire AMP o The AMP App. Estas aplicaciones eliminan el código complejo que entorpece tu sitio web móvil para mejorar la velocidad de tu sitio web también en móviles.

14. Desactiva la reproducción automática de vídeos en móviles

No todos los usuarios que acceden a tu sitio web desde el móvil cuentan con una conexión de red fuerte. Podría darse el caso que un cliente entre al sitio web de la tienda de Noir foncé desde un sitio sin mucha cobertura porque sus zapatillas se rompieron a mitad de ruta. O son un cliente de Matcha and Co que pide un lote de té matcha mientras espera a que sus hijos salgan del colegio.

En cualquier caso, estas personas podrían interactuar con los vídeos que los minoristas utilizan para comunicarse con clientes potenciales en su sitio móvil. Pero reproducir automáticamente estos vídeos puede afectar gravemente la velocidad del sitio.

Cuando un vídeo está configurado para que se reproduzca automáticamente, la conexión de red móvil tiene que descargar un archivo muy pesado. 

Si en lugar de la reproducción automática se usa una miniatura estática y un botón opcional para activar el vídeo, no es necesario descargar todo el archivo a través de una conexión a Internet débil solo para cargar la página. Así, cualquier visitante puede acceder a tu sitio rápidamente.

15. Optimiza el proceso de pago en móviles

Cuando se mejora la velocidad del sitio web para móviles, el proceso de pago suele quedarse en el olvido. Las páginas de inicio, de producto y de categoría reciben toda la atención, en gran parte porque no quieres que los clientes potenciales se caigan en el primer obstáculo: su primera interacción con tu tienda desde el móvil.

Es posible que no incluir el proceso de pago en tu estrategia para mejorar la velocidad de tu sitio web resulte en una tasa de abandono del carrito más alta. 

La gente confía en tu sitio lo suficiente como para seleccionar los artículos que quiere comprar, pero si se encuentran con retrasos en el proceso de pago, tienen que querer muchísimo ese artículo para no irse a otro sitio. O en otras palabras, corres el riesgo de perder a los compradores impulsivos.

Shop Pay permite a los compradores móviles pasar por el proceso de pago a una velocidad récord. Según un estudio externo, los minoristas que utilizan los pagos de Shop Pay tienen una tasa de conversión de pago móvil a pedido 1,91 veces más alta que aquellos que pasan por un proceso de pago normal.

“La mayoría de nuestros clientes actuales descubren nuestros productos desde sus dispositivos móviles, así que si tienen que llenar un formulario, los perdemos", dice Benjamin Sehl, cofundador de Kotn. “Habilitar Shop Pay en nuestro proceso de pago hizo que el punto más doloroso de la experiencia del cliente sea agradable, y dado que está vinculado al ecosistema de un millón de comerciantes, incluso los nuevos clientes pueden hacer el pago con un solo clic”.

Herramientas para comprobar la velocidad del sitio web

Cada herramienta para comprobar la velocidad utiliza un método de puntuación diferente, al igual que cada equipo tendrá una definición diferente para una velocidad adecuada. Las herramientas que proporcionan el tiempo de “carga de página” deben seleccionar un marcador de tiempo específico (como TTFB) en sus resultados.

Utiliza estas herramientas para comprobar si debes mejorar la velocidad de tu sitio web, pero mantén una mente abierta. Debes equilibrar la velocidad de tu sitio con la construcción de una interfaz de usuario que optimice el recorrido de tu cliente.

Informes de rendimiento de la web de Shopify

El panel de informes de rendimiento de la web es una herramienta poderosa diseñada para ayudar a las marcas de ecommerce a optimizar sus tiendas digitales.

Como los tiempos de carga de página y la experiencia del usuario son cruciales para conseguir ventas, este panel proporciona información valiosa sobre el rendimiento de una tienda en función de tres indicadores clave:

• Velocidad de carga.
• Interactividad.
• Estabilidad visual.

El panel te muestra cómo los clientes reales experimentan la tienda tanto en ordenador como en dispositivos móviles, basado en datos recopilados durante 28 días. 

Puedes observar cómo los diferentes cambios (por ejemplo, la instalación de aplicaciones o actualizaciones de temas) afectan a tus métricas a lo largo del tiempo y te permite rastrear tus clasificaciones de rendimiento, con una escala que va desde "buena" hasta "pobre".

Con filtros personalizables y visualizaciones claras, los comerciantes pueden identificar las áreas de mejora y tomar decisiones basadas en datos para mejorar el rendimiento de su tienda. 

Optimizar tus indicadores clave de rendimiento web es una forma efectiva de aumentar las tasas de conversión y la visibilidad de tu tienda en los resultados de búsqueda también.

A medida que Shopify sigue mejorando su infraestructura, este panel es una herramienta fundamental para los comerciantes que se esfuerzan por ofrecer experiencias rápidas y fluidas a los compradores en línea modernos.

Auditoría de velocidad del sitio de Shopify

La auditoría de velocidad del sitio de Shopify te permite realizar un análisis competitivo de la velocidad de tu sitio. Ingresa los detalles de tu sitio y la plataforma en la que está alojado actualmente (por ejemplo, Adobe Commerce o WooCommerce). La herramienta analizará varias métricas de rendimiento, como el tiempo de carga, el TTFB y otros factores de velocidad relevantes.

Utilizando datos recopilados de millones de transacciones globales, la herramienta compara las métricas de velocidad de tu sitio actual con el rendimiento promedio o esperado en Shopify. 

Luego, la herramienta muestra los resultados de la comparación. Por ejemplo, podría mostrar que el sitio WooCommerce sería un tanto por ciento más rápido si estuviera alojado en Shopify.

Google PageSpeed Insights

PageSpeed Insights es una herramienta de Google Labs que te ofrece sugerencias personalizadas para mejorar el rendimiento de tu sitio web. También señala los elementos de tu sitio que ralentizan la página, como CSS y JavaScript.

También puedes ver el rendimiento del sitio web móvil de tus competidores. Aprender lo que no funciona puede ayudarte a evitar los mismos errores.

GTMetrix

GTMetrix otorga a tu sitio web una calificación de velocidad de A a F. Combina los datos de Yslow y de PageSpeed Insights para proporcionar un informe de rendimiento del sitio web que incluye:

• La velocidad de carga de tu página.
• El análisis de Web Vitals y Lighthouse.
• Las oportunidades de optimización de velocidad del sitio web.
• El desglose de la composición de la página por solicitudes y tamaño total en bytes.

Pingdom

Pingdom.com puntúa el rendimiento de tu sitio web otorgando un porcentaje del 0 al 100. Además, cuenta con una función muy útil de “análisis de cascada” que te ayuda a identificar otras áreas problemáticas importantes. Su puntuación desglosada línea por línea puede resultar muy útil. 

Mejora la velocidad de tu sitio web y observa cómo tus conversiones se disparan

Es importante conseguir el apoyo de tu equipo para invertir tiempo y recursos en mejorar la velocidad de tu sitio web y su rendimiento. Los datos y las herramientas que has descubierto en este artículo pueden ayudarte a conseguir su apoyo.

Sin embargo, muchas de estas mejoras puedes llevarlas a cabo tú o tu equipo. Cuando no sea posible, puedes solicitar la ayuda de un partner de Shopify. Ellos pueden guiarte sobre cómo mejorar la velocidad de tu sitio web de Shopify.

Encuentra un partner de Shopify hoy.