WordPress  Performance : Les 10 paramètres les plus importants

Les 10 paramètres les plus importants de votre performance sur WordPress

Le web fourmille de conseils et d'astuces pour optimiser les performances de ton WordPress. Malheureusement, les explications et les évaluations de la pertinence des différents leviers sont vite oubliées. Nous te montrons les points de départ et les leviers importants - dans un ordre judicieux et avec un contexte. Tu pourras ainsi obtenir des résultats particulièrement rapides.

Nous avons déjà hébergé près de 15.000 projets WordPress. Cela a généré une grande quantité de données. Et nos clients nous demandent régulièrement comment ils peuvent encore réduire le temps de chargement des pages de leurs projets WordPress. Nous avons donc rassemblé de manière systématique les résultats de l'analyse des sites de nos clients au cours des dernières années. Le résultat : 10 mesures qui te permettent d'optimiser rapidement et facilement les performances de ton WordPress.

Une chose est particulièrement importante à ce sujet : certains utilisateurs se laissent vite décourager par les propositions d'optimisation d'outils comme Google PageSpeed Insights. Laisse-toi dire : Ce n'est pas avec des mesures d'optimisation compliquées que tu gagneras le plus de temps de chargement, mais avec des méthodes très faciles à mettre en œuvre.

Suggestions d'optimisation des performances WordPress par Google
Peu d'exploitants de pages peuvent concrètement faire quelque chose avec ce message. Il est donc particulièrement important que tu te concentres d'abord sur les étapes d'optimisation simples et que tu ne t'attaques aux mesures plus compliquées que dans un deuxième temps.

Bien entendu, l'optimisation du temps de chargement n'est pas une fin en soi. Outre une meilleure expérience pour tes utilisateurs, un temps de chargement plus court présente également des avantages pour la visibilité de ton offre sur Google. C'est pourquoi, pour chaque point, j'aborderai brièvement l'objectif de chaque étape d'optimisation afin de créer le contexte correspondant.

Tu peux donc théoriquement travailler de haut en bas et améliorer ainsi pas à pas le temps de chargement de ton site. Les sept premiers points se réfèrent d'ailleurs aussi aux propositions d'amélioration typiques de Google PageSpeed Insights, sur lesquelles nous reviendrons par exemple plus en détail dans cet article.

#1 Caching - le facteur de performance le plus important qui soit

La mise en cache signifie que ta page ne doit pas d'abord être demandée par le navigateur au serveur web, puis construite étape par étape. Au lieu de cela, ta page - une fois le rendu terminé - est chargée à partir d'une mémoire tampon.

L'avantage de cette mise en mémoire tampon est évident : WordPress ne doit pas recalculer ta page à chaque appel de page. Comme WordPress est basé sur le très lent PHP, un cache est ici élémentaire. En effet, il évite entre autres que PHP doive être lu.

En principe, il existe deux variantes de mise en œuvre pour les caches :

  • À propos des plugins de mise en cache : la majorité des utilisateurs utilisent un plugin de mise en cache, comme W3 Total Cache ou WP Super Cache. Ceux-ci sont parfois plus simples, parfois un peu plus compliqués à mettre en place. Dans tous les cas, ils nécessitent une certaine part de travail manuel.
  • À propos de l'hébergeur : certains hébergeurs - dont Raidboxes - proposent une mise en cache côté serveur. Cela signifie que tu peux presque toujours te passer de plugins de mise en cache. En effet, ton fournisseur d'hébergement a déjà pris en charge la configuration de la mémoire tampon pour toi.

Si tu as mis en place une mise en cache performante, tu as déjà fait le pas le plus important vers une meilleure performance de WordPress. Pour plus de détails, consulte notre article sur les bases de la mise en cache.

#2 Ranger WordPress - l'ordre est nécessaire

L'une des causes les plus fréquentes des longs temps de chargement est - selon notre expérience - une installation WordPress surchargée. Et comme ce point d'amélioration n'est pas mentionné par Google PageSpeed Insights , il arrive directement en deuxième position dans mon top 10.

Dans la plupart des cas, une installation WordPress surchargée signifie qu'il y a trop de plugins installés. En principe, moins il y a de plugins, plus le site est rapide. Bien sûr, les plugins sont importants et on ne peut pas s'en passer, mais tu devrais toujours vérifier de temps en temps quels sont les plugins dont tu as vraiment besoin.

Et : tu devrais veiller à ne pas simplement désactiver les plugins, mais à les supprimer complètement.

Améliorer les performances de WordPress : Dans ton aperçu des plug-ins, tu peux voir exactement combien de plug-ins tu as installés, activés et qui doivent encore être mis à jour.
Ton aperçu des plug-ins te montre exactement combien de plug-ins sont actuellement désactivés. En principe, la mention "Inactif" devrait toujours être accompagnée d'un zéro. Si ce n'est pas le cas, pose-toi la question suivante : est-ce que j'ai vraiment besoin du plugin désactivé ?

Il en va de même pour les thèmes : tu n'as pas besoin d'en avoir plus d'un.

Le contexte est le suivant : chaque plugin et chaque thème ajoute du code PHP à ton site. Cela vaut également pour les plugins désactivés. Ainsi, ton site devient globalement plus encombrant et donc plus lent (et plus vulnérable aux attaques). Car PHP est un langage de script très lent. Moins il y en a, mieux c'est.

Souvent, les plug-ins et les thèmes qui ne sont plus utilisés sont des restes de tests de fonctions et de designs. C'est pourquoi il est conseillé d'une part de nettoyer régulièrement tes pages WordPress et d'autre part de tester les nouvelles fonctions et les nouveaux designs dans un environnement de test et non pas sur la page live. Ainsi, tu ne peux pas accumuler trop de restes de plug-ins.

#3 Images : le frein sous-estimé au temps de chargement

L'une des mesures les plus efficaces et les plus simples pour réduire le temps de chargement des pages est de réduire la taille des images. Tu peux en effet économiser de grandes quantités de données. Avec la compression d'image sans perte, la taille des fichiers de tes images est réduite sans perte de qualité visible. Ta page ne change donc pratiquement pas, mais tu peux en même temps réduire considérablement sa taille grâce à l'optimisation des images.

Selon les estimations de HTTP Archive, les images représentent régulièrement la plus grande partie du volume de données d'un site web. La réduction de la taille de tes images devrait donc être l'une des premières étapes de l'optimisation. Tu peux optimiser les images manuellement ou en utilisant un plugin de compression.

Utiliser un plugin est certainement la solution la plus confortable. En effet, les plugins te permettent non seulement de compresser les nouvelles images et leurs vignettes, mais aussi, dans certains cas, de s'occuper automatiquement de toutes les images existantes de ton site. Ce service est toutefois souvent payant.

#4 CSS et JavaScript - cela semble encombrant, mais c'est facile à optimiser

Les fichiers JavaScript et CSS constituent généralement la deuxième plus grande quantité de données de ton site. C'est là que de nombreux utilisateurs ont peur d'entrer en contact avec eux. Pourtant, même sans compétence en code, tu peux facilement comprendre de quoi il s'agit lors de l'optimisation de CSS et JavaScript. Car en principe, il y a d'abord trois choses à faire :

  • Résumé de la situation : CSS et JavaScript se cachent dans de nombreux petits fichiers individuels. Normalement, chacun de ces fichiers doit être demandé individuellement par le navigateur au serveur web. Cela génère des requêtes HTTP qui ont tendance à allonger le temps de chargement de ta page. Toutefois, si les scripts sont regroupés, le nombre de fichiers à charger et donc le nombre de requêtes diminuent. Par exemple, 53 requêtes individuelles ne sont plus qu'une bonne douzaine. Bien entendu, les plugins correspondants peuvent également s'en charger pour toi.
  • Réduire : Les fichiers CSS et JavaScript sont des lignes de code qui permettent certaines fonctions et certains designs sur ton site. Ce code est écrit par des humains. Mais il est lu par des machines. En quoi cela est-il pertinent ? Une grande partie de ce dont un être humain a besoin pour pouvoir comprendre correctement un code n'est pas nécessaire à l'ordinateur. Les espaces, les commentaires, etc. ne sont donc pas nécessaires pour que ta page puisse être construite correctement. C'est là qu'interviennent des plug-ins comme Autoptimize. Ils convertissent le CSS et le JavaScript du code lisible par l'homme en code lisible par la machine. Cela permet de réduire la taille des différents paquets de données et d'accélérer leur transmission.
  • La compression : Après le regroupement et la réduction, la dernière étape consiste à comprimer les paquets de données envoyés par le serveur web au navigateur. Cela signifie que le serveur minimise la taille des fichiers de chaque requête et que le navigateur les décompresse et les calcule. Cela est plus rapide que d'envoyer des paquets de données non comprimés. Tu peux configurer une telle compression GZIP par exemple via des plugins de mise en cache, via des paramètres manuels dans le .htaccess ou bien ton hébergeur a déjà activé une compression côté serveur.

Même sans connaître les scripts, il est donc facile de comprendre ce qu'apportent les différentes mesures. Et pour ces trois étapes de travail, il existe des plugins qui permettent même aux non-initiés d'optimiser CSS et JavaScript. Dans notre article sur l'optimisation CSS et JavaScript, nous t'expliquons plus de détails et présentons différents plugins.

Quatre gagne !

Ce sont les quatre domaines dans lesquels nos clients ont pu économiser un temps de chargement particulièrement important. Avec relativement peu d'efforts, tu peux donc déjà améliorer considérablement tes performances WordPress grâce à la mise en cache, l'optimisation des images, l'optimisation de CSS & JavaScript et le nettoyage de WordPress.

