WPO para tiendas online WooCommerce + Wordpress

En este artículo voy a detallar algunas cosas que he explicado en la ponencia titulada “WPO en tiendas online Wordpress + WooCommerce” en el DMD Galicia 2016 celebrado este 15 de octubre de 2016 en Santiago de Compostela, organizado por Windup Estrategias y por nosotros (Raiola Networks).

A pesar de que mi ponencia fue bastante corta debido a que estaba cansado por todo el tema de organización del evento (menuda semana…), hablé de mejora de la velocidad de carga y consumo de recursos en WooCommerce + Wordpress.

En este artículo voy a intentar plasmar ciertos conceptos que se hablaron en la presentación, punto por punto.

A continuación, puedes ver la tabla de contenidos:



Este no es el primer artículo donde hablamos de como optimizar WooCommerce, además nuestros planes de hosting Wordpress son totalmente compatibles y funcionales con WooCommerce.

Antes de empezar, dejo aquí la presentación publicada en Slideshare, es la utilizada en la ponencia del Digital Marketing Day Galicia 2016 sobre WPO para WooCommerce.

1 – Hablando de Wordpress…

Empezamos hablando de Wordpress, sobretodo de datos estadísticos ya que Wordpress es usado actualmente por el 26,8% de todas las webs del mundo, y entre las webs creadas con un CMS, tampoco se queda atrás, con un 58,8% de cuota de mercado sobre los demás CMS.

(foto del informe de W3Techs)

Al ser un CMS tan utilizado, hace que muchos desarrolladores se dediquen a crear plugins y themes con los que aumentar las funcionalidades del CMS y conseguir una personalización mucho más fácil y rápida sin necesidad de tener demasiados conocimientos técnicos, adaptando lo que inicialmente era un sistema para crear blogs en un sistema adaptable a cualquier tipo de proyecto web que queramos desarrollar.

WooCommerce es uno de los plugins más importantes y grandes para Wordpress, convierte Wordpress en una tienda online para cualquier producto o servicio que quieras vender.

2 – Hablando de WooCommerce…

En el año 2015 el 29% de las tiendas online de Internet estaban hechas con WooCommerce, ha pasado un año, y en 2016 el 39% de las tiendas online están creadas con WooCommerce.

Me atrevería a decir, que WooCommerce es uno de los plugins más usados para Wordpress, pero también tengo que decir que es uno de los más complejos y ampliables que me he encontrado hasta el momento.

Aunque WooCommerce convierte Wordpress en un sistema completamente diferente, no deja de ser Wordpress, pero con más funcionalidades, lo que puede hacer que la instalación de Wordpress se vuelva muy lenta, y aún más si le cargamos plugins para aumentar aún más las funcionalidades de WooCommerce.

3 – Y ahora vamos a hablar de WPO y eCommerce…

Ahora es donde empezamos a entrar en materia de optimización y velocidad de carga, los datos teóricos son muy útiles, pero en la práctica debemos tener en cuenta que una tienda online tiene que cargar lo más rápido posible para poder ofrecerle a los usuarios una excelente experiencia a la hora de comprar, navegar, consumir contenido, etc…

Esto anterior no lo decimos nosotros, ya que en 2008 Amazon publicó un estudio propio basado en sus propios clientes donde indicaba que un retraso de 0,1 segundos (100 ms) en la carga de su web podría reducir las ventas un 1%.
Evidentemente estamos hablando de Amazon, una tienda online con una masa crítica para pruebas muy grande, en tiendas online más pequeñas es muy difícil aplicar la misma regla de medir.

Lo que sí que debemos tener en cuenta, es que el cliente no es comprensivo, no va a esperar, es más, aunque esté  accediendo desde una conexión mala, él va a culpar a tu tienda de cargar lento aunque realmente no tenga la culpa, y va a pasar al siguiente resultado de búsqueda.

3.1 – Seguimos con WPO y WooCommerce…

Antes de seguir profundizando en optimización de WooCommerce, vamos a dejar claros algunos conceptos interesantes sobre Wordpress:

• La instalación básica de Wordpress (sin plugins) es muy ligera y casi no consume recursos, por lo que la velocidad de carga debería ser muy rápida.

• Los themes complejos y plugins complejos añaden muchas funcionalidades y como en el caso de WooCommerce, convierten el CMS en algo completamente diferente, pero debemos tener en cuenta que el consumo de recursos de la plataforma también aumenta y que además los tiempos de carga se ralentizan al tener que procesar y cargar muchos más elementos y funciones.

• WooCommerce es un plugin muy complejo y normalmente los themes preparados para WooCommerce también suelen ser muy complejos, aumentando radicalmente el consumo de recursos al usar funcionalidades como el API Heartbeat de Wordpress, que permite usar AJAX en Wordpress.

