Una guía para la optimización de velocidad de Shopify

Una de las consideraciones clave para los propietarios de tiendas Shopify es el rendimiento del sitio. El rendimiento de su sitio web afecta directamente la capacidad de su sitio web para convertir usuarios. Cuanto más rápido sea su sitio, es probable que convierta a más usuarios. Además, si está buscando mejorar el SEO de su tienda Shopify, el rendimiento es un pequeño factor de clasificación en el algoritmo de Google.

Además, el rendimiento del sitio afecta todas sus otras iniciativas de marketing digital. Ya sea de pago, por correo electrónico o marketing social, la velocidad de su sitio web afectará a los usuarios de todos estos canales diferentes. Si su sitio está recibiendo una buena cantidad de tráfico de estos canales, incluso una pequeña mejora en el rendimiento puede resultar en mejoras notables en los ingresos.

Una mejora de un segundo en la velocidad del sitio puede resultar en + $ 8,000 en ingresos para este sitio.

Es por eso que asegurarse de que su sitio Shopify funcione bien es crucial para el éxito de su tienda. Acelerar su sitio Shopify no solo puede mejorar la experiencia de su usuario, sino que también puede tener un impacto directo en sus resultados.

¿Qué optimizaciones de velocidad del sitio ya tiene Shopify?

Una de las partes agradables de Shopify es que su tienda viene con algunas optimizaciones de velocidad listas para usar. En general, los sitios de Shopify son bastante rápidos en comparación con otras soluciones. Esta es una gran noticia para los propietarios de tiendas Shopify, ya que la plataforma es generalmente más rápida que plataformas como Magento.

Después de crear un nuevo sitio de Shopify, encontrará que las siguientes funciones de rendimiento ya deberían estar implementadas:

• Aproveche el almacenamiento en caché del navegador : Shopify ya debería almacenar en caché los recursos internos de su sitio de forma predeterminada. El almacenamiento en caché permite que parte de su contenido, como imágenes, JavaScript y CSS, se almacenen localmente en los navegadores de los usuarios. Esto significa que no tendrán que volver a descargar el contenido cuando vean el mismo recurso dos veces. Esto puede acelerar su tienda, ya que los usuarios podrán ver parte del contenido de su sitio mucho más rápido que antes. Tenga en cuenta que si ve que los recursos de terceros se marcan por problemas de almacenamiento en caché, no hay nada que pueda hacer para ajustar directamente el almacenamiento en caché.
• Utilice un CDN : Shopify utiliza Fastly CDN. Una CDN (Content Delivery Network) permite que parte del contenido de su sitio se almacene en servidores de todo el mundo. Esto reduce la distancia física entre sus usuarios y el contenido de su sitio. Reducir la distancia física ayuda a mejorar el rendimiento de su sitio.

Cómo optimizar la velocidad del sitio de Shopify:

Si sigue estos pasos, puede acelerar significativamente un sitio de Shopify:

• Elija un tema ligero de Shopify
• Reducir tamaños de imagen grandes
• Comprimir imágenes
• Reemplazar GIF con imágenes estáticas
• Imágenes de carga diferida
• Limitar las aplicaciones de JavaScript y Shopify de terceros
• Migrar códigos de seguimiento a Google Tag Manager
• Ejecute su tienda a través de Google PageSpeed ​​Insights

1. Elija un tema ligero de Shopify (datos originales)

La elección de un tema de Shopify rápido puede colocar inmediatamente a su sitio web en una excelente posición desde el punto de vista del rendimiento. Algunos temas pueden venir con una hinchazón innecesaria de fábrica, lo que pone a su sitio en una desventaja de rendimiento. Por el contrario, un tema más ligero configurará su sitio para un rendimiento sólido en el futuro.

Para darte una idea de algunos de los temas de mejor rendimiento, probamos más de 200 plantillas que están disponibles en la tienda de temas de Shopify y registramos su punto de referencia First Contentful Paint (FCP) y Time To Interactive (TTI) de Google PageSpeed ​​Insights. A continuación, puede encontrar los temas de mejor rendimiento que identificaron nuestras pruebas:

1. Crear tema (1.1 FCP, 7.8 TTI)
2. Tema de juguete (1.1 FCP, 7.7 TTI)
3. Tema cálido (1.9 FCP, 7.8 TTI)
4. Tema de luz (1.1 FCP, 7.8 TTI)
5. Tema al aire libre (1.1 FCP, 8.1 TTI)

