Como Optimizar la velocidad de carga de tu tienda con WooCommerce

Actualizado: marzo 25, 2020

Woocommerce es uno de los plugins mas usados en WordPress, pues nos ayuda a convertir este CMS en una tienda en linea con relativa facilidad, basta instalarlo, rellenar algunos ajustes y comenzar a agregar productos en el catalogo de la tienda. Aquí te doy algunos consejos para optimizar la velocidad de carga de tu WooCommerce ante el Page Speed Insights de Google.

La velocidad de carga de una pagina en un sitio web es uno de los tantos factores de posicionamiento web, y si bien no es determinante es un factor muy ligado a la experiencia de usuario, que Google toma actualmente mucho en cuenta.

Un sitio web o una tienda en linea lentos pierden visitantes, y si se pierden estas valiosas visitas se pierden ventas.

Normalmente esta velocidad la toman en cuenta midiéndola para dispositivos móviles, y con conexiones a internet a través de red de datos, por lo que las mediciones son estrictas, así que vamos a centrarnos en optimizar la instalación de Woocommerce para que sea rápida el cargar en estos dispositivos.

Si, el hosting influye en la velocidad de carga de tu sitio web.

¿Como mejorar el PageSpeed de mi tienda en linea con Woocommerce?

Déjame mostrarte antes que nada la puntuación de una tienda ficticia que he creado para experimentar. He creado esta tienda con WordPress, y como Theme el de default. La puntuación en PageSpeed es de 60, pero al instalar y activar WooCommerce se ha caído a 41, es decir LENTO.

Optimizar WooCommerce: Cambiar el Theme de WordPress

El primer paso para optimizar la velocidad de nuestra tienda en linea con WordPress y WooCommerce es elegir un Theme que sea rápido, lo mas rápido que nuestra idea pueda permitirnos en base al diseño que deseamos.

Una tienda con una imagen de header por supuesto tendrá que cargar esa imagen y depende de su peso el tiempo que agregará para estar operativa.

En este caso elegí el Theme Iconic One (free), pues por sus características es el que mas rapidez de carga permite, su CSS es bastante moderado.

Con este cambio conseguí subir la puntuación de PageSpeed de 41 a 60 en el home.

PageSpeed después de cambiar el Theme en WordPress

Optimizar WooCommerce: Desactiva la Geolocalización.

Para tiendas online internacionales esta opción puede ser importante, pues permite que los cálculos de impuestos y de envío se hagan mas fácilmente basándose en la IP del comprador con la ayuda de algunos plugins, pero las tiendas en linea que venden en un país determinado o en una región donde esto no varia, o puede ajustarse manualmente o de acuerdo con el cliente, pueden apagar esta opción y conseguir mas rapidez.

  • Entra al panel de WordPress
  • Ve a la sección WooCommerce / Ajustes / General
  • Busca la opción: Ubicación del cliente por defecto
  • Selecciona: Sin ubicación por defecto o la opción Dirección principal del Negocio.
Conseguimos elevan la rapidez de carga de la tienda un poco mas

Optimizar WooCommerce: Plugins para optimizar la velocidad de WordPress

79 es una buena puntuación en Google SpeedPage, es una puntuación que ya es muy aceptable, pero podemos apretar un poco mas tuercas de nuestra plataforma para mejorar la velocidad de carga de nuestra tienda.

Necesitamos la ayuda de 2 plugins:

  • Async JavaScript (de Frank Goossens)
  • Speed Up – Optimice CSS Delivery (de Simone Nigro)

El primero, Async JavaScript nos permite hacer asíncrona o diferida la carga de los archivos JavaScript y del JQuery, con lo que reduce el bloqueo del renderizado HTML ocurre en menor grado o no ocurre. Yo uso Async, pero en muchos casos es mas efectivo Defer, yo te sugiero probar ambos en el tes de velocidad.

Este plugin tiene ajustes, ahí puedes encenderlo, seleccionar el método y agregar o excluir scripts.

Ahora, Speed Up – Optimice CSS Delivery es un plugin que carga asincronamente el CSS, lo que hace que no bloquee el renderizado y la velocidad de carga sea mas rápida. No tiene ajustes.

Estos 2 plugins resultaron al final de estar probando varios, y dependerá su efectividad de acuerdo al Theme, y de acuerdo a los plugins y scripts que tu tienda esté utlizando, en este caso solo tengo:

  • Editor Clásico (no me agrada Gutenberg, aunque este blogs lo usa)
  • Estadísticas de WP
  • WooCommerce

Ahora, estarás pensando, muéstrame el resultado en la tienda, en un articulo, que es lo que nos interesa posicionar. Y aquí está, despues de estos simples pasos.

La pagina del producto tiene 3 imágenes, un link al producto ya que es bajo el sistema de afiliación, pues la tienda no existe.

Importante

Debo insistir en que en este caso la tienda no tiene un diseño muy llamativo, no uso imágenes de cabecera, y pocos plugins, por lo que a mas recursos usados menor será la velocidad de carga, pero no será tanta como para recibir una mala puntuación.

  • Utiliza Themes ligeros, piensa que en los móviles un diseño muy complejo realmente no es tan importante, es mas importante la usabilidad y la experiencia del usuario.
  • Utiliza imágenes optimizadas, puedes ajustar tus imágenes con el editor en linea de imágenes o con BeFunky, un editor de imágenes en linea.
  • Utiliza Plugins realmente necesarios, plugins de botones sociales, constructores de sitios, por ejemplo; aumentan esta carga, especialmente los constructores.
  • Entre mas imágenes se usan mas tiempo lleva cargar una tienda o blog.
  • Puedes usar otros recursos, como Caché, CDN, en este caso no lo hemos necesitado.
  • Lo mas importante, la velocidad de tu tienda es importante, pero un resultado en AMARILLO no es necesariamente malo.
  • Los resultados pueden variar de acuerdo al momento de la medición, hay picos de usuarios, carga o sobre carga en el servidor, en fin; muchos factores. que harán que un 98 marque 92, o incluso no pase en determinados momentos, hay que hacer siempre mas de 1 prueba.

Bien, hemos obtenido al final un Tiempo hasta que está interactiva la tienda de 3 segundos, y un Primer renderizado significativo de 1.6 segundos. 🙂

Categoría: Web

Un pensamiento en “Como Optimizar la velocidad de carga de tu tienda con WooCommerce

  1. Pingback: Tips para optimizar la velocidad de un blog Wordpress | Zixpack

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *