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:

• Necesidad de una solución más completa que solo tienda online
• Mejorar el SEO de la tienda de modo nativo gracias a las ventajas innatas de WordPress
• La facilidad de la configuración y ampliación de WooCommerce
• La menor curva de aprendizaje si ya se usa WordPress al ser un plugin más
• El menor coste de las mejoras, pues hay más de 1.000 plugins gratuitos para mejorar las prestaciones de WooCommerce, mientras que para otros sistemas cualquier añadido (módulo) puede costar entre 20 o 250 euros de media

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.

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

• 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.

¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)