Por supuesto, esto no quiere decir que los temas de alto rendimiento no puedan ralentizarse o que estas sean las mejores opciones para su sitio. Sin embargo, si la optimización de la velocidad es lo más importante para usted, estos podrían ser los que debe considerar elegir.

2. Reducir tamaños de imagen grandes

Cambiar el tamaño de los activos de imagen grandes puede ser una de las mejores formas de acelerar un sitio de Shopify. Al evaluar muchos sitios de Shopify, hemos notado que muchas empresas tienden a utilizar una gran cantidad de imágenes. Esto tiene sentido ya que las imágenes son un elemento básico de las tiendas de comercio electrónico. Esto es aún más cierto en verticales como el comercio minorista, donde las imágenes son una necesidad para resaltar los productos.

Si bien las imágenes son una forma fantástica de mejorar la UX y la marca de su tienda, a menudo vienen con una compensación de rendimiento. Los archivos de imagen suelen tener un tamaño mucho mayor que el HTML o CSS estándar. El resultado de usar una gran cantidad de imágenes en la página puede ser un peso de página muy pesado que a los usuarios les lleva más tiempo descargar que una página con menos imágenes:

Esta página utiliza 173 solicitudes de imágenes con un tamaño total de 14 MB en recursos de imagen

Además, las imágenes no optimizadas pueden hacer que la página de su sitio sea aún más pesada. Las imágenes a menudo se cargarán en tamaños mucho mayores que su "tamaño de procesamiento". Este es el tamaño que los usuarios ven realmente en el navegador:

Esta página contiene un tamaño real de casi el doble del tamaño de renderizado

Cuando las imágenes se cargan en tamaños mucho más grandes que el tamaño de procesamiento, esto causa problemas de rendimiento innecesarios. Esto significa que los usuarios deben descargar una imagen más grande de lo que realmente se requiere para que se procese. El resultado es que los usuarios deben desperdiciar recursos y datos adicionales del navegador para poder ver realmente el contenido.

Puede encontrar imágenes más grandes en una página determinada utilizando Chrome DevTools. Simplemente haga clic derecho y seleccione "Inspeccionar". Vaya a la pestaña "Red" y actualice la página. Esto le mostrará todos los recursos utilizados para cargar su página. A continuación, puede ordenar por "Tamaño" para encontrar los activos más grandes.

Si ve imágenes grandes (más de 100 KB), busque esa imagen en su página y, una vez más, haga clic derecho y elija "Inspeccionar". Al pasar el cursor sobre el enlace de la imagen, verá el tamaño de renderizado en comparación con el tamaño real (intrínseco).

3. Comprimir imágenes

Las imágenes también pueden no optimizarse cuando no están comprimidas. Es muy común ver tiendas de Shopify donde no se ha aplicado compresión a las imágenes cargadas, lo que conduce a tamaños de imagen más grandes de lo necesario.

Al usar la compresión, puede asegurarse de que sus activos de imagen tengan tamaños de archivo mucho más pequeños que la imagen original. El tamaño de archivo más pequeño permitirá a los navegadores cargar el contenido de su sitio web más rápido.

Cuando se trata de compresión de imágenes, preferimos usar una combinación de estos dos métodos:

• Aplicaciones de Shopify: algunas aplicaciones comprimirán automáticamente las imágenes al cargarlas. Hemos tenido buenas experiencias con Crush.pics.
• Optimizilla: esto le permite comprimir manualmente activos de imagen grandes antes de subirlos a su sitio.

4. Reemplazar GIF con imágenes estáticas

Una tendencia innegable que hemos visto con las tiendas Shopify más lentas es la utilización de GIF. Los GIF pueden ser extremadamente valiosos ya que brindan una experiencia más interactiva para los usuarios. Una vez más, esto puede ayudar a mejorar su sitio desde una perspectiva de UX y de marca.

Sin embargo, los recursos GIF son extremadamente grandes. Usar incluso un solo GIF en una página puede aumentar drásticamente su tamaño:

Este único elemento GIF tiene un tamaño de 2,8 MB

Hemos visto casos en los que el solo uso de dos o tres GIF ha representado más de 10 MB de una sola página. Estos archivos aumentan significativamente el peso de la página, por lo que recomendamos intentar reemplazarlos con imágenes estáticas siempre que sea posible. Esto puede resultar en un ahorro significativo de recursos y una optimización de la velocidad de Shopify mejorada.

5. Imágenes de carga diferida

Al ejecutar nuestra lista de sitios de Shopify a través de PageSpeed ​​Insights, una de las recomendaciones más comunes que encontramos fue "Aplazar las imágenes fuera de la pantalla". Esta es una indicación de que todos los activos de imagen del sitio se están cargando a la vez:

Dado que muchos sitios de Shopify usan muchas imágenes, buscar la carga diferida tiene sentido en una gran cantidad de casos. Esto puede acelerar su sitio web de Shopify ya que todas las imágenes de su sitio no se cargarán a la vez, solo cuando un usuario se desplaza hacia abajo en la página.

Si está interesado en implementar la carga diferida, Shopify tiene bastante buena documentación de ayuda al respecto. Hemos tenido el mayor éxito para nuestros clientes al trabajar con nuestros desarrolladores para implementar la biblioteca lazysizes.

6. Limite las aplicaciones de JavaScript y Shopify de terceros

Una tienda Shopify utiliza una gran cantidad de aplicaciones y recursos de terceros. Esto da como resultado una gran cantidad de solicitudes que el navegador debe realizar.

Similar a los complementos de WordPress, Shopify tiene "Aplicaciones" que permiten fácilmente a los propietarios de sitios agregar funcionalidad a sus sitios web sin la necesidad de tener experiencia como desarrollador. Las aplicaciones son una forma fantástica de aumentar las capacidades de su sitio. Lo mismo ocurre con cualquier script adicional de terceros.

Sin embargo, recuerde que estas adiciones tienen un costo de rendimiento.

Cada vez que agrega aplicaciones o scripts a su sitio web, esto se suma al número total de solicitudes que realiza su sitio. Además, se debe tener en cuenta el tamaño de estos scripts. Demasiadas aplicaciones o códigos de terceros pueden disminuir el rendimiento de tu tienda Shopify.

Un ejemplo de una tienda Shopify que utiliza una gran cantidad de códigos de seguimiento de terceros

Debido a que estos recursos pueden afectar el rendimiento del sitio, es importante revisar periódicamente todo el código de seguimiento, las aplicaciones de Shopify y cualquier otro recurso de terceros que esté utilizando. Creemos que es útil tener una conversación honesta con su equipo de marketing y desarrollo. Hacer estas cinco preguntas sobre cada recurso puede ser útil para tomar una decisión al respecto:

1. ¿Con qué frecuencia usamos realmente esta función?
2. ¿Es esto "imprescindible" o "bueno tener"?
3. ¿Existe una opción más liviana que podamos usar?
4. ¿Vale la pena el beneficio que obtenemos de esto como una compensación de desempeño?
5. ¿Hay alguna métrica a la que podamos hacer referencia para ver con qué frecuencia nuestros usuarios utilizan esta función?

Por supuesto, las respuestas a estas preguntas ciertamente variarán según su tienda y modelo comercial. Por ejemplo, una función de chat puede ser crucial para algunas tiendas pero no esencial para otras. Después de responder estas preguntas, le recomendamos que trabaje con su equipo de desarrollo para averiguar qué elementos se pueden eliminar de forma segura.

¿No estás seguro por dónde empezar? Aquí hay algunos códigos de terceros que hemos encontrado que utilizan las tiendas Shopify y que tienden a tener un mayor impacto en el rendimiento:

• Naranja de la suerte
• Sumo
• Centinela
• ZenDesk
• Deriva
• PayPal
• Klaviyo
• Privado
• Yotpo

Por supuesto, no estamos abogando contra ninguna de estas tecnologías. Sin embargo, si sabe que está utilizando uno de ellos, es bueno saber que podría tener un impacto en el rendimiento de su tienda Shopify. Si sus pruebas revelan que estos podrían estar causando problemas, considere eliminarlos o reemplazarlos para acelerar su sitio Shopify.

7. Migre los códigos de seguimiento al Administrador de etiquetas de Google

Google Tag Manager es una solución que le permite agregar y eliminar etiquetas fácilmente de su sitio web sin tener que tocar el código. Es una forma fantástica de administrar todo el código de seguimiento de su sitio web en un solo lugar. Además, una de las mejores cosas de Google Tag Manager es que todo el código se carga de forma asincrónica. Esto significa que el código cargado a través de Google Tag Manager no bloqueará la representación del contenido de su sitio. Esto significa que podría considerar pasar por una "migración de etiquetas" para mover parte de su código de seguimiento a Google Tag Manager. Puede hacer esto realizando los siguientes pasos:

1. Agrega Google Tag Manager a tu tienda Shopify
2. Navega a Etiquetas> Nuevo y busca las etiquetas integradas en "Tipos de etiquetas" que estás usando en Shopify.
3. Implementar estas etiquetas en Google Tag Manager
4. Si no encontró ninguna etiqueta incorporada, puede elegir "HTML personalizado" y agregar su etiqueta
5. Configure su activación correctamente. A menudo, esto se establece en "Todas las páginas".
6. Publique sus cambios en el Administrador de etiquetas de Google
7. Vuelve a Shopify y elimina las aplicaciones que agregaste a través del Administrador de etiquetas de Google.
8. Navegue a su tienda y pruebe que sus nuevas etiquetas funcionen correctamente. Puede hacer esto usando el modo "Vista previa" del Administrador de etiquetas de Google.

Considere mover píxeles de seguimiento como Google Analytics, Hotjar, Facebook y otros códigos de terceros a Google Tag Manager.

8. Ejecute su tienda a través de Google PageSpeed ​​Insights

Google PageSpeed ​​Insights es la herramienta de prueba de velocidad del sitio de Google. Analiza su sitio y proporciona tanto métricas sobre el rendimiento de su sitio como recomendaciones sobre cómo puede mejorar la velocidad de su sitio. Para ejecutar una prueba, simplemente navegue hasta la herramienta e ingrese a la página para la que le gustaría ver los datos de rendimiento. Debería ver algo como la siguiente captura de pantalla:

Puede recuperar una buena cantidad de datos y puede ser bastante abrumador. Analicemos los puntos de datos clave que buscamos:

• First Contentful Paint: cuánto tiempo se tarda en renderizar el primer fragmento de contenido. Esto es importante para mostrarle al usuario que el contenido está comenzando a cargarse.
• Time To Interactive: cuánto tiempo tarda la página en volverse interactiva para el usuario.

Por lo general, primero veremos esas dos métricas para tener una idea de cómo se carga una página en particular. Esto puede proporcionar excelentes datos de referencia que luego puede volver atrás y volver a medir para ver si las mejoras en la velocidad de su sitio están teniendo un impacto.

Pruebas de rendimiento de la tienda Shopify (datos originales)

Una cosa que quizás desee saber es cómo se compara su tienda con otros sitios de Shopify. Para darle un punto de referencia, realizamos un análisis en algunas de las tiendas Shopify más destacadas para comparar su desempeño.

Metodología:

Para recopilar estos datos, medimos el rendimiento de la página de inicio de más de 400 sitios de Shopify. Recopilamos puntos de datos como First Contentful Paint, Time to Interactive, Page Size, Image Size y Total Requests. Todos los datos de rendimiento son para la versión móvil del sitio. Luego comparamos el 20% superior e inferior de las páginas según la puntuación de PageSpeed ​​de Google.

20% superior:

• Primera pintura con contenido: 2,78 segundos
• Tiempo para interactuar: 8,98 segundos
• Tamaño total de la página: 2,01 MB
• Activos de imagen totales: 1,11 MB
• Consultas: 72

Promedio:

• Primera pintura con contenido: 3,8 segundos
• Tiempo para interactuar: 22,1 segundos
• Tamaño total de la página: 4,41 MB
• Activos de imagen totales: 2,1 MB
• Consultas: 171

20% inferior:

• Primera pintura con contenido: 5,89 segundos
• Tiempo para interactuar: 30,37 segundos
• Tamaño total de la página: 5,54 MB
• Activos de imagen totales: 2,59 MB
• Consultas: 235

Recursos adicionales

Además, si está buscando formas adicionales de mejorar el rendimiento de su sitio de Shopify, los recursos a continuación deberían ayudarlo. Hemos agregado nuestras herramientas y recursos de velocidad de sitios favoritos que se pueden usar para mejorar el rendimiento en los sitios de Shopify y los sitios con otros sistemas de administración de contenido.

Herramientas de prueba de velocidad de página:

1. Pingdom
2. Estadísticas de Google Pagespeed
3. WebPageTest.org
4. DevTools de Chrome
5. Faro de Google
6. Piense con Google

Optimización de imagen:

• Optimizilla
• Crush.pics

Lee mas:

• Optimización de la velocidad del sitio con las herramientas para desarrolladores de Chrome
• La guía definitiva para la velocidad del sitio

Si está buscando optimizar la velocidad de su tienda Shopify, estos pueden ser excelentes ajustes para realizar. Mejorar la optimización de la imagen, reducir las solicitudes e implementar la carga diferida pueden ser excelentes formas de garantizar que su sitio se cargue más rápido. Con suerte, el resultado es un mayor rendimiento que mejora la experiencia del usuario para todos sus canales digitales. Si está buscando mejorar el rendimiento del sitio o el SEO de su tienda Shopify, puede obtener más información sobre nuestros servicios de SEO de Shopify.