TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Correction du chargement lent des pages avec WooCommerce wc-ajax=get_refreshed_fragments

2

WooCommerce est l’un des plugins populaires pour transformer votre site WordPress en une boutique en ligne. La plupart des thèmes populaires offrent une fonctionnalité de magasin intégrée à l’aide du plugin WooCommerce. Nous utilisons également WooCommerce sur certains de nos sites. Récemment, lorsque nous avons effectué une vérification de la vitesse des pages sur GTmetrix et pingdom, nous avons constaté que le composant "wc-ajax=get_refreshed_fragments" prenait environ une seconde à charger. Après analyse, nous avons constaté que dans la plupart des autres cas, cela prend même 5 à 10 secondes pour Si vous rencontrez un problème de vitesse de page avec les appels WooCommerce Ajax, voici les solutions pour résoudre le problème pour différents scénarios.

Résoudre le problème WooCommerce AJAX

Nous avons couvert les sujets suivants sur WooCommerce wc-ajax=get_refreshed_fragments dans cet article :

  1. Qu’est-ce que wc-ajax=get_refreshed_fragments ?
  2. Problème de chargement de page avec les appels Ajax d’administrateur
  3. Comment réparer le chargement lent des pages dans WooCommerce avec l’administrateur Ajax?
    1. Désactivez uniquement la fragmentation du panier sur la page d’accueil de votre site
    2. Désactiver uniquement la fragmentation du panier sur la page d’accueil et les publications
    3. Désactivez tous les styles et scripts WooCommerce sur toutes les pages, à l’exception des pages de la boutique
  4. Utilisation du plugin pour arrêter l’appel Ajax de l’administrateur WooCommerce
  5. Tester la vitesse des pages
  6. Arrêter l’API Heartbeat de WordPress

1 Qu’est-ce que wc-ajax=get_refreshed_fragments ?

Il nous a fallu un certain temps pour comprendre que les fragments actualisés du graphique de vitesse de la page sont appelés à partir du plugin WooCommerce. Comme notre site était hébergé sur SiteGround Cloud VPS, l’impact était moindre et l’appel WooCommerce Ajax prenait environ une seconde. Si vous hébergez sur un hébergement partagé comme Bluehost, vous remarquerez peut-être un délai de chargement de la page plus long, de 3 à 10 secondes.

Ci-dessous, la capture d’écran de pingdom montrant le long temps d’attente pour le chargement de "wc-ajax=get_refreshed_fragments" sur la page. Vous pouvez également voir que ce script sera répertorié sous un problème de blocage de rendu dans l’outil Google PageSpeed ​​Insights et le trouver sous le graphique en cascade dans GTmetrix.

Problème de chargement de page WooCommerce Ajax

Fondamentalement, WooCommerce tente de collecter les détails du panier d’achat en appelant le script et prend beaucoup de temps pour terminer la tâche. Le plugin obtient les détails du panier non mis en cache sur chaque page pour afficher les derniers articles du panier en appelant l’administrateur Ajax. Vous pouvez voir le script quelque chose comme ci-dessous sur chaque page de votre site :

<script type='text/javascript'> /* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"/wp-admin/admin-ajax.php","wc_ajax_url":"/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http://localhost/shop/cart/","is_cart":"","cart_redirect_after_add":"yes"}; /* ]]> */ </script>

C’est sur l’ environnement localhost et vous devriez voir le code avec votre propre URL.

Correction du chargement lent des pages avec WooCommerce wc-ajax=get_refreshed_fragments

Fragments WooCommerce Ajax sur la source de la page

2 appels Ajax administrateur et chargement de page

WooCommerce utilise cet appel Ajax d’administration de fragmentation de panier pour mettre à jour les articles et le total dans le panier sans actualiser la page. Appeler l’administrateur Ajax sur chaque page retardera considérablement le temps de chargement de votre page et consommera également des ressources serveur élevées. L’autre problème est que le plugin effectue cette action même sur une page où il n’y a pas de panier d’achat ou de détails liés au produit.

La capture d’écran ci-dessus montre que le problème existe sur la page "À propos de nous" où aucun composant WooCommerce n’est disponible. Ainsi, supprimer le panier sur la page n’aidera pas à améliorer la vitesse de chargement de la page. Ce dont nous avons besoin, c’est de désactiver la mise à jour du panier là où il n’y a pas de paniers ou de produits affichés.


Article WooCommerce connexe :

3 Comment résoudre le problème avec wc-ajax=get_refreshed_fragments ?

Le problème doit être résolu en supprimant le script en modifiant le fichier functions.php de votre thème. Vous pouvez modifier le fichier functions.php via le panneau d’administration WordPress ou en utilisant FTP. Au lieu de modifier le fichier functions.php, créez un thème enfant et ajoutez des fonctions supplémentaires dans le thème enfant. Cela vous aidera à conserver les modifications lorsque vous mettez à jour le thème. Il existe trois options pour retirer la file d’attente du script de fragmentation du panier WooCommerce Ajax.

  • Désactivez uniquement la fragmentation du panier sur la page d’accueil de votre site
  • Désactiver uniquement la fragmentation du panier sur la page d’accueil et les publications
  • Désactivez tous les styles et scripts WooCommerce sur toutes les pages, à l’exception des pages de la boutique.

Laissez-nous discuter des trois options en détail, ne faites qu’une seule chose requise pour vous.

3.1. Désactiver la fragmentation du panier sur la page d’accueil

Dans le panneau d’administration WordPress, accédez à « Apparence > Éditeur » et localisez le fichier functions.php. Ajoutez le code suivant à la fin du fichier.

/** Disable Ajax Call from WooCommerce */ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11); function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }

Cela devrait ressembler à ci-dessous dans l’éditeur, une fois le code collé, cliquez sur « Mettre à jour le fichier » pour enregistrer vos modifications.

Correction du chargement lent des pages avec WooCommerce wc-ajax=get_refreshed_fragments

Modification du fichier PHP des fonctions du thème

Si vous souhaitez utiliser FTP, connectez-vous à votre serveur en utilisant un compte FTP. Allez dans "/wp-content/your-theme/" et trouvez le fichier "functions.php". Modifiez et ajoutez le code ci-dessus à la fin du fichier et téléchargez le fichier modifié sur le serveur.

Une fois le fichier mis à jour, accédez au menu «WooCommerce > Paramètres» et accédez à la section «Affichage» sous l’onglet «Produits ». Cochez la case en regard de l’option « Redirection vers la page du panier après un ajout réussi ».

Correction du chargement lent des pages avec WooCommerce wc-ajax=get_refreshed_fragments

Activer la redirection vers la page du panier

Cela aidera le client à accéder à la page principale du panier au lieu d’attendre longtemps après l’ajout de l’article au panier. Sinon, même si l’article est ajouté, votre panier peut ne pas afficher les détails mis à jour lorsque vous êtes sur la même page que le script de fragmentation du panier est désactivé.

3.2. Désactiver la fragmentation du panier sur la page d’accueil et les publications

Le code ci-dessus désactivera le script de fragment de panier uniquement sur la page d’accueil statique. Si vous souhaitez désactiver le script sur tous les articles, essayez d’ajouter le code ci-dessous dans le fichier function.php de votre thème.

/** Disable Ajax Call from WooCommerce on front page and posts*/ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11); function dequeue_woocommerce_cart_fragments() { if (is_front_page() || is_single()) wp_dequeue_script('wc-cart-fragments'); }

3.3. Désactivation de tous les styles et scripts WooCommerce à l’échelle du site

WooCommerce est un plugin gourmand en ressources qui peut utiliser les ressources de votre serveur pour charger toutes les feuilles de style et les scripts pertinents. Si vous avez peu de produits avec des centaines de milliers d’articles de blog, il est logique de retirer ou de désactiver tous les éléments pertinents de WooCommerce sur les articles de blog. En d’autres termes, vous ne pouvez autoriser les scripts WooCommerce que sur les pages pertinentes de la boutique afin que toutes les autres pages se chargent plus rapidement.

Ajoutez le code ci-dessous dans votre fichier functions.php basé sur l’ essentiel de Github. Le code vérifiera d’abord si le plugin WooCommerce existe sur votre site, puis désactivera les styles et les scripts sur toutes les pages, à l’exception des pages de produit, de panier et de paiement. Cela aidera à supprimer les appels «wc-ajax=get_refreshed_fragments» de tous les articles/pages, à l’exception des pages liées à WooCommerce.

/** Disable All WooCommerce Styles and Scripts Except Shop Pages*/ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 ); function dequeue_woocommerce_styles_scripts() { if (function_exists( 'is_woocommerce')) { if (! is_woocommerce() &&! is_cart() &&! is_checkout()) { # Styles wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce_frontend_styles' ); wp_dequeue_style( 'woocommerce_fancybox_styles' ); wp_dequeue_style( 'woocommerce_chosen_styles' ); wp_dequeue_style( 'woocommerce_prettyPhoto_css' ); # Scripts 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' ); } } }

Avertissement : N’oubliez pas d’ajouter un seul des blocs de code parmi les trois options ci-dessus. N’ajoutez pas plusieurs ou tous les codes dans votre fichier functions.php. Lorsque vous désactivez les scripts sur tout le côté, désactivez également l’option "Activer les boutons d’ajout au panier Ajax sur les archives" disponible dans la section "Affichage" du menu "WooCommerce> Paramètres".

4 Utilisation de plugins pour arrêter les appels Ajax de l’administrateur WooCommerce

Si vous n’êtes pas habitué à modifier le fichier de thème ou à créer un thème enfant, il existe des plugins pour faire le travail pour vous. La première option consiste à utiliser le plugin premium WP Rocket. Vous pouvez acheter WP Rocket, installer et activer le plugin depuis votre panneau d’administration WordPress. Ce plugin n’a pas de paramètres spéciaux pour WooCommerce. Le simple fait d’activer le plugin désactivera la fragmentation du panier WooCommerce sur toutes les pages de votre site. Cela fonctionne avec la logique de vérifier si votre page contient un appel de fragment Ajax dans le code source.

Si oui, il vérifiera que le panier est vide lors du chargement de la page. Lorsque ces deux conditions sont remplies, WP Rocket mettra la page en cache en transitoire et servira lors du prochain chargement de la page. Si vous rencontrez un problème, vous pouvez utiliser le plugin d’assistance pour désactiver la mise en cache des fragments Ajax.

Des plugins comme W3 Total Cache offrent également un cache de fragments en tant qu’extension premium. Cependant, vous devez payer un abonnement annuel de 99 $ pour obtenir des fonctionnalités premium. Au lieu de cela, WP Rocket coûte 49 $ par an avec une configuration facile et vous pouvez également obtenir 10% de réduction en vous abonnant à leur newsletter.

5 Tester la vitesse de la page

Si vous avez ajouté manuellement le code, assurez-vous de purger le cache de votre plugin de mise en cache et de purger la mise en cache du vernis sur le serveur si disponible. De même, effacez tous les niveaux de mise en cache si vous avez installé le plugin WP Rocket. Après cela, vérifiez sur Google PageSpeed ​​Insights et vous ne devriez pas voir le script "wc-ajax=get_refreshed_fragments" dans la section JavaScript bloquant le rendu. Vous pouvez également obtenir facilement un score de 100 sur mobile et ordinateur lorsque le temps de blocage est de 0 ms.

Correction du chargement lent des pages avec WooCommerce wc-ajax=get_refreshed_fragments

Désactiver les styles et les scripts de WooCommerce

Également sur pingdom, le script WooCommerce appelant «wc-ajax=get_refreshed_fragments» ne devrait pas être visible dans la section «File Requests ». Votre score de vitesse de page devrait être augmenté notamment après la désactivation du script WooCommerce Ajax.

6 Arrêter l’API WordPress Heartbeat

Le plugin WooCommerce ajoute de nombreux widgets de tableau de bord attrayants affichant les ventes et les statistiques en direct. Cependant, cela vous coûtera cher en faisant glisser la vitesse de chargement de votre site. Les widgets du tableau de bord mettent à jour le contenu de manière dynamique à l’aide d’appels Ajax d’administration similaires à la fragmentation du panier dans WooCommerce. Cela se fait à l’aide de l’API WordPress standard appelée API Heartbeat.

En général, nous ne recommandons pas d’avoir ces widgets dynamiques sur le tableau de bord. Vous pouvez simplement désactiver les appels admin-ajax ou l’API WordPress Heartbeat pour réduire la charge du serveur et améliorer la vitesse de chargement des pages de votre site WordPress. Des plugins comme WP Rocket peuvent aider à désactiver l’API Heartbeat depuis votre panneau d’administration.

Derniers mots

WooCommerce est l’un des moyens les plus simples de créer votre boutique en ligne sur WordPress. Mais les magasins en ligne ont besoin de certaines fonctions de base comme la mise à jour dynamique du panier. D’après notre expérience, ce que nous avons vu, c’est que 90% des utilisateurs de WooCommerce vendent des produits numériques simples. Leur magasin est simplement un ajout au grand blog ou au site de contenu. Dans ce cas, nous vous recommandons fortement de désactiver les appels Ajax d’administration afin que toutes les autres pages du site se chargent plus rapidement sans affecter l’expérience utilisateur.

Si vous avez un magasin à part entière, vous aurez besoin de la fonction de fragmentation du panier pour mettre à jour dynamiquement les articles du panier sans actualiser la page. Dans ce cas, assurez-vous d’avoir un serveur d’hébergement de qualité ainsi que des plugins de mise en cache tels que WP Rocket ou W3 Total Cache, qui propose une option premium pour la mise en cache des fragments de page afin d’améliorer la vitesse de la page.

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'acceptePlus de détails