Si tu souhaites améliorer la performance de ton ou de tes sites WordPress, tu es au bon endroit !
Je vais te dévoiler ici mes recommandations et astuces pour rendre tes sites plus performants et rapides à charger.
Tu en tireras à la fois des bénéfices pour l’expérience de tes utilisateurs et c’est une raison de plus pour Google de revaloriser ton site dans ses résultats.
Tester la vitesse de chargement
Avant de rentrer dans les détails, je t’invite à estimer la vitesse de chargement actuelle de tes sites. Pour cela, utilise plusieurs outils et réalise plusieurs tests pour t’approcher le plus possible de la réalité :
Je vais te présenter maintenant les différentes actions que tu peux apporter à chacun de tes sites pour qu’ils gagnent considérablement en temps de chargement.
L’hébergement web
L’hébergement, c’est la base de ton projet web. Si tu choisis un hébergement gratuit (ou presque), tu risques d’avoir de mauvaises surprises ! Latence, uptime dégueu, pas de backup…
Si tu as un projet sérieux, investis dans un hébergement de qualité WordPress-friendly (quitte à payer un peu plus que la moyenne), tu ne seras pas déçu 😉
Je te recommande personnellement EasyHoster, O2Switch, Monarobase et Hostinger qui présentent un excellent rapport qualité/prix.
3 astuces pour optimiser ton hébergement
1. Assure toi d’activer la dernière version de PHP (8.0+)
2. Augmente la mémoire utilisée par PHP et WordPress
De base, les limites par défaut de WordPress sont :
- sur le site (frontend), WP_MEMORY_LIMIT est limitée à 40M
- sur le tableau de bord (backend), WP_MAX_MEMORY_LIMIT est limitée à 256M
On va suivre les recos de Nicolas qui a réalisé de nombreux tests pour trouver les valeurs les plus optimales : 96M pour WP_MEMORY_LIMIT et 368M pour WP_MAX_MEMORY_LIMIT.
Voici le code à insérer dans ton fichier wp-config.php :
define( 'WP_MEMORY_LIMIT', '96M');
define( 'WP_MAX_MEMORY_LIMIT', '368M' );3. Veille à ce que OPcache soit activé dans les paramètres PHP de ton cPanel
Le choix du thème
Avant d’acheter un thème WordPress, veille bien à ce qu’il soit parfaitement optimisé et rapide à charger. Gare aux thèmes un peu trop lourd, qui peuvent réunir trop de fonctionnalités, une quantité de fichiers à charger (souvent inutilisés), des effets gourmands en ressources, etc.
C’est pourquoi je te recommande de t’orienter vers des éditeurs de confiance qui ont à coeur la performance, l’optimisation, l’expérience utilisateur et la sécurité :
Le choix des plugins
Je sais qu’il est tentant d’installer un max de plugins sur son WordPress pour avoir tout plein de fonctionnalités pratiques. Cependant, plus on a de plugins, plus on est susceptible d’avoir de scripts à charger et plus le site va ralentir. D’autre part, on augmente aussi les chances d’avoir des conflits entre plugins et les failles de sécurité sont plus nombreuses.
Sélectionne donc avec grande attention les plugins que tu utilises, limite toi au strict minimum et focalise toi sur des valeurs sûres (grand nombre d’avis + bonne notation + ancienneté + MAJ régulières).
Voici plusieurs exemples de plugins populaires qui peuvent ralentir ton site : AddThis, ShareThis, Disqus, JetPack, Broken Link Checker, NextGen Gallery, Revolution Slider, Yet Another Related Post, Similar Posts, WordPress Related Posts, WordPress Popular Posts, WPML, Visual Composer, WPBakery, WP Statistics, WooCommerce, WordFence, VaultPress, SumoMe, Google Analytics, Google Translate, Facebook Chat…
Bien sûr, certains peuvent malgré tout être indispensables et il est difficile de s’en passer, par exemple : WooCommerce, la meilleure solution e-commerce sur WordPress, et WordFence, le meilleur plugin de sécurité.
Si tu as installé des plugins que tu n’utilises (quasiment) pas, tu peux les supprimer sans regret, ce sera que du plus pour ton site.
Le cache
WordPress n’est pas un CMS léger, et la combinaison d’un thème et d’une multitude de plugins va forcément ralentir le tout. Pour optimiser au mieux le temps de chargement, il convient d’utiliser un plugin de cache, que l’on peut aussi qualifier de plugin de performance (car ils ne se limitent pas seulement à l’optimisation du cache).
Le meilleur plugin en la matière est WP Rocket. C’est un plugin premium développé par des français (WP Media), il va te permettre d’optimiser en profondeur ton site :
- cache
- fichiers : CSS & JS
- médias : images, iframe, vidéos
- nettoyage de la base de données
- intégration d’un CDN
- heartbeat
- et plus encore
Configure WP Rocket au max, tant que ça ne fait pas sauter des fonctionnalités JS ou l’apparence de ton thème.
En gratuit/freemium, je te recommande WP Fastest Cache (ou ce plugin si ton hébergeur supporte LiteSpeed).
Les images
Les images et autres médias peuvent ralentir considérablement les temps de chargement d’une page.
Il convient donc de :
- les redimensionner pour qu’elles correspondent parfaitement à la taille d’affichage
- les optimiser au max tout en gardant la même qualité (on ne voit pas la différence)
Si ce n’est pas encore fait, la première chose à faire est de configurer les bonnes dimensions dans Réglages > Médias :
Ne garde pas la largeur initiale (1024px) pour les images de grande taille si le bloc contenu de ton site se limite à 640px.
Si tu souhaites optimiser toutes les images de ton site à la volée, tu pourras compter sur le plugin Imsanity. Non seulement tes images seront plus rapides à charger, mais tu vas aussi libérer de l’espace sur ton hébergement.
La deuxième étape consiste à optimiser l’ensemble de tes images à la volée. Plusieurs plugins te permettent de faire cela en un clic :
- Imagify
- EWWW
- ShortPixel
- reSmush.it
- Optimus HQ
- Smush (+ Disable Bulk Smush Limit of WP Smushit si tu as un grand nombre d’images)
WebP > JPG & PNG
C’est un élément qu’on a tendance à délaisser, mais pourtant le choix du format d’image a toute son importance.
Comme on l’a vu précédémment, plus une image est lourde, plus elle est longue à charger, et certains formats d’images sont plus ou moins adaptés en fonction du contexte.
Voici les recommandations pour chaque format d’image :
- JPG : c’est le format standard, le plus utilisé
- PNG : besoin de transparence ou très petites images
- SVG : éléments graphiques
- GIF : image animée seulement, aucun intérêt pour du statique
- WebP : à utiliser systématiquement (sauf pour animation)
Développé par Google, le format WebP est le plus performant et le plus intéressant à mettre en place sur tes sites. Cette solution permet de convertir et compresser des images à la volée, avec deux fois plus de résultats que la compression JPG 2000 (40,55% vs 18,69%), sans perte de qualité (source).
Voici les meilleurs plugins WordPress permettant de convertir ses images en WebP :
Appliquer ces préconisations permet de faire la différence parmi ses concurrents et de se frayer un chemin dans le top des résultats de Google.
Pour optimiser mes images à la volée, puis les convertir au format WebP, j’utilise le plugin Optimus HQ qui coûte seulement 29$ / an (licence illimitée).
On peut ensuite activer la mise en cache pour le format WebP avec le plugin WP Rocket :
WP Cron
J’ai découvert cette astuce grâce à mon poto Nicolas 🙂 Les tâches WP-CRON peuvent être remplacées par de véritables tâches CRON, côté serveur (via cPanel), avec une ligne de commande, tout simplement !
Tout d’abord, on désactive WP-CRON en rajoutant cette ligne au fichier wp-config.php :
define('DISABLE_WP_CRON', true);Ensuite, on se rend sur cPanel pour configurer une exécution du CRON toutes les heures.
Ligne de commande optimale :
/usr/local/bin/php -q /home/USER/public_html/wp-cron.php >/dev/null 2>&1N’oublie pas de remplacer USER par ton identifiant cPanel et public_html par ton addon domain, le cas échéant.
Ligne de commande alternative :
wget -q -O - https://www.siteweb.fr/wp-cron.php?doing_wp_cron >/dev/null 2>&1Pour cette commande, il te faudra remplacer siteweb.fr par ton site.
Important : si tu as un grand nombre de sites sur ton hébergement, utilise une valeur aléatoire comprise entre 1 et 59 pour les minutes, afin que tes tâches CRON ne se produisent pas toutes en même temps. En répartissant bien les tâches CRON pour chacun de tes sites, tu es assuré(e) de ne pas provoquer de surcharge sur le serveur.
XML-RPC
Le fichier xmlrpc.php a été développé aux débuts de WordPress pour normaliser la communication entre le CMS et des applications externes. Cependant, il n’est quasiment plus utilisé aujourd’hui par les utilisateurs de WordPress, c’est l’API REST qui a pris le relais et qui permet d’ouvrir beaucoup mieux WordPress à d’autres applications.
Tu as deux bonnes raisons de désactiver XML-RPC de tous tes sites.
Côté sécurité, XML-RPC est susceptible d’introduire des vulnérabilités plus facilement. WordPress a néanmoins décidé de garder XML-RPC actif car il est toujours utilisé sur quelques millions de sites.
Côté performance, le fichier xmlrpc.php compte parmi les scripts les plus consommateurs de ressources…
Il ne te reste plus qu’une chose à faire : le désactiver 😉
Voici le code à insérer dans ton fichier .htaccess :
# Block WordPress xmlrpc.php requests
<Files xmlrpc.php>
order deny,allow
deny from all
</Files>Sinon tu peux le désactiver en passant par un plugin comme Perfmatters, WP Hardening ou Disable XML-RPC.
Heartbeat
Heartbeat fournit une connexion entre le navigateur et le serveur pour synchroniser et transférer des données en temps réel. Heartbeat est notamment utilisée pour enregistrer automatiquement des révisions d’articles, ou encore pour afficher des notifications / données en temps réel dans le tableau de bord.
De base, Heartbeat est appelée toutes les 15 secondes et de nouvelles requêtes sont transmises très régulièrement au serveur. Alors que cette fréquence frénétique n’est pas nécessaire, un appel toutes les 2 minutes suffit amplement.
Tu peux mettre ça en place rapidement à l’aide de Perfmatters ou de WP Rocket :
Si tu utilises un autre plugin de cache, tu peux installer le plugin Heartbeat Control, qui a aussi été développé par la team WP Rocket.
Le CDN
La distance entre l’utilisateur et le serveur a un impact sur le temps de chargement. C’est pourquoi il est préférable d’avoir un serveur localisé en France quand on s’adresse aux français. Bien sûr, tout le monde pourra accéder au site à travers le monde, mais un utilisateur en Amérique ou en Asie mettra un peu plus de temps pour y accéder.
Avec le CDN (Content Delivery Network), ce problème est définitivement réglé. Le CDN dispose d’une multitude de serveurs à travers le monde et ceux-ci délivrent le contenu aux internautes de la manière la plus rapide possible : l’utilisateur se connecte au réseau le plus proche de son domicile.
Utiliser un CDN présente de multiples avantages :
- Il accélére les temps de chargement
- Il favorise tous les visiteurs, peu importe leur localisation
- Il réduit l’utilisation de la bande passante chez l’hébergeur
- Il sécurise le site et ses données (SSL, Block Bad Bots, protection DDoS…)
L’amélioration des temps de chargement aura un impact positif sur le référencement et l’expérience utilisateur.
Mon utilisation de KeyCDN
Le blog Web & SEO utilise les services du spécialiste KeyCDN, qui dispose de 34 serveurs POP sur tous les continents :
Etant personnellement localisé à Bangkok en Thailande, je peux accéder à mon site bien plus rapidement en passant par le serveur POP de Singapour. KeyCDN est très bien implanté en Europe et aux Etats-Unis, et d’autres serveurs vont ouvrir prochainement à Denver, Santiago, Buenos Aires, Dubai, Tel Aviv, Seoul, Taipei, Jakarta et Brisbane.
J’utilise KeyCDN depuis bientôt 2 ans sur 10 sites, et il me coûte à peine 49$ / an (soit 4 dollars par mois).
Les alternatives à KeyCDN
CDN77 est aussi un très bon CDN, il dispose du même nombre de serveurs POP que KeyCDN à ce jour, et un tarif à peine supérieur au niveau de la consommation de trafic.
J’aurais bien aimé recommander ce service français, mais le CDN d’OVHcloud est de loin le pire, avec seulement 3 serveurs POP, une mauvaise disponibilité (RUM uptime) et un tarif minimum de 11,99 € / mois ; je ne vois pas l’intérêt de mettre ça en place. Espérons qu’ils mettent les moyens pour devenir compétitif !
CDN.net (80 serveurs POP) et StackPath (65 serveurs POP) sont des CDN performants, mais plus onéreux : à partir de 20$ / mois.
Enfin, on a CloudFlare qui est le plus populaire de la bande. Si on le compare aux autres pour des fonctionnalités similaires (non bridées), il revient à 25$ / mois (en activant Argo). Autrement, c’est le seul CDN à proposer une offre d’entrée 100% gratuite, elle est cependant bien trop limitée à mes yeux et pas si intéressante à déployer.
Découvrir mon comparatif détaillé des CDN
La compression
La compression Gzip va te permettre de compresser les contenus HTML, CSS et JS, afin qu’ils soient les plus légers possibles. Plus tes fichiers sont légers, plus ils seront rapides à charger.
Pour que ça fonctionne comme il faut, il faut réunir deux conditions :
- mod_deflate doit être activé sur le serveur de ton hébergement
- les règles de compression doivent être ajoutées dans ton fichier .htaccess
La majorité des hébergements ont le mod_deflate activé, mais ce n’est pas toujours le cas. Assure toi auprès de ton hébergeur que c’est bien le cas.
Pour ajouter les règles de compression sur ton .htaccess, tu pourras compter sur ton plugin de cache : WP Rocket le gère en natif, et pour WP Fastest Cache, il te suffit de cocher une case dans la configuration.
Brotli > Gzip
Gzip c’est bien… mais Brotli c’est mieux !
Gzip est la méthode de compression standard sur le web, ça existe depuis le début des années 90 !
Propulsé par Google en 2013, Brotli est quant à elle une méthode de compression bien plus moderne et avancée. Pendant longtemps, cette nouvelle méthode de compression n’était pas adoptée par les navigateurs web et ce n’est que depuis l’année dernière (2019) qu’elle est pleinement supportée par Chrome, Firefox, Safari, Edge, Brave et Opera.
Cette étude à grande échelle menée par le CDN Akamai en 2016 a montré que Brotli était :
- 21% meilleur pour compresser le HTML
- 14% meilleur pour compresser le JavaScript
- 17% meilleur pour compresser le CSS
Les hébergeurs qui supportent Brotli sont un peu moins courants, mais c’est bien le cas d’EasyHoster, O2Switch, Hostinger et Monarobase.
Pour t’assurer que ton site (et ton hébergeur) supporte Brotli, tu peux utiliser cet outil en ligne proposé par KeyCDN.
Pour faire fonctionner Brotli sur le blog Web & SEO et sur mes autres sites importants, je passe par le CDN KeyCDN :
Les fonts
Si ton thème fait appel à des fonts (polices de caractère) externes, comme celles de Google Fonts, c’est pas le top car ton site doit systématiquement faire appel à des scripts externes, parfois lourds. Si tu peux t’en passer, fais-le car tu pourrais gagner près d’une seconde de chargement dans certains cas. Et comme tu le sais, chaque seconde compte 😉
Tu peux savoir si ton thème fait appel à des fonts externes en te rendant sur l’onglet Waterfall lors d’une analyse avec GTMetrix.
Si ton thème te le permet, désactive ces fonts exotiques pour revenir sur des fonts dites natives. Si le thème force l’appel à ces fonts externes, tu peux les bloquer en amont à l’aide du plugin Perfmatters ou Disable and Remove Google Fonts.
System Fonts
L’idéal serait que tu passes à System Fonts pour un rendu optimal sur tous les terminaux.
Voici le code à insérer dans ton CSS (Personnaliser > CSS additionnel) :
// System Fonts
body, h1, h2, h3, h4, h5, h6, p, li, code, blockquote {
font-family:-apple-system, system-ui, BlinkMacSystemFont, "Roboto Condensed", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}BlinkMacSystemFont correspond à la police de caractère d’Apple “San Francisco”, Segoe UI est la police de caractère de Microsoft, et Roboto est la police utilisée sur Android. Si aucune de ces polices ne peut être chargée par le navigateur, il fera appel à Helvetica, Arial, voire sans-serif, la police par défaut.
Optimiser Google Fonts
Si tu tiens à utiliser une ou plusieurs polices exotiques à l’aide de Google Fonts, tu vas pouvoir optimiser cet appel externe de trois façons :
- en utilisant un plugin de performance
- en préchargeant le fichier de fonts de Google
- en activant le paramètre display swap
Pour le premier point, cette optimisation peut être réalisée automatiquement ou en un clic avec un plugin comme WP Rocket, WP Fastest Cache ou Autoptimize.
Pour le second point, tu vas pouvoir configurer ce préchargement de fonts en passant par WP Rocket, Perfmatters, ou en plaçant manuellement cette ligne de code dans ton Header (entre <head></head>) :
<link href="https://fonts.gstatic.com" crossorigin rel="preconnect" />Enfin pour le troisième point, le paramètre display swap va te permettre de t’assurer que le texte utilisant la font exotique sera bien affichée dans tous les cas, même s’il y a un soucis pour faire appel à la font. Ajouter ce paramètre quand on fait appel à la font permet de satisfaire PageSpeed, voici ce qu’il faut ajouter pour que ça marche :
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">Depuis la version 3.7, WP Rocket applique désormais le paramètre display swap en natif sur toutes les polices de caractère.
Les partages sociaux
Il arrive souvent que les thèmes et les plugins de partages sociaux fassent appel aux scripts mis à disposition par les réseaux sociaux (Facebook, Twitter, Pinterest, Linkedin…). Bien qu’ils offrent une expérience utilisateur intéressante, ces solutions nécessitent l’appel de plusieurs scripts externes, ce qui ralentit considérablement les temps de chargement (parfois de 2-3 secondes).
La solution est tout simple : mettre en place des boutons de partage en dur, avec du CSS et une petite icône correspondant au réseau social. Il n’y a pas plus léger et au final, le rendu est quasi identique pour l’utilisateur.
Plugins de partages à éviter : AddThis, ShareThis, JetPack, Really Simple Share, Async Social, Sharebar, Floating Social Bar, WP Social Bookmarking Light, Ultimate Social Media & Share
Plugins de partages à privilégier :
- NovaShare (ce que j’utilise sur Web & SEO)
- Monarch
- SocialSnap
- MashShare
- Sassy Social Share
- Social Share Buttons
DNS Prefetching
Le préchargement des requêtes DNS (DNS Prefetching) va te permettre d’accélérer le temps de chargement de ressources tierces, telles que ton CDN, des fonts Google, des vidéos YouTube, Google Tag Manager, Analytics, Maps, reCaptcha, l’API de Twitter, etc.
Comme avec les fonts, tu vas pouvoir remonter les différentes ressources externes de ton site en consultant l’onglet Waterfall sur GTMetrix.
Tu pourras renseigner les URL à précharger tout simplement à l’aide de WP Rocket ou Perfmatters :
Si tu souhaites en apprendre plus sur le sujet, je t’invite à consulter ce guide (en anglais) sur Preload, Prefetch, Preconnect par WP Rocket.
Perfmatters
Pour conclure cet article en beauté, je te propose de découvrir le plugin de performance Perfmatters. Si tu es resté(e) attentif-ve, tu as pu remarqué que je l’ai cité à plusieurs reprises dans cet article 😉
Développé par les frères Brian et Brett Jackson, Perfmatters se présente comme un excellent complément à tous les plugins de cache (même WP Rocket). C’est un plugin premium qui permet d’optimiser la vitesse de chargement de son site, mais aussi sa sécurité.
En quelques clics, tu vas pouvoir :
- Optimiser l’appel de scripts (Preload, Prefetch, Preconnect) et de Google Analytics
- Configurer un CDN
- Désactiver les commentaires, les URLs des commentaires, les emojis, les embeds, XML-RPC, API REST, Google Fonts, Dashicons, Google Maps…
- Supprimer les chaînes de requête, jQuery Migrate
- Limiter l’exploitation de l’API Heartbeat, les révisions
- Ajouter du code dans le Header / Footer
- Changer l’URL de connexion à l’admin
- Masquer la version de WP
Et cerise sur le gâteau, tu vas pouvoir sélectionner avec précision les plugins, les scripts et les styles qui seront activés ou non, sur telle ou telle partie du site.
Par exemple, tu pourras faire appel à ton plugin de contact et à Google reCaptcha uniquement sur ta page de contact (au lieu de tout le site).
Pour nous simplifier la vie, Perfmatters a mis en place une fonction permettant d’appliquer la désactivation d’un plugin/script sur l’ensemble du site / des pages / des articles, tout en ayant la faculté d’appliquer des exceptions.
Si tu tiens à être au top de la performance sur tes sites WordPress les plus importants, je te recommande chaudement d’appliquer ces optimisations et d’installer WP Rocket, Perfmatters, ainsi qu’un CDN comme KeyCDN.
-20%10$ offertsOn arrive au terme de cet article sur la performance WordPress ! Si tu as tes propres recommandations, astuces et plugins à partager, tu peux réagir en commentaire de cet article ; et s’il t’a plu, tu peux le partager sur ton réseau social préféré 🙂 Merci par avance !
Tu peux poursuivre ta lecture sur WordPress et la performance web :
- Les meilleurs hébergeurs WordPress & WooCommerce
- Comment bien choisir son CDN en 2024 ?
- Comment j’ai diminué le temps de chargement de Web & SEO de 58%
- Test Imagify : Compresser la taille de ses images
- Avis WP Rocket : Transformer son WordPress en fusée
Tu peux t’abonner à la newsletter pour ne rien manquer en cliquant ici et tu peux me suivre sur Telegram et Twitter où je suis régulièrement actif.
 |
 |
Tu n’utilises plus Brotli ? 😀 Parce qu’EasyHoster est aussi compatible Brotli grâce à une pertinente suggestion d’un expert en sites de niche 🙂
Super cet article. Il va envoyer du lourd ! 😀 (j’ai même envie de dire… merci 😀 Merci !)
Très bien vu ! Merci poto pour ton rappel et pour ton feedback, c’est super sympa 😀
Je viens tout juste d’ajouter une nouvelle section à l’article dédiée à la compression Gzip & Brotli.
Je viens de m’apercevoir que j’avais oublié de développer la partie sur les formats d’images, dont notamment le WebP, qui est encore peu exploité. C’est maintenant chose faite (par ici) 🙂
Bonjour,
Merci pour cet article.
Tu dis que OVH n’a que 3 points PoP dans le monde pour son CDN.
Est-ce que ces informations sont à jour ? Car voici un lien qui parle de 33 points. Merci pour ton retour.
https://www.silicon.fr/ovh-pret-a-commercialise-son-cdn-86016.html
Hello Philippe,
Merci pour ton retour ! La dernière fois que j’ai vérifié sur leur site, ils mettaient en avant avoir seulement 3 serveurs PoP.
Je viens de revérifier et je ne trouve aucun endroit où ils parlent du nombre de serveurs PoP mis à disposition et leur localisation. C’est complétement opaque et pas crédible !