Como acelerar la carga de tu tienda online WooCommerce

Cada vez son más los usuarios de tiendas online que están migrando de soluciones específicas, tipo PrestaShop o Magento a WooCommerce, el fantástico plugin para crear tiendas online desde WordPress.

Los motivos de la decisión son variados, pero en su mayor parte son debidos a una de estas razones:

Y creo que no hay duda sobre las ventajas de SEO de WordPress y cualquier producto asociado, pero hay otro elemento que también influye enormemente en el posicionamiento: la velocidad de carga.

Esto es especialmente importante en una tienda online, donde una tienda de carga rápida de los productos marca la diferencia sobre otra que sea lenta.

acelerar woocommerce tienda online

Porque vale que el SEO es importante para atraer a los usuarios a nuestra tienda online pero si luego no compran porque nuestra tienda se arrastra y tarda en mostrar los productos, la imagen será pobre y repercutirá en las ventas, negativamente.

En consecuencia, es importante, casi vital, garantizar la carga rápida de nuestra tienda online. Y más allá de los consejos generales para acelerar WordPress, que también, deberíamos aplicar medidas específicas para nuestra tienda, en este caso WooCommerce.

Y algo de lo que abunda en WooCommerce son los scripts y estilos de la tienda, importantes para ofrecer una experiencia fácil y profesional de nuestro comercio online, pero que si no se controlan pueden ralentizar la web enormemente, por la cantidad de ellos que se utilizan.

Así que un acción que mejorará la carga de nuestra tienda con WooCommerce será optimizar la carga de scripts y estilos.

Asuntos a considerar antes de empezar:

  • ¿Tienes algún elemento en tu web que dependa de los scripts de WooCommerce aparte de las páginas de WooCommerce (carrito, tienda, pagos, etc)? Me refiero a algún enlace al carrito en la cabecera, o widgets de barra lateral repartidos por toda la web.
  • ¿Tienes un entorno para hacer pruebas? Ya que no conviene hacer experimentos en tu tienda en directo.
  • No debes tener miedo de editar los archivos y código de tu tema.

Si tienes claro lo anterior empezaremos echando un vistazo a qué scripts podemos quitar de áreas de tu web que no sean exclusivamente WooCommerce.

¿Qué scripts de WooCommerce podemos quitar?

Abre tu sitio WordPress con WooCommerce instalado y activo. Echa un vistazo al código y verás un montón de archivos JavaScript y CSS específicos de WooCommerce, así como meta tags y un montón de parámetros relacionados con WooCommerce.

Echa un vistazo a esta captura de una tienda WooCommerce para saber de lo que estamos hablando …

scripts y css woocommerce

Scripts

  • woocommerce.min.js
  • checkout.js
  • add-to-cart.min.js
  • jquery.cookie.min,js
  • cart-fragments.min.js
  • jquery.blockUI.min.js
  • jquery.placeholder.min.js
  • … muuuuchos más en ocasiones, no digamos si añades plugins de utilidad.

Estilos

  • woocommerce.css
  • Estilos lightbox (como pretty photo, fancybox y otros)
  • CSS personalizados de WooCommerce
  • … más CSS adicionales, dependiendo de tu instalación.

Como has visto la lista no es para tomársela a broma. Todos estos scripts y estilos incrementan el tiempo de carga de tu web, de tu tienda online, y huelga repetir que una web lenta consigue menos ventas, menos ingresos.

El código que optimizará los scripts de tu WooCommerce

¡Basta de charla y teoría, manos a la obra!

Lo que vamos a hacer para eliminar la carga de todos los scripts WooCommerce en páginas que no sean de WooCommerce es utilizar la función wp_dequeue_style.

El siguiente código deberás añadirlo al final del archivo functions.php del tema activo en tu tienda WooCommerce, no en un plugin:

/**
* Optimiza los scripts de WooCommerce
* Quita la tag Generator de WooCommerce, estilos y scripts de páginas no WooCommerce.
*/
add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );

function child_manage_woocommerce_styles() {
//quitamos la tag generator meta
remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );

//Primero comprobamos si está instalado WooCommerce para evitar errores fatales
if ( function_exists( 'is_woocommerce' ) ) {
//y aplicamos el dequeue a scripts y estilos
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
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-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( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}

}

Una vez hayas añadido el código revisa el código de tus páginas no WooCommerce. Deberías ver que han desaparecido todos los estilos, scripts y meta tags de WooCommerce, y todo debería ir mucho más rápido. En varias pruebas está comprobado que reduce los tiempos de carga en 2 o 3 segundos (por lo menos).

Si necesitas que cargue algún script concreto, com jQuery UI o FancyBox, entonces comenta la línea del susodicho para que no haga dequeue de ese script específico.

Es importante que te fijes en los condicionales que utiliza el código: ! is_woocommerce() && ! is_cart() && ! is_checkout(). Si necesitas cargar scripts WooCommerce en tu web, fuera de las páginas de pago y tienda, puedes modificar fácilmente este script para que se adapte a esa situación concreta. Por ejemplo, si también quisieras cargar los scripts de WooCommerce en la portada de tu web deberías añadir la condición !is_home.

