Con sus excelentes herramientas, Shopify ofrece una excelente plataforma todo en uno para que cualquiera pueda crear una tienda en línea impresionante. Su negocio tiene un tema brillante, productos asombrosos, aplicaciones personalizables para administrar todo. Pero, sorprendentemente, el sitio de la tienda se vuelve cada vez más lento después de cada función nueva; esto puede hacer que los visitantes abandonen la tienda antes de comprar nada.
Aquí es cuando la optimización de la velocidad de Shopify se vuelve vital. Puede realizar toda la optimización de conversión y obtener todo el tráfico que desee, pero un sitio lento siempre perderá visitantes. La velocidad es dinero . Pero espere, no tiene que desinstalar ninguna de las increíbles funciones anteriores para aumentar la velocidad, puedo mostrarle una mejor manera.
En esta publicación del blog de AVADA, le mostraremos 14 factores que son esenciales para la optimización de la velocidad de Shopify y lo que puede hacer con ellos. De esta manera, puede obtener velocidad y funciones mientras su tienda Shopify mantiene un excelente sitio para que las personas hagan algunas compras. ¡Empecemos!
¿Por qué necesitas Optimización Shopify Velocidad?
Un estudio reciente realizado por Pingdom o el documento de velocidad de la página móvil de Google muestran que por cada segundo que tarda su página en cargar su contenido, mayor es la probabilidad de que un visitante abandone su sitio sin visitar otra página. La acción se llama rebote, y es una de las estadísticas más aterradoras de ver. ¿Cómo puedes vender algo si la gente ni siquiera ve lo que tienes que ofrecer en primer lugar?
Está claro como la luz del día que necesita la optimización de la velocidad de Shopify para obtener un tiempo de carga rápido y evitar la tasa de rebote. Por lo tanto, puede tener tasas de participación de visitantes más altas y no perder oportunidades de venta.
El impacto financiero es muy real; La investigación realizada por KISSmetrics mostró que una tienda promedio que genera $50k por mes podría perder casi $42k en ingresos por año por el retraso de un segundo en la velocidad de carga de la página.
En cuanto a los aspectos técnicos, la velocidad de la página afecta el rendimiento de su sitio, lo que hace que el sitio tenga una puntuación más baja en los servicios de motores de búsqueda como Google, tanto en canales pagos como orgánicos. Con la búsqueda paga, si su sitio tiene una velocidad lenta, el costo de los anuncios puede ser mayor.
Mientras tanto, su clasificación orgánica también se vería afectada, ya que la velocidad de la página ahora es oficialmente un factor de clasificación para las búsquedas móviles (según la última actualización de velocidad de Google ).
Esas razones son suficientes para asustar a cualquier propietario de una tienda Shopify como un niño que pierde dulces el día de Halloween. Si no desea que eso suceda, siga los siguientes pasos y vea qué puede hacer para optimizar la velocidad de Shopify.
¿Cómo saber si tu tienda Shopify necesita mejor velocidad?
En esta sección, le mostraré algunas formas de analizar la velocidad del sitio de su tienda usando herramientas. No solo te dicen qué tan rápida es la velocidad de carga, sino que también tienen sugerencias para mejorar el sitio.
Información sobre la velocidad de la página
Proporcionada por Google, la herramienta Pagespeed Insights puede generar puntajes de velocidad de página y sugerencias para hacer que su sitio sea más rápido. La herramienta revela algunos elementos críticos para la versión móvil y de escritorio del sitio web, como:
- Optimizar imágenes
- Elimine todos los JavaScript y CSS que bloquean la representación en el contenido de la página
- Minimizar JavaScript
- Minimizar CSS
- Aproveche el almacenamiento en caché del navegador
- Reducir el tiempo de respuesta del servidor
- compresión gzip
- Evite los redireccionamientos a la página de destino
Por ejemplo , analicé el sitio web de Shopify usando la herramienta, aquí está el resultado del Informe de velocidad de la página móvil:
Y el informe de velocidad de página de escritorio:
Como puede ver, la versión móvil de Shopify necesita algunos cambios para tener una mejor velocidad, mientras que la versión de escritorio está bastante bien optimizada. También puede hacer esto con su sitio de forma gratuita.
Probar mi sitio
A continuación, tenemos Test My Site , otra herramienta gratuita proporcionada por Google. La herramienta proporciona información detallada sobre la compatibilidad con dispositivos móviles y la velocidad de la página móvil. Teniendo en cuenta que cada vez más personas compran en sus teléfonos inteligentes, es esencial optimizar su sitio para dispositivos móviles.
Simplemente ingrese la URL de su sitio web y Google escaneará el sitio automáticamente para evaluarlo. Después de unos segundos, puede obtener su valoración y un informe gratuito si hace clic en el botón «GENERAR INFORME» y proporciona una dirección de correo electrónico para recibir resultados detallados.
gtmetrix
GTmetrix es otra herramienta gratuita que puede analizar el rendimiento de la velocidad de su página. La mejor característica de la herramienta es el sistema de calificación, que clasifica las páginas web de la A a la F y le brinda recomendaciones para optimizar su sitio.
Los datos de GTmetrix son muy detallados y esclarecedores. Si hace clic en la pestaña «cascada», puede ver la cantidad exacta de tiempo que necesita cumplir cada solicitud.
herramienta Pingdom
Prueba de velocidad del sitio web de Pingdom : pruebe la velocidad de carga de su sitio web GRATIS y dé recomendaciones. Es como PageSPeed de Google con algunos extras. Pingdom también es un servicio confiable para monitorear la salud de un sitio web y mantener una gran velocidad.
Su sitio tendrá calificaciones en cada elemento según la prioridad y también hay una explicación general de cuál es el problema. Después de desglosar todos los problemas, podemos llegar a las soluciones en la siguiente sección.
14 factores para la optimización de la velocidad de Shopify
Aquí hay 14 formas en las que puede acelerar su tienda Shopify y aún así mantener todas las características increíbles para una gran funcionalidad. Vamos a repasarlos uno por uno.
1. Usa AMP para aumentar la velocidad
Accelerated Mobile Pages, o AMP para abreviar, es un marco estándar abierto diseñado para que cualquier propietario de sitio cree páginas web de carga rápida en dispositivos móviles. Asegurarse de que su tienda esté lista para dispositivos móviles es más fácil con la tecnología AMP para que los usuarios puedan acceder al sitio rápidamente.
En Shopify, puedes generar AMP rápida y fácilmente con la ayuda de algunas aplicaciones. FireAMP y RocketAmp son eficientes para realizar tal acción; puede hacer clic en los enlaces e instalarlos en su tienda. Dos aplicaciones tienen calificaciones de cuatro estrellas y pueden mejorar el tiempo de carga de su página móvil.
Lo bueno de estas aplicaciones es que no es necesario ser un desarrollador para entender cómo funcionan. Son fáciles de usar, tienen soporte 24/7 y están listos para ayudarlo a construir su AMP. FireAMP tiene una prueba gratuita de 15 días y cuesta $7.99/mes, mientras que RocketAmp tiene una prueba gratuita de 14 días y cuesta al menos $9/mes. También son livianos en el espacio, por lo que no ralentizarán su tienda.
Si necesita una opción más personalizada, puede considerar crear la API de Shopify para desarrollar páginas AMP usted mismo. Tendrá que crear estas versiones de AMP para muchas páginas de destino, pero no será difícil si es habitual con HTML y estilo web. Puedes leer la guía de Shopify sobre Cómo crear páginas con AMP para saber más.
2. Comprime y reduce el tamaño de la imagen
Uno de los principales factores críticos que afectan la velocidad de carga de tu tienda Shopify son las imágenes. De hecho, es la principal razón por la que cualquier página web se ralentiza. Por lo tanto, la compresión de imágenes es importante y necesaria para que las páginas web carguen más rápido.
En Shopify, puede agregar los siguientes formatos de imagen: JPEG o JPG, PNG, JPEG progresivo, GIF. En actualizaciones recientes, Shopify publicará automáticamente imágenes WebP desde formatos de archivo como PNG y JPEG.
Esta es una buena noticia para su tienda, ya que WebP es un formato de imagen moderno que tiene una capacidad de compresión superior para imágenes en la web.
Lo que puede hacer es optimizar sus imágenes para asegurarse de que tengan un tamaño aceptable y recuerde no agregar demasiadas imágenes en una sola página. Mientras comprime las imágenes, intente mantener la calidad adjunta, o su tienda se verá borrosa.
Una de mis herramientas gratuitas favoritas para comprimir imágenes es tinypng (o tinyjpg para otra versión). Puede ver cuánto espacio ahorró la herramienta para las imágenes en la imagen de abajo. Una vez que haya reemplazado todas las imágenes con las versiones optimizadas, el tiempo de carga de la página mejorará automáticamente.
Otra opción para comprimir imágenes es usar las aplicaciones Shopify SEO Suite – SEO Image Optimize . Image Optimizer + Compression son excelentes opciones y han sido probadas por muchos usuarios. Pueden comprimir sus imágenes en gran medida y no provocar ninguna pérdida de calidad.
3. Elimina las aplicaciones innecesarias de Shopify
Hemos hablado mucho sobre las aplicaciones de Shopify y, personalmente, creo que son una de las opciones más funcionales en comparación con otras plataformas de comercio electrónico. Pero a pesar de eso, tener demasiadas aplicaciones de Shopify puede tener un impacto en la velocidad de carga de tu tienda.
Artículos Relacionados:
- Las mejores aplicaciones de Shopify: todas las tiendas las necesitan
- Las más de 31 aplicaciones imprescindibles de Shopify
Si bien Shopify carga los archivos JavaScript de las aplicaciones de manera impecable, todos los archivos de las aplicaciones se cargan siempre que estén instaladas.
Esto se debe a que los archivos de script para las aplicaciones descargadas se inyectan en la <head>sección de su theme.liquidarchivo dentro de {{ content_for_header}}; y deberán renderizarse antes de cargar cualquier otro código.
Algunas aplicaciones que no usa o instala como prueba pueden ejecutarse en segundo plano y perjudicar el rendimiento de su sitio.
Así que revise todas las aplicaciones que instaló y elimine las que no esté usando. Luego, prueba la velocidad de la página usando herramientas como PageSpeed Insights o las herramientas para desarrolladores de Chrome ( presiona Ctrl + Shift + I en tu teclado). Haga clic en la pestaña » Red » y vuelva a cargar la página, puede ver la diferencia.
Además, debe eliminar los archivos de la aplicación Shopify de su tema. Algunas aplicaciones de Shopify pueden inyectar archivos en tu tema automáticamente cuando las instalas. Puede encontrar estos archivos en la sección Fragmentos o Activos y eliminarlos. Es posible que necesite un desarrollador si no está familiarizado con la codificación.
4. Uso de la red de entrega de contenido
Una red de entrega de contenido (CDN) es un grupo de servidores ubicados en todo el mundo. Se utiliza para distribuir la carga de entrega de contenido a través del servidor más cercano en comparación con la ubicación de su visitante. Esto hace que la experiencia del usuario local sea mucho más rápida.
Afortunadamente, Shopify tiene un CDN de clase mundial impulsado por Fastly y no tienes que pagar tarifas adicionales. Esto permite que las tiendas de Shopify aparezcan casi instantáneamente en lugares como EE. UU., el Reino Unido, el sur de África, Australia, América del Sur y Asia.
Lo que puede hacer para asegurarse de que el contenido de su página, como las imágenes que aparecen automáticamente en su sitio, se vincule a las imágenes mediante asset_url filter. Para garantizar las actualizaciones automáticas, debe cambiar la sintaxis de CSS para tener la extensión asset_url filter. Más información sobre los filtros de URL .
5. Minimiza la cantidad de enlaces rotos y redirecciones
Otro problema que puede surgir y afectar la velocidad de carga de su página es la cantidad de redireccionamientos y enlaces rotos. Esto es lo que puede hacer para limpiarlos y hacer que su sitio se cargue más rápido.
Para redirecciones:
Tener redirecciones innecesarias puede crear problemas de rendimiento y velocidad. También activan más solicitudes HTTP y retrasan las transferencias de datos. Aplica redirecciones 301 como «redirecciones almacenables en caché», que también es una función de redirecciones integrada de Shopify para evitar esto.
Puede acceder a esta función en su panel de navegación, haga clic en el botón » Agregar redirección de URL «. Además, nunca redirija las URL a páginas que ya son redirecciones. Por obvio que parezca, a veces puede suceder.
Para enlaces rotos:
Tener enlaces rotos en su sitio web puede afectar la velocidad de la página porque aumentan las solicitudes HTTP innecesarias y crean una mala experiencia para el usuario. Para encontrar y reparar enlaces rotos en su sitio web, puede usar herramientas gratuitas como Xenu o Broken Link Checker . Ambos son fáciles de usar y puede tomar medidas inmediatamente después de ver los resultados.
6. Optimiza el rendimiento de tu móvil
Se proyecta que el mercado de comercio electrónico móvil alcance los $319 mil millones anuales para este año 2020, según esta investigación . Pero como puede ver en el ejemplo dado con Shopify, incluso el sitio de la empresa tiene problemas para optimizar su página para dispositivos móviles. Entonces, si actúa rápidamente, puede superar a muchos otros competidores.
Después de utilizar todos los métodos de análisis proporcionados en la primera sección, deberías tener una visión bastante clara del rendimiento de la versión móvil de tu sitio. Tenga en cuenta que cada herramienta de prueba de velocidad utiliza su propio método de puntuación, y debe tener la mente abierta sobre el resultado.
Debe equilibrar la optimización de la velocidad de su sitio con una interfaz utilizable para que sus clientes puedan disfrutar comprando en su sitio. Así que la mejor opción es mirar las sugerencias que hacen las herramientas y contactar a un desarrollador web para dar su opinión.
Con una plataforma ya preparada y bastante nueva como Shopify, las herramientas no se crearon para optimizar las sugerencias para dicha plataforma. Por lo tanto, es muy recomendable contar con las opiniones de los expertos para mejorar y no romper la versión móvil de su sitio.
7. Usa el administrador de etiquetas de Google
Por lo general, agrega códigos de seguimiento separados para las conversiones de AdWords, Google Analytics, objetivos, etiquetas de remarketing y más, por su cuenta o se los envía a algunos desarrolladores. Este proceso puede llevar tiempo y, finalmente, ralentizar el rendimiento general de su sitio. Con Google Tag Manager , todas sus etiquetas se almacenan en un solo lugar.
Todas las etiquetas contienen datos de clientes, luego Google Tag Manager los condensa en una sola solicitud de JavaScript. Si una etiqueta no funciona correctamente y hace que su sitio web se caiga, el Administrador de etiquetas también lo ayuda a eliminar la etiqueta rápidamente. Esto reducirá el número de requisitos de llamadas externas y realiza la solicitud de forma asíncrona.
Para agregar el Administrador de etiquetas de Google, administre todas las etiquetas de su tienda, solo necesita un fragmento de código. Lee las pautas proporcionadas por el Centro de ayuda de Shopify Plus para obtener más información. Una aplicación también es excelente para administrar etiquetas (hasta 70 etiquetas para ser precisos). Shopify Google Tag Manager es la aplicación que necesitas y es totalmente gratis.
8. Usa un tema rápido y receptivo
Si el tema que está utilizando no está bien optimizado, está construyendo su tienda sobre un terreno poco firme y puede caer en cualquier momento. Con una plataforma como Shopify, el tema es aún más importante, ya que la velocidad del sitio depende principalmente del front-end para funcionar.
Entonces, lo que debe hacer es usar un tema rápido y receptivo en el que confíen muchos usuarios, adecuado para su negocio y ajustable a muchos dispositivos. Recuerde buscar una copia de actualización reciente de su tema y verifique la vista previa en vivo. Puede ejecutar la página de vista previa a través de Google PageSpeed Insights para ver las sugerencias y hacerlo más rápido.
La capacidad de respuesta también es importante. Como vio en los ejemplos dados, es posible que la versión móvil de un sitio no tenga el mismo rendimiento que la versión de escritorio. Luego, si usa un tema que responde al dispositivo, detectará automáticamente el dispositivo del usuario y mostrará la resolución de imagen adecuada para mantener el sitio rápido y utilizable.
Afortunadamente, todos los temas integrados de Shopify están configurados para ofrecer los tamaños de imagen adecuados en cada dispositivo. Además, tenemos una lista de más de 35 mejores temas de Shopify (gratis y de pago) que puedes consultar.
Nota: antes de optimizar algo en el tema de Shopify, asegúrese de descargar una copia de seguridad del tema de Shopify accediendo a Admin > Themes > Actions > Download Theme file. El tema de la copia de seguridad se enviará a su correo electrónico en ese momento.
9. Cuidado con la ventana emergente de vista rápida
Proporcionar una ventana emergente de vista rápida parece algo que hacen todas las tiendas de comercio electrónico. Muestran el producto directamente en la página de listado en lugar de enviar al visitante a una nueva página de detalles del producto. Sin embargo, suena bien para los clientes en teoría:
- Agrega pasos adicionales al viaje del cliente.
- Puede confundirse con una página de producto.
- Se puede hacer clic accidentalmente y hacer que el usuario se sienta frustrado
- Puede ralentizar el tiempo de carga de su página
¿Ves la parte de desaceleración? Esto se debe a que la ventana emergente de vista rápida puede precargar una página de producto completa y eso es una enorme cantidad de datos. Si desea saber si sus clientes incluso están usando la ventana emergente Quick vier o no, intente usar Hindsight o Hotjar para recibir los datos sobre los clics de los clientes.
Si sus visitantes realmente no lo están usando o no hay una razón crítica para tenerlo, le recomiendo que se deshaga de la función. Si su tema lo tiene, debe deshabilitar fácilmente la función en el Personalizador de temas. Si esa no es una opción, comuníquese con un desarrollador para identificarlo y eliminarlo.
10. Un diseño de héroe es mejor que los controles deslizantes
Los controles deslizantes han sido populares para muchas tiendas de comercio electrónico, y las personas generalmente agregan 5-6 imágenes de alta calidad al control deslizante, lo que puede aumentar significativamente el tiempo de carga general del sitio web. Si desea la optimización de Shopify Speed, debe eliminarla.
Algunas estadísticas para demostrar que los controles deslizantes ni siquiera funcionan muy bien:
- Solo el 1% de las personas hacen clic en un control deslizante
- Los controles deslizantes/carruseles son malos para el SEO
- Los controles deslizantes/carruseles pueden molestar a los usuarios y reducir la visibilidad
- Los controles deslizantes no son buenos para dispositivos móviles
Entonces, la solución es reducir la cantidad de controles deslizantes de la página de inicio o usar una sola imagen de héroe es igual de efectivo. Elegir una imagen impactante y de alta calidad con un claro llamado a la acción puede atraer a su cliente rápidamente. Este es el diseño que también tienen la mayoría de los temas actuales de Shopify.
11. Minifica el código de tu página
Los desarrolladores de Google han creado un proceso conocido como «minificación». El proceso lo ayuda a eliminar HTML, CSS y JavaScript mal codificados de su sitio. Son una de las razones para ralentizar el rendimiento de su sitio.
Shopify maneja la minificación SCSS.liquid de forma predeterminada para que no tengas que preocuparte por los códigos SCSS. Hay muchos recursos que puede encontrar para minimizar los códigos de su sitio, como kangax/html-minifier en GitHub . O puede hacer que un desarrollador de temas se encargue de todo el desarrollo.
Nuevamente, si decide hacer cosas en su ơn, primero haga una copia de seguridad de su tema y luego cambie las cosas. Entonces, si las cosas se rompen después de fusionar todos los archivos, puede volver a la versión anterior.
12. Cargue solo imágenes visibles
Las imágenes fuera de pantalla son cuando un usuario visita una página y ve su imagen superior primero, pero su navegador aún descarga todas las imágenes fuera de pantalla en su página. Para solucionar esto, tenemos una técnica que se llama carga diferida. Esto no cargará imágenes hasta que el usuario se desplace hacia abajo para verlo.
Puede usar una biblioteca llamada tamaños perezosos para cargar imágenes fuera de pantalla y hacer que las imágenes también respondan.
Paso 1 : copie y pegue este código en el archivo app.js
Paso 2 : agregue un nuevo fragmento llamado Bgset.liquid y copie este código en este fragmento
Paso 3 : agregue un nuevo fragmento llamado responsive-image.liquid
Paso 4 : copie y pegue este código en el fragmento responsive-image.liquid
Paso 5 : este paso no es fácil para personas sin conocimientos técnicos y no lo intente si no sabe al menos algo sobre Html5 / Css3 o líquido. Llama a un experto para que te ayude.
Agregarás este código en tu elemento img
<script src="https://gist.github.com/IliasHad/2c7fc223c4ae27414f4810674ce35ed6.js"></script>
Agregará este código si tiene una imagen de fondo
<script src="https://gist.github.com/IliasHad/c95aeb8209c7f42c5f0fd044aca724b6.js"></script>
13. Los bucles pueden ralentizar tu página
Liquid es un poderoso lenguaje de codificación de Shopify . Pero, a veces, debe sopesar los beneficios con la optimización de velocidad de Shopify. La iteración For Loop es una de ellas. Esto significa que el sistema tiene que hacer un bucle de todos los productos de una colección y sucede cuando busca una condición como el precio o la etiqueta.
Si tiene muchos productos en su catálogo, esto puede ralentizar su sitio. Seguro que es útil, pero tenga en cuenta el impacto que puede tener en el tiempo de carga. Lo que puede hacer es revisar el código de su tema para asegurarse de que no está ejecutando Liquid for loops varias veces buscando la misma información.
Esto puede suceder si muchos desarrolladores trabajan en el tema de su tienda, por lo que eliminar cualquier código o tarea duplicada hará que su página se cargue más rápido. Algunas de las características beneficiosas, como el filtrado de colección avanzado, las muestras usan bucles for, por lo que usarlas sabiamente puede acelerar su sitio y optimizar la función.
14. Reducir el número de solicitudes HTTP
Utilice la herramienta Comprobador de solicitudes HTTP proporcionada por GiftOfSpeed para averiguar cuántas solicitudes HTTPS está realizando su página. Puede reducir las solicitudes HTTP haciendo lo siguiente:
- JavaScript pequeño en línea.
- Minimice el uso de diseño e imágenes funcionales.
- Combina todo JavaScript.
- Combine y alinee sus scripts CSS.
- Objetos de imagen CSS.
- Limite el número de botones sociales.
- Convierte imágenes a código Base64.
También puedes consultar esta guía para saber Cómo hacer menos solicitudes HTTP .
Ultimas palabras
Comience con algunos consejos fáciles y prácticos para mejoras inmediatas en la optimización de la velocidad de Shopify , luego puede pasar a tener una página ultrarrápida y seguir funcionando maravillosamente. No tienes que renunciar a la funcionalidad por la velocidad, ¡recuérdalo!
¿Hay otras cosas que haces para acelerar tu tienda Shopify ? ¿Hay algún método que podría haber agregado al artículo? Siéntase libre de compartir en la sección de comentarios a continuación, me encantaría saber. Como siempre, ¡la mejor de las suertes en su viaje de comercio electrónico!