Comment optimiser la vitesse d’un site WordPress ? Guide complet !


Vous souhaitez optimiser la vitesse d'un site WordPress ? Dans cet article, je vous propose des conseils très concrets à appliquer dès maintenant, aussi bien pour faire le test de la rapidité de votre site que pour améliorer sa vitesse de chargement.

La vitesse d'un site est sans doute 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.

Comment tester la vitesse d'un site ?

Avant d'entrer dans le vif du sujet et d'évoquer la manière d'optimiser la vitesse d'un site WordPress, il va falloir faire un test de vitesse. Il existe une foule d'outils pour le faire.

Test My Site de Google : un outil de test dédié au mobile

Google a lancé Test My Site à l'été 2016. C'est un outil à l'interface très facile d'accès pour les débutants.

Il va vous donner une information simple : le temps de chargement de votre site sur mobile... et le pourcentage moyen de visiteurs que vous perdez à cause de ce temps de chargement.

Test My Site - Google
Test My Site - Google

Un peu plus bas sur la page, vous pouvez comparer votre site avec celui de vos concurrents, ou encore évaluer quel impact aurait une baisse du temps de chargement sur votre rentabilité.

Enfin, vous pouvez recevoir un rapport un peu plus détaillé et technique si vous souhaitez aller plus loin.

L'outil Test My Site de Google s'appuie sur la version mobile de vos pages. Si vous proposez aussi le format AMP pour des pages ultra-rapides sur mobile, il n'est pas détecté automatiquement.

Cet outil s'adresse plutôt aux débutants qui veulent avoir une idée générale de leurs performances sur mobile ou qui veulent tester un site sur cet aspect. Ça peut par exemple être utile pour tester un thème WordPress avant de l'acheter.

Google PageSpeed Insights : l'outil maison de Google

Google PageSpeed Insights est un outil créé par Google lui-même. Il s'adresse à un public plus averti que la moyenne des utilisateurs mais offre aussi beaucoup plus d'informations.

Par ailleurs, il existe à la fois sous forme de site web pour des tests ponctuels ou sous forme de plugin si vous voulez optimiser la vitesse d'un site WordPress et monitorer les pages de votre site de manière plus globale.

PageSpeed Insights : le site

Il faut là aussi entrer l'adresse de la page à tester sur l'outil :

Google PageSpeed Insights
Google PageSpeed Insights

PageSpeed Insights va vous donner 2 scores sur 100, associés à des couleurs.

  • Un score mobile : il décrit la qualité d'optimisation de votre site sur les smartphones.
  • Un score sur ordinateur : il correspond à la qualité d'optimisation du site sur des écrans plus grands.

Quelle différence entre les deux ? L'outil simule tout simplement une vitesse de connexion mobile... et une vitesse de connexion desktop. En effet, sur un même site, le "ressenti" en termes de rapidité de chargement peut être très différent selon la qualité de la connexion.

Si votre note s'affiche en vert, cela signifie que tout va bien ! Si elle s'affiche en orange, cela signifie que vous pouvez encore faire des améliorations. Si c'est du rouge, au boulot ! Je vous explique un peu plus loin dans l'article quels indicateurs vous devez regarder et comment optimiser la vitesse d'un site WordPress concrètement.

Autant le dire tout de suite : Google PageSpeed Insights sera l'outil le plus dur avec vous. Google est extrêmement exigeant en matière de vitesse car le moteur de recherche prend en compte l'évolution des comportements, avec l'explosion du mobile. Alors il se montrera sans pitié !

Score PageSpeed Insights
Score PageSpeed Insights

PageSpeed Insights : le plugin WordPress

Si vous êtes sur WordPress, bonne nouvelle : il existe un plugin Google PageSpeed Insights dédié et d'une grande qualité ! Une fois installé et activé, tout se joue dans le menu Outils > PageSpeed Insights.

Vous devez d'abord créer une clé API Google en allant sur la Google Developers Console.

Dans le menu "Tableau de bord", cliquez sur "Activer des API et des services" puis cherchez la "PageSpeed Insights API" et activez-la.

Ensuite, depuis le menu "Identifiants", vous pouvez créer une clé API facilement :

Créer une clé API Google
Créer une clé API Google

Copiez cette clé API dans les réglages du plugin PageSpeed Insights (onglet "Options", champ "Google API Key"). Vous pouvez en profiter pour régler la langue (Français) et pour choisir le type de rapport souhaité (mobile, ordinateur ou les deux). Sauf utilisateur expérimenté, ne touchez pas aux autres réglages. Enregistrez les options et lancez l'analyse du site en cliquant sur le bouton "Start Reporting".

Le gros avantage de ce plugin est sa capacité à analyser votre site page par page, automatiquement. L'onglet "Report Summary" vous donnera une vue d'ensemble efficace des pages les plus rapides et les plus lentes du site, avec des conseils d'optimisation pour chacune.

Le plugin WordPress basé sur PageSpeed Insights
Le plugin WordPress basé sur PageSpeed Insights

Notons qu'une analyse encore plus complète et pointue est possible via LightHouse - un autre outil Google - dans le navigateur Chrome.

Autres outils pour tester la rapidité d'un site

Mentionnons quelques outils supplémentaires pour tester la vitesse d'un site.

Pingdom Tools

Pingdom Website Speed Test est un outil simple et rapide à utiliser. Si vous êtes en Europe, pensez à modifier l'emplacement du serveur de test et à choisir Londres. Entrez ensuite l'adresse d'une page à tester.

Le test de vitesse de chargement Pingdom
Le test de vitesse de chargement Pingdom

L'outil va vous donner une synthèse avec un temps de chargement en secondes, une note de performance qui évalue en quelque sorte votre capacité à respecter les "bonnes pratiques" en matière de rapidité, le poids de votre page ou encore le nombre de requêtes qu'elle génère (en simplifiant beaucoup, ce sont des "actions" que la page effectue pour charger son contenu).

Résultats sur le test de rapidité Pingdom
Résultats sur le test de rapidité Pingdom

Mais ce n'est pas tout ! Plus bas sur la page, vous allez trouver une foule d'informations supplémentaires, par exemple ce qui pèse le plus lourd sur la page...

Eléments les plus lourds d'une page web
Eléments les plus lourds d'une page web

Ou encore tous les sites web où votre propre site va récupérer des informations. Par exemple, dans mon cas et sur la page testée, le blog charge à la fois des éléments de NoTuxedo.com mais va aussi chercher des informations liées aux polices d'écriture Google (Google Fonts), des données nécessaires à l'affichage de publicité (Doubleclick)...

Requêtes par domaine
Requêtes par domaine

Enfin, vous avez un aperçu très complet, en couleur, de l'ordre dans lequel se chargent tous les éléments de la page (et du temps que ça prend).

Pingdom Website Speed Test est donc un outil qui offre un bon compromis entre rapidité d'utilisation et richesse des données fournies.

GTMetrix

GT Metrix est un outil que j'apprécie énormément pour les nombreuses options qu'il propose. Vous pouvez l'utiliser sans créer de compte mais le serveur de test par défaut ne sera pas forcément optimal.

Je vous conseille donc de créer un compte gratuit, qui vous donnera accès à une foule d'informations et de possibilités supplémentaires. Vous pourrez choisir un serveur de test situé à Londres (idéal si votre site cible un public européen), tester le site avec ou sans publicité, sur Firefox ou sur Chrome, avec différentes vitesses de connexion (fibre optique, 3G, ADSL, etc).

Vous pourrez même tester un site encore en production, en fournissant à GT Metrix un login et un mot de passe pour se connecter (créez des identifiants exprès, que vous supprimez ensuite, pour éviter tout risque de piratage).

Test de rapidité d'un site sur GTMetrix
Test de rapidité d'un site sur GTMetrix

GTMetrix vous donne le temps de chargement complet du site en secondes ainsi qu'un score de performance. Ce score est basé sur PageSpeed Insights de Google (il en va de même pour le score de performance fourni par l'outil de Pingdom)... mais ce n'est pas le même que celui figurant sur le site PageSpeed Insights de Google.

En fait, Google autorise des sites tiers à exploiter les données de PageSpeed Insights via ce qu'on appelle un SDK. Le SDK PageSpeed Insights n'a pas été mis à jour depuis un bon moment. Ça explique pourquoi, sur le site de Google PageSpeed Insights, l'outil se montre plus "sévère" qu'un GT Metrix ou un Pingdom : il a été mis à jour plus récemment.

Test de vitesse de chargement sur GT Metrix
Test de vitesse de chargement sur GT Metrix

Optimiser la vitesse d'un site WordPress : quels indicateurs ?

Quand on veut tester la rapidité d'un site, on se retrouve face à une multitude d'indicateurs. Mais que signifient-ils exactement ?

Le temps de chargement : entre technique et ressenti

A 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 et se charge généralement au fur et à mesure.

Les outils de test de la vitesse d'un site vont mesurer à la fois le moment où "quelque chose apparaît à l'écran", le moment où "l'essentiel est visible à l'écran" mais aussi le moment où l'intégralité des ressources de la page est chargée (polices d'écriture, fonctionnalités interactives, etc).

Il y a donc parfois un décalage entre le temps de chargement affiché et le ressenti du visiteur. Prenons cet exemple un peu extrême :

Un temps de chargement trop long
Un temps de chargement trop long

Ç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.

Les indicateurs de temps de chargement

Voici un tour d'horizon de quelques définitions des termes clés dans le jargon de la vitesse de chargement !

  • Le Time To First Byte (TTFB) - C'est un indicateur plutôt technique, qui correspond au temps qui s'écoule entre le moment où l'adresse d'une page est entrée et le moment où le serveur qui stocke les données de la page renvoie les premières bribes d'information (autrement dit, le moment où le premier octet de la page est chargé).
  • Le First Contentful Paint (FCP) - C'est le temps qui s'écoule entre le moment où l'adresse d'une page est entrée et le moment où elle affiche quelque chose de visible et qui a un certain sens pour le visiteur (texte ou image notamment).
  • Le First Meaningful Paint (FMP) - C'est un peu plus subjectif, puisqu'il s'agit du moment où l'on estime que le contenu essentiel de la page est chargé (le texte, les images, etc).
  • Le Time to Interactive (TTI) - C'est un "délai avant interactivité" : autrement dit, c'est le moment où la page est suffisamment chargée pour répondre de manière réactive aux interactions des visiteurs.
  • Le temps de chargement complet des pages (Fully Loaded Time) - Comme son nom l'indique, il se mesure à l'échelle d'une page précise et correspond au temps nécessaire pour afficher l'intégralité du contenu d'une page et charger l'ensemble des ressources qu'elle contient (images, vidéos, styles, etc).

Il y a beaucoup d'autres notions mais celles-ci sont souvent perçues comme étant les plus importantes à optimiser, et vous les retrouverez dans la plupart des outils de test de la vitesse de chargement.

Valeurs idéales en matière de rapidité de chargement

Quels scores faut-il viser quand on essaie d'optimiser la vitesse d'un site WordPress ?

  • Time To First Byte - Google recommande un TTFB inférieur à 200ms.
  • First Contentful Paint - Google recommande un FCP inférieur à 2 secondes.
  • First Meaningful Paint - Là encore, il ne doit pas dépasser 2 secondes.
  • Time to Interactive - Il doit être inférieur à 5.2 secondes pour être "dans le vert" sur PageSpeed Insights.

Concrètement, essayez de viser un temps de chargement par page inférieur à 3 secondes.

A ce stade, vous devez avoir effectué un premier "diagnostic" de votre site. Nous allons maintenant parler de la manière d'optimiser la vitesse d'un site WordPress... sans être développeur web !

Optimiser la vitesse d'un site passe par 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 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.

Je suis aujourd'hui hébergée chez o2switch, qui propose une offre unique et un support technique très réactif... et ça a amélioré les performances de mes sites "sans rien faire", simplement parce que la qualité de service est au rendez-vous.

