Je n’ai jamais été complétement satisfait de la vitesse de chargement du blog Web & SEO. Pour remédier à ce problème, j’ai toujours opté pour une stratégie simple et rapide à mettre en place : installer un plugin de cache.
Pour bénéficier des meilleurs résultats possibles, j’ai opté pour WP Rocket dès son lancement en 2013, et j’en ai toujours été très satisfait. L’avantage avec WP Rocket, c’est qu’il va au delà de sa fonction primaire de cache, il propose de nombreuses fonctionnalités de performance complémentaires et il est très simple à configurer.
Voici ce qu’il permet de faire en quelques screenshots :
Mais concrètement en terme de résultats, WP Rocket apporte t-il une différence notable en terme de chargement ? Est-ce satisfaisant ? Quelles autres actions peuvent être menées pour améliorer ces temps de chargement ?
Je vais répondre à ces questions dans cet article et je crois que les résultats vont te frapper. J’ai mené systématiquement plusieurs tests sur GTMetrix, Pingdom, PageSpeed InSights et WebPageTest, afin d’avoir les résultats les plus justes possibles.
La configuration de Web & SEO
Avant d’attaquer les résultats des tests, je me dois de te présenter la configuration du blog :
Thème : Maker Pro by Studio Press
Plugins :
|
|
Comme tu peux le constater, j’utilise un joli paquet de plugins (27) dont je peux difficilement me séparer 😉
- Pour la sécurité, j’utilise : Akismet + BBQ Pro + Defender
- Pour la performance : WP Rocket + FV Gravatar Cache + Optimus HQ + WebP Express
- Pour être conforme à la loi : Cookie Notice + WP GDPR Compliance
- Pour le référencement : All in One SEO Pack + Schema
- Pour la conversion : Popup Maker + Easy Pricing Tables Lite + Social Locker + Pretty Links
- Pour la navigation : WP Featherlight + Search Exclude + WP Show Posts + TOC+
- Pour les partages sociaux : Monarch
- Et les petits + : Classic Editor + Comment Redirect + Genesis Simple Edits + Redirection
Je les ai sélectionné avec attention, pour éviter d’avoir un plugin usine à gaz qui ralentirait encore plus les temps de chargement.
Toutes les images du site ont déjà été optimisées avec reSmush.it, puis Optimus HQ. Enfin, je les ai converti au format WebP avec le plugin WebP Express, l’extension d’image la plus optimale et rapide à charger sur le web.
Temps de chargement sans plugin de cache
J’ai réalisé un premier essai pour analyser les performances de Web & SEO sans plugin de cache. Pour chaque site d’analyse, j’ai réalisé 3 tests, afin d’avoir les données les plus précises possibles.
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Comme tu peux l’observer, c’est pas joli joli : 3,297 secondes de chargement sur ordi et 8,6 secondes sur mobile. Il va falloir optimiser tout ça !
Temps de chargement avec WP Rocket
Pour commencer à passer aux choses sérieuses, on va activer le plugin WP Rocket.
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Sur ordi, on gagne 0,5 seconde de chargement (-17.319 %) et sur mobile on gagne 1,3 seconde (-14.733 %), c’est mieux mais rien d’extravagant.
-20%Temps de chargement avec WP Rocket + KeyCDN
Pour dynamiser ces temps de chargement, on va mettre en place un CDN (Content Delivery Network). Le principe du CDN est simple : il s’agit d’un réseau de serveurs situés aux quatre coins du globe et conçus pour héberger et délivrer expressément une copie de son site.
Pour t’illustrer l’intérêt d’un CDN, voici un exemple concret : les serveurs de mon hébergeur (Monarobase) sont localisés en France, de ce fait les habitants de France Métropolitaine peuvent bénéficier d’un chargement optimal. Plus on s’éloigne de ces serveurs, plus le temps de chargement peut être élevé. Sachant que 35% de mon audience se trouve en dehors de la France et assez bien répartie sur le globe, il vaut mieux mettre en place un CDN (même pour moi qui suis en Thaïlande).
Avec un CDN, mon site pourra être délivré depuis une multitude de datas centers à travers le Monde :
Après de multiples recherches et analyses, j’ai décidé d’opter pour KeyCDN. Si cette solution t’intéresse, tu peux passer par ce lien (affilié) et bénéficier de 10$ de crédits offerts 😉
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Pour le coup, je n’ai observé aucun changement positif en ce qui concerne le temps de chargement sur ordi, cependant on gagne quand même 3,2 secondes sur mobile, soit une diminution notable de -38%.
Speed Test avec Cache Enabler + KeyCDN
Etant donné que KeyCDN est aussi l’éditeur d’un plugin de cache gratuit du nom de Cache Enabler, j’étais curieux de voir sa performance en comparaison avec WP Rocket.
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Pour le coup, le combo KeyCDN + Cache Enabler est moins performant que WP Rocket tout seul, que ce soit sur Desktop ou sur mobile. Par rapport à la config initiale (pas de plugin de cache), le site gagne seulement 7,916 % en temps de chargement sur ordi et 9,302 % sur mobile.
10$ offertsSpeed Test avec WP Rocket + KeyCDN + MAJ #1
Pour le moment, mon meilleur combo est WP Rocket + KeyCDN, mais je n’en suis pas encore complétement satisfait. Un temps de chargement de 3,329 secondes sur PC et 5,333 secondes sur mobile est loin d’être exceptionnel.
Je décide donc d’analyser les éléments qui ralentissent concrètement mon site (via l’onglet Waterfall sur GTMetrix) et je remarque deux choses : les Google Fonts appelées par mon thème + le plugin Social Warfare qui fait appel à des fonts externes.
Les Fonts de Google sont sympas, mais je préfère y renoncer, la vitesse de chargement prime. Dans le fichier functions.php de mon thème enfant, j’annule l’appel des google fonts en les passant en commentaires (placer // au début de la ligne).
Puis, j’ajoute cette fonction qui va empêcher de charger les Google Fonts appelées par mon framework Genesis :add_action( 'wp_print_styles', 'tn_dequeue_google_fonts_style' );
function tn_dequeue_google_fonts_style() {
wp_dequeue_style( 'genesis-sample-fonts' );
}
Pour gagner en performance, je passe de Google Fonts à System Fonts. Voici le nouveau code CSS que j’utilise :
body {
font-family:-apple-system, system-ui, BlinkMacSystemFont, "Roboto Condensed", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1, h2, h3, h4, h5, h6, .entry-title {
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 », utilisée sur iOS, macOS, tvOS et watchOS ; Segoe UI est la police de caractère de Microsoft Windows ; et enfin Roboto est la police utilisée sur Android.
Si aucune de ces polices ne peut être chargée par le navigateur, il essaiera ensuite de faire appel à Helvetica, Arial voire sans-serif, la police par défaut.
En ce qui concerne Social Warfare, j’ai cherché une solution propre pour empêcher l’appel de fonts externes, mais je n’y suis pas parvenu. Du coup changement de plan : j’ai fait ma prospection de plugins de partages sociaux attractifs et rapides à charger et j’ai finalement retenu Monarch, développé par la team ElegantThemes.
Voici les résultats de ces quelques changements :
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Il y a clairement du mieux et je n’en attendais pas tant ! On gagne 0,749 seconde sur Desktop (-22%) et surtout 4,1 secondes (-47%) sur Mobile !
Speed Test avec WP Rocket + KeyCDN + MAJ #2
Ce n’est pas encore parfait et je sais qu’on peut faire mieux ! Alors je suis retourné dans l’onglet Waterfall de GTMetrix et j’ai trouvé que je pouvais optimiser l’appel de plusieurs scripts et plugins.
Commençons par les plugins où il y a du ménage à faire ! Comme tu le sais, tous les plugins ne sont pas nécessaires sur l’ensemble du site. Alors pourquoi ne pas les charger seulement quand on en a besoin ?
Voici le script que j’utilise sur mon site, tu peux le reprendre et l’adapter à ta sauce en fonction de ce que tu utilises et des pages concernées. J’ai mis des commentaires afin que tu vois à quoi ça corresponde.
// Désactive Contact Form 7 + Google reCaptcha de tout le site sauf 3 pages
add_action( 'wp_print_scripts', 'my_deregister_contact', 100 );
function my_deregister_contact() {
if ( !is_page( array( 10, 801, 962 ) ) ) {
wp_deregister_script( 'contact-form-7' );
wp_dequeue_script('google-recaptcha');
wp_deregister_style( 'contact-form-7' );
wp_dequeue_style( 'google-recaptcha' );
}
}
// Désactive WP Show Posts de tout le site sauf la page d'accueil
add_action( 'wp_print_styles', 'my_deregister_wpshowposts', 100 );
function my_deregister_wpshowposts() {
if ( !is_front_page() ) {
wp_deregister_script( 'wp-show-posts' );
wp_deregister_style( 'wp-show-posts' );
}
}
// Désactive Social Locker de toutes les pages
add_action( 'wp_print_scripts', 'my_deregister_sociallocker', 100 );
function my_deregister_sociallocker() {
if ( !is_single() ) {
wp_deregister_script( 'sociallocker-next-premium' );
wp_deregister_style( 'sociallocker-next-premium' );
}
}
// Désactive WP Featherlight de toutes les pages
add_action( 'wp_print_scripts', 'my_deregister_wpftl', 100 );
function my_deregister_wpftl() {
if ( !is_single() ) {
wp_deregister_script( 'wp-featherlight' );
wp_deregister_style( 'wp-featherlight' );
}
}
// Désactive Monarch de toutes les pages
add_action( 'wp_print_scripts', 'my_deregister_monarch', 100 );
function my_deregister_monarch() {
if ( !is_single() ) {
wp_deregister_script( 'monarch' );
wp_deregister_style( 'monarch' );
}
}
// Désactive Easy Pricing Table de tout le site sauf 2 pages
add_action( 'wp_print_scripts', 'my_deregister_ept', 100 );
function my_deregister_ept() {
if ( !is_page(8994) OR !is_single(9083) ) {
wp_deregister_script( 'easy-pricing-table' );
wp_deregister_style( 'easy-pricing-table' );
}
}
Voila une bonne chose de faite pour les plugins !
Si tu n’es pas à l’aise avec cette partie de code qu’il faut adapter à tes besoins, tu peux utiliser l’excellent plugin Perfmatters qui fait parfaitement le job :
Lire mon avis complet sur Perfmatters
Maintenant attaquons les scripts…
Je me suis aperçu que mon site faisait appel à deux versions du script jQuery différentes, alors qu’un seul appel suffit. En plus du fichier jQuery principal, mon thème nécessite également un appel des scripts jQuery UI, SuperFish et Fitvids. Pour délivrer ces fichiers de la manière la plus rapide possible, j’ai décidé d’appeler ces scripts en externe plutôt qu’en local.
Voici ce que ça donne (toujours dans le fichier functions.php) ://* Deregister old jQuery versions (local)
wp_dequeue_script('jquery');
wp_deregister_script('jquery');
wp_dequeue_script('jquery-ui');
wp_deregister_script('jquery-ui');
//* Register and enqueue the new jQuery versions (Google CDN)
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', false, null);
wp_enqueue_script( 'jquery');
wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js', false, null);
wp_enqueue_script( 'jquery-ui');
//* Disable the superfish script
wp_deregister_script( 'superfish' );
//* Register and enqueue the new superfish script (Cloudflare CDN)
wp_register_script( 'superfish', 'https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.3/superfish.min.js', false, null);
wp_enqueue_script( 'superfish');
//* wp_enqueue_script( 'maker-fitvids', get_stylesheet_directory_uri() . '/js/jquery.fitvids.js', array(), CHILD_THEME_VERSION );
//* Enqueue fitvids JS library from CDN for responsive video embeds
wp_enqueue_script( 'fitvids', 'https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js', array(), CHILD_THEME_VERSION );
Pour jQuery & jQuery UI, je fais appel au CDN de Google et pour SuperFish et Fitvids, au CDN de CloudFlare ; ce qui permet un temps de chargement encore plus rapide, peu importe notre localisation.
Enfin, dernière petite opti : j’ai activé le DNS Prefetching pour l’API de Google et Google Analytics. Cela permet de charger plus rapidement les scripts jQuery, jQuery UI et Analytics.
Pour ce faire, j’ai juste ajouté ces deux lignes dans l’en-tête de mon site (avant </head>) :<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
Résultats
GTMetrix
Pingdom
PageSpeed InSights (Mobile)
WebPageTest
Temps de chargement moyen sur Desktop & Mobile
Là je crois qu’on est pas mal 🙂 On gagne presque 2 secondes de chargement sur ordi (-57 %) et 5 secondes sur mobile (-59%) !
Cela montre bien qu’un plugin de performance ne peut pas faire tout le travail, et qu’il faut mettre la main à la pâte pour atteindre de meilleurs résultats.
Voici maintenant le tableau comparatif des évolutions et des performances :
On arrive au terme de cette article orienté optimisation et performance, j’espère qu’il t’aura plu et que tu y auras trouver des pistes pour améliorer un peu plus les temps de chargement de tes sites WordPress. Si c’est le cas, ne manque pas de le partager sur tes réseaux et laisse un commentaire si tu as une question ou une recommandation !
Gros boulot sur cet article, super instructif. En plus j’ai découvert de nouveaux plug-ins qu’il me tarde de tester.
Au final, le meilleur moyen de s’éviter toutes ces optimisations qui parfois sont techniques, c’est de prendre un thème qui bombarde de base, et de ne pas trop le charger en plug-ins ^^
Merci et chapeau Max !
Salut Adrien, merci beaucoup pour ton retour ! C’est vrai que le choix du thème est primordial dès le lancement de son site, je recommande à cet effet les thèmes GeneratePress et StudioPress (Genesis) qui sont très légers et flexibles. Pour les plugins, je t’avouerais que j’ai du mal à en avoir moins de 10 😉
Super article comme d’habitude.
C’était justement ma problématique du moment, je m’y remets dès maintenant.
Sur le CDN j’ai une question, j’ai bien compris que ça accélère le chargement, mais on m’a aussi dit que Google favorise le référencement des sites hébergés en France.
Est-ce que le fait que ton site charge depuis le UK ou l’allemagne n’est pas problématique pour le SEO ?
Merci Amin 🙂 Il tombe à pic !
Le CDN ne pose pas de problème pour Google, au contraire 😉 En fait, ton site sera toujours hébergé en France, mais il sera accessible depuis différents serveurs en fonction de la localisation du visiteur.
Par exemple pour moi qui suis à Bangkok, j’aurais accès aux contenus d’Otaket depuis le serveur de Singapour. Si tu te rends sur ton site depuis la France, tu passeras par le serveur français. Et si c’est John Mueller, ce sera par les serveurs de San Francisco.
Ce qui compte le plus pour Google entre la localisation de ton hébergement et le temps de chargement, ça va être la vitesse qui va primer, et de loin 😉
Bon article !
Je peux t’aider à supprimer un plugin : si tu remplaces le plugin All in one seo par le plugin Rank Math, tu pourras également supprimer le plugin Redirection car le plugin Rank Math intègre les redirections.
Je reste à ta disposition par mail si besoin,
Salut Alexis, Merci pour ton retour et pour la reco 🙂 J’ai d’ailleurs entendu beaucoup de bien de ce plugin SEO !
Yes, c’est vraiment un excellent Plug in qui combine de nombreuses fonctions (comme la gestion des redirections par exemple). Il peut tout à fait remplacer Yoast SEO.
Top 🙂
Je t’en prie !
Excellent article, que je vais lire un peu plus en profondeur pour effectuer mes tests.
Merci Jean ! Tu me diras l’évolution de tes résultats 😉
Merci beaucoup pour cet Article !
Honnêtement tu as pris le temps de nous expliquer en détail chaque test que tu as fait. En revanche j’avoue que d’un point de vue de novice (le mien), dès qu’on commence à aller toucher le code des pages de mon site, je prends peur et j’en reste là 🙂
Mais je pense qu’en commençant par un effort d’optimisation de mes images + appliquer le format WebP devrait déjà m’aider 😉
Merci encore à toi pour ton travail et tes conseils
Merci pour ton retour, c’est gentil !
Oui c’est déjà un bon plus d’optimiser ses images.
Le gros des optimisations peut aujourd’hui être fait très simplement grâce à deux plugins comme WP Rocket et Perfmatters 😉
Super article très instructif et méthodique
Comme dirait l’autre : YAPLUKA
Bonjour et merci pour ton très bon post. J’utilise le plug in « Contact Form 7 Captcha ».
Etant, novice, je me demande comment trouver le nom exact de cette extension (et d’une extension en général) à placer dans mon script pour la fonction deregister.
Merci à toi !
Salut Christophe, merci pour ton retour !
Etant donné que le plugin Contact Form 7 Captcha fait appel au script reCaptcha de Google, voici ce qu’il faut que tu mettes en place dans ton fichier functions.php :
// Désactive Google ReCaptcha partout sur ton site, sauf sur la page Contactadd_action('wp_print_scripts', function () {
// C'est ici que tu peux personnaliser les pages où activer reCaptcha
if ( !is_page( 'contact' ) ){
wp_dequeue_script( 'google-recaptcha' );
}
});
Bonjour,
Je déconseillerai Contact Form 7 Captcha, éviter au maximum, les produits de Google.
Si vous utilisez Chrome, utiliser la fonction Inspecter, vous verrez les erreurs que cela provoque.
A la place, prendre le plugin Honeypot for Contact Form 7, bien mieux.
Puis virer Akismet, qui sature vos bases de données, qui signale des faux positifs, etc.. Une réputation surfaite pour ce plugin, qui attirent plus les spams qu’autre chose, normal, ce plugin est très connu des spammers.
J’ai fait l’expérience, sur un site, une vingtaine de spams par jour avec Askimet, j’ai viré le plugin et mis à la place, le plugin Antispam Bee. J’ai laissé la configuration d’origine plus dans le cadre « Supprimer les commentaires selon détection », j’ai coché : Honeypot, Empty Data, BBcode, Regular Expression.
Et depuis 0 spam !!
Petite parenthèse, je reviens sur gtmetrix, quand je teste le site d’une amie, à la ligne « Defer parsing of JavaScript », j’ai toujours cet url
https://lepassedarnouville.fr/?1579364959=1 (2.8KiB of inline JavaScript)
Je ne retrouve pas ce code ?1579364959=1 dans le code source de la page d’accueil, je ne comprends d’où sort cet url, avez-vous une explication ?
Merci
ps: depuis le RGPD, une case cochée, (opt-in) ne doit pas être coché par défaut, car ce n’est pas un consentement valable.
Comme le bandeau de cookies, qui doit avoir les boutons j’accepte et je refuse, car on ne peut pas forcer le visiteur à accepter les cookies.
https://www.cnil.fr/fr/cnil-direct/question/cookies-quelles-obligations
Merci Hervé pour ton retour très pertinent ! Concernant ta question, cela ne me dit rien… ça vient peut-être du thème ?
Bonjour,
Merci de votre réponse, le thème est Spacious et je connais une autre personne qui utilise ce thème, que j’ai testé sur gtmetrix, elle n’a pas cet url.
Mystère ??
En effet, cela pourrait alors provenir d’un plugin, mais… lequel ?
Bonjour,
J’y ai pensé aussi, mais je ne vois pas le quel.
AddToAny Share Buttons (1.7.39)
Antispam Bee (2.9.1)
BackWPup (3.7.0)
Broken Link Checker (1.11.10)
Classic Editor (1.5)
Contact Form 7 (5.1.6)
Cookie Notice (1.2.50)
EWWW Image Optimizer (5.1.4)
FooBox Image Lightbox (2.7.8)
Forum_wordpress_fr (4.2)
Google Analytics for WordPress by MonsterInsights (7.10.3)
Google XML Sitemaps (4.1.0)
Honeypot for Contact Form 7 (1.14.1)
Post Views Counter (1.3.1)
Simple Sitemap (3.4)
Subscribe to Comments Reloaded (191217
WP-Optimize – Clean, Compress, Cache (3.0.15)
WP-PageNavi (2.93.1)
WP Fastest Cache (0.9.0.2)
Yet Another Related Posts Plugin (5.1.2)
Yoast SEO (12.8.1)
Bonjour, ton article est très interessant. Par contre, l’iutilisation de Imagify ne pourrait -il pas remplacer Webp express et reSmush.it ?
Merci pour ton avis,
Cordialement
Bonjour Sandy,
Oui bien sûr, Imagify peut remplacer à la fois WebP Express et reSmush.it.
En fin de compte, Imagify doit être légèrement plus performant en terme d’optimisation, mais il est payant.
Bonjour et merci pour votre article ! Je ne savais pas que c’était possible pour l’appel de Google. Je vais essayer car c’est un des facteurs que pagespeed me recommande d’optimiser (enfin quand lighthouse n’est pas bloqué par une erreur 403 )
Je ne sais pas si vous auriez une solution. Je cherche à ne pas charger le js d’un plugin sur la version mobile. J’utilise wp assetcleanup pour ça mais juste avec le plugin que je cherche à décharger, je n’ai pas la possibilité de le faire. Alors j’ai réussi à ne pas charger le css mais je ne trouve pas de code qui fonctionne pour ne pas charger les js sur mobile. Vous auriez une idée ? J’ai essayé un code de fonction dans un fichier php mis dans le dossier mu plugin mais ça ne l’a pas fait, les js étaient toujours présents sur la version mobile. La fonction demandait de ne pas charger leplugin.php.
Si vous avez une idée, mille milliers de merci !
Hello Julia,
Merci pour ton retour 🙂
Tu peux utiliser la fonction wp_is_mobile() pour faire appel ou décharger un script sur mobile : https://developer.wordpress.org/reference/functions/wp_is_mobile/
L’inverse est possible (uniquement desktop) en utilisant !wp_is_mobile().
Tout ça peut se faire directement dans le fichier functions.php.
Merci, mon site locoprive.fr atteint désormais le score de 100/100 sur PageSpeed Insights en version mobile. Incroyable !