DE{CODE} : 6 astuces de développement WooCommerce pour créer des sites Web de commerce électronique rapides

À côté des ventes, la vitesse du site est peut-être la mesure la plus importante pour vos sites Web de commerce électronique. Pourquoi ? Les sites Web de commerce électronique rapides génèrent plus de trafic, ont des taux de conversion plus élevés, des taux de rebond plus faibles et génèrent plus de visiteurs de retour. Au cours de cette session, Jeremy Benoit, chef de produit senior de WP Engine, et Catherine Kelly, responsable de l'ingénierie, explorent les astuces des développeurs, les fonctionnalités de WP Engine et d'autres outils pour rendre votre boutique WooCommerce encore plus rapide.

Diapositives de la session

Transcription du texte intégral

JEREMY BENOIT : Bonjour à tous et bienvenue à DE{CODE} 2022. C'est la piste e-commerce. Je suis Jeremy Benoit, chef de produit senior chez WP Engine et nous sommes ici pour parler de six conseils pour améliorer les performances de WooCommerce. Ma collègue, Catherine Kelly, se joindra à moi aujourd'hui et commençons.

Je vais donc commencer par partager une citation de l'un de nos ingénieurs en logiciel, Chris Weigman. Et comme il l'a dit, selon Google, 53% des utilisateurs quitteront un site si la vitesse de chargement d'une page prend plus de trois secondes. Cela signifie que vous avez exactement trois secondes pour leur obtenir toutes les données sur cette page de produit, toutes les images que vous leur avez envoyées, toutes les informations à ce sujet, tous les petits widgets et publicités et cela vous montre un peu pourquoi nous ' on parle de rapidité aujourd'hui, car la rapidité d'une expérience client est cruciale.

La vitesse de la page est le temps de chargement d'une seule page, et elle peut être mesurée de différentes manières. Deux méthodes critiques sont le temps jusqu'au premier octet, qui est utilisé par Google PageSpeed ​​Insights, ou le temps jusqu'au chargement complet de la page ou dernier octet, qui reflète souvent l'expérience des acheteurs. La vitesse de la page a également un impact sur les taux de conversion sur votre site d'achat, ainsi que sur le référencement de votre site de commerce électronique.

Un élément essentiel de la vitesse est un hébergement superbe pour la qualité de votre expérience d'achat. Sur la plate-forme optimisée pour le calcul de WP Engine, nous offrons une expérience de commerce électronique améliorée pour des performances améliorées sur l'ensemble de votre contenu d'achat, statique ou dynamique. Et nous parlerons de ces deux types de contenu différents ici dans une seconde alors que nous entrons dans les 6 trucs et astuces. Je vais maintenant céder la parole à ma collègue, Catherine.

CATHERINE KELLY : Bravo. Merci pour ça, Jérémy. Aujourd'hui, nous allons couvrir six conseils concernant WooCommerce, sa configuration et la création d'une boutique de commerce électronique. Pour certains d'entre vous, développeurs chevronnés, ces astuces et conseils vous seront assez familiers, mais pour certains des nouveaux développeurs, vous pourriez obtenir des informations utiles.

Donc, aujourd'hui, nous allons couvrir WooCommerce et la mise en cache, l'optimisation des médias, l'optimisation de la recherche, les fragments de panier Ajax, le tableau des commandes personnalisées et la vitesse du headless. Donc, pour le premier que nous allons couvrir, WooCommerce et la mise en cache. Avant d'aborder cela, nous voulons comprendre quelles sont les différentes options dont vous disposez en matière de mise en cache, de quoi il s'agit, puis nous pourrons aborder la manière dont nous allons y apporter des améliorations.

Ainsi, la mise en cache peut donner l'impression d'être un Saint Graal par rapport aux problèmes de performances. Alors qu'en fait, la mise en cache a été créée à l'origine non pas en relation avec les performances, mais c'était vraiment pour que les ordinateurs aient une réponse automatisée à la même requête encore et encore, plutôt que d'avoir à la recalculer à chaque fois. La mise en cache est une technique qui est utilisée pour stocker temporairement une réponse à une demande, puis pour fournir cette même réponse à la même demande exacte à la même ressource à un moment ultérieur.

