Souhaitez-vous relancer votre site de commerce électronique ou en lancer un tout nouveau ? Il s’agit d’un défi passionnant, car le commerce électronique ouvre d’immenses perspectives de croissance pour les entreprises de vente au détail. Une présence en ligne peut être la clé du succès ou un choix nécessaire pour survivre à la concurrence internationale.
Le commerce électronique peut vous permettre de commercialiser d’excellents produits locaux dans le monde entier sans passer par l’intermédiaire de la distribution, de tirer parti de stratégies de marketing avancées , telles que la publicité ciblée et les campagnes dans les réseaux sociaux, et de profiter des outils d’intelligence artificielle pour améliorer l’efficacité opérationnelle, l’expérience des clients et les stratégies de marketing.
Toutefois, le lancement d’un site de commerce électronique nécessite une planification stratégique et organisationnelle minutieuse, une analyse approfondie des coûts et des avantages, des forces et des faiblesses, des menaces et des opportunités.
Et ce n’est pas tout. Pour réussir votre eCommerce, vous avez besoin d’un site web moderne, rapide et sécurisé pour soutenir votre activité. Un site de commerce électronique réussi doit offrir une expérience d’achat fluide, être conforme aux réglementations internationales en matière de protection de la vie privée telles que le RGPD, garantir des transactions sécurisées et accompagner vos clients tout au long de l’entonnoir de vente jusqu’au point d’achat.
Il doit être optimisé pour le SEO, évolutif en cas de besoin, flexible et facile à gérer afin que vous puissiez vous concentrer sur votre activité sans perdre de temps et de ressources sur des problèmes techniques.
Ce n’est pas une tâche facile, mais un site de commerce électronique peut vous offrir de grandes possibilités de développement de votre entreprise.
En résumé, les trois aspects à prendre en considération lors de la planification d’un site web de commerce électronique sont la performance, la sécurité et la fonctionnalité.
Nous avons donc rassemblé nos meilleures recommandations sur l’optimisation du commerce électronique dans trois articles, chacun se concentrant sur l’un de ces trois domaines.
Ce premier article se concentre sur les performances, en partageant une liste de 10 meilleures pratiques pour optimiser la vitesse et les performances de votre site de commerce électronique.
Dans les deux articles suivants, nous nous concentrerons sur la sécurité du site et la fonctionnalité du service d’hébergement, en nous attardant sur les avantages qu’un hébergement optimisé pour le commerce électronique peut garantir.
Êtes-vous prêt à savoir ce dont vous avez besoin pour lancer un site de commerce électronique réussi et partir à la conquête des marchés internationaux ? Poursuivez votre lecture !
Par où commencer pour lancer un site eCommerce moderne ?
Un site de commerce électronique moderne nécessite plusieurs caractéristiques techniques et fonctionnelles pour améliorer l’interaction de l’utilisateur avec le site et garantir une expérience de navigation et d’achat riche et agréable.
D’un point de vue technique, un site de commerce électronique doit être optimisé en termes de performances et de sécurité. Il doit être facile à gérer pour votre équipe et facilement évolutif.
La création d’un site web présentant ces caractéristiques nécessite une infrastructure de pointe, un réseau de diffusion de contenu de classe entreprise, des fonctions avancées pour les développeurs, un système de sauvegarde efficace et facile à utiliser, ainsi qu’un service d’assistance rapide et compétent.
La première étape avant de lancer un site de commerce électronique consiste donc à trouver où obtenir les services et les outils dont vous avez besoin. Cette décision consiste à choisir un fournisseur d’infrastructure d’hébergement. Les options sont presque infinies. Vous pouvez choisir de gérer vos serveurs en engageant un administrateur système ou opter pour une solution entièrement gérée, telle que Wix ou Shopify.
La première option, qui consiste à gérer le serveur en interne, offre un maximum de flexibilité et de personnalisation. Cependant, elle nécessite des ressources considérables et des ingénieurs sysadmin compétents. Les grandes entreprises adoptent généralement cette solution.
La deuxième option, les plateformes entièrement infogérées, présente l’avantage d’une grande facilité d’utilisation, mais ne garantit pas la flexibilité technique et opérationnelle dont votre entreprise peut avoir besoin. En outre, au fur et à mesure de la croissance de l’entreprise, des coûts imprévus peuvent apparaître.
Entre ces deux extrêmes, il existe des solutions basées sur une plateforme open source combinée à un service d’hébergement offrant les fonctionnalités nécessaires au commerce électronique.
Vous pouvez approfondir les différences entre certaines des options disponibles dans nos articles de comparaison :
![Page de l'extension WooCommerce sur WordPress.org](https://kinsta.com/wp-content/uploads/2024/08/woocommerce-plugin.jpg)
Chez Kinsta, nous fournissons un hébergement haut de gamme pour les sites de commerce électronique. Notre infrastructure est optimisée pour la performance, la sécurité et la facilité d’utilisation des sites WordPress, couplés avec les extensions eCommerce les plus populaires, WooCommerce et Easy Digital Downloads. Notre technologie de conteneurs isolés est construite sur Google Cloud Platform et exploite la puissance du réseau Cloudflare pour garantir une performance et une sécurité maximales.
C’est la solution technique que nous recommandons à tous ceux qui se posent la question : quelle est la meilleure infrastructure d’hébergement pour un site de commerce électronique moderne ?
Commençons par les performances de l’e-commerce !
10 bonnes pratiques pour optimiser les performances de votre site eCommerce
Selon des études récentes sur les taux de conversion du commerce électronique, le principal facteur de succès d’un site de commerce électronique réside dans la vitesse de chargement des pages. Un site de commerce électronique qui se charge en 1 seconde a un taux de conversion 2,5 fois plus élevé qu’un site qui se charge en 5 secondes.
En outre, les pages qui se chargent en 1 seconde ont un taux de conversion moyen d’environ 40 %. Si le temps de chargement passe à 2 secondes, le taux de conversion tombe à 34 %. À 3 secondes, le taux de conversion est de 29 % et atteint un minimum à 6 secondes.
L’analyse suggère d’optimiser votre commerce électronique pour une vitesse de chargement comprise entre une et deux secondes.
Comment atteindre ce niveau de performance ? L’optimisation des performances est un processus d’amélioration continue qui touche plusieurs domaines d’un site web. Sa valeur stratégique est particulièrement évidente pour le commerce électronique, qui consomme généralement de plus grandes quantités de ressources.
Pour aider les propriétaires de sites de commerce électronique à optimiser les performances de leurs sites web, nous avons établi une liste de contrôle essentielle des optimisations nécessaires pour améliorer les performances et la vitesse des pages.
En bref, quels sont les facteurs clés à prendre en compte pour optimiser les performances de votre site de commerce électronique ? Plongeons dans le vif du sujet !
1. Choisir une infrastructure d’hébergement et une pile technique de pointe
Lorsque vous choisissez un service d’hébergement pour votre site de commerce électronique, il est essentiel de connaître la pile technologique qu’il propose.
La première décision concerne le type de service d’hébergement. Il existe plusieurs types d’hébergement web, qui diffèrent considérablement en termes d’infrastructure et de services :
- Hébergement partagé
- Hébergement dédié
- Hébergement VPS
- Hébergement cloud
- Hébergement WordPress infogéré
Comme il est impératif de garantir des performances maximales à votre commerce électronique, l’infrastructure doit être à haut débit. Cela exclut l’hébergement mutualisé qui, bien que peu coûteux (voire gratuit), ne garantit pas les normes minimales de performance et de sécurité dont un site de commerce électronique ne peut se passer pour réussir sur le marché.
Un service d’hébergement dédié basé sur un VPS peut être hautement personnalisé et optimisé en termes de performances. Cependant, il nécessite des compétences d’administrateur système, ce qui peut s’avérer trop onéreux pour une petite ou moyenne entreprise. Un service d’hébergement cloud peut offrir les performances et la sécurité nécessaires à un site de commerce électronique moderne et ne nécessite pas nécessairement de compétences techniques avancées.
Il est facile de trouver des fournisseurs de services d’hébergement WordPress et WooCommerce infogérés si vous travaillez avec WordPress. Cela signifie que vous ne serez pas responsable de la configuration et de l’optimisation du serveur, que vous bénéficierez d’un service d’assistance spécialisé et que l’installation et la maintenance du site seront simplifiées.
Il est également nécessaire de doter votre site web d’une pile technique de pointe. La plupart des hébergeurs fournissent une pile basée sur le serveur web Apache et MySQL. Cependant, vous pouvez envisager une technologie plus moderne et plus performante, telle que Nginx et MariaDB.
Infrastructure d’hébergement et pile technique de Kinsta
Chez Kinsta, nous pensons avoir créé la meilleure et la plus rapide des solutions d’hébergement WordPress managées disponibles aujourd’hui sur Google Cloud Platform.
![Régions de Google Cloud](https://kinsta.com/wp-content/uploads/2024/08/google-cloud-regions.jpg)
Nous fournissons des VMs C3D et C2 optimisées pour le calcul sur tous les plans, de Starter à Enterprise et au-delà, dans les régions où elles sont disponibles. Nous tirons également parti du réseau Premium Tier à faible latence de Google, qui est mis à la disposition de tous nos clients sans frais supplémentaires.
![Réseau Google Cloud](https://kinsta.com/wp-content/uploads/2024/08/google-cloud-network.jpg)
En outre, nous avons construit une pile technique rapide et solide basée sur Nginx, MariaDB, PHP 8.3, LXD container, et notre intégration de Cloudflare Enterprise. Cette pile est disponible pour tous nos clients, quel que soit leur plan.
Consultez cet article pour savoir pourquoi Kinsta est l’hébergeur WordPress infogéré le plus rapide.
2. Utiliser les versions PHP supportées
Selon W3Techs, en août 2024,
PHP est utilisé par 76,1 % de tous les sites web dont nous connaissons le langage de programmation côté serveur.
La version 7 est utilisée par 52,6 % de tous les sites web qui utilisent PHP, la version 8 par 33,0 % et la version 5 par 14,2 %.
Si vous exploitez un site web de commerce électronique, vous devez savoir quelle version de PHP votre site utilise et pourquoi vous devriez préférer une version prise en charge.
En bref, PHP a un cycle de vie de versions, et chaque version majeure est généralement prise en charge pendant deux ans. Les versions prises en charge sont les seules à recevoir des mises à jour de performance et de sécurité. L’utilisation d’une version non prise en charge de PHP implique donc des performances réduites et des vulnérabilités de sécurité accrues par rapport aux versions prises en charge.
En août 2024, les versions officiellement supportées de PHP sont PHP 8.1, 8.2 et 8.3.
![Versions de PHP supportées](https://kinsta.com/wp-content/uploads/2024/08/supported-php-versions.png)
Nous avons effectué nos propres tests de vitesse avec PHP 8.1, 8.2 et 8.3 et plusieurs CMS et frameworks, et nous avons constaté que PHP 8.3 était la version de PHP la plus rapide, fournissant jusqu’à 52,20 % d’augmentation de performance aux CMS et frameworks testés.
Versions de PHP sur Kinsta
Chez Kinsta, nous ne fournissons que des versions de PHP supportées. Nous supportons actuellement PHP 8.1, 8.2, 8.3.
Vous pouvez rapidement et facilement changer la version PHP de votre site WordPress dans MyKinsta. Naviguez dans la section de configuration de votre site WordPress et sélectionnez Outils dans le menu de gauche. Ici, vous trouverez plusieurs outils disponibles pour nos clients. Faites défiler la page et trouvez le moteur PHP. Cliquez sur le bouton Modifier et sélectionnez la version PHP dont vous avez besoin pour votre site web.
![Modifier le moteur PHP dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/modify-php-engine-mykinsta.jpg)
3. Exploiter le cache pour de meilleures performances
Le cache est une partie de la mémoire utilisée pour stocker des copies de ressources qui peuvent être servies lors de requêtes ultérieures sans avoir à télécharger à nouveau la page complète. Il existe plusieurs types de caches, chacun ayant un but spécifique, mais les types de caches qui nous intéressent ici sont le cache du navigateur et le cache de WordPress.
Chaque réponse du serveur doit fournir les en-têtes HTTP corrects afin que le navigateur sache combien de temps il doit mettre en cache une copie de la ressource demandée. Cela se fait en définissant les en-têtes ETag et Expires dans la requête HTTP.
WordPress possède son propre système de cache. L’objet WP_Object_Cache
permet de réduire le nombre de requêtes à la base de données : « Le cache objet stocke toutes les données du cache en mémoire et rend le contenu du cache disponible à l’aide d’une clé, qui est utilisée pour nommer et récupérer ultérieurement le contenu du cache. »
Les utilisateurs de WordPress peuvent installer une extension de mise en cache tierce pour WordPress. Des outils tels que W3 Total Cache et WP Super Cache vous permettent de gérer le cache de WordPress de manière granulaire. Ils peuvent être très utiles si vous optez pour une solution d’hébergement partagé ou si l’hébergeur ne fournit pas de solutions de gestion du cache plus efficaces.
Ces outils sont compliqués à configurer et peuvent nécessiter des connaissances que tous les propriétaires de sites ne possèdent pas. En résumé, vous avez besoin d’un moyen simple de gérer votre cache.
![Extensions de cache dans la bibliothèque des extensions WordPress](https://kinsta.com/wp-content/uploads/2024/08/wordpress-caching-plugins.jpg)
En ce qui concerne le commerce électronique, vous pouvez également souhaiter exclure certaines pages, telles que « Mon compte » et « Commander », de la mise en cache. C’est essentiel pour garantir une expérience d’achat irréprochable aux clients de votre site web. Mais comment faire ?
Gestion du cache sur Kinsta
La gestion du cache peut être déconcertante, surtout si vous manquez de compétences techniques. Sur Kinsta, cependant, la gestion du cache est facile, et tous les paramètres sont commodément rassemblés dans une seule section de votre tableau de bord MyKinsta.
La principale différence entre le cache Kinsta et les extensions WordPress tierces est que le cache Kinsta fonctionne au niveau du serveur.
Dans MyKinsta, naviguez vers les sites WordPress et sélectionnez votre site web. Sur la page des réglages du site, cliquez sur l’élément de menu Cache gauche et sélectionnez l’onglet Cache serveur. Ici, vous pouvez vider le cache et modifier l’expiration du cache.
![Modifier l'expiration du cache dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/change-cache-expiration-mykinsta.jpg)
Les extensions de mise en cache ne sont pas autorisées sur Kinsta, ce qui semble être une contradiction avec ce que nous avons dit dans la section précédente. Cependant, c’est parce que Kinsta s’occupe du cache sur le serveur pour vous, offrant ainsi de meilleures performances et une gestion plus facile.
Spécifiquement pour les sites WooCommerce et EDD, Kinsta contourne automatiquement le cache lorsque des cookies woocommerce_items_in_cart
ou edd_items_in_cart
sont détectés. Cela permet une expérience d’achat fluide pour tous vos clients.
Les utilisateurs de Kinsta peuvent également gérer le cache directement depuis leur tableau de bord WordPress grâce à l’extension Kinsta MU, qui est automatiquement installée sur tous les nouveaux sites WordPress hébergés par Kinsta.
![Réglages de l'extension WordPress Kinsta MU](https://kinsta.com/wp-content/uploads/2024/08/kinsta-mu-plugin.jpg)
Dans l’écran de cache de Kinsta, vous pouvez effectuer les actions suivantes :
- Effacer tous les caches
- Effacer le cache du site
- Effacer le cache des objets
- Effacer le cache CDN
- Ajouter des URL personnalisées à purger
- Activer/désactiver la purge automatique
L’extension Kinsta cache fournit également un bouton dans la barre d’administration qui vous permet d’effacer le cache :
- Tout le cache
- Cache du serveur (aka full-page cache)
- Cache d’objet
- Cache CDN
Le cache CDN est un autre type de cache. Lisez la suite pour en savoir plus.
4. Utiliser un réseau de diffusion de contenu
Un CDN est un réseau de serveurs qui stockent des ressources statiques telles que des images, des scripts et des feuilles de style afin qu’elles puissent être transmises aux visiteurs du site à partir de l’emplacement géographique le plus proche.
Un CDN fournit généralement des services et des fonctionnalités qui peuvent améliorer considérablement les performances et la sécurité d’un site web. En ce qui concerne les performances, un CDN peut vous aider dans les domaines suivants :
- Réduire la latence du réseau et le temps de chargement global d’un site web
- Réduire le temps d’accès au premier octet (TTFB)
- Exploiter les technologies de pointe en matière de mise en cache
- Réduire la taille des pages grâce à un service de compression de données tel que GZIP ou Brotli et à l’optimisation automatique des images
- Réduire les coûts de la bande passante
- Améliorer l ‘évolutivité
- Améliorer le référencement
Kinsta CDN
Kinsta fournit une intégration CDN Cloudflare gratuite sur tous nos plans d’hébergement. Cela signifie que vous pouvez profiter gratuitement des fonctionnalités de Cloudflare pour les entreprises, indépendamment du plan auquel vous avez souscrit.
Cloudflare fournit un service de mise en cache des ressources statiques qui peut augmenter de manière significative les performances des sites de commerce électronique. Ce service est particulièrement utile lorsque votre public cible est réparti sur une vaste zone géographique.
Grâce à l’intégration de Cloudflare, nous pouvons fournir à tous nos clients, indépendamment de leur plan, les fonctionnalités d’entreprise suivantes :
Avec Kinsta, vous pouvez profiter de toutes ces fonctionnalités en activant le CDN de Cloudflare dans la section Cache de votre tableau de bord MyKinsta, où vous pouvez gérer Cache edge et Cache CDN.
Vous pouvez activer les options Cache mobile, Vider le cache et Vider le cache de l’URL dans l’ onglet cache edge.
![Options de mise en cache dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/edge-caching-mykinsta.jpg)
Sous l’onglet CDN, vous pouvez effacer le cache CDN, optimiser les images et exclure des fichiers spécifiques de la mise en cache CDN.
![Options de cache CDN dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/cdn-cache-mykinsta.jpg)
5. Optimiser les images
L’optimisation des images est vitale pour la vitesse des pages. L’optimisation des images n’est pas compliquée pour les débutants, mais vous devez tout de même avoir quelques connaissances de base.
Vous pouvez optimiser les images de plusieurs manières. Tout d’abord, vous devez identifier le format d’image qui correspond le mieux aux caractéristiques de l’image. Outre les formats traditionnels JPEG, PNG et GIF, les formats d’image optimisés pour le web, tels que WebP et Avif, offrent des niveaux de compression élevés et une qualité supérieure. WordPress prend en charge ces deux formats dès le départ, vous êtes donc libre de les utiliser sur votre site de commerce électronique.
![Support du format AVIF](https://kinsta.com/wp-content/uploads/2024/08/avif.jpg)
Une fois que vous avez choisi le bon format d’image, vous pouvez passer à la compression. Il existe deux types de compression d’image: avec ou sans perte. La compression avec perte est plus efficace pour réduire la taille des fichiers. Cependant, vous devez tenir compte de la perte d’informations et, par conséquent, de la diminution de la qualité de l’image.
Si la qualité de l’image est essentielle pour votre site web, la compression sans perte peut être le bon choix, bien que les économies de taille puissent être insignifiantes. Pour compresser les images sans perte d’informations, vous aurez besoin d’outils tels que FileOptimizer ou ImageOptim pour WordPress ou d’un logiciel de retouche photo tel que Photoshop. Une autre option est la compression Gzip.
Optimiser vos images avec Kinsta
Grâce à l’intégration de Cloudflare, Kinsta offre une optimisation gratuite des images. Cela signifie que vos images PNG, GIF et JPEG sont automatiquement converties au format WebP pour améliorer la vitesse et les performances de votre site web sans utiliser d’extension tierce.
Vous pouvez activer l’optimisation automatique des images dans MyKinsta sous Cache > CDN > Optimisation d’image.
![Optimisation des images dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/image-optimization-mykinsta.jpg)
Cliquez sur le bouton Réglages dans la boîte Optimisation d’image et sélectionnez le type d’optimisation dont vous avez besoin.
![Optimisation d'image dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/image-optimization-options-mykinsta.jpg)
6. Réduire la taille des ressources HTML, CSS et JavaScript
Vous pouvez réduire la quantité de données que le navigateur télécharge pour rendre une page à l’écran grâce à la minification, la compression et la mise en cache des ressources HTML, CSS et JavaScript.
La minification du code consiste à supprimer les caractères inutiles du code source. Les commentaires et les espaces blancs sont utiles au développement, mais le navigateur n’en a pas besoin pour rendre la page. Grâce à la minification du code, vous pouvez réduire la taille des ressources HTML, CSS et JS de 50 % ou plus.
Il convient toutefois de noter que Cloudflare a récemment annoncé la suppression de sa fonction Auto Minify :
Les raisons pour lesquelles nous prévoyons de supprimer cette fonction sont multiples mais se résument au fait qu’il s’agit d’une fonction de performance utilisée dans le but de réduire le poids des pages, et qu’elle n’est pas aussi efficace que d’autres projets sur lesquels Cloudflare travaille, comme l’amélioration de la compression.
Vous pouvez réduire la taille des fichiers transmis afin d’augmenter la vitesse des pages et d’utiliser moins de bande passante grâce à la compression. La compression GZIP vous permet de compresser un ensemble de données brutes sans perte d’informations. Tout type de fichier peut être compressé, mais GZIP fonctionne mieux avec les ressources textuelles telles que HTML, CSS et JS. Un autre type de compression est Brotli, qui est plus récent et plus efficace que GZIP et qui est pris en charge par tous les principaux navigateurs.
![Prise en charge de Brotli dans les navigateurs modernes](https://kinsta.com/wp-content/uploads/2024/08/brotli.png)
Compression des ressources sur Kinsta
Alors qu’il existe plusieurs étapes pour activer la compression Brotly dans WordPress, les clients de Kinsta n’ont absolument rien à faire pour exploiter la puissance de cet algorithme de compression. Grâce à l’intégration de Cloudflare, chaque site web hébergé par Kinsta utilise Brotli par défaut.
Vous pouvez vérifier le type de compression dans l’inspecteur de votre navigateur. Sélectionnez une ressource dans l’écran Réseau > Tous et recherchez l’en-tête content-encoding
. Celui-ci indique le type de compression activé sur votre site web. br
signifie Brotli.
![Brotli est activé par défaut pour tous les sites web hébergés par Kinsta](https://kinsta.com/wp-content/uploads/2024/08/content-encoding-brotli.png)
7. Éliminer les ressources bloquant le rendu
Vous pouvez éliminer le JavaScript qui bloque le rendu en ajoutant les attributs async
et defer
aux balises <script>
. Cela peut améliorer ce que l’on appelle la First Contentful Paint. Plus précisément :
- Les scripts dotés de l’attribut
async
sont exécutés de manière asynchrone dès qu’ils sont chargés. Une fois le script chargé, le navigateur fait une pause, analyse le code HTML et exécute le script. - Les scripts dotés de l’attribut
defer
ne sont exécutés qu’une fois l’analyse de la page terminée.
![Le message Eliminate Render-Blocking Resources dans PageSpeed Insights](https://kinsta.com/wp-content/uploads/2024/08/eliminate-render-blocking-resources-pagespeed-insights.jpg)
Vous pouvez également éliminer les CSS qui bloquent le rendu en donnant la priorité aux ressources situées au-dessus du pli, en ajoutant des CSS en ligne, en utilisant l’attribut media
et en utilisant JavaScript pour charger de manière asynchrone ou différer le chargement des CSS.
Tout cela peut s’avérer un peu compliqué si vous n’êtes pas un développeur frontend, mais vous pouvez utiliser une extension WordPress qui peut faire tout le sale boulot pour vous.
En outre, depuis WordPress 6.3, vous pouvez ajouter les attributs async
et defer
lors de l’enregistrement du script et, depuis WordPress 6.4, ces attributs ont été mis en œuvre pour les scripts frontaux dans le noyau de WordPress et les thèmes intégrés.
8. Optimiser le CSS
Il convient d’insister sur les feuilles de style, qui peuvent considérablement alourdir une page web.
Lorsque le navigateur rencontre une balise <link>
, il cesse de télécharger d’autres ressources et d’analyser la page pour télécharger et analyser le fichier CSS. Vous devez également prêter attention à certaines particularités des feuilles de style :
- Plusieurs feuilles de style externes peuvent être liées à la même page.
- Le lien vers d’autres feuilles de style peut provenir d’une autre feuille de style, de sorte qu’il peut ne pas être visible dans le code HTML.
- Une feuille de style mal conçue peut contenir des déclarations qui ne sont pas nécessaires sur toutes les pages du site. Cela peut entraîner une augmentation de la taille des fichiers et des temps de traitement plus longs.
- Il est vrai que les feuilles de style sont mises en cache, mais elles bloquent encore le rendu pendant un certain temps.
Il est donc nécessaire d’optimiser les feuilles de style et d’effectuer une analyse approfondie à l’aide d’outils de développement de navigateur, tels que Chrome’s Lighthouse et Pagespeed Insights.
Une fois l’analyse effectuée, vous devrez identifier les solutions les plus appropriées pour réduire l’impact des feuilles de style sur les performances. La minimisation et la compression ne sont que deux des options disponibles. Parmi les autres mesures, citons la mise en cache des fichiers en définissant des en-têtes Expires et ETag, le choix optimal du thème et des extensions du site, la suppression du code CSS superflu, l’optimisation des polices de caractères web et d’autres mesures d’optimisation des performances.
Cependant, la meilleure option pour un développeur est toujours de concevoir ses styles en suivant les meilleures pratiques CSS dès le départ.
9. Réduire le nombre de requêtes HTTP
Les images, les scripts et les feuilles de style sont des ressources essentielles pour un site web. Cependant, il existe d’autres ressources moins essentielles, mais parfois critiques pour l’objectif spécifique du site, notamment la vidéo, le contenu multimédia et les polices de caractères web. Chaque ressource génère une requête HTTP au serveur web qui l’héberge, et chaque requête nécessite des temps de traitement et de réponse qui s’additionnent les uns aux autres, augmentant ainsi le temps de chargement global de la page.
C’est pourquoi il est essentiel de minimiser le nombre de requêtes HTTP adressées au serveur.
Là encore, plusieurs outils d’analyse des performances peuvent vous aider à déterminer le nombre de requêtes HTTP. Les outils de développement de navigateur et les outils en ligne tels que Pingdom et GTMetrix peuvent être des alliés précieux lorsqu’il s’agit de problèmes de performance.
Parmi les nombreuses solutions qu’un développeur peut mettre en œuvre pour réduire le nombre de requêtes HTTP, la plus efficace consiste à supprimer les ressources inutiles de la page.
Les utilisateurs de WordPress devraient supprimer toutes les extensions qui ne sont pas strictement nécessaires ou au moins charger de manière sélective les extensions qui ne sont pas nécessaires sur l’ensemble du site web. Ils doivent également choisir les extensions les plus fiables et les plus légères disponibles et éviter les extensions dites « nulled »
Une autre option consiste à concaténer tous les fichiers CSS dans une seule feuille de style.
D’autres mesures peuvent être prises pour réduire le nombre de requêtes HTTP : le chargement paresseux des ressources, l’utilisation de polices système dans la mesure du possible, la réduction des requêtes HTTP émanant de tiers, comme les vidéos YouTube, et l’utilisation de sprites CSS pour les icônes et les logos.
![Un exemple de sprites CSS d'Amazon.](https://kinsta.com/wp-content/uploads/2020/10/amazon-css-sprite-example.png)
10. Surveiller les performances de votre site de eCommerce à l’aide d’un outil APM
Avez-vous déjà utilisé un outil de contrôle des performances pour votre site de commerce électronique ? Si ce n’est pas le cas, vous devriez le faire. Un outil de contrôle des performances, ou APM, vous permet de mesurer le temps d’exécution de chaque processus sur votre site web, comme les processus PHP, les requêtes de base de données, les appels AJAX, et bien plus encore.
Il est essentiel de connaître le processus ou l’extension qui ralentit ou bloque votre site de commerce électronique, car chaque seconde de retard dans le chargement des pages vous fait perdre des ventes, sans compter que cela peut nuire à votre image de marque.
Personne ne veut confier les détails de sa carte bancaire à un site web qui ne fonctionne pas comme prévu. C’est pourquoi l’utilisation d’un outil APM est cruciale.
Plusieurs outils APM sont disponibles sur le marché, notamment New Relic, LogRocket, Dynatrace et bien d’autres. Vous devez vérifier les plus populaires et choisir celui qui convient le mieux à votre entreprise en termes de coûts et de fonctionnalités.
Kinsta APM est gratuit pour tous les plans WordPress
L’outil Kinsta APM vous aide à identifier les goulots d’étranglement des performances PHP sur votre site WordPress sans avoir à souscrire à des services de surveillance tiers tels que New Relic. Il est gratuit pour tous les plans WordPress et est intégré nativement dans MyKinsta.
Pour accéder à l’outil de surveillance des performances de Kinsta, sélectionnez votre site WordPress dans MyKinsta et trouvez l’élément APM dans le menu de gauche.
![Activez l'outil APM de Kinsta dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/kinsta-apm.jpg)
Activez l’APM et sélectionnez la durée de surveillance. L’outil APM consomme des ressources serveur et peut avoir un impact sur les performances de votre site web, c’est pourquoi vous pouvez l’activer pour une durée limitée.
![Sélectionnez la durée de surveillance](https://kinsta.com/wp-content/uploads/2024/08/select-monitoring-time.jpg)
Une fois activé, l’outil APM surveille les processus de votre site web et fournit une grande quantité de données organisées en quatre onglets :
Transactions : Cet écran affiche un diagramme montrant le temps de transaction global pour les processus PHP, MySQL, Redis et externes, ainsi qu’un tableau répertoriant les transactions les plus lentes sur votre site web. Vous pouvez sélectionner une entrée spécifique pour afficher les détails de la transaction.
![Transactions Kinsta APM](https://kinsta.com/wp-content/uploads/2024/08/kinsta-apm-transactions.jpg)
WordPress : Cet écran affiche deux tableaux : Extensions WordPress les plus lentes et Hooks WordPress les plus lents. Une fois de plus, lorsque vous cliquez sur une entrée spécifique, vous serez invité à accéder à un tableau contenant les détails de la transaction.
![Extensions et hooks WordPress les plus lents](https://kinsta.com/wp-content/uploads/2024/08/kinsta-apm-wordpress.jpg)
Base de données: Dans cet écran, vous pouvez trouver les requêtes de base de données les plus lentes, triées par durée. Si vous utilisez le module complémentaire Kinsta Redis, vous trouverez une liste des caches Redis enregistrés les plus lents.
![Requêtes de base de données les plus lentes dans MyKinsta](https://kinsta.com/wp-content/uploads/2024/08/kinsta-apm-database-queries.jpg)
Externe : Cet écran affiche une liste des requêtes externes les plus lentes.
![Requêtes externes les plus lentes](https://kinsta.com/wp-content/uploads/2024/08/slowest-external-requests.jpg)
Vous pouvez approfondir n’importe quelle demande avec les détails de pile et Trace de pile.
![Détails de l'analyse et trace de la pile pour une requête externe](https://kinsta.com/wp-content/uploads/2024/08/external-request-span-details-stack-trace.jpg)
Il s’agit d’un ensemble de données permettant de résoudre tout problème de performance et d’optimiser la vitesse et les performances de votre site de eCommerce.
Si vous souhaitez approfondir votre connaissance de l’outil Kinsta APM, consultez les ressources suivantes :
- La surveillance des performances de WordPress en toute tranquillité
- Comment résoudre les problèmes de performance de WooCommerce en utilisant Kinsta APM
- L’outil APM de Kinsta
- Dépannage de la performance
Résumé
Cet article fournit une liste de contrôle des optimisations essentielles que vous pouvez mettre en œuvre pour améliorer les performances de votre site e-commerce. En tant qu’hébergeur WordPress infogéré et construit sur Google Cloud Platform, nos recommandations s’adressent principalement aux propriétaires de sites eCommerce basés sur WordPress et WooCommerce. Cependant, elles peuvent être utiles quelle que soit la plateforme sur laquelle repose votre site eCommerce.
Certaines optimisations sont directement liées au service d’hébergement ; d’autres peuvent être mises en œuvre par le biais d’extensions WordPress ou de services tiers.
Kinsta offre des options de configuration pour la gestion du cache, l’optimisation des images, la compression des ressources, le contrôle des performances, et bien plus encore, vous permettant d’optimiser votre site WordPress + WooCommerce pour obtenir les meilleures performances.
Si vous souhaitez aller plus loin, consultez les guides et tutoriels suivants :
- Comment accélérer votre site WordPress
- Comment réduire le TTFB pour améliorer les temps de chargement des pages
- Comment optimiser le chemin de rendu critique dans WordPress
- 18 façons puissantes d’accélérer votre boutique WooCommerce
À vous de jouer. Avons-nous oublié quelque chose ? Avez-vous d’autres astuces à partager avec nos lecteurs pour améliorer les performances d’un site de commerce électronique ? Laissez un commentaire ci-dessous et participez à la conversation.
Laisser un commentaire