Parfois, il peut \u00eatre d\u00e9routant d’essayer de trouver tout ce dont vous avez besoin au m\u00eame endroit. Donc, aujourd’hui, nous allons partager avec vous tout ce que nous savons sur l’optimisation de WordPress, plus de 15 ans d’exp\u00e9rience et de dures le\u00e7ons apprises. Que vous commenciez tout juste \u00e0 utiliser WordPress ou que vous soyez un d\u00e9veloppeur chevronn\u00e9, nous vous promettons que vous trouverez quelque chose d’utile dans ce guide!<\/p>\n\n\n\n
Essayez une d\u00e9mo gratuite
Plus de 40,0% du Web est d\u00e9sormais propuls\u00e9 par WordPress. Bien que ce soit g\u00e9nial, cela signifie \u00e9galement qu’il y a des milliers de th\u00e8mes, plugins et technologies diff\u00e9rents qui doivent tous coexister. Pour l’utilisateur quotidien de WordPress, cela peut rapidement se transformer en cauchemar lorsque leur site commence \u00e0 ralentir et qu’il ne sait pas pourquoi ni m\u00eame par o\u00f9 commencer le d\u00e9pannage.<\/p>\n\n\n\n
Nous avons pass\u00e9 en revue de nombreux principes fondamentaux de la performance et comment cela peut avoir un impact \u00e9norme sur la vitesse de votre site. Mais aujourd’hui, nous allons d\u00e9tailler les \u00e9tapes applicables que vous pouvez entreprendre d\u00e8s maintenant pour voir des am\u00e9liorations sur vos propres sites WordPress. Nous partagerons \u00e9galement certaines ressources qui nous ont \u00e9t\u00e9 inestimables.<\/p>\n\n\n\n
Avant de plonger dans les optimisations de vitesse de WordPress, il est important de comprendre d’abord que tous les sites WordPress ne sont pas identiques. C’est pourquoi de nombreux utilisateurs ont des probl\u00e8mes, car vous ne pouvez pas aborder tous les probl\u00e8mes de la m\u00eame mani\u00e8re. Nous attribuons toujours aux sites WordPress une classification: statique ou dynamique. Voyons donc d’abord les diff\u00e9rences entre ces deux types de sites.<\/p>\n\n\n\n
Statique inclurait g\u00e9n\u00e9ralement des sites tels que des blogs, des sites de petites entreprises, des sites d’actualit\u00e9s \u00e0 faible volume, des sites personnels, de la photographie, etc. . .<\/p>\n\n\n\n
Cela devient extr\u00eamement important car de nombreuses demandes peuvent \u00eatre servies directement \u00e0 partir du cache sur le serveur \u00e0 des vitesses ultra-rapides! Ne t’inqui\u00e8te pas; nous allons approfondir le sujet de la mise en cache ci-dessous. Cela signifie qu’ils auront moins d’appels \u00e0 la base de donn\u00e9es et moins de ressources seront n\u00e9cessaires pour atteindre les performances de Google.<\/p>\n\n\n\n
D’un autre c\u00f4t\u00e9, nous avons des sites tr\u00e8s dynamiques. Il s’agit notamment de sites tels que le commerce \u00e9lectronique (WooCommerce ou Easy Digital Downloads), la communaut\u00e9, l’adh\u00e9sion, les forums (bbPress ou BuddyPress) et les syst\u00e8mes de gestion de l’apprentissage (LMS). Par dynamique, nous entendons que les donn\u00e9es sur ces sites WordPress changent fr\u00e9quemment (les transactions serveur ont lieu toutes les quelques minutes voire toutes les secondes). Cela signifie que toutes les demandes adress\u00e9es au serveur ne peuvent pas \u00eatre trait\u00e9es directement \u00e0 partir du cache et n\u00e9cessitent des ressources de serveur et des requ\u00eates de base de donn\u00e9es suppl\u00e9mentaires.<\/p>\n\n\n\n
Ces sites ont \u00e9galement g\u00e9n\u00e9ralement un grand nombre de visiteurs et de sessions simultan\u00e9s. Sur un site WordPress d’information ou d’entreprise qui est principalement statique, un visiteur peut rester cinq ou 10 minutes jusqu’\u00e0 ce qu’il trouve ce dont il a besoin (et c’est un nombre \u00e9lev\u00e9, les taux de rebond sont g\u00e9n\u00e9ralement beaucoup plus \u00e9lev\u00e9s). Sur les sites dynamiques, c’est le contraire qui se produit. Les visiteurs viennent g\u00e9n\u00e9ralement sur le site pour interagir avec quelque chose ou quelqu’un. S’ils suivent un cours en ligne, il n’est pas inhabituel pour eux de rester pendant des heures.<\/p>\n\n\n\n
Vous pouvez voir o\u00f9 cela va. Les visiteurs simultan\u00e9s connect\u00e9s \u00e0 votre h\u00e9bergeur WordPress s’additionnent rapidement. Pour aggraver les choses, vous avez alors un grand nombre de visiteurs simultan\u00e9s en plus d’un probl\u00e8me de \u00abcontenu inaccessible\u00bb.<\/p>\n\n\n\n
Un h\u00e9bergeur WordPress est une entreprise qui stocke toutes les donn\u00e9es de votre site Web. Vous vous inscrivez \u00e0 un plan d’h\u00e9bergement, et toutes vos images, contenus, vid\u00e9os, etc., r\u00e9sident sur un serveur situ\u00e9 dans le centre de donn\u00e9es de l’h\u00f4te. L’h\u00e9bergeur WordPress vous permet d’acc\u00e9der facilement aux donn\u00e9es, de les g\u00e9rer et de les acheminer vers vos visiteurs. Assez simple, non? Enfin, pas tout \u00e0 fait.<\/p>\n\n\n\n
Il existe trois types d’h\u00e9bergeurs WordPress tr\u00e8s diff\u00e9rents que vous rencontrerez sur le Web. Plongeons-nous dans les avantages et les inconv\u00e9nients de chacun. Il est important que vous choisissiez le bon d\u00e8s le d\u00e9but, sinon vous vous causerez simplement des maux de t\u00eate et une perte de temps en chemin.<\/p>\n\n\n\n
Le premier et le plus populaire type d’h\u00e9bergement WordPress est ce que nous appelons \u00abl’h\u00e9bergement partag\u00e9\u00bb. Il s’agit notamment des plus grands h\u00e9bergeurs du secteur, tels que les soci\u00e9t\u00e9s EIG comme Bluehost et HostGator, ainsi que des fournisseurs tels que Siteground, GoDaddy, Media Temple, OVH, GreenGeeks et InMotion Hosting. Ils utilisent g\u00e9n\u00e9ralement cPanel, et le client moyen paie g\u00e9n\u00e9ralement entre 3 et 25 \u20ac par mois.<\/p>\n\n\n\n
Quiconque utilise ce type d’h\u00e9bergement conna\u00eetra \u00e0 un moment donn\u00e9 de la lenteur, ce n’est qu’une question de temps. Pourquoi? Parce que les h\u00e9bergeurs partag\u00e9s ont tendance \u00e0 surcharger leurs serveurs, ce qui \u00e0 son tour peut avoir un impact sur les performances de votre site. Les suspensions de site ou les erreurs 500 fr\u00e9quentes sont des choses courantes que vous rencontrerez, car elles doivent tout limiter et consolider les ressources pour survivre. Ou pire encore, les temps d’arr\u00eat du site Web. M\u00eame si vous ne le savez pas, votre site WordPress est probablement plac\u00e9 sur le m\u00eame serveur que plus de 200 autres personnes. Tout probl\u00e8me qui surgit avec d’autres sites peut se r\u00e9percuter sur votre site.<\/p>\n\n\n\n
Peu importe la fa\u00e7on dont vous faites le calcul, apr\u00e8s les d\u00e9penses, 3 \u20ac par mois ne g\u00e9n\u00e8rent aucun revenu pour la soci\u00e9t\u00e9 d’h\u00e9bergement. Surtout quand vous ajoutez du support \u00e0 cela. Un ticket d’assistance et ils sont d\u00e9j\u00e0 dans le rouge. La fa\u00e7on dont ils font la plus grosse partie de leur argent est sur la vente incitative et les frais cach\u00e9s. Ces ventes incitatives incluent des choses comme les migrations, les enregistrements de domaine, les certificats SSL, etc. Une autre tactique courante consiste \u00e0 offrir d’\u00e9normes r\u00e9ductions d’inscription. Mais une fois que le renouvellement arrive, vous recevez la vraie facture.<\/p>\n\n\n\n
La plupart de ces h\u00e9bergeurs proposent ce qu’ils appellent leur forfait \u00abressources illimit\u00e9es\u00bb. Vous avez probablement tous vu cela. Eh bien, il n\u2019existe pas dans le monde r\u00e9el de ressources illimit\u00e9es. Ce que les h\u00f4tes font dans les coulisses, c’est ralentir les clients en utilisant une grande partie des ressources. Ceci, \u00e0 son tour, finit par le d\u00e9part de ces clients en col\u00e8re, laissant de la place \u00e0 plus de clients qui n’utilisent pas beaucoup de ressources. En fin de compte, vous avez un cercle vicieux o\u00f9 la soci\u00e9t\u00e9 d’h\u00e9bergement propose des plans bon march\u00e9 et recrute des clients qui, esp\u00e8rent-ils, n’utiliseront pas beaucoup de ressources et ach\u00e8teront des ventes incitatives.<\/p>\n\n\n\n
Le service client et le support avec l’h\u00e9bergement mutualis\u00e9 sont presque toujours inf\u00e9rieurs \u00e0 la moyenne en raison du volume consid\u00e9rable de sites par rapport aux repr\u00e9sentants du support. <\/p>\n\n\n\n
“N’oubliez jamais que vous recevez ce pour quoi vous payez!<\/em>“<\/strong><\/p>\n\n\n\n Le deuxi\u00e8me type d’h\u00e9bergement WordPress est DIY VPS, ou “Faites-le vous-m\u00eame sur un serveur priv\u00e9 virtuel.” Ici c’est g\u00e9n\u00e9ralement orient\u00e9 pour les utilisateurs avec un peu plus d’exp\u00e9rience en d\u00e9veloppement, en gestion de serveur et avec plus d’exp\u00e9rience WordPress. Ce sont les bricoleurs. Ces gens essaient g\u00e9n\u00e9ralement encore d’\u00e9conomiser de l’argent, mais ils sont \u00e9galement pr\u00e9occup\u00e9s par la performance et r\u00e9alisent son importance dans le succ\u00e8s de leur entreprise. Les configurations communes peuvent inclure l’utilisation d’un fournisseur VPS tiers tel que Digital Ocean, Linode ou Vultr; avec un outil comme ServerPilot pour le g\u00e9rer plus facilement.<\/p>\n\n\n\n Un petit VPS de DigitalOcean commence \u00e0 5 \u20ac par mois et le plan populaire de ServerPilot commence \u00e0 10 \u20ac par mois. Donc, en fonction de votre configuration, vous pourriez envisager un co\u00fbt compris entre 5 et 15 \u20ac ou plus par mois. L’approche DIY peut r\u00e9duire les co\u00fbts, mais cela signifie \u00e9galement que vous \u00eates responsable en cas de panne et que vous optimisez votre serveur en termes de performances.<\/p>\n\n\n\n L’approche du bricolage peut \u00eatre excellente, mais elle peut \u00e9galement se retourner contre vous si vous ne faites pas attention. N’empruntez pas cette voie si vous n’\u00eates pas f\u00e9ru de technologie ou simplement parce que vous voulez bricoler! Votre temps vaut de l’argent et vous devriez le consacrer \u00e0 la croissance de votre entreprise.<\/p>\n\n\n\n Le troisi\u00e8me type d’h\u00e9bergement est l’h\u00e9bergement WordPress g\u00e9r\u00e9. Ces types d’h\u00f4tes g\u00e8rent toutes les t\u00e2ches li\u00e9es au serveur principal pour vous, tout en fournissant une assistance lorsque vous en avez besoin. Ils sont g\u00e9n\u00e9ralement adapt\u00e9s pour fonctionner avec WordPress et incluent g\u00e9n\u00e9ralement des fonctionnalit\u00e9s telles que des environnements d’installation en un clic et des sauvegardes automatiques. Leurs \u00e9quipes de support seront mieux inform\u00e9es pour se familiariser avec le CMS, car elles se concentrent quotidiennement sur une seule plate-forme.<\/p>\n\n\n\n Si vous souhaitez gagner du temps, l’h\u00e9bergement WordPress g\u00e9r\u00e9 est la voie \u00e0 suivre! \ud83d\udc4d<\/p>\n\n\n\n Les plans d’h\u00e9bergement WordPress g\u00e9r\u00e9 vont g\u00e9n\u00e9ralement de 25 \u00e0 150 \u20ac par mois ou plus, en fonction de la taille de votre site et des besoins. De grandes entreprises comme jQuery, Intuit, Plesk, Dyn, Nginx et m\u00eame la Maison Blanche utilisent toutes WordPress pour h\u00e9berger leur site Web. Certains h\u00e9bergeurs WordPress g\u00e9r\u00e9s populaires que vous connaissez probablement, ou que vous utilisez peut-\u00eatre \u00e9galement, incluent WP Engine, Flywheel, Pressable, Media Temple, Pressidium et Pagely.<\/p>\n\n\n\n PHP est un langage de programmation et de script open source c\u00f4t\u00e9 serveur, principalement utilis\u00e9 pour le d\u00e9veloppement Web. La majeure partie du logiciel WordPress de base est \u00e9crite en PHP, avec vos plugins et th\u00e8mes, ce qui fait de PHP un langage tr\u00e8s important pour la communaut\u00e9 WordPress. Vous devez vous assurer que votre h\u00e9bergeur WordPress propose au moins PHP 7 ou sup\u00e9rieur.<\/p>\n\n\n\n Il existe diff\u00e9rentes versions de PHP que votre h\u00e9bergeur vous fournira sur votre serveur, le plus r\u00e9cent PHP 7.3 offrant d’\u00e9normes am\u00e9liorations de performances.<\/p>\n\n\n\n En fait, dans nos r\u00e9cents benchmarks PHP, si vous comparez PHP 7.3 \u00e0 PHP 5.6, il peut g\u00e9rer 3 fois plus de requ\u00eates (transactions) par seconde! PHP 7.3 est \u00e9galement en moyenne 9% plus rapide que PHP 7.2. Cela peut \u00e9galement avoir un impact sur la r\u00e9activit\u00e9 de votre tableau de bord d’administration WordPress.<\/p>\n\n\n\n Et m\u00e9fiez-vous des h\u00e9bergeurs WordPress proposant HHVM comme alternative \u00e0 PHP. HHVM n’est plus une solution adapt\u00e9e \u00e0 l’h\u00e9bergement WordPress.<\/p>\n\n\n\n Dans les coulisses, chaque h\u00e9bergeur WordPress utilise un serveur Web pour alimenter vos sites WordPress. Les choix les plus courants sont Nginx et Apache.<\/p>\n\n\n\n Nous vous recommandons vivement d’utiliser un h\u00f4te qui utilise Nginx en raison de ses racines dans l’optimisation des performances \u00e0 l’\u00e9chelle. Nginx surpasse souvent les autres serveurs Web populaires dans les tests de r\u00e9f\u00e9rence, en particulier dans les situations avec un contenu statique ou des requ\u00eates simultan\u00e9es \u00e9lev\u00e9es, c’est pourquoi Kinsta utilise Nginx.<\/p>\n\n\n\n Nginx<\/p>\n\n\n\n Certaines entreprises de haut niveau utilisant Nginx entre autre Autodesk, Atlassian, Intuit, T-Mobile, GitLab, DuckDuckGo, Microsoft, IBM, Google, Adobe, Salesforce, VMWare, Xerox, LinkedIn, Cisco, Facebook, Target, Citrix Systems, Twitter, Apple , Intel et bien d’autres.<\/p>\n\n\n\n Selon W3Techs, Apache alimente 44,0% de tous les sites Web, ce qui en fait l’option la plus utilis\u00e9e. Mais si vous regardez le serveur Web le plus populaire parmi les sites Web \u00e0 fort trafic (top 10 000), Nginx en alimente 41,9%, tandis qu’Apache n’en alimente que 18,1%. Il est utilis\u00e9 par certains des sites les plus gourmands en ressources, notamment Netflix, la NASA et m\u00eame WordPress.com.<\/p>\n\n\n\n Lorsque vous choisissez un h\u00e9bergeur WordPress, vous ne pensez peut-\u00eatre m\u00eame pas \u00e0 demander ou \u00e0 rechercher le r\u00e9seau qu’ils utilisent, mais vous devriez le faire. Le r\u00e9seau peut avoir un impact \u00e9norme sur les performances de votre site et m\u00eame sur la vivacit\u00e9 de votre tableau de bord WordPress. De nombreux h\u00e9bergeurs laisseront cela en dehors de leur marketing car ils opteront pour le r\u00e9seau le moins cher pour r\u00e9duire les co\u00fbts.<\/p>\n\n\n\n Voici quelques questions que vous devriez vous poser:<\/p>\n\n\n\n Si vous \u00eates un fournisseur d’h\u00e9bergement ne fournit pas de cache, vous pouvez utiliser un plugin de mise en cache WordPress tiers. Sur la base de notre exp\u00e9rience, nous recommandons l’un des \u00e9l\u00e9ments suivants:<\/p>\n\n\n\n Vous pouvez \u00e9galement consulter quelques options suppl\u00e9mentaires dans notre article d\u00e9taill\u00e9 sur les plugins de mise en cache WordPress.<\/p>\n\n\n\n Le meilleur de nos tests est clairement WP Rocket! <\/p>\n\n\n\n L’optimisation des images est une autre chose simple que vous pouvez faire qui a un impact significatif sur les temps de chargement de vos pages. Ce n\u2019est pas facultatif; chaque site devrait le faire!<\/p>\n\n\n\n Les grandes images ralentissent vos pages Web, ce qui cr\u00e9e une exp\u00e9rience utilisateur moins qu’optimale. L’optimisation des images consiste \u00e0 r\u00e9duire la taille de leur fichier, \u00e0 l’aide d’un plugin ou d’un script, ce qui acc\u00e9l\u00e8re \u00e0 son tour le temps de chargement de la page. La compression avec et sans perte sont deux m\u00e9thodes couramment utilis\u00e9es.<\/p>\n\n\n\n Selon HTTP Archive, en ao\u00fbt 2019, les images repr\u00e9sentaient en moyenne 34% du poids total d’une page Web. Donc, apr\u00e8s les vid\u00e9os, qui sont beaucoup plus difficiles \u00e0 optimiser, les images sont de loin le premier endroit o\u00f9 vous devriez commencer! C’est plus important que JavaScript, CSS et polices. Et ironiquement, un bon flux de travail d’optimisation d’image est l’une des choses les plus faciles \u00e0 mettre en \u0153uvre, mais de nombreux propri\u00e9taires de sites Web l’ignorent.<\/p>\n\n\n\n L’objectif principal de la compression de vos images est de trouver l’\u00e9quilibre entre la taille de fichier la plus faible et une qualit\u00e9 acceptable. Il existe plusieurs fa\u00e7ons d’effectuer presque toutes ces optimisations. L’un des moyens les plus \u00e9l\u00e9mentaires consiste \u00e0 les compresser avant de les t\u00e9l\u00e9charger sur WordPress. Habituellement, cela peut \u00eatre fait dans un outil comme Adobe Photoshop ou en utilisant la nouvelle application Squoosh en ligne de Google. Cependant, ces t\u00e2ches peuvent \u00e9galement \u00eatre effectu\u00e9es automatiquement \u00e0 l’aide de plugins, que nous aborderons plus en d\u00e9tail ci-dessous.<\/p>\n\n\n\n Les deux principaux \u00e9l\u00e9ments \u00e0 prendre en compte sont le format de fichier et le type de compression que vous utilisez. En choisissant la bonne combinaison de format de fichier et de type de compression, vous pouvez r\u00e9duire la taille de votre image jusqu’\u00e0 5 fois. Vous devrez tester chaque image ou format de fichier pour voir ce qui fonctionne le mieux.<\/p>\n\n\n\n Avant de commencer \u00e0 modifier vos images, assurez-vous d’avoir choisi le meilleur type de fichier. Vous pouvez utiliser plusieurs types de fichiers:<\/p>\n\n\n\n Et les GIF? Les GIF anim\u00e9s sont toujours amusants, mais ils d\u00e9truisent les performances Web. De nombreux GIF ont une taille sup\u00e9rieure \u00e0 1 Mo. Nous vous recommandons de les conserver pour les r\u00e9seaux sociaux et Slack. S’il y en a un dont vous ne pouvez pas vous passer dans votre article de blog, d\u00e9couvrez comment vous pouvez compresser des GIF anim\u00e9s.<\/p>\n\n\n\n Optimisation avec ou sans perte<\/strong><\/p>\n\n\n\n Il est \u00e9galement important de comprendre qu’il existe deux types de compression que vous pouvez utiliser, avec et sans perte.<\/p>\n\n\n\n La compression avec perte consiste \u00e0 \u00e9liminer certaines des donn\u00e9es de votre image. Pour cette raison, cela signifie que vous pourriez voir une d\u00e9gradation (r\u00e9duction de la qualit\u00e9 ou ce que certains appellent pixelis\u00e9). Vous devez donc faire attention \u00e0 la r\u00e9duction de votre image. Non seulement en raison de la qualit\u00e9, mais aussi parce que vous ne pouvez pas inverser le processus. Bien entendu, l\u2019un des grands avantages de la compression avec perte et la raison pour laquelle c\u2019est l\u2019une des m\u00e9thodes de compression les plus populaires est que vous pouvez r\u00e9duire consid\u00e9rablement la taille du fichier.<\/p>\n\n\n\n La compression sans perte, contrairement \u00e0 la compression avec perte, ne r\u00e9duit pas la qualit\u00e9 de l\u2019image. Comment est-ce possible? Cela se fait g\u00e9n\u00e9ralement en supprimant les m\u00e9tadonn\u00e9es inutiles (donn\u00e9es g\u00e9n\u00e9r\u00e9es automatiquement et produites par l’appareil qui capture l’image). Cependant, le plus gros inconv\u00e9nient de cette m\u00e9thode est que vous ne constaterez pas de r\u00e9duction significative de la taille du fichier. En d’autres termes, cela prendra beaucoup d’espace disque au fil du temps.<\/p>\n\n\n\n Vous voudrez exp\u00e9rimenter ce qui fonctionne le mieux pour vous. Mais pour la majorit\u00e9 des utilisateurs, nous vous recommandons d’utiliser la compression avec perte car vous pouvez facilement compresser une image bien \u00e0 plus de 70% (parfois m\u00eame plus de 90%!) Sans trop de perte de qualit\u00e9. Multipliez cela par 15 images sur une page, et cela jouera un r\u00f4le important dans la r\u00e9duction du temps de chargement de votre site.<\/p>\n\n\n\n Plugins de compression d’image La chose la plus importante lors du choix d’un plugin d’optimisation d’image est d’en utiliser un qui compresse et optimise les images en externe sur leurs serveurs. Ceci, \u00e0 son tour, r\u00e9duit la charge sur votre site. Tous ceux ci-dessus le font.<\/p>\n\n\n\n Si vous \u00eates curieux, nous utilisons le plugin Imagify sur le site Web de Kinsta. Il compresse automatiquement les images lorsque nous les t\u00e9l\u00e9chargeons dans la m\u00e9diath\u00e8que WordPress. Nous n’avons donc jamais \u00e0 nous soucier de quoi que ce soit. Au fil du temps, vous pouvez avoir une id\u00e9e du niveau de compression d’image que vous souhaitez utiliser. Il offre Normal, Agressif et Ultra.<\/p>\n\n\n\n Nous utilisons g\u00e9n\u00e9ralement le mode Agressif et r\u00e9alisons g\u00e9n\u00e9ralement des \u00e9conomies de 60 \u00e0 70% selon l’image. <\/p>\n\n\n\n Remarque: nous utilisons beaucoup plus de PNG que de JPEG car la plupart de nos images sont des ic\u00f4nes et des illustrations, pas des photos.<\/p>\n\n\n\n \u00c0 quel point votre site WordPress sera-t-il plus rapide si vous utilisez la compression d’image? Tout d\u00e9pend de la taille de vos images originales et de ce qu’elles sont apr\u00e8s compression. Cependant, nous avons effectu\u00e9 des tests de vitesse et constat\u00e9 qu’une solution de compression d’image de qualit\u00e9 peut r\u00e9duire les temps de chargement des pages de plus de 80%!<\/p>\n\n\n\n Lazy Loading<\/strong><\/p>\n\n\n\n Si vous avez beaucoup d’images, vous pouvez envisager de les charger en lazy loading. Il s’agit d’une technique d’optimisation qui charge le contenu visible mais retarde le t\u00e9l\u00e9chargement et le rendu du contenu qui appara\u00eet sous la partie visible de l’\u00e9cran.<\/p>\n\n\n\n Cela peut \u00eatre particuli\u00e8rement important sur les articles de blog avec de nombreuses ic\u00f4nes gravatar issues des commentaires. Google vient \u00e9galement de publier ses recommandations pour le chargement paresseux.<\/p>\n\n\n\n Conseils suppl\u00e9mentaires d’optimisation de l’image Les jours des t\u00e9l\u00e9chargement d’images uniquement dimensionn\u00e9es \u00e0 la largeur de la colonne ou DIV sont r\u00e9volus. Les images responsives fonctionnent “out of the box” dans WordPress (depuis la version 4.4) et afficheront automatiquement des tailles d’image plus petites pour les utilisateurs mobiles. Optimisez votre base de donn\u00e9es<\/strong><\/p>\n\n\n\n Ensuite, quelques conseils sur la fa\u00e7on de peaufiner votre base de donn\u00e9es WordPress. Tout comme une voiture, votre base de donn\u00e9es a besoin d’\u00eatre entretenue, car avec le temps, elle peut devenir gonfl\u00e9e.<\/p>\n\n\n\n Les sites d’adh\u00e9sion rendent la t\u00e2che particuli\u00e8rement d\u00e9licate, car ils g\u00e9n\u00e8rent g\u00e9n\u00e9ralement des requ\u00eates plus complexes, ce qui ajoute une latence suppl\u00e9mentaire dans la r\u00e9cup\u00e9ration des informations de la base de donn\u00e9es MySQL. Cela est d\u00fb en grande partie \u00e0 toutes les pi\u00e8ces mobiles suppl\u00e9mentaires et aux grandes quantit\u00e9s de donn\u00e9es de sites comme ceux-ci. Cela peut \u00e9galement \u00eatre d\u00fb \u00e0 des sites qui d\u00e9pendent fortement des requ\u00eates de recherche pour la navigation ou utilisent WP_Query.<\/p>\n\n\n\n Sans oublier que vous avez \u00e9galement un grand nombre d’utilisateurs simultan\u00e9s qui interrogent en permanence la base de donn\u00e9es.<\/p>\n\n\n\n Utilisez le moteur de stockage InnoDB MySQL<\/strong><\/p>\n\n\n\n De nombreux sites plus anciens utilisent encore le moteur de stockage MyISAM dans leur base de donn\u00e9es. Ces derni\u00e8res ann\u00e9es, InnoDB s’est montr\u00e9 plus performant et plus fiable.<\/p>\n\n\n\n Voici quelques avantages d’InnoDB par rapport \u00e0 MyISAM:<\/strong><\/p>\n\n\n\n Alors maintenant, vous vous demandez peut-\u00eatre, utilisez-vous InnoDB ou MyISAM? Si vous utilisez un site WordPress assez r\u00e9cent, vous utilisez probablement d\u00e9j\u00e0 le moteur de stockage InnoDB MySQL. Mais avec les anciens sites WordPress, vous voudrez peut-\u00eatre faire une v\u00e9rification rapide. Certains sites peuvent m\u00eame avoir m\u00e9lang\u00e9 et mis en correspondance les tables MyISAM et InnoDB, dans lesquelles vous pourriez voir des am\u00e9liorations en les convertissant partout.<\/p>\n\n\n\n Suivez ces \u00e9tapes simples ci-dessous pour v\u00e9rifier.<\/p>\n\n\n\n \u00c9tape 1 \u00c9tape 2 Si vous en avez trouv\u00e9 qui utilisent MyISAM, il est probablement temps de les transf\u00e9rer vers InnoDB. Nous vous recommandons toujours de contacter votre h\u00f4te et de lui demander s’il peut le faire pour vous.<\/p>\n\n\n\n Mais vous pouvez toujours suivre un tutoriel pour convertir manuellement vos tables MyISAM en InnoDB:<\/p>\n\n\n\n Supprimer et limiter les r\u00e9visions de page et de publication<\/strong> Cependant, les r\u00e9visions peuvent \u00e9galement nuire aux performances de votre site WordPress. Sur les grands sites, cela peut s’additionner tr\u00e8s rapidement \u00e0 des milliers de lignes dans votre base de donn\u00e9es qui ne sont pas n\u00e9cessairement n\u00e9cessaires. Et plus vous avez de lignes, plus la taille de votre base de donn\u00e9es est grande, ce qui prend de l’espace de stockage. Bien que les index aient \u00e9t\u00e9 cr\u00e9\u00e9s dans ce but pr\u00e9cis, nous avons toujours vu ce probl\u00e8me paralyser les sites WordPress. Il y a quelques choses que vous pouvez faire.<\/p>\n\n\n\n Un autre de nos plugins pr\u00e9f\u00e9r\u00e9s, WP Rocket, dispose \u00e9galement d’une fonction d’optimisation de base de donn\u00e9es pour effacer les r\u00e9visions.<\/p>\n\n\n\n Si vous ma\u00eetrisez WP-CLI, vous pouvez utiliser quelques commandes pour cela.<\/p>\n\n\n\n Connectez-vous \u00e0 votre serveur via SSH et ex\u00e9cutez la commande suivante pour obtenir et voir le nombre de r\u00e9visions actuellement dans la base de donn\u00e9es.<\/p>\n\n\n\n $ Si vous obtenez une erreur, vous devrez peut-\u00eatre d’abord installer le package wp-revisions-cli avec la commande suivante:<\/p>\n\n\n\n $ package wp installer trepmal \/ wp-revisions-cli<\/p>\n\n\n\n Vous pouvez ensuite ex\u00e9cuter la commande suivante pour nettoyer les r\u00e9visions:<\/p>\n\n\n\n $ Pour limiter les r\u00e9visions, vous pouvez ajouter le code suivant \u00e0 votre fichier wp-config.php. Le code ci-dessous doit \u00eatre ins\u00e9r\u00e9 au-dessus de “ABSPATH”, sinon il ne fonctionnera pas. Vous pouvez modifier le nombre en fonction du nombre de r\u00e9visions que vous souhaitez conserver dans votre base de donn\u00e9es.<\/p>\n\n\n\n define (‘WP_POST_REVISIONS’, 10);<\/p>\n\n\n\n Nettoyez votre table wp_options et vos donn\u00e9es charg\u00e9es automatiquement La table wp_options contient toutes sortes de donn\u00e9es pour votre site WordPress telles que:<\/p>\n\n\n\n URL du site, URL d’accueil, e-mail de l’administrateur, cat\u00e9gorie par d\u00e9faut, articles par page, format d’heure, etc. Ce tableau contient les champs (colonnes) suivants:<\/p>\n\n\n\n L’une des choses importantes \u00e0 comprendre \u00e0 propos de la table wp_options est le champ de chargement automatique. Celui-ci contient une valeur oui ou non (indicateur). Cela contr\u00f4le essentiellement s’il est charg\u00e9 ou non par la fonction wp_load_alloptions (). Les donn\u00e9es charg\u00e9es automatiquement sont des donn\u00e9es charg\u00e9es sur chaque page de votre site WordPress. Tout comme nous vous avons montr\u00e9 comment d\u00e9sactiver certains scripts de chargement sur tout le site, la m\u00eame id\u00e9e s’applique ici. L’attribut autoload est d\u00e9fini sur \u00abyes\u00bb par d\u00e9faut pour les d\u00e9veloppeurs, mais tous les plugins ne devraient pas th\u00e9oriquement charger leurs donn\u00e9es sur chaque page.<\/p>\n\n\n\n Le probl\u00e8me que les sites WordPress peuvent rencontrer est lorsqu’il y a une grande quantit\u00e9 de donn\u00e9es charg\u00e9es automatiquement dans la table wp_options. Ceci est g\u00e9n\u00e9ralement le r\u00e9sultat de ce qui suit:<\/p>\n\n\n\n Les donn\u00e9es sont charg\u00e9es automatiquement par un plug-in alors qu’elles devraient \u00eatre d\u00e9finies sur \u00abnon\u00bb. Un bon exemple de ceci serait un plugin de formulaire de contact. Doit-il charger des donn\u00e9es sur chaque page ou simplement sur la page de contact? Nettoyer les Transients<\/strong> (transitoires)<\/strong><\/p>\n\n\n\n Sauf si vous utilisez un cache d’objets, WordPress stocke les enregistrements transitoires dans la table wp_options. En r\u00e8gle g\u00e9n\u00e9rale, ils re\u00e7oivent un d\u00e9lai d’expiration et devraient dispara\u00eetre avec le temps. Cependant ce n’est pas toujours le cas. Nous avons vu des bases de donn\u00e9es contenant des milliers d’anciens enregistrements transitoires. <\/p>\n\n\n\n Il est \u00e9galement important de noter que les transitoires ne doivent pas \u00eatre charg\u00e9s automatiquement par d\u00e9faut. Vous pouvez utiliser une requ\u00eate comme celle ci-dessous pour voir s’il existe des donn\u00e9es transitoires charg\u00e9es automatiquement.<\/p>\n\n\n\n SELECT * Une meilleure option et plus s\u00fbre serait d’utiliser un plugin gratuit comme Transient Cleaner ou Delete Expired Transients qui ne peut nettoyer que les transitoires expir\u00e9s de votre table wp_options. Cependant, il semble qu’il existe maintenant une fonction dans WordPress, ajout\u00e9e dans la version 4.9, qui permet d’expirer les transitoires. J’esp\u00e8re donc que cela se produit automatiquement sur votre site maintenant.<\/p>\n\n\n\n WP Rocket a \u00e9galement la capacit\u00e9 de nettoyer les transitoires dans leurs options d’optimisation de base de donn\u00e9es.<\/p>\n\n\n\n Nettoyer les sessions WordPress<\/strong><\/p>\n\n\n\n Un autre probl\u00e8me courant que nous avons constat\u00e9 est parfois que les t\u00e2ches cron ne sont pas synchronis\u00e9es ou ne se d\u00e9clenchent pas correctement, et que les sessions ne sont donc pas nettoy\u00e9es. Vous pouvez finir par obtenir des tonnes de lignes wp_session<\/em> dans votre base de donn\u00e9es. <\/p>\n\n\n\n Vous pouvez utiliser une requ\u00eate comme celle ci-dessous pour voir si vous rencontrez ce probl\u00e8me:<\/p>\n\n\n\n Dans la plupart des cas, vous pouvez ensuite les supprimer en toute s\u00e9curit\u00e9 (comme une t\u00e2che cron devrait avoir) avec la commande suivante:<\/p>\n\n\n\n Ajouter un index au chargement automatique<\/strong><\/p>\n\n\n\n Si le nettoyage de votre table wp_options ne suffisait pas, vous pouvez essayer d’ajouter un “index” au champ de chargement automatique. Cela peut essentiellement l’aider \u00e0 \u00eatre recherch\u00e9 plus efficacement. <\/p>\n\n\n\n Utilisez Redis comme cache d’objets persistant pour WordPress<\/strong><\/p>\n\n\n\n Redis est un magasin de structure de donn\u00e9es en m\u00e9moire open source. Dans le contexte de WordPress, Redis peut \u00eatre utilis\u00e9 pour stocker les valeurs g\u00e9n\u00e9r\u00e9es par le cache d’objet natif de WordPress de mani\u00e8re persistante afin que les objets mis en cache puissent \u00eatre r\u00e9utilis\u00e9s entre les chargements de page.<\/p>\n\n\n\n L’utilisation d’un cache d’objets persistant tel que Redis permet la r\u00e9utilisation des objets mis en cache plut\u00f4t que d’exiger que la base de donn\u00e9es MySQL soit interrog\u00e9e une seconde fois pour le m\u00eame objet. Le r\u00e9sultat est que Redis peut r\u00e9duire la charge sur la base de donn\u00e9es MySQL d’un site Web, en diminuant simultan\u00e9ment le temps de r\u00e9ponse du site et en augmentant la capacit\u00e9 du site \u00e0 \u00e9voluer et \u00e0 g\u00e9rer un trafic suppl\u00e9mentaire.<\/p>\n\n\n\n Les sites Web tr\u00e8s dynamiques (WooCommerce, sites d’adh\u00e9sion, forums, forums de discussion, blogs avec des syst\u00e8mes de commentaires extr\u00eamement actifs) qui ne peuvent pas faire bon usage de la mise en cache de page sont des candidats potentiels pour une option de mise en cache d’objet persistante telle que Redis.<\/p>\n\n\n\n Utilisez Elasticsearch pour acc\u00e9l\u00e9rer la recherche WordPress<\/strong><\/p>\n\n\n\n Elasticsearch est un moteur de recherche en texte int\u00e9gral open source. Il est utilis\u00e9 pour indexer les donn\u00e9es et rechercher ces donn\u00e9es incroyablement rapidement.<\/p>\n\n\n\n Dans le contexte de WordPress, Elasticsearch peut \u00eatre utilis\u00e9 pour acc\u00e9l\u00e9rer l’interrogation de la base de donn\u00e9es WordPress. Cela se fait en cr\u00e9ant un index du contenu de la base de donn\u00e9es de votre site, puis en utilisant Elasticsearch pour rechercher cet index beaucoup plus rapidement qu\u2019une requ\u00eate MySQL ne peut effectuer la m\u00eame recherche.<\/p>\n\n\n\n D\u00e9sactiver les fonctionnalit\u00e9s non critiques qui utilisent beaucoup de bases de donn\u00e9es<\/strong><\/p>\n\n\n\n Cela peut sembler un peu \u00e9vident, mais cela peut faire toute la diff\u00e9rence si vous d\u00e9sactivez les plugins non critiques et les fonctionnalit\u00e9s de th\u00e8me qui utilisent beaucoup de bases de donn\u00e9es.<\/p>\n\n\n\n Les widgets et plugins de publication populaires et \/ ou connexes sont horribles. Ils ont g\u00e9n\u00e9ralement de lourdes requ\u00eates \u00e0 l’\u00e9chelle du site. Nous vous recommandons \u00e9galement de rester \u00e0 l’\u00e9cart des plugins qui ajoutent un compteur de vues \/ publications \u00e0 votre site, sauf si vous en avez absolument besoin. Par exemple, \u00e9vitez les \u00e9l\u00e9ments tels que “792 messages” \u00e0 c\u00f4t\u00e9 de l’avatar d’un utilisateur dans les messages du forum ou “5 243 vues” lorsque vous r\u00e9pertoriez les messages du forum. Lorsque vous avez une longue discussion, ces compteurs auront un impact \u00e9norme sur votre base de donn\u00e9es. En g\u00e9n\u00e9ral, minimisez l’utilisation des compteurs et ne les utilisez que si n\u00e9cessaire.<\/p>\n\n\n\n Cela vaut \u00e9galement pour de nombreux compteurs sociaux. La mise en cache est activ\u00e9e, mais \u00e9videmment, ce plugin a un co\u00fbt de performance consid\u00e9rable. <\/p>\n\n\n\n Utiliser un r\u00e9seau de diffusion de contenu (CDN) Tout d’abord, vous ne voulez pas confondre un CDN avec votre h\u00e9bergeur WordPress. Ce sont des services enti\u00e8rement distincts. Un CDN ne remplace pas votre fournisseur d’h\u00e9bergement, mais plut\u00f4t un moyen suppl\u00e9mentaire d’augmenter la vitesse de votre site. Un CDN peut rendre votre site encore plus rapide.<\/p>\n\n\n\n Comment fonctionne un CDN Disons que vous choisissez US Central. Cela signifie que votre site Web est physiquement situ\u00e9 sur un \u00abserveur h\u00f4te\u00bb aux Etats Unis. Lorsque des gens en Europe visitent votre site Web, il faudra plus de temps pour qu’il se charge par rapport \u00e0 quelqu’un qui le visite, par exemple \u00e0 Dallas, au Texas.<\/p>\n\n\n\n Pourquoi? Parce que les donn\u00e9es doivent parcourir une distance suppl\u00e9mentaire. C’est ce qu’on appelle la latence. La latence fait r\u00e9f\u00e9rence au temps et \/ ou au retard impliqu\u00e9 dans la transmission de donn\u00e9es sur un r\u00e9seau. Plus la distance est \u00e9loign\u00e9e, plus la latence est grande.<\/p>\n\n\n\n Types de CDN Les CDN pull traditionnels mettent en cache une copie de l’ensemble de votre contenu et de vos m\u00e9dias, mais une demande du client est toujours adress\u00e9e directement \u00e0 votre fournisseur d’h\u00e9bergement. KeyCDN et CDN77 sont des exemples de CDN traditionnels.<\/p>\n\n\n\n Un CDN proxy inverse est l\u00e9g\u00e8rement diff\u00e9rent. Bien qu’il agisse toujours comme un CDN, il intercepte toutes les demandes entrantes et agit comme un serveur interm\u00e9diaire entre le client et votre h\u00f4te. Cloudflare et Sucuri sont des exemples de CDN de proxy inverse. C’est l’une des raisons pour lesquelles vous devez pointer votre DNS directement vers ces fournisseurs au lieu de votre h\u00f4te.<\/p>\n\n\n\n L’avantage de ceux-ci est qu’ils agissent en tant que serveur interm\u00e9diaire, ils peuvent fournir des pare-feu d’applications Web puissants qui peuvent aider \u00e0 emp\u00eacher le mauvais trafic d’atteindre votre site WordPress et \/ ou votre fournisseur d’h\u00e9bergement. Un inconv\u00e9nient \u00e0 cela est qu’ils viennent avec un peu de surcharge suppl\u00e9mentaire en termes de performances par rapport \u00e0 un CDN pull traditionnel. Mais avec des performances et des fonctionnalit\u00e9s de s\u00e9curit\u00e9 suppl\u00e9mentaires, cela pourrait \u00eatre consid\u00e9r\u00e9 comme n\u00e9gligeable.<\/p>\n\n\n\n Comment trouver les goulots d’\u00e9tranglement et les plugins lents Utilisez New Relic pour identifier les plugins lents et les requ\u00eates de base de donn\u00e9es Cependant, utilisez New Relic avec pr\u00e9caution car cela affecte les performances du site. Il ajoute JavaScript \u00e0 votre site Web. Nous vous recommandons de l’activer lorsque vous avez besoin de d\u00e9panner les performances, puis de la d\u00e9sactiver par la suite.<\/p>\n\n\n\n Recherche de plugins lents Utilisez le plugin gratuit Query Monitor Utilisez les sites staging sans toucher \u00e0 la production Une fois que vous avez un site de d\u00e9veloppement op\u00e9rationnel, la premi\u00e8re chose que vous pouvez faire est de d\u00e9sactiver tous vos plugins. Puisqu’il s’agit d’une copie de votre site en ligne, vous n’avez pas \u00e0 vous soucier de quoi que ce soit. C’est de loin l’un des moyens les plus simples de r\u00e9duire les probl\u00e8mes. Allez simplement dans Plugins, s\u00e9lectionnez-les tous et choisissez \u00abD\u00e9sactiver\u00bb parmi les options group\u00e9es.<\/p>\n\n\n\n Apr\u00e8s cela, vous pouvez surveiller les temps de r\u00e9ponse dans New Relic ou Query Monitor et voir ce qui se passe. Dans cet exemple ci-dessous, les temps de r\u00e9ponse sont imm\u00e9diatement revenus \u00e0 la normale sur le site, nous savions donc que c’\u00e9tait l’un des plugins causant un probl\u00e8me. Vous pouvez ensuite les r\u00e9activer un par un, en r\u00e9p\u00e9tant le m\u00eame processus jusqu’\u00e0 ce que vous trouviez le coupable.<\/p>\n\n\n\n Que devez-vous faire apr\u00e8s avoir trouv\u00e9 le plugin causant la lenteur? Voici ce que nous vous conseillons:<\/em><\/p>\n\n\n\n V\u00e9rifiez vos logs d’erreurs Vous pouvez \u00e9galement activer les journaux d’erreurs en ajoutant du code \u00e0 votre fichier wp-config.php. Tout d’abord, vous voudrez vous connecter \u00e0 votre site via SFTP. Ensuite, t\u00e9l\u00e9chargez votre wp-config.php pour pouvoir le modifier. Remarque: effectuez toujours une sauvegarde de ce fichier en premier!<\/p>\n\n\n\n Trouvez la ligne qui dit \/ * That’s all, stop editing! Happy blogging. * \/ et juste avant, ajoutez ce qui suit (comme indiqu\u00e9 ci-dessous):<\/p>\n\n\n\n Si le code ci-dessus existe d\u00e9j\u00e0 dans votre fichier wp-config.php mais qu’il est d\u00e9fini sur \u00abfalse\u00bb, remplacez-le simplement par \u00abtrue\u00bb. Cela activera le mode de d\u00e9bogage. Remarque: vous verrez \u00e9galement des avertissements ou des erreurs dans votre administrateur WordPress s’ils existent.<\/p>\n\n\n\n Vous pouvez ensuite activer le journal de d\u00e9bogage pour envoyer toutes les erreurs \u00e0 un fichier en ajoutant le code suivant juste apr\u00e8s la ligne WP_DEBUG (comme indiqu\u00e9 ci-dessous):<\/p>\n\n\n\n Enregistrez vos modifications et t\u00e9l\u00e9chargez-les \u00e0 nouveau sur votre serveur. Les erreurs seront ensuite enregistr\u00e9es dans le fichier debug.log dans votre dossier \/ wp-content \/. Si, pour une raison quelconque, vous ne voyez pas ce fichier, vous pouvez toujours en cr\u00e9er un.<\/p>\n\n\n\n Nous allons maintenant vous plonger dans quelques fa\u00e7ons d’acc\u00e9l\u00e9rer WordPress en optimisant le back-end. Le back-end implique g\u00e9n\u00e9ralement tout ce qui est enti\u00e8rement g\u00e9r\u00e9 par le serveur, tel que PHP, les en-t\u00eates de cache HTTP, la compression GZIP, etc.<\/p>\n\n\n\n Cr\u00e9er une page 404 L\u00e9g\u00e8re La raison pour laquelle ces erreurs sont graves est que de nombreuses pages 404 sont tr\u00e8s gourmandes en ressources. Pour un site WordPress hautement dynamique, vous voudrez \u00e9viter une page 404 lourde. Cr\u00e9ez un mod\u00e8le 404 simple qui \u00e9vite d’interroger davantage la base de donn\u00e9es si possible. Et bien s\u00fbr, passez un peu de temps et corrigez les erreurs 404 car cela ne demande pas seulement beaucoup de ressources, c’est tout simplement mauvais pour l’exp\u00e9rience utilisateur.<\/p>\n\n\n\n En plus d’utiliser une page 404 l\u00e9g\u00e8re, nous vous recommandons \u00e9galement de mettre en \u0153uvre une r\u00e8gle de cache de page sp\u00e9ciale pour 404 pages. Nous mettons automatiquement en cache 404 pages pendant 15 minutes. Si notre serveur Web d\u00e9tecte qu’une nouvelle page avec la m\u00eame URL qu’une page 404 mise en cache a \u00e9t\u00e9 cr\u00e9\u00e9e, nous purgerons automatiquement le cache. Si votre site WordPress ne dispose pas de pages 404 pouvant \u00eatre mises en cache, nous vous recommandons de travailler avec votre h\u00e9bergeur pour ajouter cette fonctionnalit\u00e9 \u00e0 votre serveur Web.<\/p>\n\n\n\n Augmenter les PHP workers Les PHP workers d\u00e9terminent le nombre de requ\u00eates simultan\u00e9es que votre site peut traiter \u00e0 un moment donn\u00e9. Pour faire simple, chaque demande non mise en cache pour votre site Web est g\u00e9r\u00e9e par un PHP Worker. Par exemple, si vous avez 4 requ\u00eates qui arrivent sur votre site exactement au m\u00eame moment et que votre site a 2 workers PHP, deux de ces requ\u00eates seront trait\u00e9es tandis que les deux autres devront attendre dans la file d’attente jusqu’\u00e0 ce que les deux premi\u00e8res soient termin\u00e9es. En traitement.<\/p>\n\n\n\n Rappelez-vous que nous avons discut\u00e9 plus t\u00f4t que l’un des plus gros probl\u00e8mes avec les sites d’adh\u00e9sion WordPress est toutes ces demandes non mises en cache. C’est pourquoi les workers PHP deviennent tr\u00e8s importants car ils doivent travailler pour chaque requ\u00eate. Par cons\u00e9quent, ces sites n\u00e9cessiteront g\u00e9n\u00e9ralement des workers PHP suppl\u00e9mentaires pour s’assurer que chaque demande est trait\u00e9e sans d\u00e9lai et termin\u00e9e avec succ\u00e8s.<\/p>\n\n\n\n Que se passe-t-il si vous maximisez en permanence vos workers PHP? Fondamentalement, la file d’attente commence \u00e0 expulser les demandes plus anciennes, ce qui peut entra\u00eener 500 erreurs sur votre site. Si vous ne parvenez pas \u00e0 estimer les besoins de votre site, vous pouvez toujours discuter avec votre h\u00e9bergeur.<\/p>\n\n\n\n Utiliser la compression GZIP Lorsqu’un navigateur Web visite un site Web, il v\u00e9rifie si le serveur Web a activ\u00e9 GZIP en v\u00e9rifiant si l’en-t\u00eate HTTP content-encoding: gzip existe. Si l’en-t\u00eate est d\u00e9tect\u00e9, il sert les fichiers compress\u00e9s et plus petits. Sinon, il sert les fichiers non compress\u00e9s. Si vous n’avez pas activ\u00e9 GZIP, vous verrez probablement des avertissements et des erreurs dans les outils de test de vitesse tels que Google PageSpeed \u200b\u200bInsights<\/a> et GTmetrix<\/a>.<\/p>\n\n\n\n L’activation de la compression GZIP peut aider \u00e0 r\u00e9duire la taille de votre page Web, ce qui peut r\u00e9duire consid\u00e9rablement le temps de t\u00e9l\u00e9chargement de la ressource, r\u00e9duire l’utilisation des donn\u00e9es pour le client et am\u00e9liorer le temps de premier rendu de vos pages. C’est assez standard maintenant chez la plupart des fournisseurs d’h\u00e9bergement, mais rien ne nous surprend plus \u00e0 ce stade.<\/p>\n\n\n\n Activer la protection Hotlink Le hotlinking peut \u00eatre une \u00e9norme perte de ressources pour le serveur cible. Imaginez si vous \u00eates sur un h\u00e9bergeur WordPress partag\u00e9 et que le Huffington Post est soudainement li\u00e9 \u00e0 vos images. Vous pouvez passer de quelques centaines de requ\u00eates par heure sur votre site \u00e0 quelques centaines de milliers. Cela pourrait m\u00eame entra\u00eener une suspension de votre compte d’h\u00e9bergement. C\u2019est une raison non seulement d\u2019utiliser un h\u00f4te hautes performances (qui peut g\u00e9rer un hoquet comme celui-ci), mais \u00e9galement d\u2019activer la protection par hotlink.<\/p>\n\n\n\n R\u00e9duisez les redirections et ajoutez-les au niveau du serveur Une redirection g\u00e9n\u00e9rera un 301 ou 302 sur l’\u00e9tat de l’en-t\u00eate de r\u00e9ponse.<\/p>\n\n\n\n L’utilisation de plugins WordPress gratuits pour impl\u00e9menter des redirections peut parfois causer des probl\u00e8mes de performances car la plupart d’entre eux utilisent la fonction wp_redirect, qui n\u00e9cessite une ex\u00e9cution de code et des ressources suppl\u00e9mentaires. Certains d’entre eux ajoutent \u00e9galement des donn\u00e9es charg\u00e9es automatiquement \u00e0 votre table wp_options, ce qui augmente le gonflement de la base de donn\u00e9es. Les ajouter au niveau du serveur est l’endroit o\u00f9 ils devraient \u00eatre faits.<\/p>\n\n\n\n Ne laissez pas les t\u00e2ches Cron devenir incontr\u00f4lables Nous avons \u00e9galement constat\u00e9 des probl\u00e8mes de performances avec le gestionnaire Cron int\u00e9gr\u00e9 de WordPress: WP-Cron. Si un site ne dispose pas de suffisamment de n\u0153uds de calcul PHP, parfois une demande arrive, WordPress g\u00e9n\u00e8re le cron, mais le cron doit attendre le worker, et donc reste juste l\u00e0. Une meilleure approche consiste \u00e0 d\u00e9sactiver WP-Cron et \u00e0 utiliser le syst\u00e8me cron \u00e0 la place. Ceci est m\u00eame recommand\u00e9 dans le manuel officiel du plugin.<\/p>\n\n\n\n Pour d\u00e9sactiver WP-Cron, ajoutez ce qui suit \u00e0 votre fichier wp-config.php, juste avant la ligne qui dit \u00abC’est tout, arr\u00eatez de modifier! Bon blog. \u00bb Remarque: Cela l’emp\u00eache de s’ex\u00e9cuter au chargement de la page, pas lorsque vous l’appelez directement via wp-cron.php.<\/p>\n\n\n\n Vous devrez ensuite planifier wp-cron.php depuis votre serveur.<\/p>\n\n\n\n Ajouter le contr\u00f4le du cache et expirer les en-t\u00eates (d\u00e9terminer la taille du cache) Alors que l’en-t\u00eate de contr\u00f4le du cache active la mise en cache c\u00f4t\u00e9 client et d\u00e9finit l’\u00e2ge maximal d’une ressource, l’en-t\u00eate expires est utilis\u00e9 pour sp\u00e9cifier un moment sp\u00e9cifique dans lequel la ressource n’est plus valide. Bien que les deux en-t\u00eates puissent \u00eatre utilis\u00e9s ensemble, vous n\u2019avez pas n\u00e9cessairement besoin d\u2019ajouter les deux en-t\u00eates. cache-control est plus r\u00e9cent et est g\u00e9n\u00e9ralement la m\u00e9thode recommand\u00e9e.<\/p>\n\n\n\n Si vous utilisez un CDN, ils ajouteront probablement ces en-t\u00eates pour vous \u00e9galement.<\/p>\n\n\n\n Si votre serveur ne dispose pas de ces en-t\u00eates, vous pouvez les ajouter manuellement.<\/p>\n\n\n\n Ajout d’un en-t\u00eate de contr\u00f4le du cache dans Nginx L’ajout d’un en-t\u00eate expire dans Nginx Ajout d’un en-t\u00eate de contr\u00f4le du cache dans Apache Ajouter un en-t\u00eate Expires dans Apache Il est \u00e9galement important de noter que vous ne pouvez ajouter des en-t\u00eates de cache HTTP que sur les ressources de votre serveur. Si vous recevez un avertissement \u00e0 ce sujet, vous devez peut-\u00eatre tirer parti de la mise en cache du navigateur sur une demande tierce, vous ne pouvez rien faire, car vous n’avez pas de demande sur leur serveur. Les coupables courants incluent le script Google Analytics et les pixels marketing, comme Facebook et Twitter.<\/p>\n\n\n\n Si vous essayez de r\u00e9soudre ce probl\u00e8me avec le script Google Analytics, vous pouvez l’h\u00e9berger localement ou sur votre CDN (bien que cela ne soit pas officiellement pris en charge) avec un plugin comme Perfmatters ou WP Rocket.<\/p>\n\n\n\n Ajouter les en-t\u00eates Last-Modified et ETag (valider le cache) Tandis que les en-t\u00eates de contr\u00f4le du cache et d’expiration aident le navigateur \u00e0 d\u00e9terminer si le fichier a chang\u00e9 depuis la derni\u00e8re fois qu’il a \u00e9t\u00e9 demand\u00e9 (ou plut\u00f4t, ils valident le cache). Les en-t\u00eates last-modified et etag valident et d\u00e9finissent la longueur du cache et doivent \u00eatre inclus dans chaque r\u00e9ponse du serveur d’origine. Si ceux-ci ne sont pas correctement d\u00e9finis, vous pouvez voir un avertissement indiquant que vous devez “Sp\u00e9cifier un validateur de cache”.<\/p>\n\n\n\n Si les en-t\u00eates ne sont pas trouv\u00e9s, une nouvelle requ\u00eate pour la ressource sera g\u00e9n\u00e9r\u00e9e \u00e0 chaque fois, ce qui augmente la charge sur votre serveur. L\u2019utilisation des en-t\u00eates de mise en cache garantit que les demandes ult\u00e9rieures n\u2019ont pas \u00e0 \u00eatre charg\u00e9es \u00e0 partir du serveur, ce qui permet d\u2019\u00e9conomiser de la bande passante et d\u2019am\u00e9liorer les performances de l\u2019utilisateur.<\/p>\n\n\n\n Kinsta ajoute automatiquement les en-t\u00eates ci-dessus sur toutes les demandes de serveur, et si vous utilisez un CDN, ils ajouteront probablement ces en-t\u00eates pour vous \u00e9galement. Tout comme avec le contr\u00f4le du cache et expire, vous ne pouvez pas d\u00e9finir manuellement ces en-t\u00eates HTTP sur des ressources externes.<\/p>\n\n\n\n En-t\u00eate de la derni\u00e8re modification En-t\u00eate ETag Vous pouvez activer l’en-t\u00eate ETag manuellement dans Nginx \u00e0 l’aide du code suivant.<\/p>\n\n\n\n Ajouter une variable: En-t\u00eate Accept-Encoding Par exemple, supposons que vous ayez un ancien navigateur sans compression gzip et un navigateur moderne avec. Si vous n’utilisez pas l’en-t\u00eate Varie: Accept-Encoding, votre serveur Web ou CDN pourrait mettre en cache la version non compress\u00e9e et la fournir au navigateur moderne par erreur, ce qui \u00e0 son tour nuit aux performances de votre site WordPress. En utilisant l’en-t\u00eate, vous pouvez vous assurer que votre serveur Web et \/ ou CDN fournit la version appropri\u00e9e.<\/p>\n\n\n\n Ajouter la variable: En-t\u00eate Accept-Encoding dans Apache Ajouter la variable: En-t\u00eate Accept-Encoding dans Nginx Modification de la limite de m\u00e9moire WordPress dans wp-config.php Par d\u00e9faut, WordPress tentera d’augmenter la m\u00e9moire allou\u00e9e \u00e0 PHP \u00e0 40 Mo pour un seul site et 64 Mo pour le multisite. Ils d\u00e9finissent les limites de m\u00e9moire dans le fichier .\/wp-includes\/default-constants.php, aux lignes 32 – 44 (source).<\/p>\n\n\n\n Vous disposez alors \u00e9galement de PHP memory_limit sur le serveur par votre h\u00e9bergeur. Ce sont deux choses diff\u00e9rentes. Chez Kinsta, nous d\u00e9finissons la limite de m\u00e9moire par d\u00e9faut sur 256 Mo. Si vous rencontrez une erreur de taille de m\u00e9moire \u00e9puis\u00e9e, vous pouvez essayer d’augmenter la limite de m\u00e9moire PHP dans WordPress.<\/p>\n\n\n\n Ajoutez ce qui suit \u00e0 votre fichier wp-config.php, juste avant la ligne qui dit \u201cThat\u2019s all, stop editing! Happy blogging.\u201d<\/p>\n\n\n\n Au lieu de d\u00e9finir le montant manuellement, vous pouvez le d\u00e9finir sur la valeur PHP memory_limit.<\/p>\n\n\n\n define (‘WP_MEMORY_LIMIT’, ini_get (‘memory_limit’));<\/p>\n\n\n\n Conseils sur l’optimisation des fonts et les services externes Deux des objectifs les plus importants que vous devriez avoir en mati\u00e8re d’optimisation frontale sont:<\/p>\n\n\n\n Testez la vitesse de votre site WordPress pour obtenir une base de r\u00e9f\u00e9rence<\/strong> Pour voir correctement la vitesse de l’ensemble de votre site, vous devez voir tout se charger \u00e0 partir du cache, votre page initiale et tous les actifs enregistrent un \u00abHIT\u00bb. Cela n\u00e9cessite parfois d’ex\u00e9cuter votre test de vitesse plusieurs fois. Vous pouvez ensuite prendre la moyenne.<\/p>\n\n\n\n Passons maintenant \u00e0 quelques optimisations frontales que vous pouvez effectuer sur votre site WordPress.<\/p>\n\n\n\n Supprimer les cha\u00eenes de requ\u00eate Vous pouvez utiliser un plugin premium comme Perfmatters qui dispose d’une option simple en un clic pour supprimer les cha\u00eenes de requ\u00eate. Vous pouvez \u00e9galement ajouter manuellement le code suivant au fichier functions.php de votre th\u00e8me. Une meilleure alternative serait d’utiliser un plugin gratuit comme les extraits de code pour ajouter le code. De cette fa\u00e7on, vous n’avez pas \u00e0 modifier directement votre th\u00e8me.<\/p>\n\n\n\n Cependant, avant de supprimer imm\u00e9diatement les query strings sur votre site, il est important de savoir pourquoi les query strings sont utilis\u00e9es. La gestion des versions sur les fichiers est g\u00e9n\u00e9ralement utilis\u00e9e par les d\u00e9veloppeurs WordPress pour contourner les probl\u00e8mes de mise en cache.<\/p>\n\n\n\n Par exemple, si un d\u00e9veloppeur de plug-in publie une mise \u00e0 jour et modifie style.css de? Ver = 4.6 \u00e0? Ver = 4.7, il sera trait\u00e9 comme une toute nouvelle URL et ne sera pas mis en cache. Si vous supprimez les query strings et mettez \u00e0 jour un plug-in, la version mise en cache peut continuer \u00e0 servir. Dans certains cas, cela peut briser l’apparence de votre site jusqu’\u00e0 ce que la ressource mise en cache expire ou que le cache soit compl\u00e8tement vid\u00e9.<\/p>\n\n\n\n \u00c9liminez le JavaScript et le CSS bloquant le rendu Pour \u00e9liminer le JavaScript et le CSS bloquant le rendu, vous devez proc\u00e9der comme suit:<\/p>\n\n\n\n Effacer JS du path de rendu critique L’attribut async indique au navigateur de commencer \u00e0 t\u00e9l\u00e9charger la ressource imm\u00e9diatement sans ralentir l’analyse HTML. Une fois la ressource disponible, l’analyse HTML est suspendue afin que la ressource puisse \u00eatre charg\u00e9e. Identifiez les styles requis pour rendre le contenu au-dessus de la ligne de flottaison et fournissez ces styles en ligne avec le HTML. Voici quelques plugins WordPress qui peuvent vous aider:<\/p>\n\n\n\n Combinez CSS externe et JavaScript dans WordPress<\/strong> Cependant, si vous utilisez HTTPS avec un fournisseur prenant en charge HTTP \/ 2, cet avertissement n’est plus aussi pertinent qu’avant. Avec HTTP \/ 2, plusieurs fichiers CSS peuvent d\u00e9sormais \u00eatre charg\u00e9s en parall\u00e8le sur une seule connexion. Et plus de 86% des navigateurs prennent en charge HTTP \/ 2.<\/p>\n\n\n\n Mais cela ne signifie pas n\u00e9cessairement que cette optimisation est compl\u00e8tement morte. Dans certains cas, nous avons vu cela acc\u00e9l\u00e9rer encore les sites WordPress. Cela d\u00e9pend de la taille des fichiers et du nombre d’entre eux. Par cons\u00e9quent, il s’agit d’une optimisation que nous vous recommandons de toujours tester sur votre site.<\/p>\n\n\n\n L’un des moyens les plus simples de combiner vos fichiers CSS et JavaScript externes consiste \u00e0 utiliser le plugin gratuit Autoptimize. Apr\u00e8s les avoir combin\u00e9s, vous verrez un fichier \u00abautoptimize_xxxxx.css\u00bb ou \u00abautoptimize_xxxxx.js\u00bb. Il prend \u00e9galement en charge leur chargement \u00e0 partir de votre CDN. Vous pouvez \u00e9galement le faire avec le plugin WP Rocket.<\/p>\n\n\n\n Utiliser la minification sur HTML, CSS et JavaScript <\/p>\n","protected":false},"excerpt":{"rendered":" Parfois, il peut \u00eatre d\u00e9routant d’essayer de trouver tout ce dont vous avez besoin au m\u00eame endroit. Donc, aujourd’hui, nous allons partager avec vous tout ce que nous savons sur […]<\/p>\n","protected":false},"author":1,"featured_media":79,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,6,4],"tags":[38,39,37],"class_list":["post-78","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-generic","category-linux","category-software","category-windows","tag-optimize","tag-speed","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/posts\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":1,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":90,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions\/90"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/media\/79"}],"wp:attachment":[{"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cimalink.eu\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. H\u00e9bergement WordPress VPS DIY<\/h2>\n\n\n\n
3. H\u00e9bergement WordPress g\u00e9r\u00e9<\/h2>\n\n\n\n
OPTIMISATIONS<\/h1>\n\n\n\n
PHP 7 ou sup\u00e9rieur pour les meilleures performances<\/h3>\n\n\n\n
Choisissez un h\u00f4te qui utilise Nginx<\/h3>\n\n\n\n
Le r\u00e9seau de votre h\u00e9bergeur est important<\/h3>\n\n\n\n
Mise en cache avec un plugin<\/h3>\n\n\n\n
L’optimisation des images est un must<\/h3>\n\n\n\n
Trouver l’\u00e9quilibre entre taille et qualit\u00e9 du fichier<\/h3>\n\n\n\n
La bonne nouvelle est qu’il existe d’\u00e9tonnants plugins de compression d’images WordPress que vous pouvez utiliser pour automatiser l’ensemble du processus. Voici quelques plugins que nous recommandons:<\/p>\n\n\n\n
<\/strong>Voici quelques derniers conseils d’optimisation d’image \u00e0 suivre.<\/p>\n\n\n\n
Les SVG peuvent \u00eatre une autre alternative int\u00e9ressante \u00e0 l’utilisation d’images. Les SVG sont g\u00e9n\u00e9ralement beaucoup plus petits en taille de fichier, mais pas toujours.
Utilisez des polices d’ic\u00f4nes au lieu de placer du texte dans les images – elles sont meilleures lorsqu’elles sont mises \u00e0 l’\u00e9chelle et prennent moins d’espace. Et si vous utilisez un g\u00e9n\u00e9rateur de polices, vous pouvez les optimiser encore plus. <\/p>\n\n\n\n
<\/strong>Connectez-vous \u00e0 phpMyAdmin et cliquez sur votre base de donn\u00e9es MySQL.<\/p>\n\n\n\n
<\/strong>Effectuez une analyse rapide ou triez la colonne \u00abType\u00bb, et vous pourrez voir quels types de moteurs de stockage vos tables utilisent. <\/p>\n\n\n\n
Chaque fois que vous enregistrez une page ou un article dans WordPress, cela cr\u00e9e ce qu’on appelle une r\u00e9vision. Cela se produit \u00e0 la fois dans les brouillons et dans les articles d\u00e9j\u00e0 publi\u00e9s qui sont mis \u00e0 jour. Les r\u00e9visions peuvent \u00eatre utiles au cas o\u00f9 vous auriez besoin de revenir \u00e0 une version pr\u00e9c\u00e9dente de votre contenu.<\/p>\n\n\n\n
Si vous avez un site WordPress plus ancien avec beaucoup de pages et d’articles, il est peut-\u00eatre temps de faire un nettoyage rapide et de supprimer ces anciennes r\u00e9visions. Vous pouvez le faire avec MySQL, mais avec tous les mauvais extraits de code flottant sur le Web, nous vous recommandons de faire une sauvegarde de votre site et d’utiliser un plugin gratuit comme WP-Sweep.<\/li><\/ol>\n\n\n\nwp revisions list<\/code><\/p><\/blockquote><\/figure>\n\n\n\nwp revisions clean<\/code><\/p>\n\n\n\n
Une autre bonne strat\u00e9gie et celle que nous utilisons est de limiter le nombre de r\u00e9visions qui peuvent \u00eatre stock\u00e9es par article ou page. M\u00eame en le d\u00e9finissant sur quelque chose comme dix, les r\u00e9visions ne deviendront pas incontr\u00f4lables, surtout si vous effectuez beaucoup de mises \u00e0 jour.<\/li><\/ol>\n\n\n\n
La table wp_options est souvent n\u00e9glig\u00e9e en ce qui concerne les performances globales de WordPress et de la base de donn\u00e9es. Surtout sur les sites plus anciens et plus volumineux, cela peut facilement \u00eatre la cause de la lenteur des requ\u00eates sur votre site en raison de donn\u00e9es charg\u00e9es automatiquement laiss\u00e9es par des plugins et des th\u00e8mes tiers. Fais nous confiance; nous voyons cela tous les jours!<\/p>\n\n\n\n
Param\u00e8tres des plugins, th\u00e8mes, widgets
Donn\u00e9es temporairement mises en cache<\/p>\n\n\n\n
Les plugins ou th\u00e8mes ont \u00e9t\u00e9 supprim\u00e9s du site WordPress, mais leurs options sont toujours laiss\u00e9es pour compte dans la table wp_options. Cela peut signifier que des donn\u00e9es inutiles charg\u00e9es automatiquement sont interrog\u00e9es \u00e0 chaque demande.
Les d\u00e9veloppeurs de plugins et de th\u00e8mes chargent des donn\u00e9es dans la table wp_options au lieu d’utiliser leurs propres tables. Il y a des arguments pour les deux c\u00f4t\u00e9s de cela, car certains d\u00e9veloppeurs pr\u00e9f\u00e8rent les plugins qui ne cr\u00e9ent pas de tables suppl\u00e9mentaires. Cependant, la table wp_options n’a pas non plus \u00e9t\u00e9 con\u00e7ue pour contenir des milliers de lignes.
Combien de donn\u00e9es sont trop charg\u00e9es automatiquement? Cela peut bien s\u00fbr varier, mais id\u00e9alement, vous voulez que ce soit entre 300 Ko et 1 Mo. Une fois que vous commencez \u00e0 approcher la plage de 3 \u00e0 5 Mo ou plus, il y a tr\u00e8s probablement des \u00e9l\u00e9ments qui peuvent \u00eatre optimis\u00e9s ou supprim\u00e9s du chargement automatique. Et tout ce qui d\u00e9passe 10 Mo doit \u00eatre trait\u00e9 imm\u00e9diatement. Cela ne signifie pas toujours que cela va causer un probl\u00e8me, mais c’est un bon point de d\u00e9part.<\/p>\n\n\n\n
FROM wp_options<\/code>
WHERE autoload<\/code> = ‘yes’
AND option_name<\/code> LIKE ‘%transient%’<\/p>\n\n\n\nSELECT *\nFROM `wp_options`\nWHERE `option_name` LIKE '_wp_session_%'<\/code><\/pre>\n\n\n\nDELETE FROM `wp_options`\nWHERE `option_name` LIKE '_wp_session_%'<\/code><\/pre>\n\n\n\n
Par example les plugins d’optimisation d’image qui compressent les images \u00e0 l’aide de votre serveur. Vous devez toujours utiliser un plugin d’optimisation d’image qui optimise les images en externe.<\/p>\n\n\n\n
<\/strong>CDN est l’abr\u00e9viation de Content Delivery Network (r\u00e9seau de diffusion de contenu). Il s’agit d’un r\u00e9seau de serveurs (\u00e9galement appel\u00e9s POP) situ\u00e9s dans le monde entier. Ils sont con\u00e7us pour h\u00e9berger et fournir des copies du contenu statique (et parfois dynamique) de votre site WordPress tel que des images, du CSS, du JavaScript et des flux vid\u00e9o.<\/p>\n\n\n\n
<\/em>Comment fonctionne exactement un CDN? Eh bien, par exemple, lorsque vous h\u00e9bergez votre site Web, vous devez choisir un emplacement de centre de donn\u00e9es physique, tel que les \u00c9tats-Unis, l’Europe, l’Asie-Pacifique ou l’Am\u00e9rique du Sud.<\/p>\n\n\n\n
<\/em>Il existe deux types de r\u00e9seaux de diffusion de contenu:<\/p>\n\n\n\n
<\/strong>Nous allons maintenant plonger dans quelques conseils sur la fa\u00e7on de trouver les goulots d’\u00e9tranglement sur votre site WordPress et ce que vous pouvez faire pour y rem\u00e9dier.<\/p>\n\n\n\n
Il existe d’excellents outils sur le march\u00e9 qui peuvent vous aider \u00e0 identifier et \u00e0 identifier les requ\u00eates de base de donn\u00e9es lentes et les plugins qui prennent beaucoup de temps. Nous sommes de grands fans de New Relic et l’utilisons quotidiennement. New Relic est un outil de surveillance PHP que vous pouvez utiliser pour obtenir des statistiques de performances d\u00e9taill\u00e9es sur votre site Web.<\/p>\n\n\n\n
<\/strong>Lorsqu’un plugin WordPress cause une lenteur globale, les sympt\u00f4mes varient en fonction de l’activit\u00e9 du plugin. Cependant, dans de nombreux cas, vous constaterez qu’un plugin lent affectera chaque page d’un site WordPress.<\/p>\n\n\n\n
<\/strong>Vous pouvez \u00e9galement utiliser le plugin WordPress gratuit “Query Monitor”. Utilisez-le pour identifier et d\u00e9boguer les requ\u00eates de base de donn\u00e9es lentes, les appels AJAX, les requ\u00eates d’API REST et bien plus encore. En outre, le plugin rapporte les d\u00e9tails du site Web tels que les d\u00e9pendances de script et les d\u00e9pendants, les hooks WordPress qui se sont d\u00e9clench\u00e9s lors de la g\u00e9n\u00e9ration de la page, les d\u00e9tails de l’environnement d’h\u00e9bergement, les balises de requ\u00eate conditionnelles rencontr\u00e9es par la page actuelle, et bien plus encore.<\/p>\n\n\n\n
<\/strong>Nous ne savons pas ce que nous ferions sans les environnements de test. Ceux-ci peuvent \u00eatre inestimables pour r\u00e9soudre les probl\u00e8mes de performances. Si votre h\u00e9bergeur WordPress ne propose pas d’environnements de pr\u00e9paration, vous pouvez \u00e9galement utiliser un plugin comme WP Staging, m\u00eame si ce n’est pas aussi simple.<\/p>\n\n\n\n
<\/strong>V\u00e9rifier les logs d’erreurs n’est jamais amusant, mais peut en r\u00e9v\u00e9ler beaucoup sur les probl\u00e8mes de performances avec les plugins WordPress.<\/p>\n\n\n\ndefine( 'WP_DEBUG', true );<\/code><\/pre>\n\n\n\ndefine( 'WP_DEBUG_LOG', true );<\/code><\/pre>\n\n\n\nRecommandations sur l’optimisation du back-end<\/h4>\n\n\n\n
<\/strong>Nous avons constat\u00e9 de premi\u00e8re main que les sites hautement dynamiques g\u00e9n\u00e8rent g\u00e9n\u00e9ralement un grand nombre d’erreurs 404. Votre site Web g\u00e9n\u00e8re peut-\u00eatre plus que vous ne le pensez.<\/p>\n\n\n\n
<\/strong>Les PHP workers sont peut-\u00eatre un terme dont vous n’avez jamais entendu parler, mais ils repr\u00e9sentent le nombre d’h\u00f4tes, qui g\u00e8rent les demandes de limitation (plut\u00f4t que de vous limiter par le processeur ou la RAM, ce qui est g\u00e9n\u00e9ralement ce que font les fournisseurs d’h\u00e9bergement partag\u00e9).<\/p>\n\n\n\n
<\/strong>GZIP est un format de fichier et une application logicielle utilis\u00e9e pour la compression et la d\u00e9compression de fichiers. La compression GZIP est activ\u00e9e c\u00f4t\u00e9 serveur et permet de r\u00e9duire davantage la taille de vos fichiers HTML, feuilles de style et JavaScript.<\/p>\n\n\n\n
<\/strong>Le concept de hotlinking est assez simple. Vous trouvez une image quelque part sur Internet et utilisez l’URL de l’image directement sur votre site. Cette image sera affich\u00e9e sur votre site Web, mais elle sera diffus\u00e9e \u00e0 partir de l’emplacement d’origine. C’est tr\u00e8s pratique pour le hotlinker, mais il s’agit en fait d’un vol car il utilise les ressources du site hotlink. C\u2019est comme si nous devions monter dans notre voiture et repartir avec de l\u2019essence que nous avons siphonn\u00e9e de la voiture de notre voisin.<\/p>\n\n\n\n
<\/strong>Il faut toujours faire attention \u00e0 trop de redirections. Des redirections simples comme une seule redirection 301, HTTP vers HTTPS ou www vers non-www (vice versa) conviennent. Et souvent, ceux-ci sont n\u00e9cessaires dans certaines zones de votre site Web. Cependant, chacun a un co\u00fbt sur les performances de votre site. Et si vous commencez \u00e0 empiler les redirections les unes sur les autres, il est important de comprendre leur impact sur votre site. Cela s’applique aux redirections de page et de publication, aux redirections d’images, tout.<\/p>\n\n\n\n
<\/strong>Les t\u00e2ches CRON (WP-Cron) sont utilis\u00e9es pour planifier des t\u00e2ches r\u00e9p\u00e9titives pour votre site WordPress. Cependant, au fil du temps, ceux-ci peuvent devenir incontr\u00f4lables et entra\u00eener des probl\u00e8mes de performances. Vous pouvez utiliser le plugin gratuit WP Crontrol pour v\u00e9rifier et g\u00e9rer toutes les t\u00e2ches Cron en cours sur votre site.<\/p>\n\n\n\ndefine('DISABLE_WP_CRON', true);<\/code><\/pre>\n\n\n\n
<\/strong>Chaque script de votre site WordPress doit \u00eatre associ\u00e9 \u00e0 un en-t\u00eate de cache HTTP (ou il devrait). Cela d\u00e9termine quand le cache du fichier expire. Pour r\u00e9soudre ce probl\u00e8me, assurez-vous que votre h\u00e9bergeur WordPress dispose des en-t\u00eates de contr\u00f4le de cache appropri\u00e9s et expire la configuration des en-t\u00eates. Si ce n’est pas le cas, vous verrez probablement des avertissements concernant la n\u00e9cessit\u00e9 d’ajouter des en-t\u00eates d’expiration ou d’exploiter la mise en cache du navigateur dans les outils de test de vitesse.<\/p>\n\n\n\n
<\/strong>Vous pouvez ajouter des en-t\u00eates de contr\u00f4le du cache dans Nginx en ajoutant ce qui suit \u00e0 l’emplacement ou au bloc de serveur de votre configuration de serveur.<\/p>\n\n\n\nlocation ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n expires 30d;\n add_header Cache-Control \"public, no-transform\";\n}<\/code><\/pre>\n\n\n\n
<\/strong>Vous pouvez ajouter des en-t\u00eates d’expiration dans Nginx en ajoutant ce qui suit \u00e0 votre bloc de serveur. Dans cet exemple, vous pouvez voir comment sp\u00e9cifier diff\u00e9rentes heures d’expiration en fonction des types de fichiers.<\/p>\n\n\n\n location ~* \\.(jpg|jpeg|gif|png|svg)$ {\n expires 365d;\n }\n\n location ~* \\.(pdf|css|html|js|swf)$ {\n expires 2d;\n }<\/code><\/pre>\n\n\n\n
Vous pouvez ajouter des en-t\u00eates de contr\u00f4le du cache dans Apache en ajoutant ce qui suit \u00e0 votre fichier .htaccess. Des extraits de code peuvent \u00eatre ajout\u00e9s en haut ou en bas du fichier (avant # BEGIN WordPress ou apr\u00e8s # END WordPress).<\/p>\n\n\n\n<filesMatch \".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$\">\nHeader set Cache-Control \"max-age=84600, public\"\n<\/filesMatch><\/code><\/pre>\n\n\n\n
Vous pouvez ajouter des en-t\u00eates d’expiration dans Apache en ajoutant ce qui suit \u00e0 votre fichier .htaccess.<\/p>\n\n\n\n## EXPIRES HEADER CACHING ##\n<IfModule mod_expires.c>\nExpiresActive On\nExpiresByType image\/jpg \"access 1 year\"\nExpiresByType image\/jpeg \"access 1 year\"\nExpiresByType image\/gif \"access 1 year\"\nExpiresByType image\/png \"access 1 year\"\nExpiresByType image\/svg \"access 1 year\"\nExpiresByType text\/css \"access 1 month\"\nExpiresByType application\/pdf \"access 1 month\"\nExpiresByType application\/javascript \"access 1 month\"\nExpiresByType application\/x-javascript \"access 1 month\"\nExpiresByType application\/x-shockwave-flash \"access 1 month\"\nExpiresByType image\/x-icon \"access 1 year\"\nExpiresDefault \"access 2 days\"\n<\/IfModule>\n## EXPIRES HEADER CACHING ##<\/code><\/pre>\n\n\n\n
<\/strong>Ensuite, nous avons deux autres ensembles d’en-t\u00eates, last-modified et etag.<\/p>\n\n\n\n
Le dernier en-t\u00eate modifi\u00e9 est g\u00e9n\u00e9ralement envoy\u00e9 automatiquement depuis le serveur. Il s\u2019agit d\u2019un en-t\u00eate que vous n\u2019avez g\u00e9n\u00e9ralement pas besoin d\u2019ajouter manuellement. Il est envoy\u00e9 pour voir si le fichier dans le cache du navigateur a \u00e9t\u00e9 modifi\u00e9 depuis la derni\u00e8re fois qu’il a \u00e9t\u00e9 demand\u00e9. Vous pouvez consulter la demande d’en-t\u00eate dans Pingdom ou utiliser Chrome DevTools pour voir la valeur de l’en-t\u00eate modifi\u00e9 en dernier.<\/p>\n\n\n\n
L’en-t\u00eate ETag est \u00e9galement tr\u00e8s similaire \u00e0 l’en-t\u00eate modifi\u00e9 en dernier. Il sert \u00e9galement \u00e0 valider le cache d’un fichier. Si vous ex\u00e9cutez Apache 2.4 ou une version ult\u00e9rieure, l\u2019en-t\u00eate ETag est d\u00e9j\u00e0 ajout\u00e9 automatiquement \u00e0 l\u2019aide de la directive FileETag. Et en ce qui concerne Nginx, l’en-t\u00eate ETag est activ\u00e9 par d\u00e9faut depuis 2016.<\/p>\n\n\n\netag on<\/code><\/pre>\n\n\n\n
L’en-t\u00eate varie: Accept-Encoding doit \u00eatre inclus dans chaque r\u00e9ponse du serveur d’origine, car il indique au navigateur si le client peut ou non g\u00e9rer les versions compress\u00e9es du contenu. Si ce n’est pas correctement d\u00e9fini, vous pouvez voir un avertissement indiquant que vous devez “Sp\u00e9cifier une en-t\u00eate Vary: Accept-Encoding”.<\/p>\n\n\n\n
<\/strong>Vous pouvez ajouter l’en-t\u00eate : Accept-Encoding dans Apache en ajoutant ce qui suit \u00e0 votre fichier .htaccess.<\/p>\n\n\n\n<IfModule mod_headers.c>\n <FilesMatch \".(js|css|xml|gz|html)$\">\n Header append Vary: Accept-Encoding\n <\/FilesMatch>\n<\/IfModule><\/pre>\n\n\n\n
<\/strong>Vous pouvez ajouter l’en-t\u00eate Varie: Accept-Encoding dans Nginx en ajoutant le code suivant \u00e0 votre fichier de configuration. Tous les fichiers de configuration Nginx se trouvent dans le r\u00e9pertoire \/ etc \/ nginx \/. Le fichier de configuration principal est \/etc\/nginx\/nginx.conf.<\/p>\n\n\n\ngzip_vary on<\/pre>\n\n\n\n
Comme indiqu\u00e9 dans le Codex WordPress, avec la version 2.5 de WordPress, l’option WP_MEMORY_LIMIT vous permet de sp\u00e9cifier la quantit\u00e9 maximale de m\u00e9moire pouvant \u00eatre consomm\u00e9e par PHP. Ce param\u00e8tre peut \u00eatre n\u00e9cessaire dans le cas o\u00f9 vous recevez un message tel que \u00abTaille m\u00e9moire autoris\u00e9e de xxxxxx octets \u00e9puis\u00e9s\u00bb.<\/p>\n\n\n\ndefine( 'WP_MEMORY_LIMIT', '256M' );<\/code><\/p>\n\n\n\n
<\/strong>Nous allons maintenant vous plonger dans quelques fa\u00e7ons d’acc\u00e9l\u00e9rer WordPress en optimisant le front-end. Le front-end implique g\u00e9n\u00e9ralement tout ce qui est enti\u00e8rement g\u00e9r\u00e9 par le navigateur c\u00f4t\u00e9 client, tel que CSS, JavasScript, images, etc. Cela comprend \u00e9galement l’analyse des services externes que vous chargez sur votre site et leur impact sur votre temps de chargement global.<\/p>\n\n\n\n
Lorsqu’il s’agit d’optimiser le front-end de votre site, il est toujours bon de commencer par une base de r\u00e9f\u00e9rence. Cela signifie g\u00e9n\u00e9ralement que vous devez ex\u00e9cuter un test de vitesse. Il existe une multitude de fa\u00e7ons de proc\u00e9der.<\/p>\n\n\n\n
Nous sommes de grands fans de Pingdom, GTmetrix, WebPageTest, PageSpeed Insights et Chrome DevTools. Cependant, peu importe l’outil de test de vitesse que vous utilisez, car il est coh\u00e9rent. Ils ont tous diff\u00e9rents moyens de mesurer et de quantifier la vitesse, alors choisissez un outil et gardez-le tout au long de vos tests et optimisations. M\u00eame Google dit d’en choisir un.<\/li>
De nombreux outils tels que Google PageSpeed \u200b\u200bInsights ont tous un certain type de score de vitesse ou de performance. Il est important de se rappeler que le score n\u2019a pas toujours autant d\u2019importance que la vitesse de votre site Web et les performances per\u00e7ues par l\u2019utilisateur. Le score est l\u00e0 pour vous aider \u00e0 \u00e9valuer vos performances. Mais \u00eatre obs\u00e9d\u00e9 par un score parfait de 100\/100 ou A dans certains cas pourrait \u00eatre une perte de temps. Et les plus gros sites avec beaucoup de scripts externes et de publicit\u00e9s n’obtiendront jamais un score parfait, ce qui est parfaitement acceptable.<\/li>
L’emplacement que vous choisissez lorsque les tests de vitesse sont importants. Comme nous l’avons vu dans une section pr\u00e9c\u00e9dente, la raison en est que tout est relatif \u00e0 l’emplacement du centre de donn\u00e9es que vous choisissez. TTFB, latence du r\u00e9seau, tout entre en jeu. Testez donc votre site \u00e0 la fois \u00e0 partir d’un emplacement proche de votre centre de donn\u00e9es et d’un emplacement \u00e9loign\u00e9. Cela vous aidera \u00e9galement \u00e0 voir quel impact un CDN peut avoir sur votre site WordPress.<\/li>
Comme nous l’avons vu plus t\u00f4t dans la section sur la mise en cache, si le cache a r\u00e9cemment \u00e9t\u00e9 effac\u00e9 ou a expir\u00e9 sur votre h\u00f4te WordPress ou CDN, il va enregistrer un “MISS” sur l’en-t\u00eate HTTP. Cela signifie que votre site Web ou votre \u00e9l\u00e9ment n’est pas diffus\u00e9 \u00e0 partir du cache.<\/li><\/ol>\n\n\n\n
Un avertissement ou une recommandation courante que les utilisateurs voient dans les outils de test de vitesse est que vous devez supprimer les cha\u00eenes de requ\u00eate. Qu’est-ce que tout cela? Eh bien, fondamentalement, la fa\u00e7on dont cela fonctionne est que vos fichiers CSS et JavaScript ont g\u00e9n\u00e9ralement la version du fichier \u00e0 la fin de leurs URL, telles que https:\/\/domain.com\/file.min.css?ver=4.5.3. Certains serveurs et serveurs proxy ne peuvent pas mettre en cache les cha\u00eenes de requ\u00eate. Ainsi, en les supprimant, vous pouvez parfois am\u00e9liorer votre mise en cache.<\/p>\n\n\n\nfunction remove_query_strings() {\n if(!is_admin()) {\n add_filter('script_loader_src', 'remove_query_strings_split', 15);\n add_filter('style_loader_src', 'remove_query_strings_split', 15);\n }\n}\n\nfunction remove_query_strings_split($src){\n $output = preg_split(\"\/(&ver|\\?ver)\/\", $src);\n return $output[0];\n}\nadd_action('init', 'remove_query_strings')<\/code><\/pre>\n\n\n\n
<\/strong>Un avertissement concernant JavaScript et CSS bloquant le rendu peut appara\u00eetre lorsque des fichiers emp\u00eachent le chargement de la page aussi rapidement que possible. Des JS et CSS sp\u00e9cifiques sont parfois conditionnels, ce qui signifie qu’ils ne sont pas tenus d’afficher du contenu au-dessus de la ligne de flottaison. Vous pouvez les emp\u00eacher de bloquer le rendu en utilisant les attributs async et defer.<\/p>\n\n\n\n
<\/strong>Le d\u00e9placement de JavaScript hors du path de rendu critique est g\u00e9n\u00e9ralement effectu\u00e9 en ajoutant l’attribut defer ou async aux \u00e9l\u00e9ments HTML de script qui appellent des ressources JavaScript.<\/p>\n\n\n\n
L’attribut defer indique au navigateur de suspendre le t\u00e9l\u00e9chargement de la ressource jusqu’\u00e0 ce que l’analyse HTML soit termin\u00e9e. Une fois que le navigateur a termin\u00e9 avec le HTML, il t\u00e9l\u00e9chargera et rendra tous les scripts diff\u00e9r\u00e9s dans l’ordre dans lequel ils apparaissent dans le document.
Optimiser la livraison des ressources CSS
<\/strong>L’optimisation de la livraison du CSS signifie essentiellement que vous devez comprendre comment le rendre non bloquant.<\/p>\n\n\n\n
Utilisez le CSS de mani\u00e8re conditionnelle sur les appareils uniquement lorsque cela est n\u00e9cessaire.
Chargez le CSS restant de mani\u00e8re asynchrone.
Faire tout ce qui pr\u00e9c\u00e8de peut parfois \u00eatre un processus d\u00e9licat et n\u00e9cessite certainement quelques ajustements en fonction des scripts que vous chargez sur votre site. <\/p>\n\n\n\n
L’avertissement de combinaison de CSS externe appara\u00eet g\u00e9n\u00e9ralement lors de l’utilisation d’un CDN, car vous h\u00e9bergez vos fichiers CSS sur un domaine externe, tel que cdn.domain.com. Dans le pass\u00e9, un moyen rapide de r\u00e9soudre ce probl\u00e8me \u00e9tait de concat\u00e9ner vos fichiers CSS ou de les combiner pour qu’ils se chargent en une seule requ\u00eate.<\/p>\n\n\n\n
<\/strong>Nous pouvons r\u00e9duire la quantit\u00e9 de donn\u00e9es que le navigateur doit t\u00e9l\u00e9charger en minimisant les ressources HTML, CSS et JavaScript. La minification est le processus de suppression des caract\u00e8res inutiles tels que les commentaires et les espaces du code source. Ces caract\u00e8res sont extr\u00eamement utiles dans le d\u00e9veloppement, mais ils sont inutiles pour que le navigateur affiche la page.<\/p>\n\n\n\n