Résumé de l’épisode 1 : On a vu précédemment que le changement de thème ne serait pas aussi simple que désiré, parce que celui ci a un très fort impact sur la vitesse de chargement d’un site. Aujourd’hui toujours dans le cadre d’un affichage plus rapide pour l’utilisateur on s’intéresse à l’Ajax Cart Fragments. On teste à partir de notre page d’accueil dont le titre est Nos 7 engagements pour demain.
La ligne qui nous intéresse est celle commençant part : POST ? wc-ajax=get_refresh_fr. La taille de 565 B est négligeable. Mais ce qui ne l’est pas du tout ce sont les 974,3ms de temps d’attente du serveur qui sont générées par cette fonction de rafraichissement du panier dont l’utilité sur la page d’accueil parait pour le moins discutable.
Premièrement pourquoi vouloir rechercher une vitesse d’affichage toujours plus élevée ?
Table Des matières
Réponse : Parce que pour l’utilisateur la rapidité du site implique de facto une attente moins longue devant une page blanche. Donc on a davantage de chances que le client potentiel reste sur la page d’atterrissage. On évite donc un taux de rebond très élevé. De fait Google ne dégrade pas la note du site. Donc on apparait toujours avec un bon classement. Ce classement invite plus de visiteurs à cliquer sur le lien. Ce qui augmente de fait la base de clients potentiels.
Deuxièmement qu’est ce que l’Ajax Cart Fragments vient faire sur une page d’atterrissage ?
Sans doute vous ne vous en êtes jamais rendu compte mais même si vous n’utilisez pas woocommerce sur une page l’Ajax Cart Fragments est présent, voire même si votre site ne contient pas du tout woocommerce et n’est qu’un blog. Pourquoi. Parce que on ne sait jamais au cas où potentiellement vous auriez besoin d’y adjoindre un panier (cart) celui-ci est automatiquement présent. Et autant vous le dire tout de suite dans notre cas on perd sur la première page 700ms.
700ms cela parait négligeable. eh bien pas tant que cela. Déjà dans notre cas cela représente plus de 30% du temps total de chargement de notre page. Et on a estimé, toujours dans notre cas (merci Amazon) qu’un gain de 700ms représentait une augmentation de notre CA de 10%.
Troisièmement à quoi sert l’Ajax Cart Fragments ?
C’est ici que les choses deviennent intéressantes. En effet l’Ajax Cart Fragments sert a rafraichir le panier après chaque ajout ou retrait d’ailleurs, afin que le client voit toujours le panier tel qu’il est. Mais si le panier est utile dans le cadre de la partie produits ou boutique d’un site, il ralentit en revanche les autres pages qui ne nécessitent pas son affichage, puisque dans celles-ci il n’y a pas de commande ni même de consultation produit.
Alors le but d’un site étant la réalisation de chiffre d’affaires on ne va pas désactiver totalement l’Ajax Cart Fragments, mais uniquement sur les pages qui ne le nécessitent pas, comme la page d’accueil par exemple.
Évidemment chacun en fonction de sa configuration peut faire un autre choix, mais nous, on choisit la sécurité. Et on fait comment ?
Quatrièmement un petit bout de code à ajouter dans functions.php
Ou plutôt dans le fichier functions.php de votre thème enfant. Et là rien ne sert de réinventer la roue. Plutôt que de galérer, nous nous sommes servi de celui présenté dans cette page. Nous avons donc ajouté ce code tout en bas de notre functions.php :
On peut évidemment donner le nom que l’on veut à la fonction, supprimer les crédits. Mais bon, faire un peu de publicité à un blog qui donne d’excellents conseils, je ne vois pas où est le problème.
Cinquièmement le résultat final.
Comme une image vaut mille mots autant commencer par l’image. la première vous montre le résultat après l’ajout du code, toujours sur GT-Metrix.
Et pour vous montrer le résultat sur la partie waterfall (la cascade des évènements).
Conclusion
Effectivement l’Ajax Cart Fragments n’avait rien à faire dans notre page d’accueil et le gain de temps d’affichage vaut la peine. Maintenant afin d’avoir un site rapide comme l’éclair, nous avons de très nombreuses autres améliorations à faire.