Pourquoi est-il important de tester WordPress ?<\/h2>\n
Il y a de nombreux avantages \u00e0 tester r\u00e9guli\u00e8rement votre site WordPress. Comme nous l’avons mentionn\u00e9, cela vous permet d’exp\u00e9rimenter des \u00e9l\u00e9ments de conception et d’interface utilisateur (UI) sans avoir d’impact sur votre site r\u00e9el.<\/p>\n
Par cons\u00e9quent, vous pouvez conserver votre site actuel et maintenir vos activit\u00e9s commerciales pendant que vous explorez de nouvelles id\u00e9es. Si un probl\u00e8me survient dans l’environnement de staging, vous n’avez pas \u00e0 vous inqui\u00e9ter de l’effet que le temps d’arr\u00eat pourrait avoir sur votre trafic web et votre chiffre d’affaires.<\/p>\n
D’autre part, vous pouvez \u00e9galement tester votre site web WordPress pour d\u00e9tecter les probl\u00e8mes que les visiteurs peuvent rencontrer lorsqu’ils essaient de consulter vos pages. Par exemple, votre site peut fonctionner lentement<\/a> dans un certain navigateur, ou votre menu peut ne pas s’afficher correctement sur les appareils mobiles.<\/p>\n En outre, un environnement de staging peut \u00eatre un excellent moyen de pr\u00e9venir les failles de s\u00e9curit\u00e9. Vous pouvez tester de nouvelles extensions et de nouveaux th\u00e8mes avant de les installer sur votre site. Entre-temps, vous pouvez ex\u00e9cuter des mises \u00e0 jour sur votre site de staging pour vous assurer qu’elles sont s\u00fbres.<\/p>\n Bien que de nombreux d\u00e9butants puissent tirer profit de l’exp\u00e9rimentation de WordPress dans un cadre s\u00e9curis\u00e9 et priv\u00e9, les tests sont \u00e9galement tr\u00e8s importants pour les d\u00e9veloppeurs avanc\u00e9s. Avec les bons outils, les d\u00e9veloppeurs peuvent mettre en place un environnement de staging permanent<\/a> pour tester les fonctionnalit\u00e9s des produits avant de les rendre accessibles au public.<\/p>\n Maintenant que vous savez pourquoi il est important de tester WordPress en toute s\u00e9curit\u00e9, examinons les approches les plus courantes.<\/p>\n Quel que soit le type de site que vous g\u00e9rez, il est bon de prendre l’habitude d’effectuer r\u00e9guli\u00e8rement des tests de fonctionnalit\u00e9, de performance et de s\u00e9curit\u00e9.<\/p>\n Il est important de reconna\u00eetre la valeur des tests de votre site web dans diff\u00e9rents environnements. Une fois que vous connaissez la diff\u00e9rence entre chaque type d’environnement, il est plus facile de choisir la bonne option pour vos besoins.<\/p>\n Un environnement local est h\u00e9berg\u00e9 sur votre propre ordinateur. En tant que tel, rien de ce que vous y faites n’affectera votre site r\u00e9el. Pour une utilisation g\u00e9n\u00e9rale, c’est un excellent moyen de tester de nouvelles caract\u00e9ristiques et fonctionnalit\u00e9s. Pour les d\u00e9veloppeurs, un environnement local peut \u00eatre l’endroit id\u00e9al pour d\u00e9tecter les bogues et les erreurs dans votre code.<\/p>\n D’autre part, un environnement de staging fournit une copie des donn\u00e9es de votre site web sur un serveur (plut\u00f4t que sur une machine locale). C’est un endroit id\u00e9al pour effectuer des mises \u00e0 jour de versions majeures, des changements de configuration et des migrations de bases de donn\u00e9es<\/a>. De plus, si vous concevez des sites web pour des clients, un site de staging peut servir de site de d\u00e9monstration pour montrer \u00e0 vos clients \u00e0 quoi ressemblera le site.<\/p>\n Maintenant que vous avez une meilleure compr\u00e9hension des diff\u00e9rents types d’environnements de test, voyons comment les mettre en place !<\/p>\n Comme nous l’avons vu, un site de staging est essentiellement une copie compl\u00e8te de votre site web. En g\u00e9n\u00e9ral, il est h\u00e9berg\u00e9 sur le m\u00eame serveur que votre site web. La seule diff\u00e9rence est que les visiteurs ne pourront pas y acc\u00e9der.<\/p>\n L’un des avantages du staging est qu’il suit une configuration r\u00e9elle. Par cons\u00e9quent, vous \u00eates en mesure de comprendre correctement le parcours que les clients r\u00e9els effectuent sur vos pages.<\/p>\n Le moyen le plus simple de mettre en place un site de staging<\/a> est de passer par votre h\u00e9bergeur. Tous les h\u00e9bergeurs ne proposent pas d’environnement de staging avec leurs services d’h\u00e9bergement. Mais chez Kinsta<\/a>, il est tr\u00e8s simple de cr\u00e9er et de configurer l’environnement de staging WordPress int\u00e9gr\u00e9<\/a>.<\/p>\n Vous pouvez acc\u00e9der \u00e0 votre site de staging en vous connectant \u00e0 votre tableau de bord MyKinsta. S\u00e9lectionnez simplement votre site web dans la liste. Ensuite, en haut de l’\u00e9cran, utilisez le menu d\u00e9roulant pour changer Live <\/strong>en Staging <\/strong>:<\/p>\n Gardez \u00e0 l’esprit que la cr\u00e9ation de votre site de staging peut prendre jusqu’\u00e0 quinze minutes. Ensuite, il existera en tant que sous-domaine de votre domaine principal (les deux utilisent le m\u00eame serveur).<\/p>\n Une fois que vous \u00eates pr\u00eat \u00e0 appliquer les changements \u00e0 votre site Web r\u00e9el, vous pouvez simplement utiliser le bouton Pousser l’environnement <\/strong>dans votre tableau de bord.<\/p>\n Bien qu’un environnement local fonctionne de la m\u00eame mani\u00e8re qu’un site de staging, vous n’aurez pas besoin d’h\u00e9berger l’environnement \u00e0 l’ext\u00e9rieur. Au lieu de cela, votre environnement local r\u00e9sidera sur une machine locale (le plus souvent, votre ordinateur).<\/p>\n Pour installer un environnement de test WordPress localement, vous aurez besoin d’une pile AMP pour votre ordinateur. Ce logiciel (Apache, MySQL et PHP) est utilis\u00e9 pour imiter votre site web WordPress.<\/p>\n Les m\u00e9thodes les plus populaires pour installer WordPress localement sont WAMP et XAMPP. Cependant, le moyen le plus simple est d’utiliser DevKinsta<\/a>:<\/p>\n DevKinsta est un outil de d\u00e9veloppement local gratuit pour WordPress simple ou Multisite. Avec lui, vous aurez acc\u00e8s \u00e0 des tonnes d’outils de gestion de bases de donn\u00e9es et d’e-mails. De plus, il s’int\u00e8gre parfaitement \u00e0 MyKinsta (bien que vous n’ayez pas besoin d’\u00eatre un client Kinsta pour utiliser DevKinsta).<\/p>\n Pour commencer, vous devez t\u00e9l\u00e9charger la derni\u00e8re version de DevKinsta<\/a>. Pour les utilisateurs de Mac, ajoutez DevKinsta aux Applications<\/strong> et double-cliquez sur l’application DevKinsta pour l’ouvrir.<\/p>\n Le processus d’installation varie l\u00e9g\u00e8rement d’un syst\u00e8me d’exploitation \u00e0 l’autre, mais vous pouvez consulter les instructions d’installation compl\u00e8tes de DevKinsta<\/a> si n\u00e9cessaire. Ensuite, vous pouvez installer Docker Desktop<\/a> pour cr\u00e9er des conteneurs pour WordPress local.<\/p>\n Une fois que vous avez install\u00e9 DevKinsta et Docker, vous pouvez cr\u00e9er votre site local. Vous pouvez soit cr\u00e9er un nouveau site WordPress, soit importer un site existant depuis Kinsta, soit cr\u00e9er un site personnalis\u00e9 :<\/p>\n Choisissez simplement l’option que vous pr\u00e9f\u00e9rez. Si vous importez depuis Kinsta, vous devrez s\u00e9lectionner le bon site web \u00e0 importer et saisir vos informations de connexion. Ensuite, vous serez dirig\u00e9 vers l’\u00e9cran Informations sur le site<\/strong>, qui fonctionne comme un tableau de bord pour votre environnement local.<\/p>\n Vous pouvez \u00e9galement utiliser l’API Kinsta<\/a> pour cr\u00e9er un nouveau site\/installation WordPress sans acc\u00e9der \u00e0 DevKinsta<\/a>.<\/p>\n Voyons maintenant cinq fa\u00e7ons de tester les fonctionnalit\u00e9s de votre site WordPress. L’un des avantages des tests de fonctionnalit\u00e9 est que vous pouvez le faire directement dans votre environnement local ou en utilisant DevKinsta (contrairement \u00e0 d’autres types de tests qui n\u00e9cessitent que votre site web soit en ligne).<\/p>\n Il est important de tester votre site WordPress sur plusieurs navigateurs<\/a> afin de voir \u00e0 quoi ressemble votre site pour tous les visiteurs. En effet, chaque navigateur utilise un code diff\u00e9rent. Par cons\u00e9quent, chaque navigateur g\u00e8re et affiche les \u00e9l\u00e9ments \u00e0 sa mani\u00e8re.<\/p>\n Par exemple, un utilisateur qui acc\u00e8de \u00e0 votre site avec Chrome peut voir votre site diff\u00e9remment d’un utilisateur qui visite votre site avec Firefox. Si 3,2 milliards d’internautes ont choisi Chrome comme navigateur principal<\/a> en 2021, beaucoup continuent d’utiliser Firefox, Edge, Opera et Safari.<\/p>\n Il peut \u00eatre int\u00e9ressant de savoir quels sont les navigateurs les plus populaires aupr\u00e8s de vos visiteurs afin d’optimiser votre site en fonction de ces navigateurs. Si vous utilisez Google Analytics, vous trouverez ces informations dans vos rapports d’audience<\/a>.<\/p>\n Vous pouvez ensuite tester la compatibilit\u00e9 de votre site avec les diff\u00e9rents navigateurs \u00e0 l’aide d’un outil tel que BrowserStack<\/a>:<\/p>\n Avec BrowserStack, vous pouvez tester votre site sur 3000 navigateurs diff\u00e9rents, y compris les derni\u00e8res versions de Edge, Safari, Firefox et Chrome. Vous pouvez \u00e9galement profiter d’un essai gratuit avant de vous engager dans un plan payant.<\/p>\n Les tests unitaires consistent \u00e0 tester la plus petite unit\u00e9 d’une application de mani\u00e8re isol\u00e9e. Il peut s’agir d’une fonction, d’une propri\u00e9t\u00e9 ou d’une m\u00e9thode. Ces unit\u00e9s sont ensuite analys\u00e9es pour s’assurer que l’application se comporte comme pr\u00e9vu.<\/p>\n Vous pouvez ex\u00e9cuter les tests unitaires automatiquement \u00e0 l’aide d’un outil tiers tel que Travis CI<\/a>. Mais il est plus rapide d’effectuer des tests localement pendant le d\u00e9veloppement plut\u00f4t que d’appliquer des modifications et d’attendre que Travis CI les ex\u00e9cute.<\/p>\n Par exemple, vous pouvez tester un th\u00e8me ou une extension. Pour cela, vous devrez installer Git<\/a>, SVN, PHP et Apache. De plus, votre extension doit \u00eatre pr\u00eate.<\/p>\n Pour commencer, ouvrez DevKinsta pour lancer votre environnement de d\u00e9veloppement local. Ensuite, installez PHPUnit<\/a>. Maintenant, vous devez g\u00e9n\u00e9rer les fichiers de test de l’extension en utilisant la commande suivante<\/a> :<\/p>\n \u00c0 ce stade, vous pouvez initialiser l’environnement de test localement en ex\u00e9cutant le script d’installation :<\/p>\n Ce script installe une copie de WordPress dans le site L’\u00e9tape suivante consiste \u00e0 ex\u00e9cuter les tests de l’extension \u00e0 l’aide de \u00c9tant donn\u00e9 que plus de 60 % des personnes utilisent un appareil mobile pour aller en ligne<\/a>, il est plus important que jamais de s’assurer que votre site WordPress est responsive. De cette fa\u00e7on, vous pouvez vous assurer que vos pages s’affichent de mani\u00e8re fluide sur toutes les tailles d’\u00e9cran, y compris les ordinateurs de bureau, les tablettes et les mobiles.<\/p>\n Le moyen le plus simple de tester le responsive de votre site<\/a> est de saisir l’URL de votre site sur votre appareil mobile. Toutefois, si vous souhaitez tester l’apparence de votre site depuis votre ordinateur, vous pouvez le faire en utilisant la personnalisation de WordPress.<\/p>\n Il vous suffit de vous rendre dans Apparence <\/strong>> Personnaliser <\/strong>:<\/p>\n En fonction de votre th\u00e8me, vous verrez diff\u00e9rents panneaux. Mais en bas de votre page, vous pouvez cliquer sur l’ic\u00f4ne mobile ou tablette pour pr\u00e9visualiser votre site \u00e0 la taille d’\u00e9cran sp\u00e9cifi\u00e9e.<\/p>\n En outre, vous pouvez acc\u00e9der aux outils de d\u00e9veloppement de Google Chrome<\/a> pour voir comment votre site WordPress s’affiche sur les appareils mobiles. Il vous suffit d’ouvrir une page de votre site dans Google Chrome.<\/p>\n Cliquez ensuite avec le bouton droit de la souris sur la page et s\u00e9lectionnez Inspecter <\/strong>:<\/p>\n Maintenant, trouvez la barre d’outils Toggle device<\/strong> en haut du popup (\u00e0 gauche de l’onglet Elements<\/strong>) :<\/p>\n Cliquez dessus et votre \u00e9cran s’adaptera instantan\u00e9ment :<\/p>\n Comme vous pouvez le constater, vous \u00eates d\u00e9sormais en mesure de tester l’affichage de votre site dans les dimensions \u00ab Responsive <\/strong>\u00bb. Si vous cliquez sur le menu d\u00e9roulant Dimensions<\/strong>, vous pouvez tester votre page sur d’autres appareils, tels que diff\u00e9rents mod\u00e8les d’iPhone et de Samsung Galaxy.<\/p>\n Lorsque nous parlons de l’interface utilisateur (IU) de votre site web, nous faisons r\u00e9f\u00e9rence \u00e0 tout composant de votre site avec lequel les visiteurs peuvent interagir. Par exemple, la plupart des sites web comportent des liens, des boutons, des menus, etc. \u00c0 un moment ou \u00e0 un autre, les utilisateurs auront besoin d’interagir avec ces \u00e9l\u00e9ments.<\/p>\n Il est donc tr\u00e8s important de tester votre interface utilisateur. Si quelque chose ne fonctionne pas correctement, les visiteurs peuvent \u00eatre frustr\u00e9s et quitter votre site.<\/p>\n Vous pouvez mettre en place un environnement local pour tester vos \u00e9l\u00e9ments d’interface utilisateur. Par exemple, vous pouvez d\u00e9velopper un nouveau menu de navigation et le tester.<\/p>\n Dans ce cas, vous pouvez ouvrir votre zone d’administration locale depuis votre tableau de bord DevKinsta. Ensuite, naviguez vers Apparence <\/strong>> Menus <\/strong>sur le site local. Cliquez sur Cr\u00e9er un nouveau menu<\/strong>.<\/p>\n Donnez un nom \u00e0 votre menu et cliquez sur Enregistrer le menu<\/strong>. Ensuite, ajoutez des \u00e9l\u00e9ments de menu \u00e0 partir de la gauche de votre \u00e9cran et s\u00e9lectionnez Ajouter au menu <\/strong>:<\/p>\n Sous R\u00e9glages du menu<\/strong>, cochez la case Menu principal<\/strong>. Enregistrez ensuite vos modifications.<\/p>\n Vous pouvez \u00e9galement cliquer sur G\u00e9rer avec l’aper\u00e7u en direct <\/strong>en haut de l’\u00e9cran pour voir comment votre menu se pr\u00e9sente :<\/p>\n Ensuite, ouvrez votre site local dans un nouveau navigateur pour voir votre nouveau menu sur l’interface publique :<\/p>\n Vous pouvez \u00e9galement tester les liens de navigation en cliquant sur chacun des \u00e9l\u00e9ments du menu. Par exemple, lorsque nous cliquons sur le lien Wholesale Ordering<\/strong>, nous sommes redirig\u00e9s vers la page correspondante que nous avons ajout\u00e9e \u00e0 notre menu :<\/p>\n Vous pouvez ainsi tester de nouveaux \u00e9l\u00e9ments de conception et vous assurer que votre interface utilisateur fonctionne correctement.<\/p>\n Le test de r\u00e9gression visuelle (Visual Regression Testing ou VRT) permet de s’assurer que tous vos \u00e9l\u00e9ments de conception et toutes vos mises en page s’affichent comme ils sont cens\u00e9s le faire. C’est pourquoi le VRT est souvent mis en \u0153uvre \u00e0 la suite de modifications du site web, par exemple lorsque vous changez de th\u00e8me ou que vous mettez \u00e0 jour une extension.<\/p>\n Vous pouvez ainsi vous assurer que les changements n’ont pas perturb\u00e9 vos \u00e9l\u00e9ments visuels. Par exemple, votre contenu peut \u00eatre mal align\u00e9 ou des boutons peuvent avoir disparu.<\/p>\n \u00c0 l’instar des tests d’interface utilisateur, vous ignorez souvent ce genre de probl\u00e8mes si vous ne visitez pas votre site web en amont. Vous pouvez trouver des outils de VRT automatis\u00e9s qui testent continuellement votre site, \u00e0 la recherche d’anomalies visuelles.<\/p>\n Vous pouvez \u00e9galement comparer manuellement vos pages avant et apr\u00e8s l’application de vos modifications. Supposons que vous souhaitiez changer de th\u00e8me<\/a>. Il est plus s\u00fbr de le faire dans un environnement local comme DevKinsta afin de pouvoir effectuer des tests visuels avant d’appliquer le changement \u00e0 votre site web en production.<\/p>\n Pour l’instant, nous avons activ\u00e9 le th\u00e8me Twenty Twenty sur notre site local. Comme vous pouvez le voir, la page d’accueil affiche tous les boutons, textes et images align\u00e9s au centre :<\/p>\n Cependant, lorsque nous passons au th\u00e8me Twenty Twenty-Three, vous pouvez voir que le bouton Shop now <\/strong>est mal align\u00e9 :<\/p>\n En mettant en place un environnement local pour votre test, vous \u00eates en mesure de d\u00e9tecter des anomalies visuelles comme celle-ci.<\/p>\n Un autre moyen important de tester votre site WordPress est de v\u00e9rifier la vitesse actuelle de votre site web. Dans cette section, nous allons examiner six consid\u00e9rations pour vous aider \u00e0 tester la performance de votre site.<\/p>\n En gardant cela \u00e0 l’esprit, il peut \u00eatre utile de commencer avec Kinsta APM<\/a>. Gr\u00e2ce \u00e0 notre outil de surveillance des performances des applications, il est facile d’identifier les probl\u00e8mes de performance de WordPress :<\/p>\n Par exemple, vous pouvez avoir un aper\u00e7u de tous les processus PHP, des requ\u00eates de base de donn\u00e9es MySQL et des appels HTTP<\/a> externes. Par cons\u00e9quent, vous serez en meilleure position pour d\u00e9tecter les longs appels API, les requ\u00eates de base de donn\u00e9es lentes, et le code non optimis\u00e9 des extensions et des th\u00e8mes.<\/p>\n Mieux encore, Kinsta APM est gratuit avec tous les plans Kinsta, et vous pouvez acc\u00e9der \u00e0 l’outil directement \u00e0 partir de votre tableau de bord MyKinsta. Dans l’ensemble, il s’agit d’une solution facile \u00e0 utiliser qui vous aide \u00e0 am\u00e9liorer les performances et les temps de chargement de votre site web.<\/p>\n Tout d’abord, pour vous assurer que votre site web fonctionne \u00e0 son meilleur niveau possible, vous pouvez tester WordPress pour des requ\u00eates ou des scripts lents. Les requ\u00eates et les scripts lents ont un effet sur la vitesse globale de votre page et rendent votre site moins efficace.<\/p>\n La fa\u00e7on la plus simple d’identifier les requ\u00eates et les scripts lents est d’activer Kinsta APM. Si vous \u00eates client de Kinsta, vous pouvez acc\u00e9der gratuitement \u00e0 cet outil. Cependant, vous devez l’activer \u00e0 partir de votre tableau de bord MyKinsta.<\/p>\n Pour ce faire, il vous suffit de vous connecter \u00e0 votre compte et de choisir le site web sur lequel vous souhaitez utiliser l’outil APM. Naviguez ensuite jusqu’\u00e0 l’onglet APM <\/strong>et cliquez sur Activer <\/strong>:<\/p>\n Vous devrez ensuite choisir la dur\u00e9e pendant laquelle vous souhaitez utiliser l’outil. Comme l’outil APM utilise des ressources de serveur, il peut avoir un impact sur la performance de votre site. Par cons\u00e9quent, il est pr\u00e9f\u00e9rable d’activer l’outil uniquement pendant la p\u00e9riode o\u00f9 vous cherchez activement \u00e0 r\u00e9soudre un probl\u00e8me de performance.<\/p>\n Faites votre choix et cliquez sur Activer la dur\u00e9e de surveillance <\/strong>:<\/p>\n L’outil peut prendre quelques minutes pour rassembler des donn\u00e9es sur votre site. Apr\u00e8s cela, passez \u00e0 l’onglet Base de donn\u00e9es <\/strong>et localisez la section Requ\u00eates de base de donn\u00e9es les plus lentes <\/strong>:<\/p>\n Vous y trouverez les dix requ\u00eates de base de donn\u00e9es les plus lentes de votre site. Si vous cliquez sur une requ\u00eate, vous pouvez \u00e9galement voir les \u00e9chantillons de transactions :<\/p>\n Vous pouvez ainsi obtenir plus d’informations sur l’\u00e9chantillon, la chronologie de la trace, les d\u00e9tails de la port\u00e9e et la trace de la pile.<\/p>\n Si les extensions mal cod\u00e9es peuvent avoir un impact sur la s\u00e9curit\u00e9 de votre site WordPress, elles peuvent aussi en affecter les performances. Il est donc important de d\u00e9tecter ce probl\u00e8me d\u00e8s que possible.<\/p>\n L\u00e0 encore, vous pouvez utiliser l’outil Kinsta APM pour identifier les extensions lentes. Une fois que vous avez activ\u00e9 l’outil dans votre tableau de bord MyKinsta, naviguez jusqu’\u00e0 l’onglet APM <\/strong>. Ensuite, passez \u00e0 WordPress <\/strong>:<\/p>\n La premi\u00e8re section que vous verrez est celle des extensions WordPress les plus lentes<\/strong>. Les extensions les plus lentes sont list\u00e9es en haut de la section.<\/p>\n Pour obtenir plus d’informations sur les probl\u00e8mes de performance, cliquez sur l’une des extensions list\u00e9es. Cela chargera les \u00e9chantillons de transactions que l’extension a ex\u00e9cut\u00e9s. Par exemple, vous pourrez voir l’horodatage, la chronologie de la trace de la transaction, les d\u00e9tails de la port\u00e9e, la chronologie de la trace, et plus encore.<\/p>\n Il est \u00e9galement important de tester WordPress pour les pages lentes, car cela peut entra\u00eener une mauvaise ergonomie. De plus, la vitesse des pages est un facteur de classement pour les moteurs de recherche comme Google<\/a>.<\/p>\n Vous pouvez utiliser un outil gratuit de test de vitesse de site web comme Pingdom<\/a> ou PageSpeed Insights<\/a> pour g\u00e9n\u00e9rer un score rapide de vitesse de page. Cependant, vous pouvez obtenir une compr\u00e9hension plus approfondie de la vitesse de votre page \u00e0 l’aide de l’outil Kinsta APM.<\/p>\n Une fois que vous avez activ\u00e9 Kinsta APM, il vous faudra quelques secondes pour charger les mesures de performance de votre site. Ensuite, allez dans l’onglet Transactions <\/strong>:<\/p>\n Ici, vous pourrez voir quelques donn\u00e9es sur le temps de transaction global de votre site. Mais vous pouvez \u00e9galement faire d\u00e9filer vers le bas les transactions les plus lentes <\/strong>pour voir les processus PHP qui prennent le plus de temps de transaction :<\/p>\n Si vous s\u00e9lectionnez une transaction, vous pouvez trouver l’URL qui la g\u00e9n\u00e8re. Cliquez ensuite sur l’URL pour afficher la chronologie de la trace de la transaction<\/strong>:<\/p>\n De cette mani\u00e8re, vous pouvez trouver l’intervalle qui prend le plus de temps. Si ces p\u00e9riodes sont jug\u00e9es critiques pour vos performances, elles sont g\u00e9n\u00e9ralement mises en \u00e9vidence en orange ou en rouge.<\/p>\n La mise en cache est un moyen simple d’am\u00e9liorer vos temps de chargement. Elle consiste \u00e0 stocker des copies de votre site sur le serveur. Ainsi, lorsqu’un utilisateur demande votre page, votre serveur peut afficher la version mise en cache, ce qui permet d’envoyer les donn\u00e9es beaucoup plus rapidement.<\/p>\n Chez Kinsta, vous avez acc\u00e8s \u00e0 la mise en cache au niveau du serveur<\/a>, qui est automatiquement activ\u00e9e sur tous les sites web en ligne. Mais si vous utilisez un environnement de staging, vous devrez activer le cache manuellement.<\/p>\n Depuis votre tableau de bord MyKinsta, cliquez sur Sites WordPress <\/strong>et choisissez votre site web. Ensuite, naviguez vers Outils<\/strong>, et sous Cache du site<\/strong>, cliquez sur Activer<\/strong> :<\/p>\n La fa\u00e7on la plus simple de tester votre cache<\/a> est d’ex\u00e9cuter votre site avec un outil de test de vitesse web comme Pingdom<\/a>. Cependant, il est important d’effectuer le test plus d’une fois. En effet, si vous ne l’ex\u00e9cutez qu’une seule fois, il se peut que le contenu ne soit pas encore mis en cache sur le serveur de l’h\u00e9bergeur ou le CDN.<\/p>\n Saisissez votre URL dans le champ URL <\/strong>de Pingdom et s\u00e9lectionnez un emplacement. Maintenant, sous Response Headers<\/strong>, localisez x-kinsta-cache<\/strong>. Si l’en-t\u00eate indique MISS<\/strong>, votre site ne se charge pas \u00e0 partir du cache.<\/p>\n Pour r\u00e9soudre ce probl\u00e8me, vous devrez ex\u00e9cuter le test Pingdom plusieurs fois. Cela devrait permettre aux en-t\u00eates x-kinsta-cache <\/strong>et x-cache <\/strong>d’enregistrer un HIT<\/strong>. Maintenant, vous analysez les r\u00e9sultats, en regardant la grande barre jaune qui indique le temps d’attente ou Time to First Byte (TTFB).<\/p>\n Ce chiffre est g\u00e9n\u00e9ralement \u00e9lev\u00e9 si la page n’est pas sortie du cache. L\u00e0 encore, vous pouvez effectuer votre test une premi\u00e8re fois avec le cache d\u00e9sactiv\u00e9, puis une seconde fois avec le cache activ\u00e9, afin de voir clairement la diff\u00e9rence.<\/p>\n Un r\u00e9seau de diffusion de contenu (CDN)<\/a> vous permet d’am\u00e9liorer vos temps de chargement en diffusant vos pages web via un serveur physiquement plus proche de vos visiteurs. Avec tous les plans Kinsta, vous avez acc\u00e8s \u00e0 un CDN aliment\u00e9 par Cloudflare<\/a>.<\/p>\n Pour les nouveaux sites web, le CDN est activ\u00e9 par d\u00e9faut. Mais vous pouvez v\u00e9rifier que votre CDN est activ\u00e9 en vous connectant \u00e0 votre tableau de bord MyKinsta.<\/p>\n Allez dans Sites WordPress <\/strong>et s\u00e9lectionnez le nom de votre site web. Maintenant, cliquez sur l’onglet CDN <\/strong>et cliquez sur Activer<\/strong>. Si vous voyez D\u00e9sactiver<\/strong>, alors vous savez que le CDN est actif :<\/p>\n Pour tester votre CDN, le plus simple est d’utiliser un outil de test de vitesse de site web. Mais tout d’abord, il peut \u00eatre judicieux d’inspecter les en-t\u00eates HTTP d’une ressource statique pour s’assurer qu’elle se charge \u00e0 partir du CDN de Kinsta.<\/p>\n Vous pouvez le v\u00e9rifier en utilisant l’outil Inspect de votre navigateur ou en utilisant notre v\u00e9rificateur gratuit d’\u00e9tat HTTP et de redirection<\/a>. Vous devez maintenant choisir un outil de test de vitesse de site web tel que Pingdom :<\/p>\n Vous pouvez effectuer le premier test apr\u00e8s avoir d\u00e9sactiv\u00e9 le CDN. Ensuite, vous pouvez tester \u00e0 nouveau votre site avec le CDN activ\u00e9 pour voir la diff\u00e9rence. Vous pouvez \u00e9galement tester votre CDN \u00e0 partir de diff\u00e9rents endroits.<\/p>\n Une fois votre test termin\u00e9, vous devez examiner les requ\u00eates qui se chargent depuis le CDN de Kinsta (xxxxkinstacdn.com)<\/em>. Pour plus de d\u00e9tails sur ce sujet, consultez notre article sur l’ex\u00e9cution d’un test CDN<\/a>.<\/p>\n Contrairement \u00e0 ce que l’on pourrait penser, il existe une diff\u00e9rence essentielle entre les tests de vitesse des sites web et les tests de charge<\/a>. Essentiellement, le test de vitesse mesure le temps de chargement d’une page, y compris les temps de r\u00e9ponse de MySQL et de PHP.<\/p>\n En revanche, les tests de charge offrent un niveau de granularit\u00e9 plus fin que les tests de vitesse. Par exemple, il peut souvent \u00eatre utilis\u00e9 pour mesurer les temps de chargement dans certaines situations, comme lorsque votre site est affect\u00e9 par une forte augmentation du trafic.<\/p>\n Le processus de mise en place d’un test de charge est assez complexe. C’est pourquoi il peut \u00eatre judicieux de demander l’aide d’un d\u00e9veloppeur. Si vous souhaitez effectuer un test de charge sur votre site Kinsta, contactez un membre de notre \u00e9quipe de support<\/a>.<\/p>\n Enfin, lorsque vous testez WordPress, il est important de vous assurer que tous les logiciels de votre site web sont s\u00e9curis\u00e9s. Bien que cela concerne le logiciel central de WordPress que la plateforme utilise, cela s’\u00e9tend \u00e9galement \u00e0 la s\u00e9curit\u00e9 des th\u00e8mes et des extensions.<\/p>\n En fait, il est d’autant plus important de tester les th\u00e8mes et les extensions qu’ils ne proviennent pas toujours d’une source fiable. Si vous installez des th\u00e8mes et des extensions \u00e0 partir de sites web tiers, il n’y a aucun moyen de v\u00e9rifier que le logiciel a subi tous les contr\u00f4les de s\u00e9curit\u00e9 requis.<\/p>\n Cela signifie que l’extension ou le th\u00e8me peut \u00eatre mal cod\u00e9 ou m\u00eame contenir des scripts malveillants ou des bogues qui peuvent endommager votre site<\/a>. En outre, il est important de maintenir tous les logiciels de votre site \u00e0 jour, car les logiciels obsol\u00e8tes peuvent servir de porte d\u00e9rob\u00e9e \u00e0 des acteurs malveillants pour acc\u00e9der \u00e0 votre site.<\/p>\n Bien que WordPress soit une plateforme s\u00e9curis\u00e9e, elle n’est pas \u00e0 l’abri des cyber-attaques. Il est donc important d’\u00e9valuer r\u00e9guli\u00e8rement la s\u00e9curit\u00e9 de vos logiciels de base.<\/p>\n L’une des meilleures fa\u00e7ons de s\u00e9curiser votre logiciel de base est d’opter pour un h\u00e9bergeur de qualit\u00e9. Par exemple, chez Kinsta<\/a>, vous aurez acc\u00e8s \u00e0 une protection DDoS, \u00e0 des pare-feux et \u00e0 une analyse des logiciels malveillants. De plus, nous disposons d’une \u00e9quipe d\u00e9di\u00e9e \u00e0 la suppression des logiciels malveillants<\/a>. Ainsi, m\u00eame si votre site est infect\u00e9, nous pouvons vous aider \u00e0 le remettre dans son \u00e9tat d’origine.<\/p>\n Quoi qu’il en soit, lorsqu’une nouvelle mise \u00e0 jour de WordPress est publi\u00e9e, vous pouvez d’abord v\u00e9rifier qu’elle est s\u00fbre en l’ex\u00e9cutant sur un site d’essai ou dans un environnement local.<\/p>\n Chez Kinsta, c’est tr\u00e8s facile \u00e0 faire. Tout ce que vous avez \u00e0 faire est de naviguer vers Sites WordPress <\/strong>et de choisir votre site web dans la liste. Ensuite, assurez-vous que votre site est configur\u00e9 sur Staging <\/strong>lorsque vous ex\u00e9cutez la mise \u00e0 jour.<\/p>\n Une fois que vous \u00eates s\u00fbr que la nouvelle version de WordPress est s\u00fbre, revenez \u00e0 cet \u00e9cran et cliquez sur Pousser l’environnement <\/strong>> Pousser vers LIVE <\/strong>pour appliquer le changement :<\/p>\n Ensuite, faites votre s\u00e9lection (en choisissant entre les fichiers ou la base de donn\u00e9es) et confirmez votre choix en cliquant sur Pousser vers live<\/strong>.<\/p>\n Lorsque vous trouvez un nouveau th\u00e8me que vous souhaitez installer, la meilleure chose \u00e0 faire est d’activer le th\u00e8me dans un environnement de d\u00e9veloppement local ou sur votre site de staging. Il en va de m\u00eame lorsqu’un th\u00e8me existant sur votre site fait l’objet d’une mise \u00e0 jour.<\/p>\n La plupart des mises \u00e0 jour de th\u00e8mes sont accompagn\u00e9es de correctifs pour les probl\u00e8mes de s\u00e9curit\u00e9. Cependant, vous pouvez aussi tomber sur une mauvaise mise \u00e0 jour qui entre en conflit avec d’autres logiciels sur votre site.<\/p>\n Par ailleurs, s’il s’agit d’un th\u00e8me que vous n’avez jamais utilis\u00e9 auparavant (et dont vous ne connaissez pas les d\u00e9veloppeurs), il est beaucoup plus s\u00fbr d’installer le th\u00e8me dans un environnement local. Cela signifie que m\u00eame si le th\u00e8me casse votre site, votre site en production ne sera pas affect\u00e9.<\/p>\n Par cons\u00e9quent, si vous \u00eates un client de Kinsta, vous pouvez mettre en place un site de staging. Ou, si votre site web n’est pas h\u00e9berg\u00e9 chez Kinsta, vous pouvez d\u00e9marrer gratuitement avec DevKinsta, o\u00f9 vous pouvez mettre en place un environnement de d\u00e9veloppement local.<\/p>\n Une fois que vous avez ouvert DevKinsta sur votre ordinateur, allez sur la page Info du site<\/strong>. Cliquez sur WP Admin <\/strong>:<\/p>\n Ensuite, installez et activez le th\u00e8me comme vous le feriez habituellement avec WordPress. En r\u00e8gle g\u00e9n\u00e9rale, il est conseill\u00e9 d’attendre au moins une semaine avant d’installer le th\u00e8me sur votre site web (il en va de m\u00eame pour la mise \u00e0 jour du th\u00e8me).<\/p>\n Cependant, si vous souhaitez \u00e9valuer la s\u00e9curit\u00e9 d’un th\u00e8me existant sur votre site, la mani\u00e8re la plus simple de le faire est d’utiliser un scanner de s\u00e9curit\u00e9. WPScan<\/a> est une excellente option qui d\u00e9tectera toutes les vuln\u00e9rabilit\u00e9s de vos th\u00e8mes WordPress.<\/p>\n Les extensions peuvent \u00e9galement constituer une menace pour la s\u00e9curit\u00e9 de votre site web. C’est pourquoi il est bon d’\u00e9valuer r\u00e9guli\u00e8rement la s\u00e9curit\u00e9 de vos extensions.<\/p>\n Comme nous l’avons vu plus haut, vous pouvez installer une nouvelle extension (ou ex\u00e9cuter une mise \u00e0 jour de l’extension) dans un environnement local ou un site de staging. Ainsi, en cas de probl\u00e8me, votre site en production restera intact.<\/p>\n Cependant, comme pour les th\u00e8mes, il peut \u00e9galement \u00eatre utile d’installer un scanner de vuln\u00e9rabilit\u00e9s comme WPScan. Cet outil est enti\u00e8rement gratuit. Il vous suffit de vous inscrire pour obtenir un compte. Ensuite, vous pouvez ajouter le jeton API \u00e0 votre site WordPress.<\/p>\n Une fois que le scanner est li\u00e9 \u00e0 votre site web, naviguez vers WPScan <\/strong>> R\u00e9glages <\/strong>o\u00f9 vous pouvez configurer des scans automatis\u00e9s quotidiens ou horaires :<\/p>\n Vous pouvez \u00e9galement cliquer sur l’onglet Rapport <\/strong>pour lancer un test manuellement. Une fois le test termin\u00e9, faites d\u00e9filer vers le bas jusqu’\u00e0 la section Extensions <\/strong>:<\/p>\n Vous y trouverez une liste compl\u00e8te de toutes les extensions de votre site. Si vos extensions sont s\u00e9curis\u00e9es, vous verrez une coche \u00e0 c\u00f4t\u00e9 de chaque nom d’extension. Dans le cas contraire, vous trouverez des informations dans la colonne Vuln\u00e9rabilit\u00e9s<\/strong>.<\/p>\n Bien s\u00fbr, vous pouvez optimiser vos pages web et prendre toutes les mesures de s\u00e9curit\u00e9 n\u00e9cessaires pour g\u00e9rer un site avec succ\u00e8s. Toutefois, en fin de compte, la meilleure fa\u00e7on de garantir la s\u00e9curit\u00e9 et la rapidit\u00e9 de votre site est d’utiliser un h\u00e9bergeur de qualit\u00e9.<\/p>\n Chez Kinsta, nous donnons la priorit\u00e9 \u00e0 la vitesse et \u00e0 la s\u00e9curit\u00e9 :<\/p>\n Tous nos plans sont h\u00e9berg\u00e9s sur des processeurs haut de gamme avec une disponibilit\u00e9 mondiale. De plus, vous aurez acc\u00e8s au CDN de Kinsta aliment\u00e9 par Cloudflare, avec des serveurs situ\u00e9s dans plus de 300 emplacements.<\/p>\n Pour ceux qui sont pr\u00e9occup\u00e9s par la s\u00e9curit\u00e9 web, Kinsta offre des tonnes de fonctionnalit\u00e9s pour renforcer votre site. Vous pouvez compter sur des sauvegardes quotidiennes, une analyse des logiciels malveillants, une protection DDoS et des pare-feux. De plus, nous fournissons un acc\u00e8s SSH<\/a> \u00e0 connexion s\u00e9curis\u00e9e, et vous pouvez installer un certificat SSL gratuit en un seul clic.<\/p>\n Si vous ne testez pas votre site WordPress, vous ne pouvez pas comprendre correctement la fa\u00e7on dont les utilisateurs utilisent votre site. Par exemple, ceux qui utilisent certains navigateurs peuvent avoir des probl\u00e8mes avec votre menu. Par ailleurs, les visiteurs mobiles peuvent souffrir de longs temps d’attente. C’est pourquoi il est important de tester votre site WordPress.<\/p>\n La meilleure fa\u00e7on de tester votre site est de mettre en place un site de staging ou de cr\u00e9er un environnement local avec DevKinsta<\/a>. Vous pourrez ainsi vous faire une id\u00e9e des fonctionnalit\u00e9s, des performances et de la s\u00e9curit\u00e9 de votre site (sans perturber votre exp\u00e9rience en ligne).<\/p>\nQuels sont les types de tests les plus courants ?<\/h2>\n
\n
Meilleures pratiques pour les tests WordPress<\/h2>\n
Comment mettre en place des environnements de test<\/h3>\n
Comment mettre en place un environnement de test \u00e0 l’aide d’un site de staging ?<\/h4>\n
![\"Configurer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-staging.jpg\")
Comment configurer un environnement de test local<\/h4>\n
![\"Utilisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/DevKinsta.png\")
![\"Cr\u00e9er](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/devkinsta-create-local-site.png\")
Comment tester la fonctionnalit\u00e9 de votre site WordPress (5 fonctionnalit\u00e9s)<\/h2>\n
Support multi-navigateurs<\/h3>\n
![\"Effectuez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/BrowserStack.png\")
Tests unitaires<\/h3>\n
bash\nwp scaffold plugin-tests my-plugin<\/code><\/pre>\nbash\nbash bin\/install-wp-tests.sh wordpress_test root '' localhost latest<\/code><\/pre>\n\/tmp directory<\/code> et dans les outils de tests unitaires de WordPress.<\/p>\nphpunit<\/code>. Pour des instructions compl\u00e8tes, consultez ce guide sur les tests unitaires<\/a>.<\/p>\nResponsive sur mobiles et ordinateurs<\/h3>\n
![\"Testez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/preview-mobile.png\")
![\"Testez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/inspect-tool.png\")
![\"Cliquez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/device-toolbar.png\")
![\"Affichez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/preview-mobile-chrome.png\")
Test de l’interface utilisateur (UI)<\/h3>\n
![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/create-menu-local.png\")
![\"Afficher](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/manage-live-preview-menu.png\")
![\"Tester](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/ui-front-end.png\")
![\"Tests](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/test-ui-menu.png\")
Tests visuels<\/h3>\n
![\"Ex\u00e9cutez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/theme-vrt.png\")
![\"D\u00e9tectez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/vrt-after.png\")
Comment tester la vitesse de votre site WordPress (6 points \u00e0 prendre en compte)<\/h2>\n
![\"Outil](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-apm-tool.png\")
Requ\u00eates ou scripts lents<\/h3>\n
![\"Activer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/enable-apm.png\")
![\"Activer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/apm-monitoring-time.png\")
![\"Affichez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/apm-database.png\")
![\"Affichez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/apm-samples.png\")
Plugins lents<\/h3>\n
![\"Testez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/apm-wordpress.png\")
Pages lentes<\/h3>\n
![\"Testez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/apm-transactions.png\")
![\"Affichez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/slowest-transactions.png\")
![\"Chronologie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/transaction-trace-timeline.png\")
Mise en cache<\/h3>\n
![\"Activez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-cache.png\")
R\u00e9seau de diffusion de contenu (CDN)<\/h3>\n
![\"Activez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-cdn.png\")
![\"Pingdom\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/pingdom-speed-test.png\")
Test de charge<\/h3>\n
Comment tester la s\u00e9curit\u00e9 de votre site WordPress<\/h2>\n
S\u00e9curit\u00e9 du c\u0153ur<\/h3>\n
![\"Pousser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/devkinsta-site-info.jpg\")
S\u00e9curit\u00e9 des th\u00e8mes<\/h3>\n
![\"Lancer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/devkinsta-site-info-1.jpg\")
S\u00e9curit\u00e9 des plugins<\/h3>\n
![\"Testez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/wpscan-automated-scans.png\")
![\"Rapports](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/wpscan-plugin-security.png\")
La vitesse et la s\u00e9curit\u00e9 sont optimales lorsque vous choisissez le bon h\u00e9bergement<\/h2>\n
![\"Kinsta\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-home.png\")
R\u00e9sum\u00e9<\/h2>\n