C'est donc un peu comme un de ces enfants ennuyeux - votre enfant ennuyeux qui vous pose la même question encore et encore, chaque jour, comme pourquoi, pourquoi, pourquoi, et vous voulez juste lui donner une réponse automatisée. Et cela peut très bien fonctionner et lorsque vous fournissez des informations statiques pour des sites statiques, vous donnez toujours la même réponse. Cependant, cette approche ne fonctionne pas très bien en ce qui concerne le commerce électronique, car elle met un frein aux travaux car les demandes qui sont soumises au serveur à chaque fois ne seront pas toujours les mêmes, et vous devez gérer et contrôler par rapport aux paniers, différentes demandes de différents utilisateurs en même temps.

Vous souhaitez également vous souvenir des transactions précédentes que vous avez effectuées en relation avec vos clients, du contenu de leur panier, vous souhaitez vous souvenir de ce qui n'est plus disponible dans votre magasin afin que le panier puisse refléter avec précision ce qui est servi à cet utilisateur. Vous voulez également vous assurer, en ce qui concerne la mise en cache, que vous ne donnez pas un panier lié au client A au client B, et qu'il peut réellement voir ce que quelqu'un d'autre commande réellement, en faisant fuiter des informations, ce que vous ne voulez pas. . Il y a un équilibre fini que vous pouvez avoir par rapport à la mise en cache que vous - ce qui est assez difficile à servir lorsque vous essayez de servir ce qui est une touche personnelle à vos clients afin qu'ils restent engagés sur votre site. Donc, les différents niveaux et types de cache que nous avons - un cache de serveur.

Et le cache du serveur est généralement comme n'importe quel autre cache. Il s'agit essentiellement du cache qui se trouve sur votre serveur en termes de moment où vous créez la page et que vous servez à une demande particulière. Lorsque vous vous tenez juste à côté de ce serveur et que vous faites une demande, votre réponse peut être instantanée. Cependant, lorsque vous êtes à environ 1 000 kilomètres, comme votre e-commerçant ou utilisateur, cela peut prendre beaucoup de temps pour les atteindre.

Vous avez alors le cache de l'application. Et le cache d'application dans WordPress et WooCommerce, vous pouvez utiliser des plug-ins pour le gérer. les plug-ins comme W3 Total Cache, WP Rocket ont tous des options pour gérer le cache de l'application et ces plug-ins stockent essentiellement une version temporaire d'une page demandée et d'un fichier sur leurs serveurs. Cela peut être - cependant, cela peut être un moyen de mise en cache très inefficace et ne doit pas être utilisé si vous avez la possibilité de mettre en cache soit sur le serveur lui-même, soit dans un service comme les domaines accélérés ou Cloudflare, qui distribue le cache à l'échelle mondiale.

Vous avez alors le cache du navigateur. Et le cache du navigateur est essentiellement le cache de l'utilisateur final. Avez-vous déjà vécu, par exemple, quelque chose sur un site que vous avez mis à jour et que vous ne voyez pas automatiquement dans le front-end lorsque vous développez et révisez votre site ? C'est parce qu'il a été mis en cache dans ce navigateur réel. Il s'agit essentiellement d'une version temporaire de cette page ou de cet actif stockée dans le navigateur de votre utilisateur sur votre ordinateur ou votre téléphone.

Il est là pour que vous n'ayez pas à télécharger la même page ou la même ressource plusieurs fois pour accélérer l'affichage de cette page, ce qui fonctionne, encore une fois, plutôt bien lorsque vous avez un site statique. Mais lorsque vous avez un site dynamique comme un site de commerce électronique, nous essayons toujours de proposer des produits, des descriptions et des informations. Cela peut être... ce n'est pas aussi efficace que vous le souhaiteriez.

Vous avez alors ce qu'on appelle le cache CDN proxy. Un cache CDN proxy est un cache qui se trouve entre votre serveur d'origine – c'est-à-dire le serveur qui développe et présente la première page d'origine augmentée – et le navigateur de l'utilisateur lui-même. Ce sont des domaines accélérés et Cloudflare est un type de CDN proxy. Et toutes les requêtes et réponses passent par leurs domaines avant d'atteindre le serveur d'origine.

Il s'agit essentiellement d'un groupe de serveurs stratégiquement placés à travers le monde dans le but d'accélérer la diffusion d'un contenu statique pour vos utilisateurs. C'est donc presque comme s'ils se tenaient juste à côté du serveur de service d'origine lorsqu'ils sont à 1 000 milles. Cela accélère donc le service de cette page. Et une fois que vos ressources statiques sont mises en cache sur tous les serveurs périphériques à un emplacement particulier, tous les visiteurs et demandes d'informations statiques ultérieurs sont livrés à partir de ce que l'on appelle vos serveurs périphériques, au lieu du serveur d'origine, réduisant ainsi la charge et accélérant les performances. , et l'amélioration de l'évolutivité.

Donc tout cela fonctionne très bien en général en ce qui concerne les sites statiques comme mentionné. Mais les caches de commerce électronique mettent un frein aux travaux. Et le commerce électronique - la raison pour laquelle il y a une clé dans les travaux est en relation avec vos pages connectées, vos paniers, vos paiements, vos listes de souhaits, qui sont mises à jour dynamiquement tout le temps. Ils ne sont donc pas statiques comme vous le souhaiteriez sur un site de blogs normal, par exemple.

Généralement, vous pouvez mettre en cache la requête GET. Et avec les requêtes GET, ou comme son nom l'indique, une requête pour obtenir une ressource. Même si les requêtes GET peuvent souvent être mises en cache en toute sécurité, comme mentionné, vous ne voulez pas remettre en cache la page de connexion, les paniers et les paiements. Vous voulez les servir toujours aussi frais et nouveaux que possible au client afin qu'ils soient à jour et précis.

Donc, vous ne voulez pas livrer quelque chose du panier et ne pas écrire - ne l'écrivez pas avec le cache. Généralement, lorsque vous avez quelque chose dans le panier, la plupart des serveurs contournent complètement le cache. Ainsi, vous revenez au problème de le servir à partir de votre serveur d'origine plutôt qu'à partir de votre CDN. Donc, ce que vous devez faire, c'est que vous devez être intelligent à ce sujet et comprendre, OK, comment puis-je servir des éléments statiques de mon fournisseur CDN mais toujours appliquer la dynamique de mon serveur d'origine réel afin que tout soit à jour et précis ?

Donc, les choses à faire attention - pour le cache du serveur, puisque le serveur génère la page Web, la mise en cache du serveur lui permet de mémoriser des parties de la page sur la page entière qui ne sont pas générées à partir de zéro à chaque fois. Et avec la mise en cache du navigateur, cela aide le navigateur à se souvenir de l'apparence d'une page Web afin qu'il n'ait pas à passer du temps à échanger des données avec le serveur. Et cela est utile, comme mentionné, pour les visiteurs qui accèdent à plusieurs pages car il peut y avoir des fichiers statiques. Par exemple, les feuilles de style, les fichiers JavaScript peuvent tous être stockés dans le navigateur.

Donc, pour les meilleures pratiques en matière de mise en cache, mettez toujours le HTML en cache de manière sélective. Fondamentalement, au premier niveau, cachez tout pour agir comme un anonyme statique - pour un contenu anonyme statique. Et puis cherchez à contourner le cache sur les cookies et à mettre en cache tout ce qui se trouve dans votre panier, dans votre liste de souhaits en utilisant un cookie pour contourner des éléments particuliers du cache. Et définissez toujours votre cache d'âge, votre durée de vie, en fonction de votre configuration Cloudflare. Cela devrait garantir que votre cache est toujours à jour et correspond à l'origine d'origine.

Ainsi, l'une des choses que nous comprenons en discutant avec nos clients du commerce électronique est qu'il s'agit d'un problème que les développeurs doivent généralement résoudre eux-mêmes. Ainsi, dans le cadre de notre développement dans WP Engine, nous travaillons actuellement sur une solution spécifique au commerce électronique, qui permet, par défaut, de fournir et d'installer WooCommerce avec toutes ces règles de mise en cache définies par défaut. Nous mettons donc en cache tous les éléments statiques, puis nous ne mettons pas en cache tous les éléments dynamiques, donc c'est toujours frais. Il est toujours actualisé en permanence pour vous. Et ainsi, vous n'avez pas de conflits comme la fragmentation du panier pour vos utilisateurs.

Optimisation des médias– Une autre chose qui est essentielle en ce qui concerne la livraison de contenu de votre serveur à votre utilisateur final, qui se trouve sur votre site de commerce électronique, concerne l'optimisation des médias. La première chose à laquelle il faut réfléchir est la suivante : qu'est-ce que l'optimisation des médias ? Que pouvons-nous y faire? Et comment pouvons-nous garantir aux clients une expérience rapide, efficace et dynamique lors de la navigation et de l'utilisation de leur site ?

