Optimiser les performances d’un site WooCommerce

Votre site e-commerce repose sur l'extension WooCommerce pour WordPress ? Ce bout de code est fait pour vous et donnera un gain de performances et boostera vos conversions.

À l’instar de nombreuses extensions WordPress, WooCommerce injecte des feuilles de styles CSS et des scripts JavaScript sur toutes les pages de votre site. Ces fichiers sont nécessaires pour vous afficher correctement vos produits, faire fonctionner le panier et la page de commande, les effets de visualisation sur les images et bien plus encore.

Le problème avec cette approche est que ces fichiers alourdissent fortement le poids de vos pages alors même que nous cherchons en permanence à en optimiser le temps de chargement. Et cet objectif est d’autant plus important pour un site e-commerce pour lequel chaque seconde compte pour maximiser la conversion.

Le bout de code suivant utilise la fonction wp_dequeue_style() et wp_dequeue_script() qui permettent respectivement de décharger un feuille de styles ou un script. On conditionne cela au fait de ne pas être sur une page WooCommerce (page boutique, fiche produit, etc.), une page panier ou commande ou mon compte. Et pour éviter toute erreur, nous vérifions que WooCommerce est bien actif sur votre site.

function wpc_dequeue_woocommerce_styles_scripts() {
	if (function_exists('is_woocommerce')) {
		if (! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page()) {
			wp_dequeue_style('woocommerce-general');
			wp_dequeue_style('woocommerce-layout');
			wp_dequeue_style('woocommerce-smallscreen');

			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('woocommerce');
			wp_dequeue_script('jquery-blockui');
			wp_dequeue_style('wcqi-css');
		}
	}
}
add_action('wp_enqueue_scripts', 'wpc_dequeue_woocommerce_styles_scripts');

Vous pouvez copier / coller ces lignes de code dans un fichier de type mu-plugin afin d’appliquer les changements globalement et automatiquement. Il est possible de coller ce bout de code dans le fichier functions.php de votre thème bien que vous devriez séparer cela du thème.

Utilisez des outils d’analyse des performances comme GTmetrix ou Pingdom Tools. Notez la différence du poids de vos pages qui n’ont pas besoin d’embarquer les scripts WooCommerce, efficace non ?

La même astuce prochainement pour l’extension Jetpack !

2 commentaires

  1. Nicolas MOLLET

    Je pense que tu te référes à ça https://gist.github.com/DevinWalker/7621777 mais ce code ne semble pas actualisé pour WC3.
    woocommerce_chosen_styles
    woocommerce_fancybox_styles
    ne sont plus utilisés.

    select2
    wc-enhanced-select
    sont maintenant utilisés (entre autres).

    Et plus généralement la plupart des styles et scripts ne sont chargés que sur les pages WooCommerce.

    1. Aurélien Denis auteur de l’article

      Hum je ne suis pas sûr mais l’approche est la même. Je développe actuellement de nombreux sites sous WooCommerce donc ce code va être amené à évoluer au fil de mes avancées. Merci du complément.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX