COMMENT AMÉLIORER LE TEMPS DE CHARGEMENT DE SON BLOG ? LE GUIDE COMPLET !

Le temps de chargement, c’est mon cheval de bataille préféré ! Pourquoi ?

  • Un site trop lent est une source de frustration pour le visiteur, en particulier sur mobile.
  • 40% des gens quittent un site qui met plus de 3 secondes à se charger.
  • Un temps de chargement trop long peut pénaliser votre référencement : ce n’est pas un hasard si Google donne beaucoup d’importance au format AMP pour proposer des pages encore plus rapides sur mobile…
  • Pour un professionnel, la moindre seconde de temps de chargement supplémentaire peut entraîner une baisse de 7% des conversions.

Bref, il faut optimiser la vitesse de chargement de votre site ! Mais comment la mesurer et comment procéder pour l’améliorer quand on n’est pas développeur web ? Je vous propose des conseils très concrets à appliquer dès maintenant.

Comment tester la vitesse d’un site ?

Direction GTMetrix. Je vous conseille de créer un compte gratuit car ça vous permettra de choisir l’emplacement depuis lequel mesurer la vitesse de votre site. En effet, même si le Web est mondial et que vous pouvez sans problème consulter un site à l’autre bout du monde, la distance affecte le temps de chargement.

Une fois votre compte créé, entrez l’adresse de votre blog (avec http ou https, avec/sans www selon le choix que vous avez fait) et choisissez le serveur de test le plus proche de l’endroit où se situent la plupart de vos lecteurs, Londres dans mon cas :

TESTER LA VITESSE D’UN SITE SUR GT METRIX

Cliquez sur le bouton « Analyze » pour lancer l’analyse. Vous allez obtenir deux scores : PageSpeed, l’indice de Google ; YSlow, l’indice de Yahoo. Je vous conseille de porter une attention toute particulière à PageSpeed :

  • C’est l’indice de Google – C’est donc un élément qui sert d’étalon à Google pour décider si votre site est performant ou pas en termes de temps de chargement… et qui dit Google dit référencement. En France, Google représente toujours plus de 93% de parts de marché (j’dis ça, j’dis rien !)…
  • C’est un indice plus accessible pour les blogueurs – YSlow de Yahoo a tendance à faire des recommandations souvent bien plus techniques et obscures pour un blogueur (on vous parle de filtre AlphaImageLoader, d’éléments DOM…).

Ne vous arrêtez pas à cette note sur 100 et jetez aussi un œil au temps de chargement indiqué en secondes.

Il faut plutôt interpréter la note PageSpeed comme une note de « respect des bonnes pratiques ». Un site peut avoir une très bonne note PageSpeed et mettre quand même 10 secondes à se charger… Or, ce qui compte au final, c’est l’impression qu’aura votre visiteur.

Voilà ce qui peut vous arriver…

UN TEMPS DE CHARGEMENT TROP LONG

Quand j’ai montré ce genre de score à l’un de mes nouveaux clients, autant vous dire que ça a suscité un regard horrifié et une question : « Mais…euh… en vrai… ma page ne met pas vraiment 33 secondes à se charger, si ? » Oui et non.

Le chiffre indiqué correspond au temps de chargement complet de la page.

Autrement dit, à chaque fois que vous affichez une page web, vous allez récupérer tout un tas d’éléments : le texte de la page, les images qu’elle contient, tous les fichiers qui permettent de la mettre en forme (feuilles de style, polices d’écriture), tous les fichiers qui apportent des fonctionnalités particulières (scripts).

Certains éléments sont stockés sur votre propre site, d’autres se trouvent sur des sites externes (par exemple, vous chargez une police d’écriture depuis le site de Google)… Tout ceci prend du temps, parfois un peu trop !

Ça ne veut pas dire que la page va rester blanche pendant 33 secondes mais qu’il va falloir 33 secondes pour que l’ensemble des éléments se chargent.

Idéalement, vous devez arriver à un temps de chargement inférieur à 3 secondes.

La vraie question, c’est « comment faire ? »

MISSION : OPTIMISER SA VITESSE DE CHARGEMENT (SUR LES IMAGES LIBRES DE DROIT, LE RIDICULE NE TUE PAS)

L’importance d’avoir un bon hébergeur

Vous allez devoir mettre les mains dans le cambouis pour améliorer la vitesse de votre site mais tous vos efforts ne serviront à rien si votre hébergeur n’est pas à la hauteur.

Si vous constatez régulièrement que votre site rame alors que votre note PageSpeed est bonne, il y a peut-être un problème à ce niveau. Souvenez-vous que vous n’êtes pas marié à votre hébergeur 😉

J’ai quitté OVH pour Nuxit du jour au lendemain en 2014 justement à cause de problèmes de performance récurrents sur mon site, et d’un manque de réactivité du support technique. Si Nuxit venait à me décevoir un jour, je n’hésiterais pas non plus à changer.

Optimiser les images

Ca correspond aux lignes « Optimize images » et « Serve scaled images » sur GT Metrix.

Redimensionner une image

Il faut d’abord penser à redimensionner votre image (c’est-à-dire changer sa longueur et sa largeur) avant de la mettre en ligne sur votre blog. Si vous mettez en ligne une photo qui sort de votre appareil photo et qui fait 5000 pixels de large, peut-être qu’elle va s’afficher en petit sur votre blog mais le fichier, lui, fera toujours la même taille et ralentira donc votre page.

Vous pouvez utiliser Photoshop (menu Image > Taille de l’image). Si vous voulez un outil gratuit et plus « léger » à utiliser au quotidien, je vous conseille PhotoFiltre. Ce petit outil m’accompagne depuis des années et j’ai beau avoir Photoshop et Lightroom, je le trouve toujours aussi pratique et efficace pour les manipulations d’images « du quotidien ».

Quelle largeur utiliser ? Tout dépend de votre thème de blog. Vous pouvez faire une capture d’écran de votre blog, l’ouvrir avec Photoshop ou Photofiltre et regarder quelle largeur en pixels fait votre colonne de texte, ça vous donnera une idée de la largeur maximale à ne pas dépasser. C’est souvent moins de 1200 pixels.

Contrôler le poids de l’image

C’est la minute régime du jour… Pour faire maigrir ses images, il faut d’abord retenir qu’il existe différents formats d’images, certains étant plus adaptés au Web que d’autres : on utilise en général le JPEG pour les photos et le PNG pour les visuels type infographies, logos, etc.

Lorsque vous enregistrez votre image, au-delà du choix du format, pensez à supprimer les informations EXIF/les métadonnées (les logiciels de photos comportent souvent une option/une case à cocher à cet effet). Exemple ici avec Photofiltre :

INFORMATIONS EXIF À SUPPRIMER

Le poids idéal recommandé est autour de 100 Ko par image. C’est parfois difficile à atteindre quand on poste des photos en grand format et qu’on veut garder une qualité acceptable mais c’est bien d’avoir ce chiffre en tête afin de s’en approcher autant que possible.

Compresser l’image en ligne

Vous pouvez enfin installer sur votre blog un plugin qui va compresser les images en ligne, je vous conseille ShortPixel sur WordPress, qui est très performant.

Faites le tri dans vos plugins

Un plugin peut ralentir votre blog pour deux raisons majeures :

  • Il est mal codé : il existe de « bonnes pratiques » en termes de développement web et si elles ne sont pas respectées, le plugin peut impacter la vitesse d’une page web.
  • C’est une boule à facettes : certains plugins se vantent de pouvoir presque tout faire pour vous à part le café 😉 Parfois, ils sont tellement riches en fonctionnalités que vous vous retrouvez avec mille options dont vous n’avez pas besoin, que vous ne pouvez pas forcément désactiver.

Faites le tri ! Avez-vous vraiment besoin de toutes ces fonctionnalités en plus ou certaines choses relèvent-elles du « gadget » ? Avez-vous deux plugins qui font la même chose ? Ce plugin concerne-t-il exclusivement votre site ou est-il lié à un autre site (par exemple, si vous affichez un flux Instagram sur votre blog, le plugin va être tributaire d’Instagram pour afficher les photos, ce qui va donc exiger un temps de chargement supplémentaire).

Quand un plugin ajoute des fonctionnalités ou modifie la mise en forme de votre blog, ça correspond à des lignes de code et à des fichiers à charger… et ils peuvent ralentir vos pages. Si vous constatez un problème de lenteur, essayez de supprimer les plugins qui ne sont pas indispensables. Vous pouvez aussi lire mon article Peut-on avoir trop de plugins WordPress ?.

Utilisez la pagination et le bouton « Lire la suite »

Sur un blog, vous pouvez contrôler la pagination, c’est-à-dire le nombre d’articles qui vont s’afficher sur chaque page.

Sur Blogger, l’option se trouve dans le menu Paramètres > Articles, commentaires et partages, au niveau de la ligne « Afficher au plus X articles sur la page principale ».

PAGINATION SUR BLOGGER

Sur WordPress, elle se trouve dans le menu Réglages > Lecture, au niveau de la ligne « Les pages du site doivent afficher au plus X articles ».

PAGINATION SUR WORDPRESS

Ici, il faut trouver un équilibre :

  • Afficher suffisamment d’articles pour que le visiteur se fasse un avis sur votre contenu.
  • Afficher assez d’articles pour que les moteurs de recherche aient accès à un maximum de posts « au premier coup d’oeil » sans avoir des dizaines de contenus cachés dans les profondeurs des pages 20, 30 et plus…
  • Ne pas en afficher trop car sinon, vos pages deviennent plus lourdes.

Vous pouvez utiliser GT Metrix pour tester le poids d’une page de catégorie en faisant varier le nombre d’articles et voir si ça joue beaucoup sur le temps de chargement.

Pensez aussi à placer un lien Lire la suite sur vos contenus pour afficher seulement un extrait de l’article sur la page d’accueil ou dans les rubriques de votre blog.

Compresser et minifier ses fichiers

Je vous l’ai dit, une page web charge souvent tout un tas de fichiers. Le but du jeu est de faire en sorte qu’ils prennent le moins de place possible !

Minifier ses fichiers

Quand on écrit du code, on fait souvent en sorte d’avoir une présentation « aérée » pour s’y retrouver plus facilement. Par exemple, voilà à quoi ressemble la feuille de style de mon blog quand je travaille sur mon design :

DU CODE CSS NON MINIFIÉ

Le problème, c’est que tous ces espaces alourdissent le code. Par ailleurs, on finit souvent par avoir des éléments qui apparaissent en double : par exemple, on indique que le gros titre utilise telle police… et un peu plus tard, on précise que le sous-titre utilise lui aussi cette police d’écriture. Alors qu’on aurait très bien pu dire en même temps « Le titre et le sous-titre utilisent telle police d’écriture ».

C’est là que la « minification » entre en jeu ! On va en quelque sorte miniaturiser le code en supprimant les espaces et en regroupant les éléments qui peuvent l’être pour que le fichier soit plus léger. On peut minifier du HTML, du CSS, du JavaScript… et ça donne quelque chose comme ça :

CODE CSS MINIFIÉ

Si vous avez l’habitude de personnaliser votre thème, vous pouvez utiliser un site comme CSS Minifier ou JavaScript Minifier pour modifier vos fichiers.

On conserve en général les deux versions : la version « aérée » dont on se sert pour travailler parce qu’elle est plus confortable… et la version minifiée (qui s’appellera par exemple style.min.css) que l’on chargera sur son blog parce qu’elle est plus légère.

On peut aussi, plus simplement, mettre en place un plugin comme WP Fastest Cache : il comporte plusieurs options dédiées à la minification. Ça devrait vous permettre d’améliorer votre score sur les lignes « Minify HTML », « Minify CSS » et « Minify JavaScript » de GT Metrix sans avoir à trop mettre les mains dans le code.

Utiliser la compression Gzip

Pour améliorer le temps de chargement, vous pouvez aussi avoir recours à la compression : les fichiers qui composent vos pages web sont automatiquement compressés pour prendre moins de place (et être envoyés plus vite vers le navigateur de vos visiteurs !). Au moment de la consultation de la page, ils sont décompressés pour être affichés.

Le plugin WP Fastest Cache permet d’assurer ce type de compression si vous cochez la case « Réduire la taille des fichiers envoyés à partir de votre serveur » dans les options. Vous devriez ainsi améliorer la ligne « Enable gzip compression » sur GT Metrix (chez moi, elle est à 100/100).

LA COMPRESSION GZIP EST TRÈS EN FORME !

Utiliser la puissance du cache

Quand un visiteur découvre votre site, il doit accéder à tous les éléments qui le composent : logo, bannière, feuille de style, contenu, scripts…

Avec le cache, on met en mémoire certains éléments lorsqu’une page est visitée pour la première fois de telle sorte que dès la seconde visite, l’utilisateur n’ait pas à les charger à nouveau.

On peut même « pré-charger le cache » en amont (l’option « Preload » existe dans le plugin WP Fastest Cache) pour que n’importe quel visiteur, même le tout premier à consulter une page, ait déjà une version rapide.

Il existe plusieurs plugins de cache de qualité en dehors de WP Fastest Cache : WP Rocket est une référence, WP Super Cache est également réputé.

Le (célèbre) Leverage browser caching

Vous pouvez ajouter le code qui suit à la fin du fichier .htaccess présent à la racine de votre blog (on y accède à l’aide d’un client FTP comme FileZilla ou WinSCP, en utilisant les informations de connexion fournies par votre hébergeur).

Il permet de mettre en mémoire certains fichiers d’un site (les images, les polices d’écriture, etc) pendant une durée déterminée afin que les visiteurs récurrents les réutilisent lors de leurs prochaines visites (au lieu de les charger à chaque fois).

Voilà ce que j’utilise sur mon blog :

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/svg+xml A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
</ifmodule>

Vous ne pouvez mettre en mémoire que des fichiers situés sur votre propre site. Par exemple, grâce à l’ajout de ce code, tout va bien pour No Tuxedo mais je n’obtiens pas une note de 100/100 sur GT Metrix car le blog charge aussi des fichiers issus de Twitter et de Google, sur lesquels je n’ai aucun contrôle (bon, dans mes rêves je contrôle Google mais après je me réveille).

LEVERAGE BROWSER CACHING (À TES SOUHAITS)

Specify a cache validator

Le « cache validator » auquel GT Metrix fait référence est un système qui vérifie l’existence d’une version en cache de la page. Autrement dit, quand un visiteur demande à consulter une page, avant de se mettre à télécharger tous les éléments qui la composent (ce qui demande un certain temps de chargement), le validateur regarde s’il existe déjà une version en cache de la page, qui lui évite d’avoir à recharger tous les éléments.

Vous pouvez ajouter ce code au fichier .htaccess :

<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header set Cache-Control "max-age=2628000, public"
</filesmatch>

Le « max-age » correspond à une durée en secondes pendant laquelle une ressource est mise en cache (ici, un mois). On définit que la page peut être mise en cache publiquement (à l’inverse, quand on doit mettre en cache des données confidentielles, on peut choisir une autre politique !).

On peut tout à fait définir une durée différente d’un type de fichier à un autre.

Optimiser son code

C’est la partie qui exige le plus d’aisance technique quand on veut vraiment aller loin dans l’optimisation… mais il y a déjà des choses que vous pouvez faire facilement sur WordPress.

Defer parsing of JavaScript

Que signifie donc cette phrase mystérieuse ? Déjà, le JavaScript est un langage informatique qui permet d’ajouter des fonctionnalités à une page : par exemple, animer des éléments sur une page, la rendre plus interactive (en créant des pop-ups, etc).

Pour qu’un navigateur comprenne ce langage et effectue l’action attendue (par exemple, afficher un pop-up), le code JavaScript vit différentes aventures successives 🙂 C’est très technique mais pour simplifier, il est analysé et transformé, en plusieurs étapes, pour aboutir à un code que le navigateur peut interpréter pour afficher le résultat à vos visiteurs.

L’une de ces étapes fait appel à un « parseur », qui analyse le code. Ce travail d’analyse prend un peu de temps et ralentit donc le chargement de la page web. Différer le parsing du JavaScript consiste à attendre d’avoir réellement besoin du code JavaScript en question pour lancer l’analyse, au lieu de le faire dès l’ouverture de la page.

A titre personnel, j’utilise le code suivant (issu du blog Laplacef), inséré dans le fichier functions.php du thème WordPress (pour savoir comment ajouter du code à functions.php, c’est par ici !).

if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
// return "$url' defer ";
return "$url' defer onload='";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Il est plutôt efficace. La preuve ? Un petit tour sur GT Metrix avant l’insertion du code…

DEFER PARSING OF JAVASCRIPT – AVANT OPTIMISATION

Et un petit tour après insertion du code…

DEFER PARSING OF JAVASCRIPT – APRÈS OPTIMISATION

Remove query strings from static resources

Souvent, les fichiers qui composent les plugins comportent des numéros de versions. Par exemple, vous allez avoir un fichier intitulé « style.css?v=1.2 » dans le code. Le problème, c’est que ces noms comportant un point d’interrogation ne sont pas bien mis en cache, ce qui peut ralentir le site.

