Le web regorge 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 logique et avec un contexte. Tu pourras ainsi obtenir des résultats très rapidement.
Entre-temps, nous avons hébergé de nombreux projets WordPress. Il en résulte une grande quantité de données. Et on nous demande souvent comment réduire encore plus le temps de chargement d'un site WordPress. Nous avons donc analysé systématiquement les connaissances acquises au cours des dernières années. Le résultat : 10 mesures qui te permettent d'optimiser rapidement et facilement la vitesse de tes pages WordPress.
Une chose est particulièrement importante : certains se laissent vite décourager par les suggestions d'optimisation d'outils comme Google PageSpeed Insights. Laisse-toi dire : La plupart des gains de temps de chargement ne se font pas avec des mesures d'optimisation compliquées, mais avec des méthodes faciles à mettre en œuvre.
Bien sûr, l'optimisation du temps de chargement n'est pas une fin en soi. En plus d'une meilleure expérience utilisateur, un temps de chargement plus court est également bénéfique pour la visibilité de ton offre sur Google. C'est pourquoi, pour chaque point, j'expliquerai brièvement en quoi consistent les différentes étapes d'optimisation afin de créer le contexte approprié.
En théorie, tu peux donc travailler de haut en bas et améliorer ainsi le temps de chargement de ton site web étape par étape. Les sept premiers points se réfèrent d'ailleurs aussi aux suggestions d'amélioration typiques de Google PageSpeed Insights, que nous abordons par exemple de manière plus détaillée dans cet article.
#1 Caching - le facteur de performance le plus important pour des temps de chargement rapides
La mise en cache signifie que ta page n'a pas besoin d'être demandée par le navigateur au serveur Web, puis d'être construite étape par étape. Au lieu de cela, ta page est chargée à partir d'une mémoire tampon, une fois le rendu terminé.
L'avantage de ce stockage temporaire est évident : WordPress n'a pas besoin de recalculer ta page à chaque fois qu'elle est consultée. Comme WordPress est basé sur le très lent PHP, un cache est essentiel. Il empêche 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 faciles à mettre en place, parfois un peu plus compliqués. Dans tous les cas, cela demande un peu de travail manuel.
- A propos de l'hébergeur : certains hébergeurs - comme 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 l'optimisation de WordPress. Pour plus de détails, consulte notre article sur les bases de la mise en cache.
#2 Ranger WordPress - l'ordre doit être de mise
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.
Une installation WordPress surchargée signifie dans la grande majorité des cas : Il y a trop de plugins installés. En règle générale, moins il y a de plugins, plus le site est rapide. Bien sûr, les plugins sont importants et tu ne peux pas t'en passer, mais tu devrais toujours vérifier de temps en temps quels sont les plugins dont tu as vraiment besoin.
Et : tu devrais t'assurer de ne pas simplement désactiver les plugins, mais de les supprimer complètement.
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 ajoutent du code PHP à ton site web. Cela vaut également pour les plugins désactivés. Ainsi, ton site web devient globalement plus encombrant et donc plus lent (et plus vulnérable aux attaques). En effet, PHP est un langage de script très lent. Moins il y en a, mieux c'est.
Souvent, les plugins 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é de nettoyer régulièrement ton site WordPress et de tester les nouvelles fonctions et les nouveaux designs dans un environnement de test et non sur le site lui-même. Ainsi, tu ne peux pas accumuler trop de restes de plugins.
#3 Images : le frein sous-estimé du temps de chargement
L'une des mesures les plus efficaces et les plus simples pour réduire le temps de chargement est de réduire la taille des images. Tu peux en effet économiser de grandes quantités de données. La compression d'image sans perte permet de réduire la taille des fichiers de tes images sans perte de qualité visible. Ton site ne change donc pas beaucoup, mais tu peux en même temps réduire considérablement sa taille en optimisant les images.
Les images représentent souvent la plus grande partie de la quantité de données d'un site web. Réduire 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 ils s'occupent également automatiquement de toutes les images existantes de ton site. Mais ce service est souvent payant.
#4 CSS et JavaScript - ça 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 Web. C'est ici que l'on rencontre le plus de réticences. Mais même si tu n'as pas de compétences en matière de code, tu peux facilement comprendre en quoi consiste l'optimisation des CSS et JavaScript. En principe, il y a trois choses à faire :
- Résumer : 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 ton site. Cependant, si les scripts sont regroupés, le nombre de fichiers à charger diminue, et donc le nombre de requêtes. Par exemple, 53 requêtes individuelles ne se transforment plus qu'en 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 designs sur ton site web. Ce code est écrit par des humains. Mais il est lu par des machines. Pourquoi cela est-il pertinent ? Une grande partie de ce dont l'homme a besoin pour comprendre correctement le code n'est pas nécessaire à l'ordinateur. Les espaces, les commentaires et autres ne sont donc pas nécessaires pour que ton site puisse être construit correctement. C'est là qu'interviennent les plugins comme Autoptimize. Ils convertissent le CSS et le JavaScript du code lisible par l'homme en code lisible par la machine. Cela rend les paquets de données plus petits et donc plus rapides à transmettre.
- Comprimer : Après le regroupement et la réduction, la dernière étape consiste alors à compresser les paquets de données envoyés par le serveur web au navigateur. Cela signifie que le serveur minimise la taille du fichier 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é la compression côté serveur.
Même sans connaître les scripts, il est donc facile de comprendre ce que chaque mesure apporte. Et pour ces trois étapes, il existe des plugins qui permettent 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 !
Voilà les quatre domaines dans lesquels il est possible d'économiser beaucoup de temps de chargement. Avec relativement peu d'efforts, tu peux déjà optimiser tes performances - en mettant en cache, en optimisant les images, en optimisant CSS & JavaScript et en nettoyant WordPress, tu peux déjà obtenir des améliorations significatives.
#5 L'hébergement a une grande influence sur les temps de chargement
Les quatre premiers champs d'optimisation promettent 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, mieux encore 128MB
- Centre de données géographiquement proche de ton groupe cible
- Version actuelle de PHP
- HTTP/2 et certificat SSL gratuit
Ensuite, il y a la différence entre l'hébergement partagé et un serveur (virtuel) personnel.
Avec 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.
"*" indique les champs requis
Les subtilités - moins d'impact, plus d'efforts
Tous les domaines liés à la performance que j'ai mentionnés jusqu'à présent peuvent être optimisés par presque tout le monde. 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. 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 que les outils comme Google PageSpeed Insights reprochent régulièrement 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 déjà de la fonction du slider, mais pas des images à afficher. Le chargement de la page prend donc plus de temps. Cette situation peut être évitée en choisissant le bon ordre de chargement.
Bien qu'il existe des plugins pour optimiser l'ordre de chargement, notre expérience montre qu'ils ne sont pas toujours en mesure d'optimiser complètement ton site Web. 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 zone visible de la page
Outre le temps de chargement total de ton site, c'est surtout le temps de chargement ressenti qui est décisif. C'est-à-dire le temps qui est perçu visuellement comme temps de chargement. Ce temps de chargement ressenti peut être réduit grâce à quelques astuces. Ainsi, on a l'impression que la page est déjà complètement construite, même si elle est encore en train de calculer 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 les contenus et les fonctions que tes visiteurs doivent voir sur la première taille d'écran sont prioritaires.
Tu peux y parvenir par exemple en optimisant l'ordre de chargement. Mais il existe aussi des plugins qui font en sorte que ton site se charge plus efficacement. a3 Lazy Load est un exemple de ces plugins. Ainsi, tous les contenus sont toujours affichés, mais le temps de chargement des pages peut en profiter, surtout s'il s'agit d'une page avec beaucoup d'images.
#8 Nettoyer la base de données
En plus des images et des scripts, ta base de données peut aussi devenir trop grande. Pour cela aussi, il existe des outils pratiques qui permettent de garder ta base de données bien allégée, notamment le plugin WP-Optimize.
#9 Pingbacks et trackbacks
Par défaut, WordPress interagit avec d'autres sites qui autorisent les pingbacks et les trackbacks. Chaque fois que ton site ou l'un de tes posts de blog est mentionné sur un tel site, ton site en est automatiquement averti - ce qui alourdit encore la base de données.
Si tu n'as pas besoin de cette fonctionnalité (la valeur ajoutée est de toute façon infinitésimale selon moi), tu devrais désactiver les pingbacks et les trackbacks. Là encore, le plugin WP-Optimize peut t'aider. Pour être complet, il faut toutefois mentionner qu'il s'agit plutôt d'un problème théorique. Jusqu'à présent, nous n'avons jamais constaté de perte de performance sérieuse à cause de cela.
#10 Empêcher le hotlinking
Le hotlinking signifie que quelqu'un fait un lien direct vers une image sur ton serveur - en fin de compte, 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.)?yourwebsite.com [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, par exemple si tu veux aussi protéger les fichiers PDF, la ligne de code ressemblerait à ceci :location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$
{valid_referers none blocked server_names*.yourwebsite.com ~.google. ~.bing. ~.yahoo.;
Ces lignes sont un peu longues, mais elles t'aideront à mieux comprendre tout ce que tu peux faire avec cette règle. Ces lignes indiquent en quelque sorte quels domaines peuvent quand même hotlinker tes fichiers. Dans cet exemple, yourwebsite.com avec tous les sous-domaines, ainsi que Google, Bing et Yahoo.
if ($invalid_referer) {return 403;}
Maintenant, si une requête arrive et que la ressource demandeuse n'est PAS en haut de ta liste blanche, le serveur renvoie une erreur 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. Sur Raidboxes , tu peux également empêcher le hotlinking via les en-têtes CORS dans les paramètres de ton Box . Si tu as des questions sur la configuration des en-têtes de ton 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 est celle d'un réseau de diffusion de contenu (CDN). Par exemple : "Est-ce qu'un CDN rendra mon site plus rapide pour les visiteurs en France ?", "Pourquoi ai-je vraiment besoin d'un CDN ?", "Me conseillerais-tu d'utiliser un CDN pour mon blog ou ma boutique ? Mais dans la plupart des cas, la réponse était : non.
Pour faire court, disons que tu n'es pas le seul : Un CDN a le plus de sens si tes utilisateurs sont 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 abandonner un CDN pour l'optimisation de 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 semblent compliquées.
Il y a souvent une certaine appréhension à l'égard de ces domaines qui permettent d'économiser facilement du temps de chargement, ou alors ils sont négligés. D'autres, comme les CDN, reviennent souvent dans les consultations, bien qu'ils n'aient généralement aucun effet sur le temps de chargement du site.
Je ne peux donc que te conseiller de te concentrer d'abord sur les "low hanging fruits" de l'optimisation des performances de WordPress. En effet, 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 ton site web
- Réduction des requêtes HTTP
- Compression des différents paquets de données
- Optimisation du temps de chargement ressenti
Si tu as compris cela, tu peux alors agir de manière judicieuse sur les 10 vis de réglage les plus importantes de l'optimisation 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 web.
Le temps de chargement te remerciera !