• Una instalación de Wordpress + WooCommerce con 20 plugins donde 10 de esos plugins sean específicos para mejorar y aumentar las funcionalidades de WooCommerce se traduce en una instalación de Wordpress lenta, pesada y con un consumo de recursos que en la mayoría de los casos puede llegar a dejar de ser rentable para el dueño de la tienda online.

• La arquitectura de la tienda online, el número de productos por “listado” o categoría y la organización de las categorías pueden contribuir a mejorar o a dañar el rendimiento de la tienda online (consumo de recursos y velocidad de carga).

• Al crear una tienda online es importante meter el blog en un subdirectorio como por ejemplo /blog, pero también debemos barajar la posibilidad de usar una instalación de Wordpress independiente para ahorrarnos muchas de las funciones PHP que mete WooCommerce a Wordpress y que en la mayoría de los casos no son necesarias en el blog.

4 - ¿Y qué podemos hacer para acelerar WooCommerce?

Para acelerar una tienda online Wordpress + WooCommerce vamos a tener en cuenta estos 4 puntos importantes.
Evidentemente se podría profundizar mucho en la optimización de WooCommerce, e incluso si somos algo más hábiles con el código podemos llegar a filtrar que funciones se cargan dependiendo de la zona de la web, pero en una ponencia de 30 minutos sobre WPO para WooCommerce no ha dado tiempo a más.

Los puntos detallados en la ponencia fueron estos:

• Implementar un sistema de cache de página (teniendo en cuenta las exclusiones necesarias para una tienda online WooCommerce).

• Implementar un cache de base de datos (teniendo en cuenta las exclusiones necesarias para una tienda online WooCommerce).

• Controlar el funcionamiento del API Heartbeat de Wordpress (admin-ajax.php) ya que suele ser el mayor problema del 99% de las tiendas online creadas con WooCommerce.

• Otros métodos: OPCache, optimizar imagenes, minificar y combinar, etc…

A continuación vamos a detallar estos puntos anteriormente comentados.

4.1 - ¿Cache de página? ¿La solución de siempre?

El sistema de cache de página siempre es el principal método para optimizar un Wordpress y conseguir más velocidad de carga al mismo tiempo que reducimos radicalmente el consumo de recursos.
Aunque el sistema de cache de página es el método más utilizado, en la mayoría de las ocasiones no se configura bien o no se elige la opción adecuada, por lo que el sistema de cache de página puede no ser efectivo.

Un sistema de cache de página es efectivo cuando mantiene siempre una versión cacheada de la web, pero al mismo tiempo la purga de cache se realiza en el momento exacto para impactar lo mínimo en el rendimiento general del sitio web y del servidor.

A nivel efectividad, no es lo mismo implementar un cache de página en Wordpress que en WooCommerce, ya que en tiendas online WooCommerce debemos tener en cuenta las exclusiones del carrito y de la página de checkout, sino tendremos problemas graves cuando se cachee nuestra tienda online.

No todos los plugins de cache son efectivos con WooCommerce, normalmente nosotros recomendamos estos:

• W3 Total Cache: De esta suite completa de optimización para Wordpress ya hemos hablado en el pasado, ya que además de permitir cache de página también nos permite configurar cache de consultas a la base de datos, cache de objetos y algunas configuraciones más como CDN o cache de navegador.

• WP Rocket: Este es otro plugin que recomendamos mucho, de hecho ya hemos hablado de él en este blog, pero es un plugin Premium y eso hace que muchos administradores de sitios web lo descarten directamente.

• WP Fastest Cache: Se puede considerar una alternativa gratuita a WP Rocket, en su versión gratuita es un plugin bastante limitado, pero eso no quiere decir que sea una mala opción, ya que si configuramos bien las excepciones conseguiremos casi los mismos resultados que con WP Rocket, aunque sin algunas funcionalidades.

En las siguientes capturas puedes ver la diferencia de rendimiento entre usar un cache de página (con WP Rocket) y no usar ningún tipo de cache.

4.2 - ¿Cache de consultas a la DB? ¿Qué es eso?

Wordpress al igual que WooCommerce guarda todos los datos relativos al sitio web en la base de datos MySQL (excepto imágenes y archivos estáticos).
En condiciones normales, cuando un visitante accede al sitio web, si no hay ningún tipo de cache, las consultas se realizan directamente a la base de datos y eso genera un consumo de recursos alto y un tiempo necesario para la consulta donde la petición está esperando.

Si cacheamos las consultas realizadas a la base de datos obtendremos resultados INSTANTANEOS y sin el consumo de recursos tan alto, pero también debemos tener en cuenta que no todas las consultas se pueden cachear.

Realmente un cache de consultas a la base de datos se nota cuando no se aplica un cache de página, es decir, en las páginas donde no hay un cache por delante.

