Le guide complet de l'optimisation des performances WordPress –

Selon Builtwith.com WordPress détient près de 50% de la part de CMS des 1 000 000 premiers sites Web au monde. En ce qui concerne la sphère du commerce électronique, nous sommes à 33% avec WooCommerce. Et si nous jetons un filet plus large, les pourcentages vont plus haut. Bien que nous puissions nous plaindre que WordPress peut être gonflé, lourd en ressources, et que son modèle de données laisse beaucoup à désirer, on ne peut nier que WordPress est partout.

WordPress peut remercier sa simplicité et une faible barrière à l'entrée pour cette omniprésence. C'est facile à mettre en place, et nécessite presque aucune connaissance technique. Hébergement pour WordPress peut être trouvé pour aussi peu que quelques dollars par mois, et la configuration de base prend juste une demi-heure de cliquer. Les thèmes libres pour WordPress sont en abondance, certains avec des constructeurs de pages WYSIWYG inclus.

Beaucoup le méprisent, mais à bien des égards, nous pouvons remercier WordPress pour la croissance d'Internet et de PHP, et de nombreux professionnels merci pour leur carrière.

Mais cette facilité d'entrée a un coût. Beaucoup de sites qui portent fièrement le badge WordPress n'ont pas été réalisés par des professionnels mais par les développeurs les moins chers. Et souvent, ça se voit. L'aspect professionnel et la performance professionnelle sont des atouts.

L'un des principaux points de vue du propriétaire d'un site Web ambitieux de haute qualité est que la performance et l'aspect professionnel ne doivent pas être des atouts. Vous ne pouvez pas facilement les peindre ou les coller sur un site Web. Les sites professionnels doivent être prémédités.

Un célèbre revendeur de voitures d'occasion du Royaume-Uni, Ling's Cars, a essayé de manière unique de créer une ligne de punch marketing kitsch. Sauf si vous êtes vraiment sûr de ce que vous faites, ne l'essayez pas à la maison.

Et cela commence par …

Choice of Hosting

En règle générale, les nouveaux utilisateurs vont avec des produits qui sont à la baisse -cost côté, avec la plupart des cloches et des sifflets pour les débutants. Considérant les pratiques commerciales louches de certains grands acteurs de l'industrie dans ce domaine, et les plaintes et les demandes de professionnels de la migration de site provenant de clients, cela fait partie de la configuration du site Web qui nécessite l'attention voulue. diviser les fournisseurs d'hébergement WordPress en quelques niveaux.

Premium, les fournisseurs dédiés à WordPress comme Kinsta dont les plans commencent à 100 $ par mois, ou même l'hébergement géré de qualité supérieure comme WordPress VIP par Automattic, peut être utile, mais peut aussi être hors de la portée de nombreux propriétaires de sites Web.

Volant moyen Volant moteur A2 hébergement Siteground et Pantheon sont parmi ceux qui sont considérés comme fiables et axés sur la performance, offrant une vitesse acceptable et un service d'hébergement géré pour ceux qui sont plus conscients des prix. Les utilisateurs ici peuvent avoir un peu moins la main, mais ces services trouvent généralement un équilibre acceptable entre une configuration solide, le prix et les options pour les utilisateurs plus avancés. Sans oublier, il y a Cloudways qui est un hybride entre VPS et l'hébergement géré. Ceux avec leur public en Europe peuvent regarder Pilvia car il offre une pile de serveurs performante et est assez abordable.

Il existe une enquête intéressante sur la satisfaction du client auprès des fournisseurs d'hébergement les plus importants, publié par Codeinwp .

Pour ceux d'entre nous qui n'ont pas peur de la ligne de commande, il y a des fournisseurs de VPS et de serveurs dédiés comme Digital Ocean Vultr Linode Amazon Lightsail Hetzner en Europe, et OVH . Hetzner est un fournisseur allemand connu pour ses serveurs physiques de qualité, un peu au-dessus du prix des serveurs virtuels, tandis qu'OVH offre des serveurs virtuels très économiques . Pour les prix, la filiale d'OVH Kimsufi en Europe et au Canada propose également des serveurs dédiés physiques, et Host US a des serveurs virtuels très abordables.

Recherchez une bonne pile de serveurs une bonne intégration de CDN et bien sûr un stockage SSD. Les ressources garanties, comme avec A2 sont un gros plus. La prochaine chose à rechercher est l'accès SSH. Les utilisateurs technophiles peuvent bénéficier de la disponibilité de WP-CLI .

Lors du choix d'un VPS, la virtualisation XEN ou KVM est préférable à OpenVZ, car elle minimise l'overelling des ressources, contribuant ainsi à garantir que les ressources que vous avez achetées sont vraiment les vôtres.

Easy Engine est un logiciel qui peut faire de votre installation VPS / WordPress entière une tâche d'une heure.

En ce qui concerne la pile de serveurs, Nginx est préféré à Apache si nous ' re poursuivre la performance, et PHP 7 est un must. Si nous avons vraiment besoin d'Apache, utiliser Nginx comme proxy inverse est un plus, mais cette configuration peut devenir complexe.

Les tests effectués donnent à PHP 7 un gros avantage sur la version précédente. Selon fasthosts.co.uk :

WordPress 4.1 a exécuté 95% de requêtes en plus par seconde sur PHP 7 par rapport à PHP 5.6

Lors du choix de votre hébergement, soyez conscient des expériences négatives avec certains fournisseurs (19459014)

Considérations sur les logiciels

Les choses qui ralentissent habituellement les sites WordPress sont des interfaces volumineuses et volumineuses avec beaucoup de ressources statiques et des requêtes de base de données. Ces problèmes découlent du choix du thème (et de ses générateurs de pages, curseurs énormes, etc.) qui non seulement ralentit le chargement initial en raison de nombreuses demandes et de la taille globale, mais ralentit souvent le navigateur en raison de beaucoup de JavaScript.

La règle d'or ici est: ne l'utilise pas à moins d'avoir une bonne raison de le faire

Cela peut sembler une règle venant de la bouche de Homer Simpson. , mais si vous pouvez sauter l'une des cloches et des sifflets, faites-le. Soyez conservateur. Si vous devez ajouter une fonctionnalité brillante ou des bonbons pour les yeux JS, préférez toujours ceux adaptés et codés aussi précisément que possible pour votre besoin exact. Si vous êtes un codeur expérimenté, et que le projet justifie l'effort, codez-le vous-même en gardant le minimalisme à l'esprit.

Passez en revue tous les plugins que votre site Web ne peut pas vivre – et enlevez les autres. sauvegardez votre site Web avant de commencer l'élagage!

Data model

Si vous utilisez un thème où vous utilisez beaucoup de publications ou de champs personnalisés, sachez que beaucoup de ceux-ci ralentiront vos requêtes de base de données. Gardez votre modèle de données aussi simple que possible, et si ce n'est pas le cas, considérez que le but original de WordPress était comme un moteur de blogs. Si vous avez besoin de beaucoup plus que cela, vous voudrez peut-être considérer certains des frameworks web MVC qui vous donneront un meilleur contrôle sur votre modèle de données et le choix de la base de données.

Dans WordPress on peut construire un modèle de données personnalisé riche en utilisant types de postes personnalisés taxonomies personnalisées et champs personnalisés mais être conscient des coûts de performance et de complexité. vous connaissez votre chemin autour du code, inspectez votre thème pour trouver des requêtes de base de données inutiles. Chaque déplacement de base de données passe de précieuses millisecondes dans votre TTFB et en mégaoctets de la mémoire de votre serveur. Rappelez-vous que boucles secondaires peut être coûteux – soyez donc averti lorsque vous utilisez des widgets et des plugins qui affichent des posts supplémentaires, comme dans les curseurs ou les zones de widgets. Si vous devez les utiliser, envisagez de récupérer tous vos messages dans une seule requête où cela pourrait ralentir votre site web. Il y a un dépôt GitHub pour ceux qui ne veulent pas de code

Les requêtes Meta peuvent être chères

Utiliser champs personnalisés pour chercher des publications selon certains critères peut être un excellent outil développer des choses sophistiquées avec WP. Ceci est un exemple d'une méta-requête et ici vous pouvez trouver quelques explications sur ses coûts. Résumé: post meta n'a pas été construit pour le filtrage, les taxonomies étaient

get_post_meta est une fonction généralement appelée pour extraire des champs personnalisés, et elle peut être appelée avec juste l'ID poste en tant qu'argument, auquel cas il récupère tous les champs meta du message dans un tableau, ou il peut avoir le nom d'un champ personnalisé comme second argument, auquel cas il renvoie uniquement le champ spécifié.

Si vous utilisez get_post_meta () pour un certain poste plusieurs fois sur une seule page ou demande (pour plusieurs champs personnalisés), sachez que ce ne sera pas encouru coût supplémentaire parce que la première fois que cette fonction est appelée, tous la méta post est mise en cache .

Hygiène de base de données

Installation et suppression de divers plugins la vie de votre site web, encombre souvent votre base de données avec beaucoup de données t le chapeau n'est pas nécessaire. Il est tout à fait possible de découvrir – en examinant pourquoi un site WordPress est lent, ou pourquoi il ne se chargera pas, en raison de la mémoire épuisée du serveur – que la base de données a atteint des centaines et des centaines de mégaoctets, sans contenu cela explique cela.

wp-options est l'endroit où beaucoup de données orphelines sont généralement laissées pour compte. Cela inclut, mais n'est pas limité à, différents transitoires ( cet article met en garde contre les meilleures pratiques concernant la suppression des transitoires dans les plugins). Les transitoires sont une forme de cache, mais comme avec toute autre mise en cache, si elle est mal utilisée, elle peut faire plus de mal que de bien. Si votre environnement de serveur le fournit, wp-cli possède un ensemble de commandes dédié à la gestion des transitoires y compris la suppression. Sinon, il y a plugins dans le repo WordPress plugins qui peut supprimer les transitoires expirés, mais qui offrent moins de contrôle.

Si la suppression de transitoires nous laisse toujours avec une base de données gonflée sans cause tangible, WP-Sweep est un excellent outil gratuit qui peut faire le travail de nettoyage de la base de données. Un autre à considérer est WP Optimize .

Avant de faire un nettoyage de base de données, il est fortement recommandé de sauvegarder votre base de données!

Un des plugins qui vient très utile pour le profilage de l'ensemble du cycle de vie de la requête WordPress est Déboguer les objets . Il offre une inspection de tous les transitoires, shortcodes, classes, styles et scripts, templates chargés, requêtes db, et hooks. configuration – en considérant notre pile de serveurs à l'avance, éliminant le gonflement possible créé par le choix du thème et la surcharge des plugins et des widgets – nous devrions essayer d'identifier les goulots d'étranglement

]nous obtiendrons un tableau en cascade de toutes les ressources chargées dans la requête:

Ceci nous donne des détails sur le cycle de vie requête-réponse, que nous pouvons analyser pour les goulets d'étranglement . Par exemple:

• Si le temps DNS rose ci-dessus est trop grand, cela pourrait signifier que nous devrions envisager de mettre en cache nos enregistrements DNS pour une période plus longue. Cela est fait en augmentant le paramètre TTL dans notre tableau de bord de gestion de domaine / registrar.
• Si la partie SSL prend trop de temps, nous pouvons envisager d'activer HTTP / 2 Profitez de ALPN en ajustant nos en-têtes de contrôle de cache, et enfin en passant à un service CDN. " Web Performance en bref: HTTP / 2, CDNs et la mise en cache du navigateur " est un article complet sur ce sujet, tout comme " Analyse HTTPS Performance Overhead " par KeyCDN.
• Les parties Envoyer et Recevoir dépendent généralement de la latence du réseau. Vous pouvez donc les améliorer en les hébergeant près de votre public cible, en vous assurant que votre hôte dispose de liaison montante rapide, et en utilisant un CDN. Pour ces éléments, vous pouvez également envisager un outil de ping (à ne pas confondre avec les outils Pingdom mentionnés ci-dessus), afin de vous assurer que votre serveur est réactif.
• The Wait partie – la partie jaune de la cascade – est le temps que prend votre infrastructure serveur pour produire ou retourner le site Web demandé. Si cette partie prend trop de temps, vous pouvez revenir à nos sujets précédents d'optimisation du serveur, de l'installation de WordPress et de la pile de base de données. Ou vous pouvez envisager différentes couches de mise en cache.

Pour obtenir des conseils plus approfondis sur la mise à jour du site Web, un petit utilitaire de ligne de commande appelé webcoach . Dans un environnement où NodeJS et npm sont installés (comme Homestead Improved ), l'installation est simple:

 npm install webcoach -g

Après son installation, nous pouvons obtenir des informations détaillées et des conseils sur la façon d'améliorer les différents aspects de notre site, y compris les performances:

Caching

Caching peut faire la différence un site WordPress.

Mise en cache des pages

La mise en cache des pages est la mise en cache de toute la sortie HTML d'une application Web

Si nous le pouvons, nous devrions essayer de tester les solutions au niveau du serveur. tout d'abord, comme la mise en cache NGINX, ou Varnish, ou les systèmes de mise en cache offerts par des fournisseurs d'hébergement gérés tels que Kinsta, Siteground et d'autres.

Si cela ne s'avère pas utile comme nous voudrions, nous pouvons envisager des plugins comme WP Super Cache WP Fastest Cache ou le W3 Total Cache révisé de GitHub . Tous ces éléments peuvent améliorer les performances, mais nécessitent généralement quelques expérimentations. Les solutions de mise en cache mal configurées peuvent nuire aux performances du site. W3TC, par exemple – au moins avant la refonte – est connu pour être peut-être la meilleure solution de mise en cache libre, en faisant de vraies merveilles … quand ça marche. Quand ce n'est pas le cas, votre site peut être déconnecté.

WP Rocket est peut-être la solution de cache la plus appréciée.

La mise en cache des pages peut améliorer considérablement les performances. sites Web de RAM, mais sachez que cela peut entraîner des complications si vous avez un site web dynamique avec un panier, ou des parties qui dépendent de cookies ou d'une interface personnalisée. Il peut servir les parties de l'interface utilisateur d'un utilisateur à un autre utilisateur, il doit donc généralement être testé avant d'être mis en production. Cela s'applique particulièrement aux solutions sur des serveurs non gérés, comme le cache de page Varnish ou Cloudflare.

Mise en cache des fragments

La mise en cache des fragments est une solution à prendre en compte lorsque les sites Web dynamiques sont difficiles à mettre en cache. approche, ou lorsque nous mettons en cache des requêtes Ajax. Une bonne introduction est disponible ici

Cache d'objet

Le cache d'objet signifie compiler et stocker en mémoire toutes les requêtes de base de données et les objets PHP. Certains plugins de cache essayent de gérer les back ends du cache d'objets pour nous. Les back ends utilisés sont habituellement APCu Memcached et Redis.
Ils doivent être installés sur le serveur .

Pour approfondir l'analyse comparative de notre code PHP et de la performance de notre mise en cache d'objet, un outil précieux qui nécessite un accès shell et wp-cli installé est la commande de profil . Nous pouvons l'installer avec:

 wp package install git@github.com: wp-cli / profile-command.git

ou

 wp package install wp-cli / profile-commande

(Vous devrez peut-être ajouter le drapeau - allow-root en fonction de l'installation.)

Ensuite, nous pouvons profiler tout le cycle de chargement, ou forer vers le bas

Mise en cache du navigateur

La mise en cache du navigateur force les navigateurs des visiteurs à conserver des fichiers statiques dans leur cache, donc ils ne le font pas. Pas besoin de les obtenir de notre serveur lors de visites répétées. cache-control et expires les en-têtes sont utilisés ici. Les plugins de cache gèrent souvent la mise en cache du navigateur et définissent les en-têtes. Technumero a fait un guide qui va plus loin.

Static Files

Les fichiers statiques sont des images, des feuilles de style, du code JS, des polices, des fichiers multimédias, etc. Nous devons nous assurer de les compresser. que nous exploitons HTTP / 2 pour servir ces fichiers si possible. Si notre hébergement géré ne prend pas en charge HTTP / 2, ou si le transfert de notre VPS non géré vers HTTP / 2 est hors de portée, le moyen le plus simple consiste à implémenter un CDN dans notre pile. Les CDN servent nos fichiers statiques à partir des centres de données les plus proches de notre public. Cela diminue la latence et signifie généralement tirer profit de leur infrastructure hautement paramétrée.

Autooptimize est un plugin qui peut aider à manipuler nos ressources statiques et réduire le nombre de requêtes, en concaténant les fichiers JS et stylesheet, les réduisant En ce qui concerne les fichiers multimédias, nous devrions envisager de compresser / encoder nos vidéos afin de réduire leur taille et de les servir par le biais de fournisseurs comme YouTube, afin de réduire la pression sur nos serveurs. Les fournisseurs de stockage en nuage comme Amazon S3 sont une autre bonne option. WPMUDEV a fait un guide pratique sur le sujet.

En ce qui concerne les images, elles sont souvent trop grandes pour le web. Parfois, la seule solution qui permettra à notre serveur de respirer – et pourrait prendre beaucoup de temps – est la compression par lots à travers le shell. Imagemagick sur Linux a un outil de conversion utile qui nous permet de compresser par lots nos images. Cet exemple le fait récursivement avec tous les fichiers JPG dans un dossier, réduisant la qualité JPEG à 80%, ainsi que d'autres petites améliorations, et redimensionnant les images (cela devrait être explicite):

 pour le fichier au format * .jpg; convertit "$ {file}" -resize 20% -sharpen 3 -sharpen 2 -brillance-contraste "0x26" -quality 80 thumb. "$ {file}"; terminé

WP Bullet a deux excellents guides pour compresser par lots des fichiers JPG et PNG .

En dehors de cela, il y a le service Imagify et le plugin WordPress pour réduire la taille des images, Optimiseur d'image EWWW et d'autres …

Autres astuces aléatoires

• Mémoire : Assurez-vous que votre installation en a assez .

• XML-RPC et la page de connexion peuvent souvent souffrir d'attaques par force brute automatisées et scriptées – même si l'on n'est pas un gros poisson. Même sans rodage, ils peuvent gâcher les cycles du processeur. Nous devrions essayer de les arrêter au niveau du serveur, avant que notre installation WordPress ne soit chargée. Si nous n'avons pas besoin de l'accès à xml-rpc.php nous pouvons placer cet extrait dans notre bloc d'hôte virtuel sur nginx:

   location = /xmlrpc.php {
      Nier tous;
  }
  

  Dans Apache:

  
       nier de tous
  
  

  Plugins comme iThemes Security WPS Masquer le login et d'autres peuvent aider avec ceci et changer notre URL de page de connexion.

  Si vous êtes sous attaque de force brute et vous ne sont pas protégés par un CDN comme Cloudflare – ou la protection d'un hôte géré – pensez à un pare-feu comme fail2ban (vous devriez probablement avoir un pare-feu en place, qu'il soit attaqué ou non).

• WordPress Heartbeat : interroger le serveur alors que le tableau de bord de WordPress est ouvert peut ralentir votre serveur et rendre votre tableau de bord insensible. Surtout si elle est ouverte dans plusieurs onglets de navigateur ou par plusieurs utilisateurs. Le plugin HeartBeat peut aider à résoudre ce problème.

• MAX_INPUT_VARS : lors de la sauvegarde de posts avec beaucoup de méta champs, ou de produits variables avec WooCommerce, on peut atteindre une limite de variables maximum autorisées (les variables envoyées par les produits complexes WooCommerce peuvent aller en milliers). Cela peut faire tomber votre serveur. Voici comment y remédier .

• Si votre installation WordPress avec une grosse base de données – en particulier une installation de WooCommerce – commence à avoir des problèmes de vitesse que vous ne pouvez pas résoudre autrement, pensez à ElasticPress . Certains ont eu de la chance avec cela.

• Si vous utilisez WordFence, assurez-vous de désactiver la fonction Live View. Il peut arrêter même un VPS avec quelques gigaoctets de mémoire.

• Si vous consignez l'accès à votre site Web – en particulier dans debug.log dans votre répertoire wp-content – attention à sa taille. Il peut atteindre le niveau de gigaoctets et planter votre serveur.

• Si vous avez des plantages système sur votre serveur / hébergement, core dumps remplira votre espace de stockage. Demandez à quelqu'un d'analyser les raisons de ces plantages, puis supprimez ces fichiers. Vous les reconnaîtrez par des motifs qui ressemblent à core.XXXXXX .

Tout ceci dit, un avertissement de répétition est en ordre: avant que vous fassiez des changements à votre site Web, sauvegardez-le!

Conclusion

J'espère que cette compilation de conseils d'optimisation de WordPress sera utile. Au fur et à mesure que les sites grandissent, les astuces sont de plus en plus difficiles à appliquer rétroactivement. C'est pourquoi il est préférable de commencer tôt et de rechercher un maximum d'effet: appliquez autant de ces techniques avant le lancement que vous avez, et vous aurez non seulement un lancement fluide, mais aussi une application performante dès le premier jour. – certainement une expérience fantastique pour tous les nouveaux utilisateurs.

Assurez-vous également de consulter le guide PWA de SitePoint . Faire votre site WP comme PWA possible du jour 0 aidera les utilisateurs à l'installer sur les écrans d'accueil de leurs appareils, les amorçant pour des visites répétées.

Tonino est un développeur web et consultant en informatique qui a plongé dans le code open-source pendant plus d'une décennie. Il est également un passionné de crypto, un fan de Linux et un libertaire modéré.