Toutefois, le lancement d’un site de commerce \u00e9lectronique n\u00e9cessite une planification strat\u00e9gique et organisationnelle minutieuse, une analyse approfondie des co\u00fbts et des avantages, des forces et des faiblesses, des menaces et des opportunit\u00e9s<\/a>.<\/p>\n Et ce n’est pas tout. Pour r\u00e9ussir votre eCommerce, vous avez besoin d’un site web moderne, rapide et s\u00e9curis\u00e9 pour soutenir votre activit\u00e9. Un site de commerce \u00e9lectronique r\u00e9ussi doit offrir une exp\u00e9rience d’achat fluide, \u00eatre conforme aux r\u00e9glementations internationales en mati\u00e8re de protection de la vie priv\u00e9e telles que le RGPD<\/a>, garantir des transactions s\u00e9curis\u00e9es et accompagner vos clients tout au long de l’entonnoir de vente jusqu’au point d’achat.<\/p>\n Il doit \u00eatre optimis\u00e9 pour le SEO<\/a>, \u00e9volutif<\/a> en cas de besoin, flexible et facile \u00e0 g\u00e9rer afin que vous puissiez vous concentrer sur votre activit\u00e9 sans perdre de temps et de ressources sur des probl\u00e8mes techniques.<\/p>\n Ce n’est pas une t\u00e2che facile, mais un site de commerce \u00e9lectronique peut vous offrir de grandes possibilit\u00e9s de d\u00e9veloppement de votre entreprise.<\/p>\n En r\u00e9sum\u00e9, les trois aspects \u00e0 prendre en consid\u00e9ration lors de la planification d’un site web de commerce \u00e9lectronique sont la performance, la s\u00e9curit\u00e9 et la fonctionnalit\u00e9.<\/p>\n Nous avons donc rassembl\u00e9 nos meilleures recommandations sur l’optimisation du commerce \u00e9lectronique dans trois articles, chacun se concentrant sur l’un de ces trois domaines.<\/p>\n 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 \u00e9lectronique.<\/p>\n Dans les deux articles suivants, nous nous concentrerons sur la s\u00e9curit\u00e9 du site et la fonctionnalit\u00e9 du service d’h\u00e9bergement, en nous attardant sur les avantages qu’un h\u00e9bergement optimis\u00e9 pour le commerce \u00e9lectronique peut garantir.<\/p>\n \u00cates-vous pr\u00eat \u00e0 savoir ce dont vous avez besoin pour lancer un site de commerce \u00e9lectronique r\u00e9ussi et partir \u00e0 la conqu\u00eate des march\u00e9s internationaux ? Poursuivez votre lecture !<\/p>\n Un site de commerce \u00e9lectronique moderne n\u00e9cessite plusieurs caract\u00e9ristiques techniques et fonctionnelles pour am\u00e9liorer l’interaction de l’utilisateur avec le site et garantir une exp\u00e9rience de navigation et d’achat riche et agr\u00e9able.<\/p>\n D’un point de vue technique, un site de commerce \u00e9lectronique doit \u00eatre optimis\u00e9 en termes de performances et de s\u00e9curit\u00e9. Il doit \u00eatre facile \u00e0 g\u00e9rer pour votre \u00e9quipe et facilement \u00e9volutif.<\/p>\n La cr\u00e9ation d’un site web pr\u00e9sentant ces caract\u00e9ristiques n\u00e9cessite une infrastructure de pointe, un r\u00e9seau de diffusion de contenu<\/a> de classe entreprise, des fonctions avanc\u00e9es pour les d\u00e9veloppeurs, un syst\u00e8me de sauvegarde<\/a> efficace et facile \u00e0 utiliser, ainsi qu’un service d’assistance<\/a> rapide et comp\u00e9tent.<\/p>\n La premi\u00e8re \u00e9tape avant de lancer un site de commerce \u00e9lectronique consiste donc \u00e0 trouver o\u00f9 obtenir les services et les outils dont vous avez besoin. Cette d\u00e9cision consiste \u00e0 choisir un fournisseur d’infrastructure d’h\u00e9bergement. Les options sont presque infinies. Vous pouvez choisir de g\u00e9rer vos serveurs en engageant un administrateur syst\u00e8me ou opter pour une solution enti\u00e8rement g\u00e9r\u00e9e, telle que Wix<\/a> ou Shopify<\/a>.<\/p>\n La premi\u00e8re option, qui consiste \u00e0 g\u00e9rer le serveur en interne, offre un maximum de flexibilit\u00e9 et de personnalisation. Cependant, elle n\u00e9cessite des ressources consid\u00e9rables et des ing\u00e9nieurs sysadmin comp\u00e9tents. Les grandes entreprises adoptent g\u00e9n\u00e9ralement cette solution.<\/p>\n La deuxi\u00e8me option, les plateformes enti\u00e8rement infog\u00e9r\u00e9es, pr\u00e9sente l’avantage d’une grande facilit\u00e9 d’utilisation, mais ne garantit pas la flexibilit\u00e9 technique et op\u00e9rationnelle dont votre entreprise peut avoir besoin. En outre, au fur et \u00e0 mesure de la croissance de l’entreprise, des co\u00fbts impr\u00e9vus peuvent appara\u00eetre.<\/p>\n Entre ces deux extr\u00eames, il existe des solutions bas\u00e9es sur une plateforme open source<\/a> combin\u00e9e \u00e0 un service d’h\u00e9bergement offrant les fonctionnalit\u00e9s n\u00e9cessaires au <\/span>commerce \u00e9lectronique.<\/p>\n Vous pouvez approfondir les diff\u00e9rences entre certaines des options disponibles dans nos articles de comparaison :<\/p>\n Chez Kinsta, nous fournissons un h\u00e9bergement haut de gamme pour les sites de commerce \u00e9lectronique<\/a>. Notre infrastructure est optimis\u00e9e pour la performance, la s\u00e9curit\u00e9 et la facilit\u00e9 d’utilisation des sites WordPress, coupl\u00e9s avec les extensions eCommerce les plus populaires, WooCommerce et Easy Digital Downloads. Notre technologie de conteneurs isol\u00e9s<\/a> est construite sur Google Cloud Platform<\/a> et exploite la puissance du r\u00e9seau Cloudflare<\/a> pour garantir une performance et une s\u00e9curit\u00e9 maximales.<\/p>\n C’est la solution technique que nous recommandons \u00e0 tous ceux qui se posent la question : quelle est la meilleure infrastructure d’h\u00e9bergement pour un site de commerce \u00e9lectronique moderne ?<\/p>\n Commen\u00e7ons par les performances de l’e-commerce !<\/p>\n Selon des \u00e9tudes r\u00e9centes sur les taux de conversion du commerce \u00e9lectronique<\/a>, le principal facteur de succ\u00e8s d’un site de commerce \u00e9lectronique r\u00e9side dans la vitesse de chargement des pages. Un site de commerce \u00e9lectronique qui se charge en 1 seconde a un taux de conversion 2,5 fois plus \u00e9lev\u00e9 qu’un site qui se charge en 5 secondes.<\/p>\n 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 \u00e0 2 secondes, le taux de conversion tombe \u00e0 34 %. \u00c0 3 secondes, le taux de conversion est de 29 % et atteint un minimum \u00e0 6 secondes.<\/p>\n L’analyse sugg\u00e8re d’optimiser votre commerce \u00e9lectronique pour une vitesse de chargement comprise entre une et deux secondes.<\/p>\n Comment atteindre ce niveau de performance ? L’optimisation des performances est un processus d’am\u00e9lioration continue qui touche plusieurs domaines d’un site web. Sa valeur strat\u00e9gique est particuli\u00e8rement \u00e9vidente pour le commerce \u00e9lectronique, qui consomme g\u00e9n\u00e9ralement de plus grandes quantit\u00e9s de ressources.<\/p>\n Pour aider les propri\u00e9taires de sites de commerce \u00e9lectronique \u00e0 optimiser les performances de leurs sites web, nous avons \u00e9tabli une liste de contr\u00f4le essentielle des optimisations n\u00e9cessaires pour am\u00e9liorer les performances et la vitesse des pages.<\/p>\n En bref, quels sont les facteurs cl\u00e9s \u00e0 prendre en compte pour optimiser les performances de votre site de commerce \u00e9lectronique ? Plongeons dans le vif du sujet ! Lorsque vous choisissez un service d’h\u00e9bergement pour votre site de commerce \u00e9lectronique, il est essentiel de conna\u00eetre la pile technologique qu’il propose.<\/p>\n La premi\u00e8re d\u00e9cision concerne le type de service d’h\u00e9bergement. Il existe plusieurs types d’h\u00e9bergement web<\/a>, qui diff\u00e8rent consid\u00e9rablement en termes d’infrastructure et de services :<\/p>\n Comme il est imp\u00e9ratif de garantir des performances maximales \u00e0 votre commerce \u00e9lectronique, l’infrastructure doit \u00eatre \u00e0 haut d\u00e9bit. Cela exclut l’h\u00e9bergement mutualis\u00e9<\/a> qui, bien que peu co\u00fbteux (voire gratuit<\/a>), ne garantit pas les normes minimales de performance et de s\u00e9curit\u00e9 dont un site de commerce \u00e9lectronique ne peut se passer pour r\u00e9ussir sur le march\u00e9.<\/p>\n Un service d’h\u00e9bergement d\u00e9di\u00e9 bas\u00e9 sur un VPS peut \u00eatre hautement personnalis\u00e9 et optimis\u00e9 en termes de performances. Cependant, il n\u00e9cessite des comp\u00e9tences d’administrateur syst\u00e8me<\/a>, ce qui peut s’av\u00e9rer trop on\u00e9reux pour une petite ou moyenne entreprise.<\/span> Un service d’h\u00e9bergement cloud<\/a> peut offrir les performances et la s\u00e9curit\u00e9 n\u00e9cessaires \u00e0 un site de commerce \u00e9lectronique moderne et ne n\u00e9cessite pas n\u00e9cessairement de comp\u00e9tences techniques avanc\u00e9es.<\/p>\n Il est facile de trouver des fournisseurs de services d’h\u00e9bergement WordPress et WooCommerce infog\u00e9r\u00e9s 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\u00e9n\u00e9ficierez d’un service d’assistance sp\u00e9cialis\u00e9 et que l’installation et la maintenance du site seront simplifi\u00e9es.<\/p>\n Il est \u00e9galement n\u00e9cessaire de doter votre site web d’une pile technique de pointe. La plupart des h\u00e9bergeurs fournissent une pile bas\u00e9e sur le serveur web Apache<\/a> et MySQL<\/a>. Cependant, vous pouvez envisager une technologie plus moderne et plus performante, telle que Nginx<\/a> et MariaDB<\/a>.<\/p>\n Chez Kinsta, nous pensons avoir cr\u00e9\u00e9 la meilleure et la plus rapide des solutions d’h\u00e9bergement WordPress manag\u00e9es disponibles aujourd’hui sur Google Cloud Platform<\/a>.<\/p>\n Nous fournissons des VMs C3D et C2 optimis\u00e9es pour le calcul sur<\/a> tous les plans, de Single 35k \u00e0 WP 60 et au-del\u00e0, dans les r\u00e9gions o\u00f9 elles sont disponibles. Nous tirons \u00e9galement parti du r\u00e9seau Premium Tier<\/a> \u00e0 faible latence de Google, qui est mis \u00e0 la disposition de tous nos clients sans frais suppl\u00e9mentaires.<\/p>\n En outre, nous avons construit une pile technique rapide et solide bas\u00e9e sur Nginx, MariaDB, PHP 8.4, LXD container<\/a>, et notre int\u00e9gration de Cloudflare Enterprise. Cette pile est disponible pour tous nos clients, quel que soit leur plan.<\/p>\n Consultez cet article<\/a> pour savoir pourquoi Kinsta est l’h\u00e9bergeur WordPress infog\u00e9r\u00e9 le plus rapide<\/span>.<\/p>\n Selon W3Techs<\/a>, en ao\u00fbt 2024,<\/p>\n PHP est utilis\u00e9 par 76,1 % de tous les sites web dont nous connaissons le langage de programmation c\u00f4t\u00e9 serveur.<\/p><\/blockquote>\n La version 7 est utilis\u00e9e par 52,6 % de tous les sites web qui utilisent PHP, la version 8 par 33,0 % et la version 5 par 14,2 %.<\/p>\n Si vous exploitez un site web de commerce \u00e9lectronique, vous devez savoir quelle version de PHP<\/a> votre site utilise et pourquoi vous devriez pr\u00e9f\u00e9rer une version prise en charge.<\/p>\n En bref, PHP a un cycle de vie de versions, et chaque version majeure est g\u00e9n\u00e9ralement prise en charge pendant deux ans<\/a>. Les versions prises en charge sont les seules \u00e0 recevoir des mises \u00e0 jour de performance et de s\u00e9curit\u00e9. L’utilisation d’une version non prise en charge de PHP implique donc des performances r\u00e9duites et des vuln\u00e9rabilit\u00e9s de s\u00e9curit\u00e9 accrues par rapport aux versions prises en charge.<\/p>\n En ao\u00fbt 2024, les versions officiellement support\u00e9es de PHP sont PHP 8.1, 8.2 et 8.3.<\/p>\n Nous avons effectu\u00e9 nos propres tests de vitesse avec PHP 8.1, 8.2 et 8.3<\/a> et plusieurs CMS et frameworks, et nous avons constat\u00e9 que PHP 8.3<\/a> \u00e9tait la version de PHP la plus rapide, fournissant jusqu’\u00e0 52,20 % d’augmentation de performance aux CMS et frameworks test\u00e9s.<\/p>\n Chez Kinsta, nous ne fournissons que des versions de PHP support\u00e9es<\/strong>. Nous supportons actuellement PHP 7.4, 8.0, 8.1, 8.2, 8.3, 8.4, 8.5.<\/p>\n 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\u00e9lectionnez Outils<\/strong> dans le menu de gauche. Ici, vous trouverez plusieurs outils disponibles pour nos clients. Faites d\u00e9filer la page et trouvez le moteur PHP<\/strong>. Cliquez sur le bouton Modifier<\/strong> et s\u00e9lectionnez la version PHP dont vous avez besoin pour votre site web.<\/p>\n Le cache<\/a> est une partie de la m\u00e9moire utilis\u00e9e pour stocker des copies de ressources qui peuvent \u00eatre servies lors de requ\u00eates ult\u00e9rieures sans avoir \u00e0 t\u00e9l\u00e9charger \u00e0 nouveau la page compl\u00e8te. Il existe plusieurs types de caches<\/a>, chacun ayant un but sp\u00e9cifique, mais les types de caches qui nous int\u00e9ressent ici sont le cache du navigateur et le cache de WordPress.<\/p>\n Chaque r\u00e9ponse du serveur doit fournir les en-t\u00eates HTTP corrects afin que le navigateur sache combien de temps il doit mettre en cache<\/a> une copie de la ressource demand\u00e9e. Cela se fait en d\u00e9finissant les en-t\u00eates ETag et Expires<\/a> dans la requ\u00eate HTTP<\/a>.<\/p>\n WordPress poss\u00e8de son propre syst\u00e8me de cache. L’objet Les utilisateurs de WordPress peuvent installer une extension de mise en cache tierce pour WordPress<\/a>. Des outils tels que W3 Total Cache<\/a> et WP Super Cache<\/a> vous permettent de g\u00e9rer le cache de WordPress<\/a> de mani\u00e8re granulaire. Ils peuvent \u00eatre tr\u00e8s utiles si vous optez pour une solution d’h\u00e9bergement partag\u00e9 ou si l’h\u00e9bergeur ne fournit pas de solutions de gestion du cache plus efficaces.<\/p>\n Ces outils sont compliqu\u00e9s \u00e0 configurer et peuvent n\u00e9cessiter des connaissances que tous les propri\u00e9taires de sites ne poss\u00e8dent pas. En r\u00e9sum\u00e9, vous avez besoin d’un moyen simple de g\u00e9rer votre cache.<\/p>\n En ce qui concerne le commerce \u00e9lectronique, vous pouvez \u00e9galement souhaiter exclure certaines pages, telles que \u00ab Mon compte \u00bb et \u00ab Commander \u00bb, de la mise en cache. C’est essentiel pour garantir une exp\u00e9rience d’achat irr\u00e9prochable aux clients de votre site web. Mais comment faire ?<\/p>\n La gestion du cache peut \u00eatre d\u00e9concertante, surtout si vous manquez de comp\u00e9tences techniques. Sur Kinsta, cependant, la gestion du cache est facile, et tous les param\u00e8tres sont commod\u00e9ment rassembl\u00e9s dans une seule section de votre tableau de bord MyKinsta.<\/p>\n La principale diff\u00e9rence entre le cache Kinsta et les extensions WordPress tierces est que le cache Kinsta fonctionne au niveau du serveur<\/a>.<\/p>\n Dans MyKinsta, naviguez vers les sites WordPress<\/strong> et s\u00e9lectionnez votre site web. Sur la page des r\u00e9glages du site, cliquez sur l’\u00e9l\u00e9ment de menu Cache<\/strong> gauche et s\u00e9lectionnez l’onglet Cache serveur.<\/strong> Ici, vous pouvez vider le cache et modifier l’expiration du cache.<\/p>\n Les extensions de mise en cache ne sont\u00a0pas autoris\u00e9es sur Kinsta<\/a>, ce qui semble \u00eatre une contradiction avec ce que nous avons dit dans la section pr\u00e9c\u00e9dente. 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.<\/strong><\/p>\n Sp\u00e9cifiquement pour les sites WooCommerce et EDD, Kinsta contourne automatiquement le cache lorsque des cookies Les utilisateurs de Kinsta peuvent \u00e9galement g\u00e9rer le cache directement depuis leur tableau de bord WordPress gr\u00e2ce \u00e0 l’extension Kinsta MU<\/a>, qui est automatiquement install\u00e9e sur tous les nouveaux sites WordPress h\u00e9berg\u00e9s par Kinsta.<\/p>\n Dans l’\u00e9cran de cache de Kinsta, vous pouvez effectuer les actions suivantes :<\/p>\n L’extension Kinsta cache fournit \u00e9galement un bouton dans la barre d’administration qui vous permet d’effacer le cache :<\/p>\n Le cache CDN est un autre type de cache. Lisez la suite pour en savoir plus.<\/p>\n Un CDN est un r\u00e9seau de serveurs<\/a> qui stockent des ressources statiques telles que des images, des scripts et des feuilles de style afin qu’elles puissent \u00eatre transmises aux visiteurs du site \u00e0 partir de l’emplacement g\u00e9ographique le plus proche.<\/p>\n Un CDN fournit g\u00e9n\u00e9ralement des services et des fonctionnalit\u00e9s qui peuvent am\u00e9liorer consid\u00e9rablement les performances et la s\u00e9curit\u00e9 d’un site web. En ce qui concerne les performances, un CDN peut vous aider dans les domaines suivants :<\/p>\n Kinsta fournit une int\u00e9gration CDN Cloudflare gratuite<\/a> sur tous nos plans d’h\u00e9bergement. Cela signifie que vous pouvez profiter gratuitement des fonctionnalit\u00e9s de Cloudflare pour les entreprises, ind\u00e9pendamment du plan auquel vous avez souscrit.<\/p>\n Cloudflare fournit un service de mise en cache des ressources statiques qui peut augmenter de mani\u00e8re significative les performances des sites de commerce \u00e9lectronique. Ce service est particuli\u00e8rement utile lorsque votre public cible est r\u00e9parti sur une vaste zone g\u00e9ographique.<\/p>\n Gr\u00e2ce \u00e0 l’int\u00e9gration de Cloudflare, nous pouvons fournir \u00e0 tous nos clients, ind\u00e9pendamment de leur plan, les fonctionnalit\u00e9s d’entreprise suivantes :<\/p>\n Avec Kinsta, vous pouvez profiter de toutes ces fonctionnalit\u00e9s en activant le CDN de Cloudflare dans la section Cache <\/strong>de votre tableau de bord MyKinsta, o\u00f9 vous pouvez g\u00e9rer Cache edge<\/strong> et Cache CDN<\/strong>.<\/p>\n Vous pouvez activer les options Cache m<\/strong><\/span>obile<\/strong>, <\/span>Vider le cache <\/strong>et Vider le cache de l’URL<\/strong><\/span> dans l’ onglet cache edge.<\/strong><\/p>\n Sous l’onglet CDN<\/strong>, vous pouvez effacer le cache CDN<\/strong>, optimiser les images et exclure des fichiers sp\u00e9cifiques de la mise en cache CDN.<\/p>\n L’optimisation des images<\/a> est vitale pour la vitesse des pages. L’optimisation des images n’est pas compliqu\u00e9e pour les d\u00e9butants, mais vous devez tout de m\u00eame avoir quelques connaissances de base<\/a>.<\/p>\n Vous pouvez optimiser les images de plusieurs mani\u00e8res. Tout d’abord, vous devez identifier le format d’image qui correspond le mieux aux caract\u00e9ristiques de l’image. Outre les formats traditionnels JPEG, PNG et GIF, les formats d’image optimis\u00e9s pour le web, tels que WebP<\/a> et Avif, <\/span>offrent des niveaux de compression \u00e9lev\u00e9s et une qualit\u00e9 sup\u00e9rieure. WordPress prend en charge<\/a> ces deux formats d\u00e8s le d\u00e9part<\/a>, vous \u00eates donc libre de les utiliser sur votre site de commerce \u00e9lectronique.<\/p>\n Une fois que vous avez choisi le bon format d’image, vous pouvez passer \u00e0 la compression. Il existe deux types de compression d’image<\/a>: avec ou sans perte. La compression avec perte est plus efficace pour r\u00e9duire la taille des fichiers. Cependant, vous devez tenir compte de la perte d’informations et, par cons\u00e9quent, de la diminution de la qualit\u00e9 de l’image.<\/p>\n Si la qualit\u00e9 de l’image est essentielle pour votre site web, la compression sans perte peut \u00eatre le bon choix, bien que les \u00e9conomies de taille puissent \u00eatre insignifiantes. Pour compresser les images sans perte d’informations, vous aurez besoin d’outils tels que FileOptimizer<\/a> ou ImageOptim<\/a> pour WordPress ou d’un logiciel de retouche photo tel que Photoshop.<\/span> Une autre option est la compression Gzip<\/a>.<\/p>\n Gr\u00e2ce \u00e0 l’int\u00e9gration de Cloudflare, Kinsta offre une optimisation gratuite des images<\/a>. Cela signifie que vos images PNG, GIF et JPEG sont automatiquement converties au format WebP pour am\u00e9liorer la vitesse et les performances de votre site web sans utiliser d’extension tierce.<\/p>\n Vous pouvez activer l’optimisation automatique des images dans MyKinsta sous Cache > CDN > Optimisation d’image<\/strong>.<\/p>\n Cliquez sur le bouton R\u00e9glages dans la bo\u00eete Optimisation d’image<\/strong> et s\u00e9lectionnez le type d’optimisation dont vous avez besoin.<\/p>\n Vous pouvez r\u00e9duire la quantit\u00e9 de donn\u00e9es que le navigateur t\u00e9l\u00e9charge pour rendre une page \u00e0 l’\u00e9cran gr\u00e2ce \u00e0 la minification, la compression et la mise en cache des ressources HTML, CSS et JavaScript.<\/p>\n La minification du code<\/a> consiste \u00e0 supprimer les caract\u00e8res inutiles du code source. Les commentaires et les espaces blancs sont utiles au d\u00e9veloppement, mais le navigateur n’en a pas besoin pour rendre la page. Gr\u00e2ce \u00e0 la minification du code, vous pouvez r\u00e9duire la taille des ressources HTML, CSS et JS de 50 % ou plus.<\/p>\n Il convient toutefois de noter que Cloudflare a r\u00e9cemment annonc\u00e9<\/a> la suppression de sa fonction Auto Minify :<\/p>\n Les raisons pour lesquelles nous pr\u00e9voyons de supprimer cette fonction sont multiples mais se r\u00e9sument au fait qu’il s’agit d’une fonction de performance utilis\u00e9e dans le but de r\u00e9duire le poids des pages, et qu’elle n’est pas aussi efficace que d’autres projets sur lesquels Cloudflare travaille, comme l’am\u00e9lioration de la compression.<\/p><\/blockquote>\n Vous pouvez r\u00e9duire la taille des fichiers transmis afin d’augmenter la vitesse des pages et d’utiliser moins de bande passante gr\u00e2ce \u00e0 la compression<\/a>. La compression GZIP<\/a> vous permet de compresser un ensemble de donn\u00e9es brutes sans perte d’informations. Tout type de fichier peut \u00eatre compress\u00e9, 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\u00e9cent et plus efficace que GZIP et qui est pris en charge par tous les principaux navigateurs.<\/p>\n Alors qu’il existe plusieurs \u00e9tapes pour activer la compression Brotly dans WordPress<\/a>, les clients de Kinsta n’ont absolument rien \u00e0 faire pour exploiter la puissance de cet algorithme de compression. Gr\u00e2ce \u00e0 l’int\u00e9gration de Cloudflare, chaque site web h\u00e9berg\u00e9 par Kinsta utilise Brotli par d\u00e9faut.<\/strong><\/p>\n Vous pouvez v\u00e9rifier le type de compression dans l’inspecteur de votre navigateur. S\u00e9lectionnez une ressource dans l’\u00e9cran R\u00e9seau > Tous<\/strong><\/span> et recherchez l’en-t\u00eate Vous pouvez \u00e9liminer le JavaScript qui bloque le rendu<\/a> en ajoutant les attributs Vous pouvez \u00e9galement \u00e9liminer les CSS qui bloquent le rendu<\/a> en donnant la priorit\u00e9 aux ressources situ\u00e9es au-dessus du pli, en ajoutant des CSS en ligne, en utilisant l’attribut Tout cela peut s’av\u00e9rer un peu compliqu\u00e9 si vous n’\u00eates pas un d\u00e9veloppeur frontend, mais vous pouvez utiliser une extension WordPress<\/a> qui peut faire tout le sale boulot pour vous.<\/p>\n En outre, depuis WordPress 6.3<\/a>, vous pouvez ajouter les attributs Il convient d’insister sur les feuilles de style, qui peuvent consid\u00e9rablement alourdir une page web.<\/p>\n Lorsque le navigateur rencontre une balise Il est donc n\u00e9cessaire d’<\/span>optimiser les feuilles de style<\/a> et d’effectuer une analyse approfondie \u00e0 l’aide d’outils de d\u00e9veloppement de navigateur, tels que Chrome’s Lighthouse et Pagespeed Insights<\/a>.<\/p>\n Une fois l’analyse effectu\u00e9e, vous devrez identifier les solutions les plus appropri\u00e9es pour r\u00e9duire 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\u00e9finissant des en-t\u00eates Expires et ETag, le choix optimal du th\u00e8me et des extensions du site, la suppression du code CSS superflu, l’optimisation des polices de caract\u00e8res web et d’autres mesures d’optimisation des performances<\/a>.<\/p>\n Cependant, la meilleure option pour un d\u00e9veloppeur est toujours de concevoir ses styles en suivant les meilleures pratiques CSS<\/a> d\u00e8s le d\u00e9part.<\/p>\n 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\u00e9cifique du site, notamment la vid\u00e9o, le contenu multim\u00e9dia et les polices de caract\u00e8res web. Chaque ressource g\u00e9n\u00e8re une requ\u00eate HTTP au serveur web qui l’h\u00e9berge, et chaque requ\u00eate n\u00e9cessite des temps de traitement et de r\u00e9ponse qui s’additionnent les uns aux autres, augmentant ainsi le temps de chargement global de la page.<\/p>\n C’est pourquoi il est essentiel de minimiser le nombre de requ\u00eates HTTP<\/a> adress\u00e9es au serveur<\/span>.<\/p>\n L\u00e0 encore, plusieurs outils d’analyse des performances peuvent vous aider \u00e0 d\u00e9terminer le nombre de requ\u00eates HTTP.<\/span> Les outils de d\u00e9veloppement de navigateur et les outils en ligne tels que Pingdom<\/a> et<\/span> GTMetrix<\/a> peuvent \u00eatre des alli\u00e9s pr\u00e9cieux lorsqu’il s’agit de probl\u00e8mes de performance.<\/p>\n Parmi les nombreuses solutions qu’un d\u00e9veloppeur peut mettre en \u0153uvre pour r\u00e9duire le nombre de requ\u00eates HTTP, la plus efficace consiste \u00e0 supprimer les ressources inutiles de la page.<\/p>\n Les utilisateurs de WordPress devraient supprimer toutes les extensions qui ne sont pas strictement n\u00e9cessaires ou au moins charger de mani\u00e8re s\u00e9lective les extensions qui<\/a> ne sont pas n\u00e9cessaires<\/a> sur l’ensemble du site web. Ils doivent \u00e9galement choisir les extensions les plus fiables et les plus l\u00e9g\u00e8res disponibles<\/span> et \u00e9viter les extensions dites \u00ab nulled<\/a> \u00bb<\/p>\n Une autre option consiste \u00e0 concat\u00e9ner tous les fichiers CSS<\/a> dans une seule feuille de style<\/a>.<\/p>\n D’autres mesures peuvent \u00eatre prises pour r\u00e9duire le nombre de requ\u00eates HTTP : le chargement paresseux des ressources, l’utilisation de polices syst\u00e8me dans la mesure du possible, la r\u00e9duction des requ\u00eates HTTP \u00e9manant de tiers, comme les vid\u00e9os YouTube, et l’<\/span>utilisation de sprites CSS pour les ic\u00f4nes et les logos.<\/p>\nPar o\u00f9 commencer pour lancer un site eCommerce moderne ?<\/h2>\n
\n
![\"Page](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/woocommerce-plugin.jpg\")
10 bonnes pratiques pour optimiser les performances de votre site eCommerce<\/h2>\n
\n1. Choisir une infrastructure d’h\u00e9bergement et une pile technique de pointe<\/h3>\n
\n
Infrastructure d’h\u00e9bergement et pile technique de Kinsta<\/h4>\n
![\"R\u00e9gions](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/google-cloud-regions.jpg\")
![\"R\u00e9seau](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/google-cloud-network.jpg\")
2. Utiliser les versions PHP support\u00e9es<\/h3>\n
![\"Versions](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/supported-php-versions.png\")
Versions de PHP sur Kinsta<\/h4>\n
![\"Modifier](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/modify-php-engine-mykinsta.jpg\")
3. Exploiter le cache pour de meilleures performances<\/h3>\n
WP_Object_Cache<\/code><\/a> permet de r\u00e9duire le nombre de requ\u00eates \u00e0 la base de donn\u00e9es : \u00ab Le cache objet stocke toutes les donn\u00e9es du cache en m\u00e9moire et rend le contenu du cache disponible \u00e0 l’aide d’une cl\u00e9, qui est utilis\u00e9e pour nommer et r\u00e9cup\u00e9rer ult\u00e9rieurement le contenu du cache. \u00bb<\/p>\n![\"Extensions](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/wordpress-caching-plugins.jpg\")
Gestion du cache sur Kinsta<\/h4>\n
![\"Modifier](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/change-cache-expiration-mykinsta.jpg\")
woocommerce_items_in_cart<\/code> ou edd_items_in_cart<\/code> sont d\u00e9tect\u00e9s. Cela permet une exp\u00e9rience d’achat fluide pour tous vos clients.<\/p>\n![\"R\u00e9glages](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/kinsta-mu-plugin.jpg\")
\n
\n
4. Utiliser un r\u00e9seau de diffusion de contenu<\/h3>\n
\n
Kinsta CDN<\/h4>\n
\n
![\"Options](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/edge-caching-mykinsta.jpg\")
![\"Options](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/cdn-cache-mykinsta.jpg\")
5. Optimiser les images<\/h3>\n
![\"Support](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/avif.jpg\")
Optimiser vos images avec Kinsta<\/h4>\n
![\"Optimisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/image-optimization-mykinsta.jpg\")
![\"Optimisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/image-optimization-options-mykinsta.jpg\")
6. R\u00e9duire la taille des ressources HTML, CSS et JavaScript<\/h3>\n
![\"Prise](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/brotli.png\")
Compression des ressources sur Kinsta<\/h4>\n
content-encoding<\/code>. Celui-ci indique le type de compression activ\u00e9 sur votre site web. br<\/code> signifie Brotli.<\/p>\n![\"Brotli](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/content-encoding-brotli.png\")
7. \u00c9liminer les ressources bloquant le rendu<\/h3>\n
async<\/code> et defer<\/code> aux balises <script><\/code>. Cela peut am\u00e9liorer ce que l’on appelle la First Contentful Paint<\/a>. Plus pr\u00e9cis\u00e9ment :<\/p>\n\n
async<\/code> sont ex\u00e9cut\u00e9s de mani\u00e8re asynchrone d\u00e8s qu’ils sont charg\u00e9s. Une fois le script charg\u00e9, le navigateur fait une pause, analyse le code HTML et ex\u00e9cute le script.<\/li>\ndefer<\/code> ne sont ex\u00e9cut\u00e9s qu’une fois l’analyse de la page termin\u00e9e.<\/li>\n<\/ul>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/eliminate-render-blocking-resources-pagespeed-insights.jpg\")
media<\/code> et en utilisant JavaScript pour charger de mani\u00e8re asynchrone ou diff\u00e9rer le chargement des CSS.<\/p>\nasync<\/code> et defer<\/code> lors de l’enregistrement du script et, depuis WordPress 6.4<\/a>, ces attributs ont \u00e9t\u00e9 mis en \u0153uvre pour les scripts frontaux dans le noyau de WordPress et les th\u00e8mes int\u00e9gr\u00e9s.<\/p>\n8. Optimiser le CSS<\/h3>\n
<link><\/code>, il cesse de t\u00e9l\u00e9charger d’autres ressources et d’analyser la page pour t\u00e9l\u00e9charger et analyser le fichier CSS. Vous devez \u00e9galement pr\u00eater attention \u00e0 certaines particularit\u00e9s des feuilles de style :<\/p>\n\n
9. R\u00e9duire le nombre de requ\u00eates HTTP<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/10\/amazon-css-sprite-example.png\"){kind=icon}