Comment le temps de chargement de Web & SEO a chuté de 58%

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 :

Akismet Anti-Spam All in One SEO Pack BBQ Pro Better Click To Tweet Classic Editor Comment Redirect by Yoast Contact Form 7 Cookie Notice Defender Easy Pricing Tables Lite FV Gravatar Cache Genesis Simple Edits Monarch Optimus

Popup Maker Pretty Links Really Simple SSL Redirection Schema Search Exclude Social Locker Table of Contents Plus WebP Express WP Featherlight WP GDPR Compliance WP Rocket WP Show Posts

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.

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.

Speed 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 !