#5 Sans hébergement, rien n'est possible

Les quatre premiers champs d'optimisation promettent certes une réduction particulièrement importante du temps de chargement, mais ils peuvent être réduits à néant si ton hébergement te freine. Il ne s'agit pas tant des conditions matérielles requises pour WordPress que de certaines technologies qui te montrent qu'un hébergeur te permet d'optimiser WordPress en conséquence.

En règle générale, tu peux retenir qu'un hébergement WordPress performant devrait avoir ces données de référence :

  • Disque dur SSD
  • Limite de mémoire PHP d'au moins 64MB, de préférence 128MB
  • Centre de données en Europe
  • Version actuelle de PHP (7.4)
  • HTTP/2 et certificat SSL gratuit

Ensuite, il y a encore la différence entre l'hébergement partagé et un propre serveur (virtuel).

Dans le cas de l'hébergement partagé, tu partages le serveur et sa puissance de calcul avec d'autres sites. Généralement de quelques dizaines à quelques centaines. Avec un serveur personnel, tu ne dois partager la puissance de calcul avec personne. Il offre donc surtout l'avantage de la sécurité des performances.

Bien qu'un serveur propre ne soit pas synonyme de plus de performances, l'expérience montre que les tarifs d'hébergement bon marché, qui ne coûtent que quelques euros par mois, ne peuvent pas rivaliser avec les serveurs virtuels en termes de performances.

Les subtilités - moins de force de pénétration, plus d'efforts

Tous les domaines liés à la performance que j'ai mentionnés jusqu'à présent peuvent être optimisés par presque tous les utilisateurs de WordPress. Soit via des plugins, soit en essayant simplement ou en achetant les produits correspondants. Cela devient plus compliqué si tu as déjà optimisé ces domaines. Car tu dois alors aller plus loin dans la structure du site. Et les mesures d'optimisation individuelles n'ont plus la même force d'impact.

#6 Renderblocking - mauvais ordre de chargement

Un point qui est régulièrement critiqué par des outils comme Google PageSpeed Insights est un ordre de chargement qui bloque le rendu.

Un exemple illustre bien le problème : un slider se compose d'images et de la commande d'animation qui fait tourner ces images. Si la commande JavaScript est chargée en premier et les images en dernier, ta page dispose certes déjà de la fonction du slider, mais pas des images qui doivent être affichées. Le chargement de la page prend donc plus de temps. Cette situation peut être évitée en respectant l'ordre de chargement.

Il existe certes des plug-ins pour l'optimisation de l'ordre de chargement, mais notre expérience montre qu'ils ne sont pas toujours en mesure d'optimiser complètement ton site. Dans ce cas, les meilleurs résultats sont généralement obtenus par un webdesigner qui connaît bien le site et ses fonctions.

#7 Above the Fold - optimiser la partie visible de la page

Outre le temps de chargement total de ta page, c'est surtout le temps de chargement perçu qui est décisif. C'est-à-dire le temps qu'un visiteur de ta page perçoit comme temps de chargement. Ce temps de chargement perçu peut être réduit grâce à quelques astuces. Ainsi, un utilisateur a l'impression que la page est déjà entièrement construite, alors que des calculs sont encore en cours en arrière-plan.

L'optimisation de l'ordre de chargement est particulièrement importante pour l'optimisation de cette zone appelée " above the fold". Cela signifie que la priorité est donnée aux contenus et aux fonctions que tes visiteurs doivent voir s'afficher sur la première taille d'écran.

Performance de WordPress : illustration du Above the Fold de raidboxes.fr
La partie supérieure est affichée au visiteur de raidboxes.de sans défiler. C'est ce que l'on appelle l'above the fold. Pour toutes les autres informations, le visiteur doit interagir avec la page et la faire défiler.

Tu peux par exemple y parvenir en optimisant l'ordre de chargement. Mais il existe aussi des plug-ins qui font en sorte que ta page se charge plus efficacement. Et ce, uniquement dans la zone visible. Lazy Load ou a3 Lazy Load sont des exemples de tels plug-ins. Ainsi, l'utilisateur voit toujours tous les contenus dont il a besoin, mais le temps de chargement des pages peut quand même en profiter, surtout s'il s'agit d'une page avec beaucoup d'images.

#8 Nettoyer la base de données

Outre les images et les scripts, ta base de données peut également devenir trop volumineuse. Pour cela aussi, il existe des outils pratiques qui permettent d'alléger ta base de données. Par exemple, le plugin WP-Optimize.

#9 Pingbacks et trackbacks

Par défaut, il interagit WordPress avec d'autres pages qui permettent les pingbacks et les trackbacks. Chaque fois que votre site ou l'un de vos articles de blog est mentionné sur une telle page, votre site en est automatiquement informé, ce qui ajoute une charge supplémentaire à la base de données.

Si tu n'as pas besoin de cette fonction (la plus-value est à mon avis minime), tu devrais désactiver les pingbacks et les trackbacks. Là encore, le plugin WP-Optimize est utile. Pour être complet, il faut toutefois mentionner ici qu'il s'agit plutôt d'un problème théorique. Jusqu'à présent, aucun de nos clients n'a subi de pertes de performance sérieuses.

#10 Empêcher le hotlinking

Le hotlinking signifie que quelqu'un fait un lien direct vers une image sur ton serveur - en fait, il "vole" ta bande passante. Sur un serveur web Apache, tu peux empêcher le hotlinking en ajoutant le code suivant dans le fichier .htaccess :

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?deineseite.de [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.de [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]

RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Pour empêcher le hotlinking sur un serveur NGINX, ajoute ces lignes de code dans ton fichier de configuration NGINX :

location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
     valid_referers none blocked server_names
	 *.example.com example.* www.example.org/galleries/ ~\.google\.;
     if ($invalid_referer) {
        return 403;
    }
}

Décomposition du code :
location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
indique les extensions de fichiers que tu veux protéger du hotlinking, si tu veux par exemple protéger aussi les fichiers pdf, la ligne de code ressemblerait à ceci :
location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$

{valid_referers none blocked server_names
*.deineseite.dedeineseite.de ~.google. ~.bing. ~.yahoo.;
Ces lignes sont un peu longues, mais elles t'aident à mieux comprendre tout ce que l'on peut faire avec cette règle. Ces lignes indiquent en quelque sorte quels domaines peuvent quand même hotlinker tes fichiers. Dans cet exemple tonsite.fr avec tous les sous-domaines, ainsi que Google, Bing et Yahoo.

if ($invalid_referer) {
return 403;
}
Si une requête arrive et que la ressource demandée n'est PAS en haut de ta liste blanche, le serveur renvoie un 403 (Forbidden).

Autres méthodes pour éviter le hotlinking

Il existe de nombreux plugins de sécurité dans le répertoire officiel des plugins WordPress qui te permettent d'éviter le hotlinking - par exemple All In One WP Security & Firewall. Ce plugin est actif sur plus de 900.000 sites WordPress et a une note moyenne de 4,8 étoiles sur 5 (sur plus de 1.000 évaluations). En outre, tu peux empêcher le hotlinking via les en-têtes CORS dans les paramètres de ton site BOX . Si tu as des questions sur la configuration des en-têtes de ton site BOX , n'hésite pas à nous contacter au support.

"Et qu'en est-il de CDN ?"

L'une des questions les plus fréquemment posées concerne l'utilisation d'un Content Delivery Network (CDN). Par exemple : "Un CDN rend-il mon site plus rapide pour les visiteurs en Allemagne ?", "Pourquoi ai-je besoin d'un CDN ?", "Me recommanderiez-vous d'utiliser un CDN pour mon blog ou ma boutique ? Mais dans la plupart des cas, la réponse était : non.

Pour faire court : Un CDN a le plus de sens si tes utilisateurs sont très dispersés géographiquement. Par exemple, si tu as des clients en Europe centrale, en Amérique du Sud et en Australie. Si ton groupe cible principal se limite à un seul pays, tu peux directement mettre de côté un CDN pour optimiser tes performances WordPress.

Le développeur WordPress Ernesto Ruge a d'ailleurs écrit un très bel article sur cette problématique, que je ne peux que te recommander.

Conclusion : n'aie pas peur des étapes d'optimisation qui paraissent compliquées

Les utilisateurs ont souvent peur d'aborder les domaines dans lesquels il est facile d'économiser du temps de chargement. Ou alors, ils négligent ces domaines. D'autres, en revanche, comme les CDN, reviennent régulièrement lors des consultations, bien qu'ils n'aient généralement aucun effet sur le temps de chargement des pages.

Je ne peux donc que te conseiller de te concentrer d'abord sur les "low hanging fruits" de l'optimisation. Car avec relativement peu d'efforts, tu peux déjà faire de grands progrès dans la réduction de ton temps de chargement. Et ce, même si tu es un profane.

Ne te laisse donc pas déstabiliser par les conseils d'outils comme Google PageSpeed Insights .

Car au fond, l'optimisation du temps de chargement ne concerne que quelques domaines :

  • Réduction de la taille de ta page
  • Réduction des requêtes HTTP
  • Compression des différents paquets de données
  • Optimisation de l'expérience utilisateur

Si tu as compris cela, tu peux alors agir de manière judicieuse sur les 10 vis de réglage les plus importantes de la performance de WordPress. Et pour les étapes d'optimisation plus complexes, il y a aussi des experts qui peuvent donner un coup de pouce à ton site.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.