Optimiser les images

Les images sont souvent ce qui ralentit le chargement d'un site... et ce problème fréquent peut être facilement réglé en adoptant quelques bons réflexes.

Redimensionner les images

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. 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
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.

Il permet d'ailleurs de retirer automatiquement les données EXIF des images que je mentionnais précédemment, de les redimensionner lors de leur mise en ligne... et d'utiliser des formats d'images innovants, comme le WebP.

Ce format n'est pas pris en charge par tous les navigateurs mais permettrait de réduire de 39% en moyenne le poids des fichiers par rapport aux formats plus classiques que sont le JPEG, le PNG et le GIF.

Optimiser la vitesse d'un site WordPress en triant ses 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.

Cette option existe dans le menu Réglages > Lecture, au niveau de la ligne "Les pages du site doivent afficher au plus X articles".

Pagination sur WordPress
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é
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é
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 quand PageSpeed Insights vous dit "Réduisez la taille des ressources CSS et JavaScript".

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 passée à 100/100 suite à la mise en place du plugin).

La compression Gzip est très en forme !
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é.

Exploiter le cache du navigateur

Un outil comme GTMetrix vous conseillera parfois de "Leverage browser caching". Il s'agit 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).

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).

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)
Leverage Browser Caching (à tes souhaits)

Specify a cache validator

Si vous lisez ce conseil sur GT Metrix, sachez que le "cache validator" 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 le code de son thème WordPress

C'est la partie qui exige le plus d'aisance technique quand on veut vraiment optimiser la vitesse d'un site WordPress de manière poussée… mais il y a déjà des choses que vous pouvez faire facilement.

Gérer le parsing du JavaScript

Sur certains outils de test de vitesse d'un site, vous verrez parfois le conseil "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
Defer parsing of Javascript - Avant optimisation

Et un petit tour après insertion du code...

Defer parsing of Javascript - Après optimisation
Defer parsing of Javascript - Après optimisation

Attention toutefois : si vous utilisez un plugin AMP, il ne faut pas utiliser ce code qui risque de provoquer des problèmes.

Retirer les paramètres des URL

Vous trouverez parfois le conseil suivant sur les outils de test de vitesse d'un site : "Remove query strings from static resources".

Parfois, les fichiers appelés sur votre blog 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 );

Optimiser l'ordre de chargement des styles et 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
Optimiser l'ordre des scripts et des styles

Veiller au chargement des polices d'écriture

Si vous affichez des polices d'écriture qui ne sont pas présentes par défaut sur la plupart des ordinateurs (ce qui est souvent le cas sur le web !), vous pouvez simplement ajouter &display=swap à la fin de l'URL de la police d'écriture.

Grâce à cette astuce, le navigateur recevra le message qu'il peut afficher une police d'écriture standard en attendant que la police d'écriture "officielle" ait fini de charger.

Notez que si vous utilisez une police Google, le code fourni inclut généralement déjà ce bout de code !

Utiliser un CDN pour réduire le temps de chargement

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.

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
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
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.

Optimisation de la vitesse d'un site : technique et bon sens

Vous allez vite vous apercevoir que l'optimisation du temps de chargement des pages implique d'entrer dans des notions assez techniques. On va vous parler de cache, de compression des scripts, etc.

Si tout ceci est pour vous du chinois, je vous conseille de mettre en œuvre quelques principes de base d'optimisation, qui sont peut-être les plus faciles d'accès :

  • Optimiser les images ;
  • Mettre en place un plugin de cache ;
  • Choisir un bon hébergeur web ;
  • Faire le point sur les extensions WordPress que vous utilisez et supprimez celles qui sont inutiles ;

Vous n'arriverez peut-être pas à obtenir une note formidable mais ce sera toujours bénéfique pour vos visiteurs.

Par ailleurs, certaines recommandations sont exactes... mais impossibles à suivre ! Par exemple, si un outil vous conseille de compresser un script mais que celui-ci se trouve sur un autre site que le vôtre (ce qui se produit souvent quand on affiche de la publicité), vous ne pourrez pas agir dessus.

Il faut donc une part de bon sens quand on optimise un site : si votre site est lent au point de vous faire perdre de nombreux visiteurs, oui, il faut essayer de trouver une solution (changer de thème, retravailler ses photos, faire appel à un professionnel du développement web, etc). Mais si ça reste dans des limites acceptables, autour de 3-5 secondes de temps de chargement, je pense pour ma part qu'il ne faut pas s'inquiéter outre mesure (sauf si vous avez un site pro où 1 seconde de délai peut vous faire perdre 7% de conversion !).

A vous d'aller tester la vitesse de vos sites... Alors, verdict ?


Poster un commentaire

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

33 commentaires sur “Comment optimiser la vitesse d’un site WordPress ? Guide complet !
  • Judith

    Bonjour Marlène,
    Je vous remercie pour votre article. Mon blog sur blogger met 30 à 60 sec voir même plus pour s’afficher (c’est horrible). Je voudrais savoir si je peux suivre les conseils que vous donnez pour wordpress pour les appliquer sur mon blog chez blogger. Sinon qu’est ce que je peux faire pour corriger ce problème, s’il vous plaît ? Jusqu’ hier, mon blog fonctionnait à merveille.

    Je vous remercie d’avance.

    Répondre à Judith
    • Judith

      Coucou Marlène,
      c’est bon j’ai réussi à obtenir une vitesse parfaite en modifiant le poids de l’image de l’article que j’ai posté aujourd’hui. Je te remercie pour ton attention et pour tout les efforts que tu fais pour nous donner des conseils.

      Répondre à Judith
  • Thomas

    Article très complet pour optimiser son site

    Répondre à Thomas
  • FS

    Bonjour,

    Apres vous avoir lu longuement , je me décide à passer d’OVH à O2switch. j’allais le faire ce matin et au dernier moment je me suis posé une question . j’ ai vu vos liens Amazon mais je n’ai pas vu de lien entre vous et O2switch, comment faire pour vous associer à ce transfert car tant qu’à faire autant que vous soyez commissionnée, meme si je ne pense pas que le montant vous permettre de partir faire le tour du monde ?

    Cordialement

    Répondre à FS
    • Marlène

      Hello, c’est gentil d’y penser, vous pouvez utiliser ce lien. J’espère qu’o2switch vous donnera satisfaction, j’ai 4 sites chez eux à ce jour et je suis très contente du service !

      Répondre à Marlène
  • Bill

    Bonjour,
    Pour les images, j’ai testé Smush, bien sans plus.
    J’ai vu des sites avec des ShortPixel est avoir des codes de redirections vers leur CDN et du coup GTmetrix indique « Remove the following redirect chain if possible: ».
    Pour moi, le mieux depuis des années, Ewww image Optimizer, bien configuré, je passe au vert direct
    WP Marmite en a parlé aussi
    https://wpmarmite.com/ewww-image-optimizer/

    Sinon comme d’hab, un très bon article. Un trésor , ce site.

    Répondre à Bill
    • Marlène

      Hello, effectivement ce plugin est très réputé aussi ! Sur mon blog voyage, j’utilise ShortPixel avec leur CDN proposé par défaut, je n’ai pas eu de problème à ce stade mais comme souvent, selon la configuration ce qui marche chez quelqu’un peut causer des erreurs chez quelqu’un d’autre :) D’où l’importance de tester et, parfois, de réévaluer dans le temps les choix techniques que l’on fait !

      Répondre à Marlène
  • Emmanuelle CM

    J’ai procédé à quelques modifications pour optimiser le temps de chargement de mon blog, notamment au niveau des photos. Par contre, d’après le test sur GT Metrix, j’ai un très mauvais score sur « Leverage browser caching » et aussi sur « Defer parsing of JavaScript » dans une moindre mesure. J’avoue que tout ce qui touche au code me fait un peu peur car je redoute de faire une mauvaise manipulation qui ruinerait mon blog. Mais vu les mauvais scores, il va sûrement falloir que je me penche malgré tout sur le sujet. En tout cas, je te remercie pour cet article qui est intéressant et très utile.

    Répondre à Emmanuelle
    • Marlène

      Hello Emmanuelle, je pense qu’il faut mettre en balance les performances que tu obtiens et l’énergie que ça te demande. Parfois, ça vaut le coup de laisser un développeur faire le travail, en particulier quand il faut retravailler le code en profondeur ! Belle fin d’année à toi :)

      Répondre à Marlène
  • Younès

    Bonjour Marlène,
    Mon score de vitesse c’est amélioré grâce a ton tuto, un grand merci.
    Il y a un seul point que je n’arrive pas à améliorer, c’est « Combiner des images à l’aide de sprites CSS », score 0 lol. Pas de solution pour le moment :(

    Répondre à Younès
    • Younès

      Désolé je viens de voir votre retour sur ce point précédemment. Je vais lire le cours sur le CSS. Merci

      Répondre à Younès
  • Younès

    Bonjour Marlène,
    Encore un article qui m’a aidé pour améliorer la vitesse de mon site, merci :-)
    J’ai utilisé les codes pour « Defer parsing of JavaScript » et « Remove query strings from static resources ». Pour le premier, je suis passé d’un score de 71 à 81 et pour le deuxième de 64 à 78.
    Concernant les codes pour le cache, j’avoue que j’hésite encore car j’utilise wp super cache et je redoute que cela pose problème.
    Sinon, je n’ai pas de score pour « Combine images using CSS sprites » et je suis toujours à la recherche d’une solution.

    Répondre à Younès
  • Sur un petit nuage (Virginie)

    Coucou Marlène j’espère que tu vas bien ?
    Tu aurais un hébergeur à me conseiller ? J’en peux plus d’OVH, actuellement mon site met entre 6 et 10 secondes à charger, sans aucune raison particulière, ça commence vraiment à me taper sur le ciboulot.
    Mon chéri est en train de regarder à droite à gauche pour changer mais le soucis reste la boîte mail. Avec OVH j’ai payé pour un nom de domaine, un hébergement mais aussi une boîte mail. Je ne sais même pas si je peux résilier en plein milieu d’année, mais là ça me gave de plus en plus, mais bon je n’ai pas envie de perdre tous mes mails et tous les contacts que j’ai avec.

    Je suis vraiment désolée de te poser cette question, je sais que tu essaye de rester objective et sans réellement de préférence sur ton blog, mais je tente quand même ma chance parce que là, je suis à un cheveu de tout claquer :s

    Je t’embrasse à +

    Répondre à Sur
    • Marlène

      Hello Virginie, c’est toujours difficile de conseiller un hébergeur car parfois, chez un même prestataire, on peut avoir un site qui fonctionne très bien et un autre qui rame à fond… parce qu’on se retrouve sur un serveur plus chargé ou moins performant. Je connais ça avec OVH, qui a été catastrophique pour No Tuxedo et avec lequel je n’ai pas de problème pour le site d’une amie que je gère. Je peux simplement te dire que mes 3 blogs sont depuis avril chez o2switch et que j’en suis contente pour l’instant (bon support technique quand j’ai eu des questions, performances satisfaisantes quand je teste mon site avec GTMetrix, etc). Tu peux toujours jeter un œil à leur offre et les contacter pour tester leur réactivité, c’est une offre unique qui inclut hébergement + mails + nom de domaine.

      On peut changer d’hébergeur en cours d’année mais tu ne seras pas remboursée des « mois non utilisés » en règle générale. C’est justement ce que j’ai fait au printemps, j’ai quitté Nuxit avant la fin de mon contrat car le service était devenu déplorable et que j’avais engagé une procédure judiciaire contre eux, j’ai donc préféré mettre mes sites « à l’abri » en les bougeant ailleurs.

      Répondre à Marlène
  • Lisa Luna-Duran

    Bonjour,

    Je suis en train de parcourir tous tes articles sur la vitesse et la performance car j’avais un très mauvais score malgré des photos optimisées. Sur GMetrix, ce qui a l’air d’être le pire, c’est le « Leverage Browser Catching » qui est carrément à 0. J’ai mis le plug-in WP Super Cache mais ca n’a rien changé! Dois-je rajouter le bout de code au ficher .htaccess en plus de ca ?

    Merci d’avance pour ta réponse et merci pour ton super boulot!!! Sans toi, je me serais arraché tous les cheveux cette après-midi <3

    Lisa

    Répondre à Lisa
    • Marlène

      Hello Lisa, oui le code peut aider. Un plugin peut aider à pallier à certaines difficultés mais si le site a des problèmes de code au départ, il ne fera pas de miracle malheureusement. D’où l’intérêt, par exemple, de bien choisir son thème de blog quand on se lance.

      Répondre à Marlène
  • Suny

    Dans le htaccess de WP Super Cache, il y a déjà ça (avec moins de détails) :

    SetEnvIfNoCase Request_URI \.gz$ no-gzip

    Header set Vary « Accept-Encoding, Cookie »
    Header set Cache-Control ‘max-age=3, must-revalidate’

    ExpiresActive On
    ExpiresByType text/html A3

    >>> Est-ce qu’il n’y a pas conflit si on ajoute les deux codes de ton présent article pour  » Leverage browser caching » et « Specify a cache validator » dans le htaccess en sachant qu’il y a déjà une petite partie moins développée dans le htaccess de WP Super Cache ? (je t’ai C/C). Je ne sais pas ce que tu penses, Marlène ? J’imagine que je ne dois pas être le seul à me poser cette question pour ceux qui ont déjà WP Super Cache.

    Répondre à Suny
    • Marlène

      Si tu as déjà des dates d’expiration définies pour certains types de ressources, le code risque d’être redondant à certains égards mais en tout cas, l’ajout ne fera pas planter le blog :)

      Répondre à Marlène
  • Alexandrine

    Hello,
    J’ai un score catastrophique avec une note de 0 pour « minimize redirects » et là j’ai une liste incroyable de redirections vers des url que je ne connais pas. Que faire ?

    Répondre à Alexandrine
    • Marlène

      Hello, c’est généralement lié aux systèmes de tracking utilisés sur un site (publicité, A/B Testing, fonctionnalités marketing, etc). A creuser avec ta régie publicitaire ou les éventuels services concernés car je ne sais pas quelle marge de liberté tu as pour rectifier ça…

      Répondre à Marlène
    • Alexandrine

      Merci, je vais regarder ça de plus près

      Répondre à Alexandrine
  • Sandrine

    Je me suis longtemps pris la tête sur ce maudit poids et j’ai mis beaucoup de choses en place pour le réduire. Mais voilà longtemps que je ne m’en préoccupais plus, vu que les dernières mesures étaient tout à fait correctes.
    En voyant ton article je me suis dit « allez, je repèse » :-)
    Moment d’angoisse : et si j’avais pris du poids depuis la dernière fois ??
    Et verdict sur mon article de ce matin :
    PageSpeed Score : A – YSlow Score : B – Fully Loaded Time : 10.5 – Total Page Size : 690 – Requests : 45
    Ça me va très bien : je retourne dormir sur mes deux oreilles, en n’oubliant pas de te remercier pour tes articles que je ne commente pas souvent mais suis toujours avec intérêt.

    Répondre à Sandrine
    • Marlène

      Merci de ton commentaire ! 10 secondes ça reste élevé mais c’est parfois compliqué de faire descendre le chiffre sans un travail démesuré !

      Répondre à Marlène
  • Suny

    Salut Marlene,

    merci pour cet article, toujours aussi bien!

    * si on a déjà WP Super Cache, est-il nécessaire de suivre tes recommandations pour « Le (célèbre) Leverage browser caching » et « Specify a cache validator » ? (les codes à coller dans htaccess) ou ce n’est pas nécessaire ?

    * tu dis qu’il faut éviter de télécharger trop de plugins par rapport au temps de chargement du site.

    Mais tu suggères quelques plugins aussi en même temps comme : Le plugin WP Fastest Cache ,
    peut-être devrais-tu préciser pour chacun si on peut juste l’installer et faire la compression, et aussitôt le désinstaller pour éviter la surcharge ? enfin comme tu ne précises pas, j’ai tendance à me dire que si on installe, on est obligé de garder définitivement (comme WP Super Cache qui est normal). Donc, je sais pas quoi faire, désolé de te taquiner avec ça :-p

    Répondre à Suny
    • Marlène

      Hello, je n’utilise plus WP Super Cache donc je ne me souviens plus exactement des lignes qu’il ajoute dans le htaccess et ça dépend de la façon dont tu l’as configuré. Le plus simple est de tester ton site sur GTMetrix et de voir s’il te sort des avertissements relatifs à la mise en cache ou pas. Un plugin de cache doit effectivement être laissé en continu sur le site.

      Petite précision complémentaire : je ne dis pas vraiment qu’il faut « éviter de télécharger trop de plugins »… mais plutôt qu’il faut veiller à avoir les plugins dont on a besoin, bien codés… et pas plus :) On peut tout à fait avoir beaucoup de plugins s’ils sont performants et utiles au site. Je pense au développeur Pippin Williamson qui avait 80 plugins sur son site et aucun problème de temps de chargement !

      Répondre à Marlène
  • Véronique

    Merci beaucoup pour cet article très complet qui va m’être très utile. Surtout la partie sur le Java script et l’amélioration du code. Je cherchais depuis longtemps des infos claires et précises à ce sujet car je n’aime pas trop ajouter des bouts de code par peur d’enclencher l’autodestruction de mon site! Maintenant, je pense pouvoir le faire sans stress.

    Répondre à Véronique
    • Marlène

      Ca reste un sujet assez technique donc ça ne m’étonne pas que ça suscite quelques hésitations avant d’agir :) Une petite sauvegarde avant toute modification est toujours souhaitable !

      Répondre à Marlène
  • Daphné @ Be Frenchie

    Quel guide intéressant, et quelle somme de travail ! Un petit test GT Metrix m’a permis de vérifier qu’effectivement, mes photos sont bien trop lourdes à charger. Je connaissais certains points, comme le CDN de Cloudflare mais avais fait l’impasse sur d’autres.

    Merci pour cet article sous forme de check-list; je vais pouvoir lancer un audit complet pour comprendre comment améliorer l’espérience utilisateur.

    Répondre à Daphné
    • Marlène

      Merci Daphné, les photos sont toujours un défi quand on veut allier une certaine qualité et un poids raisonnable.

      Répondre à Marlène
  • Thomas

    Article très intéressant et très complet ! Le temps de chargement est en effet un facteur très important que certains oublient d’optimiser, ce qui est dommage ne serait-ce que pour l’expérience utilisateur. Et même si cela n’a pas un impact énorme en termes de référencement, c’est quand même l’un des facteurs utilisés par notre ami Google. :)

    Je rajouterai simplement une chose : le PageSpeed de GTMetrix n’est pas tout à fait le PageSpeed de Google. Ce dernier utilise sa propre version non open source, alors que GTMetrix utilise une version plus ancienne si je ne me trompe pas. D’ailleurs, les scores PageSpeed de GTMetrix et ceux de PageSpeed Insights sont souvent différents.

    Répondre à Thomas
    • Marlène

      Hello, tu as tout à fait raison sur le PageSpeed. GTMetrix utilise un SDK open source créé par Google, qui est à la base du fonctionnement de PageSpeed Insights. Google a mis à jour sa version de la librairie mais pas celle qui est intégrée au PageSpeed Insights SDK… donc si l’indice reste bien basé sur celui de Google, ça explique que les résultats ne soient pas toujours les mêmes que lorsqu’on fait le test sur PageSpeed Insights. Il n’a pas été mis à jour depuis le printemps 2016.

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.