L’utilisation de WordPress dans le monde représente 31,6% de sites, ce qui représente 60% de part de marché des CMS (en France 70%). Optimiser ce CMS pour qu’il se charge rapidement est une bonne idée. Il ne fait aucun doute qu’il s’agit d’une mesure importante tant du point de vue de la navigation que du point de vue du référencement. Depuis Juillet 2018, le temps de chargement à la fois sur desktop et mobile est maintenant un critère de positionnement de l’algorithme de Google.
People want to be able to find answers to their questions as fast as possible. (…) Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches. – Google
Nous allons passer en revue dans cet article, les étapes clés et montrer comment optimiser son site WordPress pour le test PageSpeed de Google.
Avant d’en dire plus, il est important de préciser que dans cet article, nous allons nous concentrer sur la valeur PageSpeed, et non sur la vitesse de la page.
PageSpeed est une métrique de Google. Il fait partie d’une famille d’outils mis à disposition des webmasters / developpeurs par Google. Lorsque nous faisons référence à un nombre de PageSpeed compris entre 0 et 100, nous faisons référence au résultat donné par l’outil PageSpeed Insights.
La vitesse de la page, par contre, fait généralement référence à la vitesse réelle de chargement d’une page Web. Et oui, il est possible d’augmenter l’un sans l’autre, et j’ai même vu des cas où l’amélioration de l’un se fait au détriment de l’autre.
En bref, nous allons nous concentrer sur la métrique Google dans cet article pour les sites WordPress. Chaque fois que vous travaillez sur l’un, il est important de mesurer l’autre afin de ne pas vous tirer une balle dans le pied.
La metrique PageSpeed.
Lorsque nous faisons un test avec l’outil de Google, nous, nous retrouvons avec un résultat compris entre 0 et 100.
80 et plus, peut être considéré comme un « très bon » niveau mais il n’est pas toujours possible de l’atteindre dans la réalité.
En règle générale, on visera un niveau situé entre 60 et 70, en évitant de tomber en dessous.
Pour illustrer cet article, je prendrais comme exemple le score de départ de ce site web soit :
- Mobile : 62/100
- Ordinateur : 52/100
Nous allons aussi regarder le temps que la page web prend pour se charger, ou la vitesse de chargement de la page.
Il est important de noter que chaque outil mesure différemment. Je vais baser mes chiffres sur Dotcom-Tools, mais GTmetrix fonctionne aussi bien ou encore Pingdom Tool.
Dotcom permet de tester la vitesse de chargement de pages à partir de plusieurs endroits dans le monde, et le résultat que l’outil donne est une moyenne.
Le résultat obtenu est le suivant :
GTMetrix donne sensiblement le même résultat:
L’outil liste en plus l’ensemble des points à améliorer sur le site.
Etape 1 : HTTPS
La première étape d’amélioration est le passage du site en HTTPS.
Pour cela voici les 9 étapes à réaliser :
-
- Acheter un certificat SSL
Votre gestionnaire de nom de domaine peut vous proposer dans son offre un certificat SSL adapté à votre situation. Sachez cependant qu’il existe la possibilité d’obtenir un certificat SSL gratuit auprès de LetsEncrypt. - Activer le HTTPS sur votre serveur.
- S’assurer que les liens entre vos pages web sont sous format relatif
- Supprimer le contenu mixte (images, scripts …) qui proviennent du site en http
- Pour repérer facilement le contenu non sécurisé vous pouvez utiliser l’outil https://www.jitbit.com/sslcheck/
- Rediriger le http vers le https
Il faut réaliser des redirections 301 (permanente) sur votre serveur de l’ensemble des pages en http vers celles en https. Il faut aussi vous assurer qu’une redirection est bien en place entre la version en http et la nouvelle version en https.
Pour vous aider dans cette tache, l’extension Force HTTPS fait très bien le job ou si vous en avez le courage ajouter les lignes suivantes dans votre fichier .htaccess en changeant domaine.com par votre URL:RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST}. ^(www\.)?domaine\.com
RewriteRule ^(.*)$ https://www.domain.com/$1[R,L][R,L] - S’assurer que votre certificat SSL est bien actif.
Pour cela utilisez l’outil https://www.ssllabs.com. Il vous donnera une note et vous expliquera s’il y’a des choses à modifier ou corriger pour obtenir la meilleure note de A - Enregistrer de nouveau votre site HTTPS sur Google Webmaster
- Modifier les adresses et mention de vos anciennes pages en http pour les repérer plus facilement vous pouvez faire un crawl de votre site à l’aide de xenu ou de screaming frog.
Etape 2 : les images
Quiconque s’est déjà attaqué à PageSpeed vous dira que les images sont la cause la plus fréquente du ralentissement des pages.
Les images se répartissent en deux catégories d’erreurs :- Compression et redimensionnement: cela signifie que les images sont physiquement plus grandes qu’elles ne doivent l’être. Cela arrive souvent dans WordPress lorsqu’une image est ajoutée à la bibliothèque de médias et placée sur la page à une taille beaucoup plus grande que celle dont elle a besoin pour les dimensions qu’elle occupe.
- Compression: les images ont une tonne de bric-à-brac, et pour le web, elles peuvent souvent être de bien meilleure qualité que nécessaire. La compression d’image s’occupe de cela. En guise d’avertissement, si vous utilisez un système de compression d’images automatisé, essayez de toujours vérifier et de vous assurer que l’image sort comme vous le souhaitez. C’est rare, mais j’ai rencontré des cas où il y avait une dégradation notable de la qualité.
Vous pouvez réaliser manuellement la compression de vos images avant de les ajouter à la bibliothèque d’image mais il existe aussi des plugins pour faire là aussi le job. J’utilise pour ma part le plugin Smush
Etape 3 : Mise en cache du navigateur
Le processus va consister à envoyer un message au navigateur internet comme Chrome, Safari ou Firefox , lui demandant d’activer le cache du navigateur internet. Il va alors retenir les éléments récurrents d’un site pour ne pas avoir à les charger à nouveau par la suite.
Par exemple, vous pouvez envoyer un message au navigateur indiquant que les images peuvent être mises en cache pendant deux semaines. De cette façon, lorsqu’un visiteur revient sur votre site dans un délai de deux semaines, le site se charge plus rapidement, car de nombreuses ressources sont simplement extraites de leur propre machine.
Vous pouvez fixer des limites de temps pour la mise en cache de la plupart des ressources, allant des scripts et des feuilles de style à la plupart des types d’images.
Il y a deux méthodes que j’ai tendance à utiliser lors de la configuration de la mise en cache du navigateur : la configuration directement dans le fichier.htaccess et via le plugin WP SuperCache ou encore W3 Total Cache.
Si vous choisissez de gérer la mise en cache directement via le .htaccess voici le code à saisir à la fin du fichier :
ExpiresActive on
ExpiresDefault "access 1 week"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType video/mp4 "access 1 month"
ExpiresByType text/css “access 1 month”
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 year"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/js "access 1 year"
ExpiresByType application/x-javascript "access 1 year"
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
L’instruction « ExpiresByType » permet de définir une date d’expiration au type de fichiers définis. L’instruction Cache-Control vient compléter l’instruction ExpiresByType. En simplifiant, elle offre beaucoup plus d’options et permet de faire la même chose que l’instruction ExpiresByType… Cependant on utilise souvent les deux instructions en même temps histoire de couvrir un large éventail de navigateurs web, y compris les plus anciens.
On ajoute donc en plus ce code à la fin de votre .htaccess :
<FilesMatch "\.(ico|gif|png|jpe?g)$">Header set Cache-Control "max-age=2628000, public"
<FilesMatch "\.(js|css)$">Header set Cache-Control "max-age=31536000, public"
<FilesMatch "\.(htm|html|php|cgi|scgi|fcgi)$">Header unset Cache-Control
Une fois l’un des plug-in installés, activer la mise en cache du navigateur est aussi simple que d’accéder aux paramètres généraux, de cocher une case et de cliquer sur “Enregistrer tous les paramètres”.
Via W3 SuperCache :Etape 4 : Réduire le temps de réponse du serveur
L’un des principaux problèmes qui ralentissent un serveur est le va-et-vient désordonné entre les fichiers PHP et la base de données. Heureusement, W3 Total Cache offre une solution sous forme de mise en cache de pages. En fait, cela peut accélérer les choses même si vous ne recevez pas l’avertissement de réponse du serveur.
Avec la mise en cache des pages, nous créons essentiellement une copie statique d’une page plutôt que de demander au serveur de générer la page à chaque visite. Cela permet d’alléger considérablement le serveur.
Pour activer la mise en cache des pages :
- Acheter un certificat SSL
- IMPORTANT : Rappelez-vous que vous créez des pages en cache, ce qui signifie qu’elles ne changent pas. Lorsque vous mettez à jour une page, W3 Total Cache est configuré pour vider le cache de cette page et le reconstruire. Cependant, des changements plus globaux comme les menus, les widgets et ainsi de suite peuvent être mis à jour sans que le cache ne soit effacé. Si vous faites un changement et que vous ne voyez pas la mise à jour en direct, cliquez simplement sur l’un des boutons “purger le cache” ou “vider le cache” dans la zone du plug-in.
Étape 5 : Minification
La minification est une technique qui consiste à améliorer les performances de votre site web. Elle permet de réduire la taille de vos fichiers et scripts front-end (HTML, CSS, JS) en supprimant les caractères spéciaux, tels que les espaces et les commentaires, à partir de ces fichiers.
Nous allons revenir une fois de plus à W3 Total Cache, qui inclut la fonction dans ces paramètres généraux (bien que vous aurez besoin d’aller dans les paramètres avancés ici aussi). Vous les trouverez ici : - Une fois la mimification réalisé, nous nous apercevons que l’application tarteaucitron (solutions de recueil de consentement aux cookies – respect de la RGPD) n’est plus actif. Nous allons donc dans les paramètres avancés exclure de la mimification /tarteaucitron/tarteaucitron.js ainsi que les fichiers de style .css
- Nous obtenons cependant le résultat suivant pour le test PageSpeed de Google :
- Mobile : 57/100
- Ordinateur : 54/10
Nous sommes donc revenu en arrière, bien que nous augmentons notre score de performance d’après GTMetrix , nous augmentons cependant fortement la vitesse de chargement de la page ce que l’on ne recherche pas.-
Etape 6 : Compression Gzip
La compression est la réduction délibérée de la taille des données pour économiser de l’espace de stockage ou augmenter le taux de transfert de données. La compression Gzip est le plus souvent utilisée pour compresser les pages Web sur le serveur pour la décompression dans le navigateur.
Sur un serveur Apache, activer la compression Gzip est assez simple. Ajoutez ce qui suis dans votre fichier .htaccess :
# START Compression
# Autoriser la compression uniquement pour ces types MIME
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/richtext
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xsd
AddOutputFilterByType DEFLATE text/xsl
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
# Suppression des bugs navigateur (nécessaire pour les vieux navigateurs)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
# END CompressionVous pouvez vérifier la prise en charge de la compression gzip en utilisant l’outil https://checkgzipcompression.com/
Pour aller plus loin…
Nous pourrions pour gagner encore du temps de chargement passer notre site web sur un Content Delivery Network (CDN). Le CDN est un réseau de serveurs répartis dans différents centres de données dans le monde. Il va optimiser le chargement du site web même si vos visiteurs sont éloignés de votre serveur web.
- Nous pourrions aussi changer d’hébergeur pour passer en France, actuellement le serveur de ce site web est situé à Karlsruhe (en Allemagne). Pour savoir où est situé votre serveur, vous pouvez utiliser l’outil http://whois.domaintools.com/