Ainsi, en ce qui concerne les images et la vidéo, elles nécessitent différents types d'optimisation, encore une fois, pour offrir à vos clients une expérience optimale en fonction de l'appareil qu'ils utilisent réellement. L'optimisation des médias est donc un processus d'utilisation des meilleurs outils, de stratégies avancées et d'expérimentations, car vous voulez toujours expérimenter pour offrir les performances d'un site de commerce électronique. Vous voulez une optimisation des actifs. Il cherche à trouver l'équilibre entre efficacité et fiabilité.

Vous souhaitez donc toujours fournir le contenu à votre client de la manière la plus rapide possible, sans nuire aux performances de votre site. Vous souhaitez diffuser le contenu le plus beau dans les plus brefs délais en tenant compte des différentes plates-formes et actifs sur lesquels les médias peuvent être consommés, par exemple, un ordinateur portable, un PC ou un appareil mobile, et, comme nous entrez dans le monde des différents types d'appareils sans tête, comme les écrans de télévision, les iPad, etc., où le contenu peut également être livré à partir d'un magasin de commerce électronique et consommé.

Donc, ce à quoi vous voulez penser, c'est d'améliorer l'optimisation des images pour améliorer le Web - les performances de votre site pour générer plus de trafic, pour augmenter ces conversions, pour augmenter les revenus de votre propriétaire de magasin, de votre marque ou de votre marchand. Et l'un des aspects les plus critiques de l'optimisation des sites Web, il a un impact sur la recherche et l'optimisation. Donc, si vos images et votre vidéo sont rapides et rapides, vous obtenez en fait une meilleure note en ce qui concerne l'optimisation des moteurs de recherche.

Optimiser les actifs non seulement rend vos produits plus attrayants et plus visibles pour les clients potentiels, mais les fait également apparaître plus souvent dans la recherche, encore une fois, l'optimisation des moteurs de recherche. Les éléments clés à retenir sont de regarder le chargement paresseux pour les images et les vidéos. Le chargement différé est essentiellement une stratégie pour identifier les ressources non bloquantes ou non critiques et les charger uniquement lorsque cela est nécessaire. Ainsi, le contenu, essentiellement au-dessus du pli, est chargé et affiché à l'utilisateur en priorité, puis nous retardons tout le reste du rendu pour tout ce qui se trouve en dessous de cet écran, donc tout ce qu'ils font défiler vers le bas.

Cette technique d'optimisation permet d'afficher en premier les premières images et contenus que l'utilisateur verra. Et puis nous ne gaspillons pas de ressources à télécharger des choses qu'ils ne vont pas encore voir et voir. Google lui-même recommande le chargement paresseux et y fait référence comme le report des images hors écran, essentiellement. Et puis je dirais ne vous embêtez pas à le charger.

Vous pouvez manuellement, en tant que développeur, étiqueter chacune de vos images si vous le souhaitez ou votre vidéo comme chargée paresseusement. Mais comme vous pouvez l'imaginer pour un site de commerce électronique, cela représenterait un effort considérable. Et aussi, si vous ne vous sentez pas à l'aise de marquer manuellement chacune de ces images, vous pouvez utiliser un plug-in pour le faire. Si vous avez une recherche rapide dans Google pour les meilleurs plug-ins de chargement pour WordPress, il y a quelques recommandations pour les meilleurs plug-ins à utiliser.

Mais pour nous et dans le commerce électronique, nous vous recommandons de les coller, par exemple, sur WP Rocket. Il offre une optimisation du chargement paresseux d'Adobe. Les choses que vous voulez également prendre en compte sont de toujours vous souvenir de vos utilisateurs mobiles. Leurs écrans et leurs performances sont plus petits, vous n'avez donc pas besoin de charger des images volumineuses. Vous voulez réduire cela.

Vous souhaitez utiliser la compression pour toutes vos images, car cela permettra d'économiser 40 % de bande passante et, évidemment, le chargement de cet écran particulier et le format de fichier sont essentiels pour les images. Par exemple, comme il y a une image 600 par 600 en JPEG, c'est 100 kilo-octets, PNG c'est 216, alors qu'un WebP ne fait que 56 kilo-octets. Donc, vous voulez être très prudent en considérant, OK, quel est le format de fichier que je vais utiliser pour toutes ces images qui vont être servies ? Surtout à partir d'un site de commerce électronique, je pourrais potentiellement avoir des milliers de produits, des milliers d'images et des centaines de vidéos pour sauvegarder ces images et ce contenu également.

Vous voulez toujours redimensionner vos images. Vous pouvez regarder des outils en ligne comme Imagify, Youoptimizer, TinyJPG, et regarder ceux pour optimiser vos images dans WordPress. Imagify est créé par la même équipe que WP Rocket et c'est un plug-in très intuitif qui compresse automatiquement les images en utilisant trois types de niveaux différents : normal, agressif et ultra. Et cela vous permet de personnaliser la taille d'image qui convient à vos utilisateurs finaux.

Faites également attention à la taille de vos vignettes. Gardez-les petits, parce qu'ils sont petits de toute façon. Gardez les arrière-plans simples. Utilisez des outils comme remove.bg et Slazenger pour supprimer les arrière-plans et mettre à jour les arrière-plans pour les simplifier. Et utilisez également un CDN pour une livraison mondiale plus rapide. Toujours, ainsi, avec vos images, attachez toujours d'autres étiquettes utiles à ces images.

Cela aide avec le référencement, l'optimisation des moteurs de recherche. Et assurez-vous toujours que vos étiquettes reflètent bien le contenu de votre image ou de votre vidéo. En tant que développeurs, nous pouvons parfois utiliser des abréviations comme RDHD ou simplement utiliser une bande Y. Nous savons que c'est un chapeau rouge avec une bande jaune. Mais le référencement ne le saurait pas, alors essayez d'être plus réel ou plus linguistique en termes de présentation d'image.

Donc, l'optimisation vidéo également, utilisez des outils de compression de données. Encore une fois, n'oubliez pas vos utilisateurs mobiles. Convertissez tout, si possible, aux formats HTML5. Pour toute vidéo qui n'a pas de son, supprimez complètement l'audio. Cela ne sert à rien de l'avoir car cela consomme juste de la bande passante. Utilisez à nouveau, les réseaux de diffusion de contenu. Spécifiez vos sites vidéo et encore une fois, également en ce qui concerne le chargement paresseux, reportez toujours le chargement de ces images jusqu'à ce que votre page soit complètement téléchargée.

Optimisation des moteurs de recherche - comme nous le savons peut-être, l'optimisation de la recherche est essentiellement une méthode de ce que nous appelons le déchargement de votre recherche vers un fournisseur de services particulier qui est expert dans ce domaine, car il peut augmenter l'efficacité de votre recherche et ainsi augmenter vos ventes pour votre commerçant et utilisateur. Comme nous le savons par défaut, WooCommerce est livré avec une fonction de recherche intégrée. Mais cela laisse beaucoup à désirer en ce qui concerne la fonctionnalité autour des correspondances pour les attributs de produit, les champs personnalisés et les descriptions. C'est très lent. Il n'offre pas une bonne expérience utilisateur. Et à la fin de la journée, c'est très inefficace.

Si vous effectuez une recherche - une recherche de produits sur WooCommerce, il s'agit d'une caractéristique commune qui ne fonctionne pas aussi bien que vous le souhaitez. Vraiment, ce que vous voulez faire, c'est avoir une fonction de recherche qui a une forte tolérance aux erreurs afin de ne pas interrompre le parcours client. Vous voulez qu'ils puissent avoir une saisie semi-automatique de requête forte et l'avoir dans un traitement du langage naturel pour de meilleurs résultats, ce qui manque à la recherche WooCommerce.

Vous souhaitez également disposer d'une fonctionnalité autour d'analyses complètes pour des améliorations faciles dans les rapports afin que vous puissiez réellement regarder et voir l'efficacité de votre recherche que vous avez construite en termes de réponses, ce que vos clients recherchent, dans quelle mesure cela correspond-il aux produits, et quels changements pouvez-vous faire dans la configuration pour réellement aider cela ? En gros, aidez votre client à trouver plus rapidement ce qu'il recherche.

Et alors que pouvons-nous faire ? Comme je l'ai mentionné, ce que nous faisons pour réduire les frictions dans l'expérience de recherche et aider les clients à trouver ce qu'ils veulent, nous utilisons le déchargement de la recherche. Il s'agit donc d'un processus essentiellement effectué par un tiers. Il améliore la capacité de recherche de WooCommerce car il est intégré à Woo. Il a essentiellement des widgets pour filtrer selon vos besoins. Il fournit des résultats aux utilisateurs, ce qui peut contribuer à améliorer la confiance dans la marque.

Il a une suggestion automatique et vous pouvez configurer et personnaliser la pondération. Vous pouvez donner des résultats aux clients - des résultats personnalisés. Vous pouvez avoir une recherche automatique instantanée et des analyses de recherche, comme je l'ai mentionné, ce qui est essentiel. Il ne sert à rien d'effectuer une recherche si vous ne pouvez pas analyser la recherche pour voir son efficacité. Et cela aide également à affiner votre intégration SEO pour s'assurer que les clients peuvent trouver ce qu'ils veulent. Quand ils vont chercher sur Google, ils vont sur ce site particulier en fonction de ce que vous recherchez.

Il aide également à découvrir l'intention des clients et révèle des données sur les intérêts des clients. Que cherchent-ils? Que cherchent-ils à acheter ? Qu'est-ce qui les attire sur votre site ? Que recherchent-ils ?

Notre recommandation concernant la recherche est de rechercher la saisie semi-automatique. Faites donc des suggestions par rapport à cela. Et ayez toujours la correction d'erreurs activée. Donc, si quelqu'un a tapé quelque chose d'incorrect par rapport à un produit, essayez de ne pas vous en souvenir. Essayez de toujours vous souvenir de l'orthographe ou de la description correcte par rapport à un produit. Jamais, lorsque la recherche est activée sur votre site, ne laissez jamais un utilisateur tomber dans une impasse.

Ayez toujours une page. Même s'ils recherchent quelque chose qui ne se trouve pas sur votre site, dirigez-les vers une page indiquant que nous ne pouvons actuellement pas trouver ce produit particulier. Veuillez contacter notre service commercial et ainsi de suite, et nous pouvons vous aider à le faire. Il s'agit d'une meilleure expérience pour cet utilisateur particulier et générerait également la confiance avec ce client.

Optimisez toujours. Au fur et à mesure que vous effectuez des recherches analytiques basées sur ce que les clients recherchent, optimisez par rapport à ces termes afin que lorsque d'autres clients reviennent les chercher, ils puissent réellement les découvrir. Utilisez des balises, des titres et des descriptions sur tous vos produits. Ils sont le pain et le beurre de votre recherche.

Assurez-vous donc que toutes vos données sont exactes, qu'elles reflètent ce qu'est le produit et décrivent toujours autant que possible les produits individuels qui se trouvent sur un site marchand particulier. Configurez votre recherche pour mobile. Et la recherche mobile est un peu différente de la recherche sur ordinateur portable en termes de site Web, dirons-nous. Assurez-vous simplement que vous avez configuré et activé cela dans votre recherche. Et référez-vous toujours à vos analyses.

En ce qui concerne WP Engine, nous nous sommes associés à ElasticPress pour proposer, essentiellement, ce que nous pensons être un plug-in de recherche premium qui est automatiquement installé par défaut et dans le cadre de notre offre de commerce électronique. Il offre toutes les suggestions automatiques, la pondération, les résultats des clients et bien d'autres.

Et maintenant, je suis en quelque sorte au complet sur mes trois conseils en matière de conseils, d'orientation pour WooCommerce et je vais le retourner à Jeremy. Alors voilà, Jérémie. Merci.

JEREMY BENOIT : Un autre domaine à examiner est le fragment de panier AJAX. Le fragment de panier AJAX est un morceau de code recherché. Il est connu pour générer des retards, provoquer des pics de serveur et s'exécuter inutilement. Mais le fragment de panier AJAX est-il vraiment si mauvais ?

Eh bien, son but est de mettre à jour le panier avec de nouveaux produits, de nouveaux prix de produits, de nouvelles quantités de produits, de calculer les prix sans forcer le rechargement de la page. Le script de l'agent de fragments de panier, cependant, s'exécute sur chaque page - la page d'accueil, la page du produit et même les pages où il n'y a pas d'actions d'ajout au panier. Cela pourrait être votre page à propos de nous ou même votre page de contact.

Maintenant, cette exécution ou cette exécution est souvent la cause, parfois, de pics de serveur ou d'utilisation de ressources inutiles qui interrompent les performances de votre site et l'expérience de votre client. Désormais, idéalement, le fragment de panier AJAX ne devrait s'exécuter que là où vous avez une action d'ajout au panier ou si vous avez un panier dynamique sur votre site où une action peut être utilisée pour ouvrir ou interagir dynamiquement avec le panier. Alors, que peut-on faire à propos du fragment de panier AJAX ?

Eh bien, le plus souvent, les gens suggèrent, comme nous le faisons, de désactiver ce fragment de panier et il existe deux façons de désactiver le fragment de panier AJAX. A, vous souhaitez ajouter un plug-in doté d'une capacité de désactivation des fragments de panier. Il existe de nombreux plug-ins qui peuvent désactiver votre fragment de panier. Mais l'autre moyen est que si vous êtes familier avec l'édition de php, vous pouvez désactiver la fragmentation du panier en éditant le fichier functions.php de votre thème.

Il y a des risques. Certains widgets de panier peuvent rencontrer des problèmes lorsque vous avez désactivé le fragment de panier. Vous souhaitez donc tester les widgets de votre panier après les avoir désactivés pour vous assurer qu'ils fonctionnent comme vous le souhaitez.

Maintenant, la prochaine astuce ou astuce consiste à utiliser le tableau de commande personnalisé une fois qu'il est publié. Vous pouvez demander, que voulez-vous dire? Bien plus tard, dans ce– dans DE{CODE}, WooCommerce vous parlera du nouveau tableau de commandes personnalisées qui sera publié plus tard cette année. Et la table WooCommerce est– la table des commandes a un dilemme de structure. Beaucoup d'entre vous le savent, cela est souvent indiqué comme la raison d'une mauvaise mise à l'échelle. Mais cela peut aussi être un problème de vitesse lorsqu'il s'agit d'interactions qui traitent de produits, ou d'interactions qui traitent de commandes, et, parfois, même de données de plug-in.

À l'heure actuelle, WooCommerce utilise la méta-table de publication qui stocke une variété d'entités de données, y compris des commandes et des produits, ainsi que des données de plug-in ajoutées et chaque fois qu'il y a un appel pour l'une de ces entités, elles frappent toutes le même provenance. Vous pouvez donc imaginer que soulager cet embouteillage en créant des tableaux de commande personnalisés ajoutera une intégrité structurelle à WooCommerce d'un véritable moteur de commerce électronique et améliorera la vitesse de tout type d'activité de commande. Ce sera un excellent support, en particulier pour les sites qui ont un trafic élevé et un volume de commandes élevé, ou même des sites qui ont un très grand catalogue de produits.

En ayant ces trois types de tables différents, de nouvelles tables principales pour les informations de commande principales, de nouvelles tables de plug-in pour les données de plug-in en particulier et de nouvelles méta-tables pour tout type de métadonnées personnalisées qu'un développeur doit stocker, cela soulagera le goulot d'étranglement que la méta-table de publication a précédemment et actuellement pour les interactions de vos commandes. Il y aura également des index dédiés pour ces tables, ce qui aidera à accélérer la récupération de ces entités spécifiques dans chacune de ces tables. Et vous en apprendrez plus sur la table de commande personnalisée plus tard dans DE{CODE}.

Jetons donc un coup d'œil à la troisième amélioration, la vitesse du sans tête. Donc, cette astuce est d'aller sans tête parce que sans tête, la pile sans tête, augmente la vitesse de plusieurs ordres de grandeur. Le code JavaScript dans le front-end de votre infrastructure sans tête sera beaucoup plus rapide et, dans certains cas, 10 fois plus rapide que l'infrastructure WordPress traditionnelle. Nous avons même des clients sur notre infrastructure Atlas qui voient des augmentations de six fois dans toutes les métriques Lighthouse.

Et chez WP Engine, nous avons une infrastructure sans tête appelée Atlas. Cette infrastructure permet – a également un composant appelé notre moteur de contenu, qui augmente considérablement la vitesse de récupération de toutes sortes de contenus statiques et dynamiques sur votre instance WooCommerce. Les infrastructures sans tête vous permettent également de personnaliser les intégrations back-end et créent des opportunités d'optimisations ultra-rapides avec les applications tierces auxquelles votre site WooCommerce doit s'intégrer. Et c'est mon dernier conseil pour aujourd'hui.