On peut donc supprimer ces paramètres. Il suffit d’ajouter ce morceau de code au fichier functions.php qui se trouve dans le dossier de votre thème WordPress.

function _remove_script_version( $src ){
return add_query_arg( 'ver', false, $src );
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Optimize the order of styles and scripts

Je vous l’ai dit, une page web fait appel à plein d’éléments et de fichiers différents : des styles, des scripts, etc. On ne doit pas charger tous ces éléments dans n’importe quel ordre.

C’est un peu comme lorsque vous déménagez : vous n’allez pas mettre tout au fond du camion le sac qui contient vos clés puis empiler les cartons et les meubles devant 😉

Avec le code, même principe : il y a un ordre… et en l’occurence, quand votre blog fait appel à des feuilles de style, il faut les charger avant de charger les fichiers JavaScript.

Là, il faut vraiment mettre les mains dans le code… et la façon de procéder est propre à chaque site. L’idée générale est la suivante :

  • Lister tous les styles/scripts qui sont chargés sur vos pages (en regardant le code de la page) ;
  • Vérifier qu’un même élément n’est pas chargé deux fois : parfois, deux plugins font appel à un même fichier… et chaque plugin va le charger, il apparaît donc en double… Si c’est le cas, il faut créer un code dédié (qu’on ajoute au fichier functions.php par exemple) à l’aide des fonctions wp dequeue script (si c’est un script) ou wp dequeue style (si c’est un style). Ça retire le script ou le style en question de la liste des fichiers à charger.
  • Définir l’ordre de chargement des fichiers : les CSS, puis les fichiers JavaScript. Pour ce faire, on crée là aussi des fonctions sur WordPress, qui font cette fois-ci appel à wp enqueue script et wp enqueue style.

Là, on est dans le code pur et ça permet de contrôler assez finement dans quel ordre se chargent tous les fichiers de vos plugins et de votre thème… C’est grâce à ce travail que j’ai pu obtenir une note de 100/100 sur GT Metrix sur ce point… et comme je ne suis pas développeur, autant dire que ça m’a demandé un peu de jus de cerveau 😉

OPTIMISER L’ORDRE DES SCRIPTS ET DES STYLES

Utiliser un CDN

C’est la cerise sur le gâteau, l’étoile sur le sapin, bref, le summum de la recherche de performance : le CDN. Ces trois lettres mystérieuses signifient « Content Delivery Network ». Ok, vous n’y voyez pas plus clair.

Je vous en parlais en début d’article, le temps de chargement d’un site pour un visiteur varie selon la distance entre le visiteur et le serveur où est stocké le site. No Tuxedo, par exemple, est hébergé en France. Regardez ce qui se passe si je charge le site depuis Londres : temps de chargement de la page d’accueil à 1.8 sec, tout va bien !

TEMPS DE CHARGEMENT À FAIBLE DISTANCE

Et si je charge le site depuis l’Australie… aïe, ça met 2 secondes de plus !

TEMPS DE CHARGEMENT À LONGUE DISTANCE

Le but du CDN, c’est de réduire ces écarts. C’est un système qui va créer des « copies » de votre site sur différents serveurs, un peu partout dans le monde. A chaque fois qu’un visiteur consultera votre site, c’est le serveur le plus proche de lui qui lui enverra les données. Pratique, non ?

Le CDN le plus connu est CloudFlare, il y a un tutoriel sur leur site (en anglais) pour utiliser CloudFlare avec WordPress. Pour ma part, je n’ai pas encore décidé d’avoir recours à un CDN.

L’heure du bilan

Voilà, nous arrivons au terme de cet article… et je pense qu’il va vous falloir un peu de temps pour le digérer maintenant 😉 La bonne nouvelle, c’est que ça fonctionne vraiment. Voici le score que j’ai obtenu sur GT Metrix au moment de la rédaction de cet article :

UN SCORE GT METRIX PAS TROP MAL

Par la suite, les performances ont un peu diminué car j’ai changé de régie publicitaire. C’est, en soi, une autre leçon à retenir : de nombreux choix que l’on fait sur un site web sont susceptibles d’affecter le temps de chargement… et c’est un critère à ne pas négliger ! J’espère en tout cas que ce guide vous sera utile. A vous de faire un tour sur GT Metrix… Alors, verdict ?

De Marlène Vie de blogueur que je suis régulièrement https://www.notuxedo.com/blog/pro/statistiques-web/