WooCommerce : pourquoi et comment désactiver les fragments de panier Ajax

Si vous êtes ici c'est que votre site WooCommerce est lent et que vous vous demandez pourquoi l'URL « /?wc-ajax=get_refreshed_fragments » génère des retards et des charges serveur (spikes).

En outre, il existe trop de littérature en ligne sur les fragments de panier WooCommerce Ajax (y compris des plug-ins spécifiques et des options de plug-in de performance), et vous souhaitez savoir rapidement ce qu'ils sont avant de comprendre si et comment vous devez les désactiver.

Les outils d'optimisation des performances comme Pingdom et GTMetrix mettent souvent le blâme sur cette petite fonctionnalité WooCommerce. Et le désactiver soigneusement peut vous donner une accélération de la vitesse, du chargement des pages et, finalement, du taux de conversion des ventes.

Voici donc tout ce que vous devez savoir.

Que sont les fragments de panier WooCommerce Ajax ?

Mais d'abord, pour ceux d'entre vous qui ne le savent pas : qu'est-ce que l'Ajax ?

Dans le développement Web, Ajax ( AJAX = Asynchronous JavaScript And XML ) est une technique de développement Web qui, en un mot, vous permet d' exécuter des fonctions sans rafraîchir les pages du site Web .

Pensez au «Ajax Add to Cart» sur la page WooCommerce Shop: vous pouvez ajouter des produits au panier (et mettre à jour le panier) sans forcer le rechargement de la page; Ajax s'exécute en arrière-plan et communique avec le serveur de manière "asynchrone".

Maintenant que c'est clair, voyons ce que sont les fragments de panier WooCommerce Ajax et ce que représente l'URL " yoursite.com/?wc-ajax=get_refreshed_fragments ".

Pour faire court, même sur de petits sites, et même sur des pages non-WooCommerce, WooCommerce essaie d'"obtenir" les détails du panier afin qu'il puisse être prêt à "recalculer" le panier à chaque fois que quelque chose est fait (ou pas fait !) sur une page WordPress donnée.

Cela permet à WooCommerce de maintenir le widget Cart à jour et d'"écouter" immédiatement tout événement Ajax Add to Cart qui pourrait nécessiter une mise à jour du panier .

Fondamentalement, WooCommerce appelle « /?wc-ajax=get_refreshed_fragments » afin de mettre à jour les éléments du panier et le total du panier de manière asynchrone, c'est-à-dire sans avoir besoin d'actualiser la page du site Web que vous visitez.

Ajax est génial et tout, mais ne sous-estimez pas les implications sur les performances et les conflits de plugins que cette petite fonctionnalité pourrait causer. Ce qui nous amène à la section suivante…

Pourquoi désactiver les fragments de panier WooCommerce Ajax ?

Afin de mettre à jour le panier sur chaque page de votre site Web, WooCommerce exécute cette fonctionnalité Ajax à chaque fois.

Même sur la page À propos. Même sur la page d'accueil si vous n'avez pas de produits. Même sur la page Contact si vous n'avez qu'un formulaire de contact.

Si votre thème ne fournit pas de widget déroulant de panier WooCommerce et si vous n'avez aucun produit pouvant être ajouté au panier sur une page de site Web spécifique, vous feriez mieux de supprimer toute la fonctionnalité Ajax.

De plus, si vous choisissez parmi les paramètres WooCommerce de rediriger les utilisateurs vers le panier après avoir ajouté un produit au panier, vous forcez définitivement une redirection de page (vers la page du panier), donc avoir les fragments de panier Ajax actifs est tout à fait inutile.

Idéalement, les seuls endroits où « /?wc-ajax=get_refreshed_fragments » doivent s'exécuter sont les pages et les archives WooCommerce où vos clients peuvent ajouter au panier ET vous souhaitez utiliser un widget de panier dynamique.

