¿Cómo mejorar la velocidad de carga de nuestro Ecommerce en Shopify? 🚀

En el siguiente artículo, enumeramos algunas de las acciones que puedes realizar para mejorar la velocidad de carga de tu tienda online y que desde CRISP STUDIO realizamos diariamente para optimizar los Ecommerce Shopify de nuestros clientes.

Página Web Crisp Studio

Vamos a ir punto a punto indicando qué partes del Ecommerce vamos a revisar y qué vamos a ajustar en cada una de las partes para reducir el tiempo de carga de la tienda.

¡Empecemos! ➡️

Imágenes

Una mala optimización de las imágenes causa una disminución de la velocidad de carga notable. Para asegurarnos que las imágenes no están suponiendo un problema para la página, revisaremos que:

Formato de las imágenes

Revisaremos que las imágenes que se han subido al Ecommerce están en formato PNG o JPG. Estos formatos son soportados por todos los navegadores y no dan problemas.

Para elementos como los iconos en el menú principal o el logo, utilizaremos el formato SVG.

Compresión de las imágenes

Nos aseguramos de que se ha realizado una compresión correcta de las imágenes subidas.

compresion velocidad shopify

Cuando subimos una imagen a nuestro Ecommerce, debemos comprimirla para agilizar el proceso de carga, este proceso es importante ya que la imagen no solamente debe comprimirse sino que no debe "romperse". Desde CRISP, comprobamos que la proporción entre compresión y calidad sea la correcta, asegurando de esta manera, que la imagen no interfiere en la velocidad de carga pero tampoco empobrece el UX ni la imagen de marca.

Re-dimensión de las imágenes

Nos encargamos de facilitarle la lectura de código a Shopify para que las imágenes se muestren siempre con el tamaño indicado.

Contenido

Las aplicaciones, textos, funcionalidades y en general todo aquello que conforma la página web entra dentro del contenido. También las imágenes, aunque hemos preferido tratarlas a parte por la importancia que representan.

Es importante entonces que el contenido esté organizado, diseñado e implementado correctamente para evitar que este afecte a la velocidad de carga de la página.

Lazy loading

Realizamos la implementación de Lazy Loading o carga diferida. Consiste en lo siguiente:

Por norma general, cuando se abre un sitio web, el navegador carga todos los recursos necesarios para mostrar la página adecuadamente. Durante este proceso, se recuperan todos los objetos, no solo los que se encuentran en el área visible, también los que están fuera de ella. Entre otras cosas, esto comporta un tiempo de carga innecesario.

Lazy Loading Shopify

Haciendo la implementación del Lazy Loading, sólo cargamos los elementos que se muestran en la pantalla del usuario. A medida que el usuario va navegando a través de la página, nosotros vamos cargando los objetos, pero nunca antes. Dentro de estos elementos, entran también las imágenes que solo cargarán cuando el usuario se aproxime a ellas.

Con el uso de esta técnica, podemos incrementar la velocidad de carga de la web de manera notable.

Fuentes

Las fuentes pueden ser archivos pesados que tardan en cargar. Algunos buscadores esconden el texto de nuestra página hasta que no se ha cargado el archivo de la fuente, eso implica que la carga del contenido, en este caso el texto, incremente.

Para evitar esto, desde CRISP, añadimos el código necesario para indicar a los buscadores que muestren una fuente por defecto mientras carga la fuente correcta.

Redirecciones

Es importante evitar las redirecciones, en la medida de lo posible. Si venimos de otra plataforma o dominio, es inevitable tener que hacer redirecciones para mantener la salud de nuestro SEO, pero siempre deberíamos evitar que una misma URLs sea redirigida más de una vez.

404 redirecciones Shopify

Tan malo es pasarse con las redirecciones como no hacerlas. Hay que evitar los errores 404, ya no solo porque influyen en nuestra puntuación frente a Google, sino también porqué reducen la calidad de nuestro UX.

Plantillas de Shopify

Las plantillas de Shopify incorporan muchas funcionalidades y secciones que permiten al usuario/merchant personalizar su página y hacer de su Ecommerce una tienda única.

Shopify Themes

De todos modos lo más probable es que, como merchant, no utilices la totalidad de estas funcionalidades. A pesar de ello, cada vez que alguien accede a la web, estas funcionalidades en desuso se están cargando.

Desde CRISP, revisamos el tema en busca de estas secciones y funcionalidades que nuestros cliente no necesitan y las eliminamos del tema con tal de mejorar la velocidad de carga

Apps

Muchas de las funcionalidades que no incorporan los temas tenemos que buscarlas en las apps de Shopify. Estas, son aplicaciones de terceros que instalamos en el tema o en el backend de Shopify y que utilizamos para ofrecer al usuario una mejor experiencia en la web ya sea ofreciendo servicios, facilitando el proceso de compra o muchas otras cosas.

Shopify Apps

Las aplicaciones suelen añadir scripts en nuestro código que pueden afectar seriamente la velocidad de carga de una web.

Desde CRISP STUDIO, podemos hacer lo siguiente:

En el caso de que como merchant no hayas hecho la instalación de la aplicación, sugerimos diversas apps con las que hayamos trabajado y en las que confiemos plenamente. Apps que cubrirán las necesidades y a la vez garantizarán que la velocidad de la web no se vea del todo afectada.

En el caso de que consideremos que un desarrollo por nuestra parte puede cubrir las necesidades de igual manera, también lo propondremos al cliente.

Shopify App Store

Otro posible escenario es que ya hayas instalado la aplicación. En ese caso, nos aseguraremos de que esta no está interviniendo con la velocidad de carga y eliminaremos los scripts de la app que sean innecesarios.

En el caso de ser una app que nosotros no recomendamos, procederemos como en el primer caso, a sugerir algunas aplicaciones o un desarrollo personalizado.

Finalmente, el último caso es aquel en el que ya has desinstalado la aplicación. Tras haber sido desinstaladas, las aplicaciones pueden dejar rastros de código en nuestro tema. En ese caso, nosotros podríamos encargarnos de eliminar el código sobrante.

Es muy importante saber, que las aplicaciones siempre ralentizan las páginas. Por pocas que sean, es inevitable. Por eso, en CRISP, solo recomendamos hacer la instalación de aquellas aplicaciones que sean 100% necesarias y, si es posible, siempre sugerimos al cliente decantarse por un desarrollo personalizado que será siempre más completo que una app y respetará las velocidades de carga.

Código

Para finalizar, hacemos una inspección del código para hacer una limpieza de CSS y JS. Algunos de las acciones que tomamos con tal de asegurarnos de que el código de la web está limpio son:

- Eliminar código en desuso

- Eliminar scripts duplicados

- Optimización de CSS es uso

- Optimización de JS es uso

No está en nuestra mano...

Existen también algunos factores que desde CRISP STUDIO no podemos cambiar o alterar con tal de mejorar la velocidad de carga de una web.

Principalmente, nos referimos al servidor.

Los servidores son dominio exclusivo de Shopify y como partners no podemos realizar ningún cambio o ajuste en ellos.

Algunos de los factores determinantes para la velocidad relacionados con el servidor son:

  • Reducción del tiempo de respuesta del servidor. No hay que preocuparse por este factor, debido a que Shopify ofrece tiempos de respuesta competitivos.
  • Utilizar un CDN (Content Delivery Network). Este factor tampoco nos debería preocupar, ya que Shopify utiliza siempre CDN.

Esperamos que este artículo te haya servido para poder entender cómo funciona la carga de velocidad de una página web y te ayude a optimizar tu ecommerce.

En CRISP STUDIO, estamos especializados en Shopify, y consideramos que se trata de una plataforma de e-commerce con un potencial increíble. Si necesitas ayuda en cualquier momento, no dudes en contactarnos. Estaremos encantados de echarte una mano.

¿Probamos?

Si te ha gustado este post sobre Cómo mejorar la velocidad de carga de nuestro Ecommerce en Shopify seguro que querrás leer: