Dans ce guide, je vais te montrer comment accélérer énormément ton site WordPress en configurant quelques outils.
Apprends comment accélérer les temps de chargement de ton site web d’un facteur 5 ou plus. Optons pour une meilleure expérience utilisateur et de meilleurs classements dans les moteurs de recherche 💪
Diminuer le temps de chargement de tes pages et augmenter la vitesse du site améliorera énormément l’expérience utilisateur de ton site. Tes visiteurs resteront plus longtemps, et le nombre d’utilisateurs qui quittent ton site après avoir ouvert la première page sera plus faible qu’auparavant. Tu as peut-être déjà entendu parler de cette métrique sous le nom de taux de rebond.
Encore mieux, la vitesse du site est un facteur de classement Google, ce qui signifie que ton site peut obtenir de meilleurs classements de recherche sur Google après un certain temps. Cela aura pour résultat que plus d’utilisateurs trouveront ton site et que tu obtiendras plus de trafic.
Il y a quelques raisons pour lesquelles ton site WordPress peut être lent.
Les raisons les plus courantes sont « Pas de mise en cache » et une taille de page trop grande.
En plus de ces deux raisons principales, plusieurs autres variables peuvent affecter la vitesse de ton site :
- Beaucoup de plugins installés
- Configuration de ton serveur
- Mauvais code dans un ou plusieurs plugins.
- Mauvais code dans le thème
- Connectivité réseau lente
- Réponse serveur lente
Avant de commencer, il est essentiel de se rappeler que toutes les actions recommandées ne sont pas susceptibles d’améliorer le temps de chargement de ton site. L’une peut fonctionner mieux que l’autre, et certaines n’affectent que de façon négligeable le temps de chargement de ton site.
Contents
Vidéo : Comment accélérer WordPress
Si tu préfères regarder une vidéo plutôt que de lire cet article sur comment accélérer WordPress, tu peux regarder cet article entier en vidéo :
Outils que nous utilisons pour accélérer WordPress
- ShortPixel Image CDN
- WP Super Cache
- Autoptimize
- wp-staging.com
- Pingdom
- Google PageSpeed Insights
- GiftofSpeed GZIP Test
Évalue la vitesse de page de ton site
Commençons par quelques tests de référence pour obtenir une vue d’ensemble et comprendre la vitesse de ton propre site.
Pour évaluer et analyser la vitesse du site, tu peux utiliser les outils en ligne gratuits de vitesse de page Pingdom et Google PageSpeedInsights.
Ces résultats proviennent d’un site exemple avec WordPress 5.6, une poignée de plugins populaires et la version gratuite du thème « Astra » et un site WordPress très loin du chargement rapide :
Activer la mise en cache
Commençons par la première étape, l’installation d’un plugin de cache.
Un plugin de cache enregistre la sortie HTML visible de ton site dans des fichiers temporaires sur ton site. L’exécution du code à partir d’un plugin ou d’un thème prend beaucoup de temps car le serveur doit effectuer de nombreux calculs pour faire l’exécution.
Avec la mise en cache, ces calculs ne doivent être effectués qu’une seule fois lorsqu’un visiteur ouvre ton site. Le plugin de cache vérifie d’abord s’il existe un cache pour un contenu spécifique.
Si le contenu est déjà mis en cache, il produit directement la sortie HTML pré-calculée au lieu d’exécuter à nouveau tout le code. Le serveur a alors plus de ressources libres pour charger ton site plus rapidement. Le simple fait d’installer un plugin de cache et de l’ajuster correctement peut rendre ton site dix fois plus rapide ou même plus.
Avant de suivre ce guide, nous recommandons de créer un clone de ton site pour tester en toute sécurité toutes les étapes de ce guide d’accélération de WordPress. Les instructions suivantes sont faciles à suivre, mais il est encore possible que l’un de tes plugins ou ton thème ne fonctionne pas bien avec ces ajustements de performance.
Donc, avant que quelque chose ne casse sur ton site de production, applique d’abord toutes les modifications à des fins de test sur le clone de ton site. Si tout se passe bien, tu pourras alors appliquer les mêmes optimisations à ton site de production.
Pour cloner ton site rapidement, tu peux utiliser le plugin gratuit WP STAGING. Il peut créer un clone avec un simple clic, et tu peux essayer toutes les optimisations de vitesse possibles dans un environnement sécurisé.
Je recommande WP Super Cache. Ce plugin est développé par Automattic. C’est la même société qui est responsable du développement du noyau WordPress. Le plugin est gratuit, puissant et simple si tu comprends comment il fonctionne.
Ce plugin est, dans beaucoup d’options, aussi puissant que les plugins premium, tels que le populaire WP ROCKET dont tu as peut-être entendu parler.
WP ROCKET a une interface plus conviviale et pourrait être plus facile à utiliser pour les débutants. Ne t’inquiète pas ; je vais te prendre par la main et te montrer tous les clics que tu dois faire pour obtenir des résultats similaires à ceux d’un plugin de cache premium.
Tu obtiens donc les mêmes résultats de vitesse gratuitement !
Va dans la boutique de plugins et recherche WP Super Cache.
Après avoir installé et activé le plugin WP Super Cache, configurons-le.
Il serait possible d’activer le cache via la section « Easy » en choisissant « caching on », mais à ce stade, nous allons directement à la zone « Advanced », car nous pouvons configurer les paramètres ici plus précisément.
- Active la case « Enable Caching ».
- Simple comme méthode de livraison du cache.
- Désactiver la mise en cache pour les visiteurs connectés.
- Ne pas mettre en cache les pages avec des paramètres GET. Garantit que les pages dynamiques différentes pour chaque utilisateur, comme les paniers d’achat, ne seront jamais mises en cache.
- Compresser les pages pour qu’elles soient servies plus rapidement aux visiteurs,
et activer la compression Gzip, ce qui accélère considérablement ton site. Note que certains serveurs compriment déjà les données eux-mêmes, ce qui peut provoquer des erreurs lors de l’activation de l’option. Pour voir si ton serveur utilise déjà la compression gzip, tu peux utiliser ce test de performance gzip. - Cache rebuild,
affiche le contenu mis en cache à l’utilisateur même si le cache est en train d’être mis à jour en raison de nouveau contenu. Cela signifie que tes visiteurs ne verront jamais de contenu non mis en cache, sauf pour la première génération du cache. - 304 Browser Caching,
indique à l’utilisateur de charger le site à partir du cache du navigateur s’il y a déjà du contenu mis en cache dans le navigateur de l’utilisateur au lieu de se connecter au serveur. Cela peut réduire encore plus la charge CPU de ton serveur.
Puis fais défiler vers le bas jusqu’à l’onglet « Advanced ».
- Active le support pour appareils mobiles. Un simple clic suffit, mais wp-super-cache souligne que, selon le design, un plugin supplémentaire peut devoir être installé. Comme nous utilisons un thème WordPress standard, cela n’est pas nécessaire. Si ton site fonctionne bien sur les appareils mobiles après l’activation de cette option, tu peux l’utiliser.
- Lorsqu’un article ou une page est publié ou mis à jour, efface tous les fichiers de cache et assure-toi que le cache sera vidé afin que le nouveau contenu puisse être affiché.
Enfin, la dernière étape dans les paramètres du plugin de cache est l’option PRELOADING, que tu peux trouver dans l’onglet « Preload » :
Le paramètre preload fait que le plugin met en cache tous les articles et pages de ton site périodiquement. Tu peux définir l’intervalle de temps entre chaque rafraîchissement du cache. Cet intervalle de temps est un paramètre très crucial.
Dans un environnement d’hébergement partagé, tu devrais idéalement le définir à une fois par jour – toutes les 1440 minutes.
Si tu mets à jour ton site deux fois par jour, tu peux sélectionner l’intervalle de temps entre chaque rafraîchissement du cache à 720 minutes. Avec ce paramètre, le cache entier sera rafraîchi deux fois par jour. Un temps de rafraîchissement aussi bas peut entraîner une charge serveur supplémentaire.
Je recommanderais de ne pas utiliser une valeur inférieure dans les environnements d’hébergement partagé – car cela pourrait et sera très probablement compté comme une utilisation excessive des ressources serveur.
Cependant, si tu es sur un VPS ou un serveur dédié, tu peux définir la fréquence de rafraîchissement aussi basse que 60 minutes.
Il est intéressant de savoir que le nombre d’articles et de pages de ton site affecte les ressources nécessaires pour chaque opération de rafraîchissement du cache preload. Un temps de rafraîchissement optimal pour un serveur dédié sur un site à fort trafic serait de 2 heures.
J’ai coché les cases pertinentes et défini l’intervalle de rafraîchissement du cache à 1440 minutes. Tu es libre de choisir n’importe quelle valeur !
Optimiser les fichiers CSS, JavaScript et les images
Pour les prochains ajustements, tels que combiner les fichiers Javascript et CSS et optimiser les images et la sortie HTML, nous utilisons un autre plugin nommé « Autoptimize », que nous pouvons installer depuis le répertoire de plugins WordPress.
Que tu doives ou non agréger les fichiers CSS et JavaScript dépend principalement de la configuration de ton serveur.
Chaque site charge des fichiers via le protocole HTTP 1.1 ou le plus récent HTTP 2.
Avec HTTP 1.1, tous les fichiers seront téléchargés l’un après l’autre. Par exemple, un fichier doit être entièrement chargé chez le visiteur avant que le serveur puisse commencer à envoyer le fichier suivant.
Pour réduire le nombre de fichiers à télécharger, Autoptimize peut combiner ces fichiers. Ainsi, au lieu d’envoyer dix fichiers CSS, ton serveur n’a besoin de télécharger qu’un seul fichier, ce qui se traduit par un temps de chargement total plus rapide. Même si la taille totale d’un fichier CSS ou JS combiné est plus grande, chaque demande individuelle s’accompagne d’une surcharge supplémentaire ; comme le temps supplémentaire dont une demande a besoin pour établir une connexion au serveur. C’est pourquoi il peut être plus rapide de charger un seul gros fichier au lieu de charger plusieurs fichiers.
Donc si ton serveur fonctionne sous HTTP 1.1, il est recommandé d’agréger tous les fichiers CSS et JS de ton site.
Au contraire, le protocole HTTP2 peut télécharger plusieurs fichiers simultanément. Si c’est le paramètre sur ton serveur, il peut être contre-productif d’activer l’agrégation de fichiers. HTTP2 est généralement beaucoup plus rapide parce qu’il peut télécharger plusieurs petits fichiers simultanément au lieu d’un gros.
Par conséquent, combiner les fichiers CSS et JS n’apporte souvent aucun avantage et peut même ralentir le site s’il utilise HTTP2. Pour être sûr, tu peux tester les deux options pour déterminer quel paramètre te donne les meilleurs résultats.
Pour voir si ton site utilise HTTP 2, utilise le KeyCDN http2 service.
Optimiser JavaScript
Sélectionne l’onglet « JS, CSS & HTML ».
Active Optimize JavaScript Code
Si ton serveur utilise HTTP 1 :
- Active Aggregate JS files pour combiner les fichiers JavaScript comme recommandé par les services de référence de vitesse de page
Désactive les options :
- Force JavaScript in <head
- Exclude scripts from Autoptimize
- Add try-catch-wrapping.
Active ces options uniquement si tu agrèges des fichiers javascript et rencontres des problèmes avec le site. Tu peux alors exclure certains fichiers javascript du processus de combinaison.
Si ton serveur utilise HTTP 2 :
- Désactive Aggregate JS Files
Optimiser le JavaScript peut casser des choses sur ton site ! Je recommande fortement de tester cette étape sur un site staging avant de faire les ajustements sur ton site de production.
Optimiser les fichiers CSS
L’étape suivante est l’optimisation des fichiers CSS.
- Clique sur Optimize CSS Code.
Si ton serveur utilise HTTP 1.1, active les options :
- Aggregate CSS-files
- Aggregate inline CSS.
Cela améliorera encore le score de vitesse de page. C’est la même chose que d’agréger les fichiers Javascript et les fichiers javascript inline mais uniquement pour le CSS. Garde cette option désactivée si ton serveur utilise HTTP2 !
Si ton serveur utilise HTTP1 ou HTTP2 :
- Active Generate data: URIs for images – Cela peut entraîner moins de requêtes HTTP. Mais pas après avoir configuré un CDN et servi des images à travers celui-ci. Dans le cas de l’utilisation d’un CDN, tu devrais le désactiver. En utilisant un CDN, les fichiers sont mis en cache sur plusieurs centres de données dans le monde entier.
- Désactive Inline and Defer CSS
- Exclude CSS from Autoptimize :
Utilise ceci uniquement si tu as agrégé des fichiers CSS et que tu rencontres des problèmes visuels sur ton site. Tu peux alors exclure certains fichiers CSS du processus de combinaison.
Optimiser HTML
Active l’option « Optimize HTML code ».
Lors de l’optimisation des fichiers HTML, les espaces et les commentaires sont supprimés du code. Cela réduira la taille du fichier. Et les fichiers plus petits se chargent généralement plus rapidement que les plus grands.
Avant l’optimisation HTML :
Après l’optimisation HTML
La dernière section à éditer est les options MISC dans Autoptimize.
Active les quatre premières options :
- Save aggregated script/CSS as static files.
- Minify excluded CSS and JS files.
- Enable 404 fallbacks.
- Also, optimize for logged-in editors/administrators.
Si tu es connecté et que tu rencontres des problèmes avec un constructeur de pages comme Elementor ou un autre plugin backend, désactive la dernière option.
Optimiser Google Fonts
Passons à l’onglet « Extra ».
Les polices Google peuvent ralentir le temps de chargement car elles sont extraites de ressources externes. Je préfère l’option « combine and link in head » car elle améliore les temps de chargement sans voir la police se charger. Si tu es dans l’Union européenne, cela rend également ton site plus conforme au RGPD, car ces ressources externes ne sont plus chargées depuis google.
Mais tu devrais également tester la dernière option Google Font, « combine and load fonts asynchronously with webfont.js », et voir laquelle donne de meilleurs résultats dans l’outil de vitesse de page.
Ensuite, active « remove Emojis » parce que le javascript responsable des Emojis est lourd et n’est pas bénéfique pour un bon temps de chargement.
Optimiser les images
Autoptimize peut également aider à charger les images plus rapidement en utilisant un service tiers intégré appelé ShortPixel. Si tu veux essayer ceci, va dans la section Images.
Choisis « Optimize Images » ; les URLs sur ton site seront modifiées pour pointer vers le CDN de ShortPixel.
Shortpixel réduit/adapte 100 images par mois gratuitement, ce qui pourrait suffire si tu as un site petit ou moyen.
Image Optimization Quality – Tu peux trouver le bon équilibre entre compression et qualité en cliquant sur « You can test compression levels here. »
Tu seras dirigé vers shortpixel.com, où tu peux voir visuellement les différences à chaque niveau de compression de ShortPixel en téléchargeant l’une de tes images.
Lequel est le meilleur pour toi ?
- Lossy : compression maximale, perte de qualité maximale.
- Glossy : compression moyenne, faible perte de qualité.
- Lossless : faible compression, perte de qualité minimale.
Retourne dans Autoptimize et saisis tes paramètres !
- Load WebP or AVIF in supported browsers – active ceci afin qu’Autoptimize serve les images au format WebP, ce qui te permet de compresser les images encore plus sans compromettre beaucoup la qualité.
- Lazy-Load images – doit être activée également, et entraînera moins de requêtes et est recommandée par Google pour des temps de chargement plus rapides.
Et Cloudflare ?
Peut-être te demandes-tu pourquoi je ne mentionne pas un CDN ou un service DNS comme Cloudflare, comme le recommandent de nombreux autres tutoriels pour une optimisation supplémentaire ?
La réponse simple est que changer le service DNS n’est pas nécessaire pour la plupart des sites car cela comporte certains inconvénients potentiels.
Par exemple, passer à un service CDN basé sur DNS comme Cloudflare cède le contrôle sur ton site et son trafic. Je tombe souvent sur des sites fonctionnant sous le service DNS de Cloudflare, où il m’est demandé de remplir un captcha avant même de pouvoir accéder au site. De tels captchas peuvent entraîner un taux de rebond élevé d’un visiteur et affecter négativement les classements de recherche. Un service DNS pourrait également rediriger une partie de ton trafic ailleurs, et tu ne le remarquerais pas immédiatement. Garde donc cela à l’esprit lorsque tu veux donner à un service DNS tiers le contrôle sur ton domaine.
Après les optimisations que nous avons appliquées, ton site est déjà si rapide qu’il ne limitera pas le classement Google, donc dans cet article, nous ne couvrirons pas le service Cloudflare.
Fais-moi savoir si tu vois cela différemment et as une autre opinion sur l’utilisation de Cloudflare.
Découvre notre
Chaîne YouTube.Articles connexes
- Comment optimiser la base de données WordPress pour des performances supérieures ?
- Tutoriel phpMyAdmin pour réparer et optimiser les tables de la base de données
- Pourquoi WordPress est lent + comment le réparer
- Comment effacer le cache et les cookies du navigateur ?