Par exemple, si vous avez des boutons Ajouter au panier sur vos pages de catégorie ET que vous voulez que le widget Panier se mette à jour en conséquence sans recharger la page (et que vous avez activé l'ajout au panier Ajax), alors vous avez besoin de « /?wc-ajax=get_refreshed_fragments » actif.

En outre, sur la page Panier, vous pouvez modifier les quantités ou supprimer des articles sans actualiser la page, et vous souhaitez également que le widget Panier soit mis à jour en conséquence (mais la vraie question ici est : pourquoi y a-t-il un widget Panier sur la page Panier, car il n'a aucun sens ? ). Ainsi, sur la page du panier, vous devez également activer "/?wc-ajax=get_refreshed_fragments" , sinon le widget ne s'actualisera pas si vous mettez à jour le panier.

Conclusion:

1. si votre thème n'a PAS de widget de panier d'en-tête dynamique , vous pouvez désactiver "/?wc-ajax=get_refreshed_fragments"
2. si votre thème a un widget Cart d'en-tête dynamique, mais que vous ne vous souciez pas d' afficher le contenu du widget Cart lors de vos déplacements , vous pouvez désactiver "/?wc-ajax=get_refreshed_fragments" partout
3. si vous souhaitez conserver la fonctionnalité du widget Panier active , vous devez désactiver "/?wc-ajax=get_refreshed_fragments" UNIQUEMENT sur les pages où il n'y a pas de fonctionnalité Ajax Ajouter au panier (Archives de produits WooCommerce) ou de mise à jour du panier (page Panier)

Comment désactiver les fragments de panier WooCommerce Ajax ?

Maintenant que nous avons compris ce que sont les fragments de panier et pourquoi/quand ils doivent être supprimés, nous pouvons entrer un peu dans le codage.

Bien sûr, il existe des plugins pour cela - mais quand vous pouvez obtenir une fonctionnalité comme celle-ci avec quelques lignes de PHP, cela n'a aucun sens de trouver une solution différente, même si vous ne savez pas coder.

Mais d'abord, voyons comment WooCommerce ajoute cet appel Ajax (en termes de développement, nous dirions "comment il met ce script en file d'attente").

Tout d'abord, le script « wc-cart-fragments » est décrit par une fonction appelée « register_scripts() ». Il appelle un script JS depuis le dossier /assets et nécessite l'activation de JQuery et des cookies :

'wc-cart-fragments' => array(
	'src'     => self::get_asset_url( 'assets/js/frontend/cart-fragments' . $suffix . '.js' ),
	'deps'    => array( 'jquery', 'js-cookie' ),
	'version' => WC_VERSION,
),

Dans le même fichier, c'est le moment où « wc-cart-fragments » est appelé :

self::enqueue_script( 'wc-cart-fragments' );

Si nous regardons la fonction « enqueue_script() », nous découvrirons que notre script « wc-cart-fragments » est d'abord enregistré puis mis en file d'attente conformément à la documentation de WordPress (https://developer.wordpress.org/reference/ fonctions/wp_enqueue_script):

private static function enqueue_script( $handle, $path = '', $deps = array( 'jquery' ), $version = WC_VERSION, $in_footer = true ) {
	if ( ! in_array( $handle, self::$scripts, true ) && $path ) {
		self::register_script( $handle, $path, $deps, $version, $in_footer );
	}
	wp_enqueue_script( $handle );
}

Si quelque chose est « en file d'attente », alors il peut être « retiré de la file d'attente » (similaire aux fonctions PHP add_action() et remove_action()).

Vous devez vous assurer d'appeler la fonction "dequeue" APRÈS la fonction "enqueue", afin qu'elle ait déjà été ajoutée et que vous puissiez la supprimer (d'où la priorité = 11 car "wc-cart-fragments" est mis en file d'attente à la priorité par défaut de dix).

Tl;dr :

/**
 * @snippet       Disable WooCommerce Ajax Cart Fragments Everywhere
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp_enqueue_scripts', 'bbloomer_disable_woocommerce_cart_fragments', 11 ); 

function bbloomer_disable_woocommerce_cart_fragments() { 
	wp_dequeue_script( 'wc-cart-fragments' ); 
}

Veuillez noter que si vous avez un widget de panier d'en-tête, cela cassera le "panier déroulant". Vous pourrez toujours voir le nombre d'articles et le total du panier dans l'en-tête, mais au survol, vous n'obtiendrez pas les articles et les boutons panier/paiement .

Sur Business Bloomer, j'ai complètement désactivé le widget Panier, il est donc logique d'utiliser cette fonction.

Si vous souhaitez simplement optimiser votre page d'accueil et laisser les "wc-cart-fragments" sur les autres pages du site , vous pouvez utiliser cet extrait à la place :

/**
 * @snippet       Disable WooCommerce Ajax Cart Fragments On Static Homepage
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.6.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'wp_enqueue_scripts', 'bbloomer_disable_woocommerce_cart_fragments', 11 ); 

function bbloomer_disable_woocommerce_cart_fragments() { 
	if ( is_front_page() ) wp_dequeue_script( 'wc-cart-fragments' ); 
}

Réflexions finales : Fragments de panier WooCommerce Ajax Oui ou Non ?

Nous avons vu que la désactivation des fragments de panier Ajax "pourrait" vous donner une accélération de la vitesse du site Web, mais "pourrait" également causer des problèmes, principalement si vous souhaitez continuer à utiliser votre widget de panier déroulant.

Donc, dans cette section, je veux voir ce que d'autres ont découvert en ce qui concerne "/?wc-ajax=get_refreshed_fragments".

Cela vous apporte-t-il vraiment plus d'avantages que d'inconvénients ? Cela augmente-t-il vraiment la vitesse de votre page Web? Vaut-il la peine de désactiver les fragments de panier ?

Alerte spoiler : ça dépend .

Colm Troy de CommerceGurus a testé en profondeur Ajax Cart Fragments (ainsi que d'autres éléments que vous devriez lire dans son article : https://www.commercegurus.com/guides/speed-up-woocommerce/) et, dans son guide, il a découvert ce:

… le temps de requête "/?wc-ajax=get_refreshed_fragments" prend 448 ms, ce qui est de loin notre requête http la plus lente à ce stade.

Sur certains serveurs plus lents avec de grandes bases de données mal optimisées, cette requête peut souvent prendre plus de 1 à 2 secondes pour s'exécuter.

La bonne nouvelle est que cette requête est non bloquante et s'exécute bien après le chargement du DOM, donc en général, cela ne nuit pas à nos temps de chargement perçus (mais nuit certainement à nos temps de chargement complets et peut nuire à certaines choses qui inquiètent GPSI comme Time à Interactif et Premier processeur inactif).

Il m'a aussi dit récemment que :

Je suis arrivé à la conclusion que les novices de WooCommerce finissent souvent par casser leurs sites en supprimant des fragments car ils n'ont pas pleinement réfléchi à tous les différents scénarios d'apparition d'un widget de panier, il est donc certainement prudent de procéder avec prudence.

Sur les magasins WooCommerce avec des pics de charge et des tonnes de trafic, la première chose que nous faisons est de retirer les fragments de panier, de supprimer les widgets de panier et de rediriger les clients vers le panier lors de l'ajout au panier .

Garde les choses agréables, simples et rapides

Vous voulez continuer la conversation ? Partagez vos retours, tests et avis dans les commentaires