Hace poco he hablado de WPO para optimizar Prestashop y en este blog, ya que soy consultor WordPress especializado en WPO, no podía faltar un post sobre WPO para optimizar WooCommerce.
WooCommerce es un plugin para crear y gestionar tiendas online y cualquier tipo de ecommerce con WordPress.
Apareció en el año 2011 y desde ese momento ha cambiado mucho en cuanto a apariencia y funcionalidades.
Actualmente WooCommerce + WordPress es la solución CMS más utilizada para tiendas online y ecommerce, para ser más exactos: el 4,8% de los sitios web de todo Internet tiene WooCommerce instalado en el momento de publicar este artículo.
Algo que no es raro, dado que el 33,4% de los sitios web de Internet utilizan WordPress como CMS.
WooCommerce es la mejor solución para crear tiendas online y ha facilitado el proceso de transformación digital para muchas tiendas físicas “de barrio” y muchos negocios tradicionales.
WordPress + WooCommerce han permitido la digitalización de negocios utilizando pocos recursos económicos y poco tiempo.
WooCommerce + WordPress compite contra otros CMS muy potentes como por ejemplo Magento o Prestashop.
A nivel funcionalidades podemos conseguir más o menos lo mismo con Magento y Prestashop, que con WordPress + WooCommerce, ya que actualmente existen muchos plugins y themes específicos para WooCommerce que nos permiten hacer casi cualquier cosa que nos podamos imaginar.
Pero WooCommerce tiene más problemas que Magento y Prestashop a la hora de gestionar grandes catálogos y necesita optimización WPO para acelerar la velocidad de carga y agilizar los procesos de compra de los clientes.
En este artículo vamos a hablar de WPO para optimizar WooCommerce + WordPress, vamos a intentar ser específicos, ya que en principio el WPO para WooCommerce puede parecerse mucho al WPO para WordPress, pero hay ciertas partes que cambian ya que son específicas para WooCommerce.
¿Por qué debes acelerar tu WooCommerce?
Por si no sabes cuales son las razones por las que debes invertir tiempo y esfuerzo en optimizar la velocidad de carga y acelerar tu tienda online o ecommerce creado y gestionado con WooCommerce, yo te lo voy a decir.
Existen varias razones por las que es recomendable implementar técnicas WPO en una tienda online:
- Mejorar la experiencia de usuario para mejorar la conversión.
- Mejorar los tiempos de carga para Google y para el SEO.
- Reducir el consumo de recursos de WooCommerce en el servidor o hosting.
Aunque la principal razón es mejorar la experiencia de usuario (UX) con el fin de mejorar la conversión de la tienda online, desde que Google público que la velocidad de carga es importante para el SEO, el WPO también es muy importante para el SEO.
Por otro lado, en tiendas online muy grandes, el WPO también es importante para aprovechar mejor el crawl budget que nos asigna Google para indexar el sitio web.
A continuación, te expongo varios casos reales de ecommerce grandes que mejoran su conversión utilizando WPO al mejorar la experiencia de los clientes potenciales:
- Zalando mejoro su beneficio un 0,7% simplemente mejorando en 0,1 segundos (100 ms) su velocidad de carga.
- AliExpress mejoro la velocidad de carga un 36% y al hacerlo aumento los pedidos un 10,5% y mejoro la conversión un 27%.
- Amazon calcula que, empeorando su tiempo de carga en 1 segundo, perdería 1,6 Billones al año.
Evidentemente, estas cifras solo se ven en sitios web MUY grandes, pero, aun así, aplicar técnicas WPO a tu tienda online es recomendable en la mayoría de los casos, independientemente del tamaño y la facturación.
1 – Cache de página para WooCommerce
Aunque se pueden utilizar los mismos plugins que para cualquier WordPress, en instalaciones de WordPress con WooCommerce debemos tener mucho más cuidado a la hora de aplicar un cache de página, ya que, si no lo hacemos bien, podemos llegar a cachear datos privados personales de los usuarios, con el consecuente problema que eso tiene para la LOPD.
Debemos tener cuidado con las páginas de sesión, carritos de la compra y con todas las paginas dinámicas que suele tener una tienda online.
Tenemos que excluirlas de cache aunque eso haga que el cache de página sea menos efectivo que en un blog WordPress normal, ya lo compensaremos con otras técnicas WPO como el cache de consultas a la base de datos o el cache de objetos.
Al elegir un buen plugin de cache para WooCommerce, debemos prestarle mucha atención a esto que acabamos de comentar.
Cualquiera de los tres plugins que hemos comentado en el artículo sobre plugins de cache para WordPress de este blog te servirá para WooCommerce:
- WP Rocket
- Swift Performance
- W3 Total Cache
Si queremos automatizar al máximo la configuración de cache de página en WooCommerce, lo recomendable es utilizar WP Rocket, ya que tiene unas políticas de vaciado muy competentes y suele detectar bastante bien las zonas dinámicas (aunque en algunas ocasiones es necesario especificarselas).
- Si quieres comprar una licencia de WP Rocket, puedes hacerlo desde aquí: https://alvarofontela.com/wprocket
A continuación, te dejo un vídeo de como configurar WP Rocket en WordPress:
En cuanto al Swift Performance, como he dicho en el post sobre plugins de cache para WordPress, es uno de mis favoritos a la hora de cachear tiendas online WooCommerce, pero aún le queda mucho camino por recorrer para conseguir estar a la altura de WP Rocket, ya que tiene fallos importantes de funcionamiento.
W3 Total Cache sigue siendo mi plugin de cache favorito para entornos muy dinámicos y complejos, como es el caso de algunas tiendas online y ecommerce creados con WooCommerce, ya que podemos personalizar las políticas de vaciado como queramos y las exclusiones también.
Por otro lado, con W3 Total Cache también tendremos a nuestra disposición la posibilidad de configurar cache de objetos y cache de consultas a la base de datos, dos elementos que ayudan bastante en tiendas online WooCommerce.
En el siguiente vídeo puedes ver como configurar W3 Total Cache para WooCommerce + WordPress recalcando los puntos clave para ajustar los caches de cara a WooCommerce y sus partes dinámicas:
Adicionalmente hay otro plugin más que quiero comentar, pero como no es general como los anteriores, prefiero tratarlo aparte.
En el caso de proveedores de hosting que utilicen LiteSpeed, como es el caso de Raiola Networks y sus hosting compartido, puedes utilizar el plugin de cache LSCache que puedes encontrar en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/litespeed-cache/
Curiosamente, este plugin también se puede utilizar con otros servidores web como Apache, Nginx o cualquier otro, aunque algunas funcionalidades relacionadas con el cache estarán limitadas o desactivadas por completo.
LiteSpeed Cache es un plugin muy potente que permite aplicar técnicas WPO muy potentes y al mismo tiempo nos permite controlar el LSCache de LiteSpeed, es una buena alternativa para implementar cache de página en WooCommerce, e incluso tiene compatibilidad con cache de objetos.
Por último, decir que WordPress + WooCommerce es una combinación que puede tardar bastante en cargar si no se usa un cache de página, ya que al añadir WooCommerce a la ecuación aumenta bastante el código PHP y scripts que deben ejecutarse.
Un cache de página es imprescindible para que tu tienda online WooCommerce cargue rápido y es la técnica WPO base para optimizar WooCommerce.
En la siguiente imagen puedes ver la diferencia de velocidad de carga con cache y sin cache, utilizando el plugin WP Rocket sobre un WordPress de ejemplo:
Y en esta imagen puedes ver la mejora la velocidad de carga desde el punto de vista del bot de Google y el crawl budget al implementar un cache de página en un sitio web y mejorar sus tiempos de respuesta:
Como puedes ver, el simple hecho de configurar un cache de página en WordPress puede ayudarte a mejorar la experiencia de usuario y el SEO on Page de tu sitio web.
2 – Cache de objetos en WooCommerce
Al contrario que Prestashop, WordPress no lleva incluido ningún cache de objetos por lo que para implementarlo debemos utilizar un plugin.
Con el cache de objetos conseguimos que ciertas partes de PHP se guarden en un cache que normalmente se guarda en la memoria RAM (Memcached, Redis, APC, XCache, etc…) y de esta forma se accede de forma más rápida a esos datos.
El cache de objetos es muy común en aplicaciones web, y en el caso de sitios web WordPress.
Antes de nada, debemos tener en cuenta que para utilizar un cache de objetos basado en memoria RAM como Memcached o Redis, el servidor o hosting que usemos debe tener el servicio Memcached o Redis funcionando, de otra forma no podremos configurar cache de objetos en memoria RAM.
Normalmente para tener Memcached, debes tener un servidor VPS o servidor dedicado, como por ejemplo los servidores VPS optimizados de Raiola Networks que llevan Memcached de forma predeterminada.
Existen varios plugins para configurar cache de objetos en WordPress, pero hay que distinguir los que funcionan correctamente.
Yo normalmente hago la siguiente recomendación:
- Si utilizas W3 Total Cache para cachear páginas en WordPress + WooCommerce, puedes utilizar la funcionalidad de cache de objetos de W3 Total Cache para configurarlo.
- Si utilizas otros plugin de cache para cache de página, yo normalmente recomiendo el plugin Memcached Redux para cache de objetos en Memcached y si necesitas utilizar Redis, te recomiendo el plugin Redis Object Cache.
En el vídeo que hemos mostrado anteriormente en la sección de cache de página, puedes ver la configuración de W3 Total Cache con su cache de objetos y su cache de consultas a la base de datos MySQL o MariaDB de WordPress:
Si vas a utilizar el plugin Memcached Redux, debes tener en cuenta que no tiene interfaz gráfica y que su configuración puede resultar algo compleja para usuarios principiantes.
En el siguiente vídeo que he grabado para ti, puedes ver como configurar Memcached Redux en WordPress:
Puedes encontrar Memcached Redux en el repositorio de plugins de WordPress para su descarga gratuita: https://es.wordpress.org/plugins/memcached-redux/
3 – Cache de consultas MySQL en WooCommerce
Esta es una técnica WPO bastante efectiva, pero compleja de implementar en la mayoría de las ocasiones.
El problema es que WooCommerce realiza bastantes consultas a la base de datos MySQL o MariaDB de WordPress, sobre todo cuando usamos themes complejos o una gran cantidad de plugins que guardan y leen información en la base de datos.
¿Cuál es la razón por la que es complicado configurar un cache de consultas MySQL?
Pues bien, el problema es que antes existían más plugins para implementar y configurar cache de consultas MySQL en WordPress, pero ahora mismo solo podemos implementarlo con W3 Total Cache de forma efectiva.
Antes podíamos hacerlo con Next Level Cache y DB Cache Reloaded Fix, pero el primero no llego ni a su versión final y el segundo el desarrollo quedo descontinuado.
Bien, el tema es que, si no utilizamos W3 Total Cache para cache de página y cache de objetos, NO nos compensa implementar W3 Total Cache solo para configurar cache de consultas a la base de datos, por eso, cuando es así, lo mejor es configurarlo en el servidor realizando un proceso de optimización de MySQL.
Para optimizar el motor de bases de datos MySQL o MariaDB del servidor, debemos tener contratado un servidor VPS o un servidor dedicado, ya que en hosting compartido no podemos realizar el proceso.
Si tú no tienes idea de cómo optimizar un servidor MySQL o MariaDB, lo mejor es que contrates a un profesional administrador de sistemas que te ayude.
Por si te interesa, existen scripts que monitorizan el funcionamiento del servidor MySQL / MariaDB y te recomiendan parámetros y variables de configuración en base al uso, entre ellos el query cache o cache de consultas.
El que yo utilizo se llama MySQLTuner y es utilizable tanto en MySQL como en MariaDB.
4 – Optimizar CSS y JavaScript en WooCommerce
No voy a entrar mucho en este tema, ya que en este blog ya he hablado extensamente sobre como optimizar código CSS y JS en WordPress y en este caso el proceso y las acciones son exactamente las mismas que para WooCommerce funcionando sobre WordPress.
Cuando instalamos WooCommerce sobre WordPress para crear una tienda online, se añaden a la carga de la web muchos scripts JavaScript y algunas hojas de estilos CSS.
Y cuanto más complejo sea el theme utilizado, más scripts JavaScript y hojas de estilos CSS se añaden a la carga del sitio web, ralentizando la carga de toda la web.
Podemos realizar varias acciones para optimizar la carga de código CSS y JavaScript:
- Minificar CSS y JS: Reducir el tamaño de los archivos JS y CSS eliminando algunas partes que no se interpretan en el navegador.
- Combinar CSS y JS: Unir varios archivos del mismo tipo en un único archivo para simplificar la carga y reducir las peticiones.
- Carga asíncrona de JS: Carga asíncrona (paralela) de archivos y scripts JavaScript para agilizar la carga, siempre teniendo en cuenta las dependencias, como en el caso de jQuery.
- Optimizar la entrega de CSS: En algunas ocasiones puede bloquearse la visualización de CSS, debemos optimizar su entrega para no tener problemas con la carga de CSS.
Como he dicho, ya he hablado largo y extenso sobre este tema en este blog, puedes encontrar el articulo completo aquí y puedes aplicarlo a tu WooCommerce: https://alvarofontela.com/optimizar-carga-javascript-css-wordpress/
La optimización de carga de CSS y JS es un proceso complejo que podemos realizar de forma manual y automática; la parte mala es que para realizarlo de forma manual debemos ser programadores y conocer a la perfección el código que vamos a tocar, y para hacerlo de forma automática mediante plugins, es un proceso basado en patrones que suele fallar bastante en themes complejos y sitios web con muchos plugins que se cargan en el front-end.
Antes de acabar con este punto, quiero enseñarte las ventajas que puede tener la optimización de código CSS y JS en un sitio web.
En la siguiente imagen puedes ver cómo puede afectar de cara al bot de Google el hecho de optimizar la carga de JS y CSS (sobre todo de JavaScript):
Cuanto más grande sea el sitio web, más se notarán en el SEO las técnicas WPO aplicadas al CSS y JS del sitio para simplificar la carga.
5 – Optimizar de imágenes y fotos en WooCommerce
Siempre digo y repito lo mismo, el 99% de los sitios web de Internet tienen un problema de optimización y escalado de imágenes.
Normalmente los autores y editores de sitios web suben las fotos en tamaño original y en muchos casos directamente desde la cámara, y esto es un problema.
Como siempre digo, podemos optimizar las imágenes en el ordenador antes de subirlas con PhotoScape o PhotoShop; o al subirlas al WordPress utilizando plugins de optimización de imágenes como Imagify o reSmushit.
Estos dos que acabo de mencionar son los dos plugins que yo suelo utilizar, por un lado, Imagify de pago por uso (de los creadores de WP Rocket) y por el otro reSmush.it como opción gratuita.
Para reescalar imágenes, también suelo utilizar el plugin Imsanity, un plugin gratuito que sirve solo para reescalar, es decir, no optimiza.
La optimización de imágenes en WordPress, es exactamente igual que en casos donde tenemos un WooCommerce con WordPress.
Las tiendas online o ecommerce tienen siempre muchas imágenes, y debemos optimizarlas para garantizar que la velocidad de carga es la correcta para los visitantes.
Debemos recordar que las imágenes son normalmente, la parte más pesada de cualquier sitio web.
En el siguiente vídeo puedes ver como optimizar las imágenes de un sitio web utilizando Imagify:
Como ves, Imagify es muy fácil de configurar y de utilizar, además Imagify es uno de los mejores plugins en relación compresión tamaño / perdida de imágenes y fotos.
Como he dicho antes, Imagify es un plugin de pago por uso, es decir, para optimizar imágenes con el tienes que pasar por caja, aunque el plugin puedes descargarlo de forma gratuita en su sitio web oficial o en el repositorio de plugins de WordPress: https://raiola.link/imagifyplugin
Y por otro lado tenemos el plugin ReSmush.it que utiliza el API ReSmush.it para optimizar las imágenes y que, además de ser completamente gratuito, tiene muy poca configuración.
El uso del API y el plugin de reSmush.it es gratuito, pero el tamaño máximo de archivo (de cada imagen) es de 5MB.
Puedes descargar el plugin reSmush.it de forma completamente gratuita en el repositorio de plugins de WordPress: https://wordpress.org/plugins/resmushit-image-optimizer/
OJO: No confundas reSmush.it con SmushIt, son plugins diferentes y servicios API de optimización de imágenes diferentes.
El plugin Imsanity es muy simple, sirve solo para reescalar las imágenes y evitar que se muestren imágenes demasiado grandes redimensionadas por CSS en sitios más pequeños.
Puedes encontrar el plugin Imsanity para WordPress en el repositorio de plugins de WordPress: https://wordpress.org/plugins/imsanity/
Simplemente aclarar una cosa final, y es que no es lo mismo servir una imagen de 67Kb que servir una imagen de 362Kb, hay diferencia en tiempos de carga tal y como puedes ver en esta prueba de Pingdom Tools:
Y por eso, cuanto menos pesen las imágenes de tu sitio web, más rápido va a cargar.
Después entran en juego otros factores que pueden optimizar la carga de las imágenes, como por ejemplo la implementación de un CDN.
6 – Configurar un CDN en WooCommerce
Como siempre, recalcó la importancia de un servicio CDN para optimizar la velocidad de carga de un sitio web sea cual sea.
El tema, es que si tenemos un sitio web internacional, un CDN cobra especial importancia al permitirnos servir contenidos estáticos desde servidores más cercanos al visitante.
En un artículo en este blog ya expliqué con pelos y detalles como implementar un CDN en WordPress, concretamente KeyCDN:
Como puedes ver en la siguiente imagen, si realizamos una prueba de carga con Pingdom Tools a un servidor en España desde un origen lejano, con y sin CDN, se nota la diferencia:
Y debemos tener en cuenta que la prueba anterior se realiza con una imagen, si tenemos en cuenta que las webs suelen cargar entre 50 y 250 elementos, al final se nota mucho la diferencia.
Como he dicho, el proceso de configurar un CDN en WordPress es el mismo que configurarlo en un WooCommerce + WordPress, los plugins son los mismos. Puedes encontrar las instrucciones aquí: https://alvarofontela.com/configurar-cdn-en-wordpress/
La implementación de casi todos los CDN se realiza con un plugin de cache como WP Rocket o W3 Total Cache (la mayoría de plugins de cache permiten configurar un CDN) o con el plugin Domain Sharding.
Primero debemos crear varios CNAMEs o subdominios apuntando al hostname que nos da el servicio CDN y después podemos utilizar los plugins anteriormente mencionados para configurar WordPress para que cargue los estáticos desde los subdominios o CNAMEs.
Si tuviera que recomendar servicios de CDN, yo me quedo con estos como siempre digo:
- CDN77: Se trata de un CDN bastante eficiente con bastantes puntos de presencia (POPs) en América Latina, por lo que es ideal para sitios web hispanohablantes.
- KeyCDN: Es un CDN muy potente y puntero tecnológicamente, de los primeros en implementar Let´s Encrypt.
- Amazon CloudFront: Se trata de un CDN que se encuentra dentro del stack de Amazon AWS y que cuenta con muchísimos puntos de presencia (POPs) alrededor del mundo.
Y en algunos casos, también CloudFlare, aunque es diferente a los anteriormente mencionados.
CloudFlare es un CDN completamente diferente, su implementación con WooCommerce puede llegar a ser diferente, ya que actúa como proxy inverso / cache para todo el sitio web.
Si quieres más información sobre cómo implementar CloudFlare como CDN en WooCommerce, puedes ver el artículo que he publicado en este blog sobre CloudFlare: https://alvarofontela.com/cloudflare-cdn-optimizar-web-blog/
7 – El hosting o servidor, y la versión de PHP
No puedo acabar esta guía de WPO para WooCommerce sin hablar del hosting o servidor, ya que es una parte muy importante en la velocidad de carga de cualquier sitio web y más en el caso de WordPress con WooCommerce.
Si el servidor no es lo suficientemente potente, las paginas cargaran lento. En el caso de WooCommerce, en páginas o secciones que NO se pueden optimizar con un cache de página, si el servidor es lento, podemos encontrarnos con problemas importantes de carga.
Independientemente de la potencia, en el hosting o servidor hay dos características que debemos tener en cuenta y que van a afectar al rendimiento de nuestra tienda online WooCommerce + WordPress:
- Servidor web: Puede ser Apache, Nginx o LiteSpeed, normalmente es uno de estos tres, aunque lo más recomendable es que sea cualquiera menos Apache o al menos que Nginx o Varnish estén como proxy inverso para Apache.
- Versión de PHP: Esto ha cambiado actualmente, la mayoría de proveedores de hosting y paneles de control permiten elegir la versión de PHP utilizada y lo recomendable es que sea PHP 7.0 o superior.
Para que veas la diferencia en la velocidad de carga, en esta gráfica puedes ver la diferencia de rendimiento entre las distintas versiones de PHP:
En Raiola Networks utilizamos LiteSpeed como servidor web en toda la plataforma de hosting compartido, hosting avanzado y hosting reseller.
En los servidores VPS optimizados utilizamos Nginx como proxy inverso y cache para Apache.
Cuando tenemos tiendas online WooCommerce muy grandes, debemos tener en cuenta lo mismo que cuando tenemos grandes instalaciones Prestashop o Magento, es decir, necesitamos un servidor VPS o servidor dedicado para poder utilizar algunas características como puedes ser el cache de objetos en Memcached y la optimización de la base de datos MySQL / MariaDB y el query cache.
8 – Tweaking y optimización de WooCommerce
Para finalizar el manual de WPO para WooCommerce + WordPress, vamos a hablar de algunos ajustes que podemos hacer en nuestro WordPress + WooCommerce.
La mayoría de técnicas WPO que voy a comentar a partir de ahora son específicos para WooCommerce o para WordPress, no aplicables a otros CMS como todo lo anterior.
8.1 – Desactivar scripts de WooCommerce
Como ya he dicho en una ocasión a lo largo de este artículo, WooCommerce añade ciertos scripts a la carga del CMS y eso hace que se ralentice la carga de toda la web.
Uno de los problemas es que estos scripts se añaden a la carga de TODA la web, incluso en zonas donde no se necesitan. Pero podemos solucionar esto, podemos hacer que los scripts de WooCommerce no se carguen en zonas donde no se necesitan: blog, paginas estáticas, etc…
Después de instalar WooCommerce sobre WordPress, estos son algunos scripts que se añaden a la carga de la web:
- woocommerce-layout.css
- woocommerce-smallscreen.css
- add-to-cart.min.js
- min.js
- cart-fragments.min.js
Cuando instalamos algunos plugins para WooCommerce o ponemos un theme complejo, se añaden muchos más scripts JavaScript y hojas de estilos CSS.
Bien, ¿Cómo podemos desactivar estos scripts de WooCommerce para que no se carguen donde no se necesitan?
Podemos hacerlo mediante código en el functions.php del theme activo, y aunque es una acción que debemos controlar bien, es un método fácil y gratuito.
Con el siguiente código en el functions.php del theme activo puedes desactivar los scripts de WooCommerce en zonas donde no se necesitan, aunque puede tener que ajustar el funcionamiento del código en algunos casos excepcionales:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php //* Incluir en el functions.php y personalizar /** * Manage WooCommerce styles and scripts. */ function grd_woocommerce_script_cleaner() { // Remove the generator tag remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) ); // Unless we're in the store, remove all the cruft! if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { wp_dequeue_style( 'woocommerce_frontend_styles' ); wp_dequeue_style( 'woocommerce-general'); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce_fancybox_styles' ); wp_dequeue_style( 'woocommerce_chosen_styles' ); wp_dequeue_style( 'woocommerce_prettyPhoto_css' ); wp_dequeue_script( 'selectWoo' ); wp_deregister_script( 'selectWoo' ); wp_dequeue_script( 'wc-add-payment-method' ); wp_dequeue_script( 'wc-lost-password' ); wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-credit-card-form' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'jquery-payment' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } } add_action( 'wp_enqueue_scripts', 'grd_woocommerce_script_cleaner', 99 ); |
Como pone en los comentarios, debemos personalizar el funcionamiento de este script antes de pegarlo en el functions.php del theme activo si no queremos problemas.
Esto, si lo queremos hacer de forma automatizada con un plugin, tenemos una opción.
Perfmatters, un plugin del que ya he hablado en este blog y que sirve para implementar ciertos tweaks en WordPress y en WooCommerce, ya que tiene una sección entera dedicada a WooCommerce.
Además de eso, Perfmatters también permite realizar carga condicional como vamos a especificar en la siguiente sección.
- Si quieres comprar Perfmatters para WordPress puedes hacerlo desde aquí: https://alvaro.click/perfmatters
Desactivar la carga de estos scripts es importante, sobre todo cuando tenemos un blog WordPress integrado en la misma instalación de la tienda online.
8.2 – Carga condicional de elementos en WooCommerce
La carga condicional o como yo le llamo, carga inteligente, es una técnica WPO que se ha empezado a aplicar hace relativamente poco, ya que antes era mucho más difícil de aplicar debido a que había que hacerlo de forma manual.
En el artículo que he escrito hace algún tiempo sobre optimización de la carga de CSS y JS en WordPress explico cómo hacer carga condicional con Perfmatters o con Scripts Dequeuer, aunque también hay otro plugin para hacer esto llamado Gonzales.
Con la carga condicional conseguimos cargar lo que se necesita donde se necesita, es decir, podemos hacer que ciertos scripts JavaScript y hojas de estilo CSS no se carguen si no se necesitan, consiguiendo una carga mucho más efectiva y ágil, menos sobrecargada.
Puedes ver cómo realizar carga condicional de CSS y JS en WordPress en el post sobre optimización de la carga de CSS y JS: https://alvarofontela.com/optimizar-carga-javascript-css-wordpress/#carga_condicional_de_javascript_y_css_en_wordpress
8.3 – Optimizar el API HeartBeat en WooCommerce
El API Heartbeat es una de las partes más importantes de WordPress, pero al mismo tiempo, actualmente es una de las partes de WordPress que más recursos consumen.
Normalmente el API Heartbeat funciona mediante el archivo admin-ajax.php de WordPress, aunque actualmente puede funcionar con otras funciones o fragmentos.
Lo que hace esta API es comunicar código AJAX con el núcleo de WordPress y eso hace que funcionen los dinamismos de WordPress.
En WooCommerce la carga del API Hearbeat se acentúa y en themes muy complejos con muchas funciones dinámicas podemos encontrarnos problemas de consumo de recursos en PHP.
¿Qué podemos hacer? Pues retrasar el tiempo entre pulsos de Heartbeat o desactivar la funcionalidad, aunque cuando usamos WooCommerce, la opción de desactivar por completo el API HeartBeat desaparece, ya que puede darnos muchos errores en búsquedas y filtrados entre otras funcionalidades de WooCommerce.
Precisamente tengo publicado un post en este blog sobre como optimizar esta funcionalidad de WooCommerce, puedes leerlo aquí: https://alvarofontela.com/api-heartbeat-admin-ajax-php-wordpress/
8.4 – Optimizar el wp-cron.php en WooCommerce
El wp-cron.php de WordPress es otra de las funcionalidades de WordPress que consumen bastantes recursos, tal y como ya expliqué en este blog en este artículo: https://alvarofontela.com/wp-cron-php-wordpress-configurar-desactivar/
El wp-cron.php de WordPress es una funcionalidad que sirve para ejecutar tareas programadas en WordPress, tanto del núcleo de WordPress, como de los plugins y el theme.
Su funcionamiento es bastante “raro” y su sistema de ejecución no es del todo efectivo, ya que en la comprobación de tareas programadas se desperdician muchos recursos sin necesidad.
Por esta razón, tal y como expuse en el artículo enlazando anteriormente, en WordPress, debemos desactivar su wp-cron.php y su ejecución por visitas HTTP para pasar a ejecutar el wp-cron.php mediante el CRON de Linux cada 5 o 15 minutos.
Con esto reduciremos considerablemente el consumo de recursos de PHP en instalaciones WordPress que tengan muchas visitas (sin cachear).
8.5 – Optimizar WooCommerce para ecommerce grandes
Aunque no existe un método exacto a la hora de optimizar tiendas online y ecommerce WooCommerce para grandes catálogos de productos con muchas variaciones y muchas opciones, sí que es cierto que hay algunos tweaks que podemos hacer para que la velocidad de estas tiendas online tan grandes sea mejor.
Empezamos por la base: una tienda online con muchos productos hace consultas a la base de datos que son muy grandes, por eso debemos optimizar estas consultas.
Para esto, hace relativamente poco apareció un nuevo plugin desarrollado por Premmerce y que optimiza este tipo de consultas en instalaciones WooCommerce muy grandes.
El plugin en cuestión se llama Premmerce WooCommerce Performance Optimizer y aunque es muy fácil de configurar y tiene pocas opciones, teóricamente por detrás es capaz de optimizar todas las consultas realizadas a la DB en WooCommerce mejorando su eficiencia.
No he podido probar en mis carnes en un entorno indicado este plugin, por lo que solo puedo aportar lo que dice su desarrollador en su página de ventas en su web oficial y también debo fiarme de las pruebas que muestra, aunque pueden ser reales.
Puedes encontrar más información acerca del plugin Premmerce WooCommerce Performance Optimizer en la siguiente URL: https://premmerce.com/woocommerce-performance-optimizer/
Otra cosa que puedes hacer a la hora de optimizar un WooCommerce con un catálogo de productos muy grande es optimizar el motor de DB MySQL del servidor manualmente, algo que ya hemos comentado antes.
Cuando se trabajan con consultas de muchos datos en la base de datos, necesitamos optimizar las consultas y el motor de base de datos para optimizar los tiempos de respuesta, e incluso cachear las respuestas para que todo sea mucho más rápido y eficiente, es decir, que además de tener unos buenos tiempos de respuesta, que se consuman pocos recursos al ejecutar las consultas.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
17 Responses
Gran post Alvaro fiel seguidor tuyo!! Tengo una duda sobre una web que al meter cualquier plugin de velocidad tiene una puerta de edad para filtrar a menores xq es venta de vapers etc y no me va . Alguna idea por donde puede ir los tiros? Un Saludo y espero verte en directo en algún evento
Hola Gonzalo, ¿que fallo te da? ¿Se queda “pagado simplemente”?
Esa pagina esta generada con un parametro GET o con una pagina independiente?
Es que todo esto puede variar la respuesta, dado que tienes que añadir una exclusion al plugin de cache de WordPress y dependiendo de que plugin sea vas a poder o no, dependiendo de la forma de funcionar que tenga la “puerta de edad”.
Si quieres, mandame con el formulario de contacto de esta web la URL y reviso que veo desde fuera.
Mandame tambien el plugin que usas para la puerta de edad y el plugin de cache que quieres implementar.
Un saludo.
Hola Álvaro¡¡
Cuando al principio del post haces un repaso a los plugins de caché y al final hablas del plugin LSCache para utilizar en hosting con tecnología LiteSpeed cómo Raiola (mi hosting) me queda la duda de si recomiendas utilizar LSCache o no.
Y en caso de recomendar utilizarlo, si lo recomiendas en exclusiva o con algún otro (si es que es compatible usar dos o más plugin para optimizar el caché).
Un saludo y gracias por ilustrarnos
Hola Joaquin.
Antes de nada, decir que solo puede haber un plugin de cache activo, no se pueden combinar (salvo excepciones especificas) si no quieres que explote todo.
Una vez dicho esto, recomiendo LSCache siempre y cuando se utilice LiteSpeed, sin LiteSpeed, WP Rocket es mas efectivo (y mas útil).
De todas formas, LSCache tiene una configuración mucho mas compleja que WP Rocket, y eso para muchos usuarios es limitante en casos de webs complejas como tiendas online WooComerce.
Un saludo.
Siguiendo todas estas recomendaciones, ¿cuantos productos puedo tener en woocommerce? mi idea es que sea un catalogo sin la funcionalidad de compra, creo premmerce tiene un plugin para eso, tengo un negocio de lubricantes y si que son alrededor de 2000 productos y las variaciones son por el tipo de presentación (litro, galon, cubeta, contenedor)
Saludos
Hola Vale, 2000 con variantes en un WooCommerce sin problemas, y mas utilizando un plugin para sacar las funcionalidades de compra, ya que de esta forma podrás cachear los listados con un plugin como WP Rocket y acelerar muchísimo la velocidad de carga de tu sitio, sin consumir tantos recursos como un WooCommerce normal.
Un saludo.
Hola Álvaro, genial el artículo.
Te quería preguntar sobre el tiempo de vaciado de la caché. Por ejemplo, si cada 2 o 3 días estoy añadiendo productos nuevos debería vaciarla constantemente? Por otro lado, para una tienda virtual muy grande donde se agota rápido el stock, se debería programar un vaciado diario?
Muchas gracias y un saludo.
Hola Alejandro, es mas, con una tienda online yo te recomendaría bajar el TTL del cache a unas 24 horas.
Incluso sacrificaría potencia, para vaciar cache cada 12 horas.
Hola Alvaro,
Gracias por el artículo. Que opinas de cachear ciertas llamadas AJAX? Tengo una tienda online en la que utilizo ajax para la paginación/filtrado de productos (jet smart filters) y aunque la cache de pagina haga que la carga inicial sea practicamente instantanea, en cuando se aplica algun filtro o se mueve de pagina se nota que hay que esperar al servidor.
Gracias.
Hola Jesus, justo un amigo me llamo esta mañana para preguntarme sobre esto jajaja
Aer, si quieres cachear AJAX hay que hacerlo bien, porque puede haber distintos tipos de implementaciones y pueden dar problemas.
Es decir, yo no me metería a esto: https://www.shift8web.ca/2018/11/how-to-cache-queries-to-admin-ajax-php-in-wordpress-to-improve-performance/
Pero si a Swift Performance, que lo permite.
Muchas gracias.
La verdad es que por algun motivo Switf no estaba funcionando bien y el ajax dejaba de funcionar. He decidido programar algo de andar por casa que de momento funciona bien: https://pastebin.com/H2tgzRXc
El codigo deberia ir en advanced-cache.php de wordpress aunque supongo que tambien se puede hacer con hooks.
No tiene ningun control de expires asi que hay que borrar a mano los ficheros cuando se actualiza algo pero por algo se empieza.
Hola Jesus, este código me suena, puede ser el que tiene el CPO de WP Rocket en su Github?
De todas formas, gracias por compartirlo.
Hola a todos. No se si es a mi solo al que le pasa pero no veo a woocommerce optimizado para comercio electronico en tanto y en cuanto velocidad. Actualmente utilizo prestashop (ultima version) aunque estoy puliendo los ultimos retoques para lanzarla definitivamente veo una gran diferencia teniendo en cuenta que esta sin ninguna cache y he realizado pruebas anteriormente con woocommerce igualmente sin cache y despues con litespeed y prestashop seguia ganandole con diferencia. Ademas las pruebas las realice en diferentes servidores (hasta en 4) y en todos prestashop se lo comia. Habria que ver wordpress + woocomerce con el resto de plugins basicos….
Hola Toni, en muchos casos tienes razón, aunque Prestashop el problema que tiene son los problemas que da…que son bastante comunes…además que para actualizar de una rama estable a otra rama estable casi tienes que rehacer la tienda de nuevo…
Hola Alvaro, entiendo que prestashop cuando empezo la rama 1.7 era una mi… hablando claro, tenia tantos problemas que haciendo caso a los profesionales mejor haber continuado con la 1.6.
Pero desde que esta en la 1.7.7.x se ha estabilizado. Tal como comente anteriormente si no fuese por la lentitud de woocommerce me habria cambiado a este.
Saludos.
Hola, Álvaro.
Estoy en un hosting económico donde la web me da error 500 ó 503 al querer entrar. Sospecho que es woocommerce. Pero, pregunto, ¿tan pesado es este plugin que no puede ser usado en un hosting compartido? A penas estaba subiendo unos 70 artículos y ya fue imposible seguirlo usando. Tuve que desactivar todos los plugins para ir probando y mi principal sospechoso es woocommerce.
Hola Cesar, no deberia dar problema de recursos, salvo que el theme sea pesado y tengas unos cuantos plugins para WooCommerce instalados. Los 70 articulos dan igual, como si tienes 50.000, el problema suelen ser los plugins complementarios para WooCommerce y el theme.
El error 500 o el 503 pueden ser por más cosas, no solo por recursos.