Nota: si no requieres personalización del código, o no te sientes cómodo modificando archivos del tema, puedes descargar este plugin, que aplica el mismo código que hemos visto aquí.

Conclusión

Si usas WooCommerce es vital que te tomes en serio optimizar su rendimiento y tiempos de carga. No solo es importante que apliques reglas para mejorar la velocidad de la instalación de WordPress en su conjunto, que también, sino que si realmente quieres vender productos y ofrecer una buena experiencia de comercio online y obtener beneficios deberías tomarte en serio la optimización de la tienda online, de WooCommerce.

Son muchos scripts y estilos los que se cargan, y una estrategia inteligente mejorará la experiencia de navegación de tus visitantes, y tus ventas.


 

¿Sabes algún truco más para optimizar WooCommerce

Como siempre, aquí no acaba la cosa, si sabes algún otro truco o código que ayude a optimizar la carga de una tienda online WooCommerce estamos deseando aprender también contigo, compártelo en los comentarios.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(31 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

15 comentarios en “Como acelerar la carga de tu tienda online WooCommerce”

  1. El problema en mi caso es que estoy sobre un proyecto en que la tienda «is_cart» y también «is_checkout». Desde luego la carga de javascript es demencial. Desde hace días me encuentro probando métodos como compresión, concatenado y carga asincrónica (para aliviar lo referente a JS) y recursos de caché que no terminan de convencer (para aligerar la carga dinámica). A ver en qué termina esto. Buen artículo Fernando, por cierto.

  2. Para empezar ese artículo es de hace más de 3 años, y entonces a WordPress le faltaba un hervor para eCommerce, algo que actualmente ha cambiado enormemente.

    Conozco y uso PS y Magento y tengo que decir que a día de hoy se han quedado atrás. Hoy mi primera opción de recomendación para una tienda online sería WooCommerce. No solo ofrece un ecosistema fantástico y fácil de configurar y usar, sino que le suma las características inherentes de WordPress además de ahorrarte una pasta gansa en módulos adicionales que tendrías que instalar (de pago) en otros CMS especializados.

    De todos modos, este post es para mejorar la velocidad de WooCommerce, no un debate, igual iría mejor esta discusión en el artículo que has enlazado 🙂

    Gracias.

    1. Gracias por contestar. No estaba interesado en crear un debate, quería saber tu opinión. He empezado en el mundo ecommerce y tengo el gusanillo de saber si tome una buena decisión al elegir woocommerce en vez prestashop o magento. En España he visto que es líder Prestahop, las empresas ya sacan módulos para Prestahop pero aun no para woocommerce, ejemplo mrw y la gestión de pedidos.

      Entonces me ha hecho mucha gracia ver que en 3 años (que a mi me parece poco) un profesional que no recomendaba woocommerce, ahora para él, es la recomendación principal, a ver que pasara dentro de otros 3 años.

      Gracias por tu respuesta,
      Saludos!

      1. No hay problema, has preguntado y no debía dejarte sin respuesta 🙂

        Ya te digo que hace unos años WooCommerce estaba muy verde pero a día de hoy es el sistema más usado en USA y UK, y va camino de serlo en España también.

        Es un software potente, fácil de usar, aprovecha todas las virtudes de WordPress, es gratis, tiene un montón de plugins gratuitos que mejoran sus prestaciones. Vamos, que actualmente no tiene igual. PS y Magento se han quedado atrás con diferencia.

  3. Pingback: Acelera tu web moviendo todo el JavaScript al final | Ayuda WordPress

  4. Hola Fernando, yo puse este código y luego mi carrito no añadía productos ni se visualizaban los añadidos fuera de lo que es la sección de la tienda.

  5. manuel martin

    Hola Fernando espero que estés bien! muchas gracias por toda la información aquí dada!! te pregunto si hoy día hay una manera de optimizar un ecommerce, yo uso woocommerce con divi, es genial hasta que intentas traducir a otro idioma! he instalado un plugin wpml de 99 dolares, mi pagina tiene mas de 7 mil productos y la he testeado y carga en 4,86 segundos, para mi parecer muy lento, hay una manera actual de optimizar este con un plugin que conozcas que funcione bien? Muchas gracias un saludo!

    1. Hola Manuel,

      Pues yo minimizaría todo con Autoptimize, que funciona de maravilla, además de un buen plugin de cache. De todos modos una tienda con wpml, sobre todo por wpml, siempre irá algo más lento: + potencia es más consumo inevitable. Si acaso, si puedes, inhabilita la detección del idioma, poco más la verdad. WPML es un monstruo bastante gordo

  6. Hola Fernando
    Muy buen artículo como siempre.
    Al activar el plugins que mencionas ya no cargan las imágenes de los productos de mi pagina web. Uso divi y woocommerce.
    ¿Que hago?
    De antemano muchas gracias por tu respuesta.

    1. Nuevamente por aquí Fernando. Desinstale el plugin y el problema persiste. Busque el código en el funtions.php y no logro encontrar. Realmente no se donde hizo los cambios.
      Muchas gracias Fernando.

Deja un comentario

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

 

Ir arriba Ir al contenido