Optimisation de blog avec WP Rocket et GTMetrix

Optimisation de blog WordPress avec WP Rocket et GTMetrix

Je vous ai présenté le plugin WP Rocket. Voyons maintenant comment il réagit avec GTMetrix et comment encore améliorer les résultats, comme c’est maintenant une tradition sur ce blog.

Désactivation de W3 Total Cache

Résultat GTMetrix avant l'optimisation de WordPress avec WP Rocket
Résultat GTMetrix avec W3 Total Cache
Avant de mettre en place WP Rocket, il me semblait logique de désactiver le plugin W3 Total Cache.
Pour cela, j’ai préféré désactiver tous les modules avant de désactiver l’extension elle-même : dans Performances/General settings, j’ai décoché toutes les cases ‘Enable’, ensuite j’ai désactivé le plugin.

Avec W3 Total Cache, le score sur GTMetrix était de 93%.

Le résultat : on passe de 93% à 78%.

Installation

Immédiatement après avoir installé WP Rocket, comme c’est expliqué clairement dans ce tutoriel vidéo, les résultats se font ressentir.

Le résultat : on passe de 78% à 84%

Configuration

Comme je le disais dans l’article précédent, la configuration est vraiment simple, mais dès qu’une option est activée, les paramètres sont gérés de façon optimale et transparente. C’est ce qui fait que WP Rocket est si simple.

Ainsi, j’ai coché les quatres cases :

  • Activer Lazy Load
  • Optimisation du code HTML
  • Optimisation des fichiers CSS
  • Optimisation des fichiers JS

Le résultat : on passe de 84% à 86%

Activation de gzip

Contrairement à W3 Total Cache, WP Rocket considère que l’activation de gzip est faite directement sur le serveur Web.
A raison : pratiquement tous les hébergements mutualisés activent cette option.

Ce n’est toutefois pas mon cas, j’ai besoin de ne pas l’activer globalement mais au cas par cas. Ainsi, j’ai activé la compression gzip dans le fichier .htaccess. Pour cela, il suffit d’ajouter ces lignes au fichier .htaccess à la racine du site :

#BEGIN personnalisation
# enable gzip
SetOutputFilter DEFLATE
# END personnalisation

Le résultat : on passe de 86% à 89%

Remplacement de @import dans le thème enfant

Pour l’instant, WP Rocket ne permet pas de remplacer les @import dans les feuilles de styles par le contenu du fichier CSS référencé, notamment dans les cadre d’un thème enfant.

Pour rappel, le codex WordPress préconise l’utilisation de la fonction @import pour permettre aux thèmes enfants d’inclure facilement la feuille de style du thème parent.

Mais l’@import empêche la minification et provoque une requête HTTP supplémentaire.

Pour encore gagner en optimisation, il est nécessaire de supprimer l’appel à @import et le remplacer par un appel direct au style.css du thème parent par les fonctions de WordPress.

La première chose à faire est de supprimer la ligne comportant @import dans le fichier style.css de votre thème enfant.

Ensuite, deux méthodes sont possibles, suivant le comportement de votre thème, et surtout la manière dont il a été construit.

Avec la plupart des thèmes

Si votre thème déclare la feuille de style par l’intermédiaire des fonctions WordPress (comme TwentyTwelve par exemple), il suffit de déclarer la feuille de style du thème parent avant celle du thème enfant. Pour cela, éditez le fichier functions.php du thème enfant, et ajoutez :

// Ajoute le thème parent pour éviter l'utilisation de @import en CSS
function enqueueParentThemeCss() {
if (!is_admin())
wp_enqueue_style("parentTheme", get_bloginfo("template_directory") . "/style.css");
}
add_action("init", "enqueueParentThemeCss", 0);

Avec certains thèmes

Si votre thème ajoute la feuille de style directement dans le code HTML du fichier header.php, copiez le fichier header.php dans le répertoire du thème enfant si ce n’est pas déjà fait, et ajoutez cette ligne juste avant celle qui correspond au thème. Par exemple :

<link id="parentTheme-css" rel="stylesheet" type="text/css" media="all" href="<?php echo get_bloginfo("template_directory") . "/style.css"; ?>" />

Juste avant :

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Dans les deux cas, la feuille de style est reconnue et est minifiée et combinée par la même occasion.

Le résultat : on passe de 89% à 90%

Résultat GTMetrix après l'optimisation de WordPress avec WP Rocket
Résultat GTMetrix après l’optimisation avec WP Rocket

Les optimisations à conserver

Dans les articles sur W3 Total Cache, nous avions vu quelques modifications à effectuer pour améliorer les performances du site. Certaines sont toujours d’actualité.

Sur le premier article :

  • L’activation du KeepAlive si vous gérez votre propre serveur
  • L’optimisation des images avec Smush.it, qui permet un gain conséquent facilement
  • La génération d’un sprite contenant toutes les icônes, mais cette tâche est longue est fastidieuse pour un gain assez faible

Sur le second article :

  • Rapatriement des Google fonts localement
  • La suppression de la définition de l’encodage des caractères dans l’en-tête HTML

Le mot de la fin

Alors je sais ce que vous allez me dire, le score sur GTMetrix était de 93% avec W3 Total Cache, et on arrive à 90% avec WP Rocket.
Et je ne peux qu’être d’accord, à un détail près : avec W3 Total Cache, je m’étais fait une configuration aux petits oignons, en passant du temps pour comprendre pourquoi tel paramètre améliorait le temps de chargement ou comment faire en sorte que tel autre ne fasse pas planter lamentablement mon blog.

Avec WP Rocket, j’ai installé, activé les options, amélioré un peu, et voilà, 90%. Et les améliorations qui vont arriver, comme par exemple le cache des fichiers minifiés sans point d’interrogation dans l’URL, vont permettre de rattraper ces pourcents sans investissement supplémentaire de ma part.

En outre, je n’ai pas encore activé l’option qui permet le chargement différé des fichiers JavaScript, comme c’est préconisé par GTMetrix, et dont j’attends le tutoriel avec impatience (poke Jonathan).

Aussi, je fais confiance à l’équipe de l’extension pour nous développer d’autres améliorations qui vont même faire exploser le score de 93%.

Et surtout, n’oublions pas que le but premier de WP Rocket n’est pas d’améliorer le score de GTMetrix, même s’il y contribue grandement, mais de réduire le temps de chargement de la page. Et là on passe de plus de 5 secondes avec W3 Total Cache à un peu plus d’une seconde avec WP Rocket. Mission accomplie !

Cet article vous a été utile ? Partage it !

9 réflexions au sujet de « Optimisation de blog avec WP Rocket et GTMetrix »

  1. « N’oublions pas que le but premier de WP Rocket n’est pas d’améliorer le score de GTMetrix »
    Nous travaillons sur un outil qui va plus loin, il prend notamment en compte le temps de chargement, le poids de la page ou le nombre de requêtes HTTP dans ses critères de notation. Nous intégrons peu à peu des conseils spécifiques aux technologies détectées (Apache, Worpress à venir…). Nous sommes en bêta et serions heureux de recevoir vos avis : http://www.dareboost.com

    1. Bonjour DareBoost,
      Je suis intrigué par ton service, je vais essayer.
      Par contre, pour l’instant, le principe ressemble à celui de GTMetrix avec la validation W3C en plus ?

      Je n’ai pas bien compris le rapport avec WP Rocket, et donc comment un service de diagnostic peut aller plus loin qu’un plugin d’optimisation.

      David

  2. Bonjour David,

    Merci pour ton retour. Quand je parle d’aller plus loin, c’est sur le diagnostic des résultats obtenus suite à l’installation et la configuration de WPRocket.
    En effet GTMetrix ne prend pas en compte les metrics de performance, mais uniquement les résultats des API Yslow et Google Page Speed.
    DareBoost offre effectivement la validation W3C, et nous avons dans nos conseils plusieurs résultats qui viennent de notre base de connaissance interne, que nous allons compléter pour intégrer WordPress notamment.
    Typiquement conseiller WP Rocket pourrait être intéressant (à condition que nous soyons capable de détecter qu’il n’est pas utilisé)

    J’en profite pour revenir sur ta remarque sur les sprites :
    « La génération d’un sprite contenant toutes les icônes, mais cette tâche est longue est fastidieuse pour un gain assez faible »
    Je te rejoins pour le gain en terme de poids, par contre en terme de nombre de requêtes, c’est parfois loin d’être négligeable. Et si les images sont accédées sur le même domaine que les autres ressources, l’impact se ressent rapidement.
    J’utilise personnellement cet outil pour générer rapidement une feuille de styles : http://draeton.github.io/stitches, mais sans passer par la librairie JS offert.

    1. Bonjour Damien de DareBoost 🙂
      Merci pour ton conseil à propos des sprites et de Stitches, c’est clair que la génération de sprites est simplifiée avec cette librairie.

      Je vais me pencher sérieusement sur ton service. Tu sais (en gros) quand les préconisations propres à WordPress seront disponibles ?

      David

  3. Tes retours seront très appréciés n’hésite pas.

    WordPress fait parti des technologies qui sont dans nos priorités, puisque très largement utilisé.
    On espère avoir intégré ça d’ici 1 mois, mais nous avons un travail de recherche à faire en amont pour être réellement pertinent.

    Si cela t’intéresse, nous avons pour but d’exposer ce que nous collections sur les différentes technos sur notre blog (www.upgradetheweb.com), en espérant à terme forger une communauté sur les différents sujet que nous traitons, et idéalement avoir des rédacteurs spécialisés dans chaque techno web. Ton expertise serait évidemment la bienvenue.

    1. Oui, pourquoi pas 🙂

      J’ai bookmarké ton blog, j’ai vu que nous sommes presque voisins (à une autoroute près).

      David

  4. Effectivement, à une autoroute près, c’est juste à côté 😉
    Je te préviens quand nous commencerons à ajouter de l’intelligence sur Worpress dans notre outil. D’ici là tu l’auras compris, si tu en as le temps et l’envie, nous serons très heureux d’accueillir un billet sur ton expérience sur WordPress sur notre blog !

  5. Bonjour David,
    Tout d’abord merci pour les tutos si bien expliqués. Mon site comporte beaucoup de photos etc… Mon thème est Modernize de chez themeforest. Alors j’ai déjà intégré tes conseils. Concernant le thème enfant, moi j’ai ceci :
    // get the path for the file ( to support child theme )
    if( !function_exists(‘get_root_directory’) ){
    function get_root_directory( $path ){
    if( file_exists( get_stylesheet_directory() . ‘/’ . $path ) ){
    return get_stylesheet_directory() . ‘/’;
    }else{
    return SERVER_PATH . ‘/’;
    }
    }
    }
    Où dois-je mettre le code dans fonctions.php ? en dessous ou au dessus de ce charabia(pour moi) Là où le bas blesse aussi c’est dans Yslow, j’ai même suivi ces tutos
    http://admindaily.com/yslow-optimization-part-1-make-fewer-http-requests.html
    Rien n’y fait mon site est d’une lenteur incroyable.
    Aurais-tu quelques conseils à me donner, je suis preneur. Encore bravo pour le site.
    Pour info quand je tape Gtmetrix dans Google tu apparais juste derrière.
    Vincent

    1. Bonjour Vincent,
      Pour faire des modifications dans le thème enfant, tu as besoin d’un thème enfant 😉 J’ai l’impression que le code que tu as copié ne vient pas d’un thème enfant, mais du thème principal.
      J’avais fait un article sur comment les créer : http://www.partage-it.com/trois-methodes-personnaliser-code-wordpress/
      Une fois ce thème enfant créé, tu ne te poseras certainement plus la question de où copier le code (le fichier functions.inc.php sera vide).
      En plus c’est utile pour toutes les personnalisations que tu auras à faire.

      Aussi pour réduire le nombre de requêtes HTTP, tu peux aussi activer la combinaison des fichiers CSS sans trop de risque, et peut-être des fichiers JavaScript, mais quelquefois il y a des surprises.
      J’ai vu que tu utilises WP Super Cache. Cette extension propose peut-être l’option.
      Si ce n’est pas le cas tu peux t’orienter vers WP Rocket qui fait bien ce travail, ou vers cette extension, dont c’est l’unique but : http://wordpress.org/plugins/js-css-script-optimizer/

      Enfin, mon blog est aussi bien placé dans tes résultats grâce à la nouvelle recherche contextuelle de Google, comme nous nous côtoyons sur la communauté Parlons Blog. 🙂

      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.