En WooCommerce, para que el cache de consultas sea efectivo y no sea un problema para las sesiones de compra de los usuarios, debemos añadir algunas querys a la lista de exclusiones, concretamente las relacionadas con la clase “_wc_session_”.

En Wordpress podemos implementar el cache de consultas a la base de datos con los siguientes plugins:

• W3 Total Cache: Como hemos dicho anteriormente, W3 Total Cache es una suite de optimización para Wordpress, su cache de consultas a la base de datos es muy efectivo en el front-end y además permite guardar el cache en sistemas como Memcached o APC.

• NextLevel Cache: Es un plugin que lleva tiempo en BETA, es bastante rudimentario, pero más o menos funciona.

• DB Cache Reloaded Fix: Lleva tiempo sin actualizar, pero tiene un buen sistema de exclusiones y es bastante efectivo.

4.3 – El API Heartbeat de Wordpress y su p…

Ya hemos hablado en alguna ocasión en este blog del API Heartbeat de Wordpress o del admin-ajax.php.
El API Heartbeat es una de las partes de Wordpress que más recursos consumen y más se ralentiza la carga.

El API Heartbeat mediante el archivo admin-ajax.php (al que se hacen llamadas) permite a la instalación de Wordpress comunicarse en tiempo real con el navegador sin necesidad de recargar la página.

En páginas o partes de la web donde se usa el API Heartbeat, por defecto se hacen peticiones de forma continua cada 15 segundos al admin-ajax.php.

WooCommerce es uno de los plugins de Wordpress que más usan el API Heartbeat, pero es que además cuando usamos plugins o themes complejos para WooCommerce, el uso del API Heartbeat aún se intensifica más.

En la imagen anterior puedes ver cómo se puede usar Pingdom Tools para detectar si el admin-ajax.php tarda mucho en cargar y produce retrasos.

¿Cómo podemos solucionar los problemas del admin-ajax.php?

• Los problemas de sobrecarga provocados por el API Heartbeat pueden venir por el theme o por los plugins, si el problema es importante es recomendable revisar todos los plugins y el theme usando la técnica del descarte o el debug para detectar el problema.

• Podemos aumentar el tiempo entre pulsos de Heartbeat o directamente desactivar los pulsos de Heartbeat, pero si hacemos esto último debemos tener en cuenta que podemos dañar funcionalidades importantes del sitio web.

• Existen plugins como Heartbeat Control que nos ayudan a configurar el funcionamiento del API Heartbeat de Wordpress según las necesidades de nuestro sitio web, pero somos nosotros quien debemos tener idea de que plugins y theme usan Heartbeat y en qué medida.

• Un buen OPCache en el servidor como Zend OPCache puede ayudar a mitigar el efecto de Heartbeat en el consumo de recursos y en la velocidad de carga, al precachear el código procesado en las peticiones o pulsos del API.

4.4 - ¿Qué más podemos hacer para optimizar WooCommerce?

Evidentemente hay más cosas que podemos hacer para optimizar WooCommerce y Wordpress, son cosas generales que podemos hacer para optimizar cualquier tipo de sitio web independientemente de la plataforma con la que haya sido creada.

• Optimizar imágenes: Esto es algo de lo que ya hablamos varias veces en este blog, en este artículo y en este otro, creo que es una de las mejores cosas y más simples que podemos hacer para mejorar la velocidad de carga y al mismo tiempo ahorrar ancho de banda utilizado.

• Implementar un buen CDN: De esto también hemos hablado varias veces en este blog, de hecho, hemos escrito una guía completa para elegir un buen CDN para tu sitio web. Nosotros normalmente recomendamos CDN77, KeyCDN o CloudFlare.

• Minificar y combinar CSS y Javascript: Este es un terreno bastante pantanoso, ya que el nivel de implementación de estas técnicas varía mucho dependiendo del theme y plugins utilizados, pero es posible hacerlo con plugins desde Wordpress, nosotros normalmente usamos W3 Total Cache, WP Rocket o Autoptimize para aplicar esta técnica.

• Desactivar query strings: Esto puede hacerse con una función desde el functions.php del theme activo, es un procedimiento simple y realmente lo que hace es que permite al sistema de cache activo o al CDN activo cachear elementos que en otras condiciones no se cachean al cargarse con query strings.

• Carga asíncrona de javascript: Este es un tema muy apaleado, se le da demasiada importancia, realmente no mejora mucho la velocidad de carga, pero al ojo del visitante parece que la web carga antes al esperar al final del proceso de carga para cargar el javascript.

• Cache de objetos: En algunas ocasiones un cache de objetos puede complementar al cache de página y al cache de consultas a la base de datos MySQL, en Wordpress podemos cachear objetos con EM Object Cache o con W3 Total Cache.