WordPress et optimisation des performances en 2020

Comment optimiser la vitesse de chargement de votre site WordPress en 2020 ? À l’heure où l’expérience utilisateur (UX) devient primordiale et où il faut se démarquer de la concurrence, voici une « recette » technique permettant d’obtenir des résultats qui feront la différence.

La vitesse de chargement : un critère important ?

En cette fin d’année 2020, plus que jamais la vitesse des sites devient un critère majeur de réussite. Non pas pour le référencement (actuellement Google ne tient pas compte de ce critère pour le ranking des sites, mais il pourrait devenir un critère mineur en 2021) mais pour une meilleure expérience utilisateur (UX), et pour faciliter le crawl, et donc l’indexation des pages.

En 2017, le rapport Speed matters de Google a démontré que plus de la moitié (53% précisément) des internautes renonçaient à la visite de sites sur mobiles s’ils dépassaient 3 secondes de temps de chargement.

Lire le rapport original (en anglais)

Mesurer la vitesse de son site

Il existe un certain nombre d’outils en ligne permettant de mesurer les performances de chargement des sites internet. Outre l’aspect mesure, ils permettent également d’identifier les points d’amélioration et d’orienter les travaux d’optimisation technique à réaliser.

Il faut noter que la mesure des performances dépend en partie de l’endroit où est réalisé la mesure : ainsi, un examen GTMetrix réalisé depuis un serveur situé en Amérique du Nord sur un site hébergé en Europe sera toujours moins bon que le même examen réalisé depuis un serveur européen. C’est pour cette raison que je réalise, lorsque je le peux choisir, toutes mes évaluations depuis des serveurs situés géographiquement en Europe.

Google PageSpeed
Google PageSpeed
GTMetrix et sa page de résultat
GTMetrix et sa page de résultat
Dareboost et son rapport très complet
Dareboost et son rapport très complet

L’outil Google Page Speed est disponible gratuitement en ligne et permet, dans une interface épurée et simple, de mesurer les performances de ses pages, telles qu’elles sont (à priori) prises en comptes par Google lui-même. Les conseils donnés sont clairs mais ne donnent pas toujours d’indications précises quant aux optimisations à réaliser.

GTMetrix est certainement l’un des outils les plus connus. La très récente mise à jour de son moteur d’analyse utilise justement l’algorithme Lighthouse, mis en œuvre chez Google sur son propre outil. C’est celui que j’utilise de préférence pour tester mes sites, car l’interface est claire et les conseils précis. La version gratuite permet de réaliser 10 analyses par jour, ce qui est généralement suffisant.

DareBoost fait parti également des outils intéressants, car il va assez loin dans l’analyse et offre également des conseils précis (à noter qu’il audite également d’autres critères que les performances de votre site comme l’UX ou la sécurité… mais est limité à 5 analyses par mois dans sa version gratuite !)

Le cas WordPress

Concernant WordPress, il existe diverses techniques et plugins pour l’optimisation des performances. Mais d’expérience, un plugin unique ne suffit jamais, et il faut, pour obtenir des résultats réellement optimaux, mettre les mains dans le moteur. Le meilleur d’entre eux demeure à mon sens WPRocket, mais il est exclusivement payant (ce qui pourra rebuter les petits éditeurs de sites) et il ne règle pas certains détails permettant de faire la différence.

L’hébergeur a également son importance. J’ai toujours opté pour des solutions d’hébergement que je voulais qualitatives, locales (vive les hébergeurs français !) et offrant des solutions optimisées pour WordPress. Depuis quelque temps, j’ai opté, comme beaucoup de spécialistes de ce CMS, pour O2Switch.

O2Switch, super hébergeur pour WordPress !

Outre des prestations au juste prix (5€ HT/mois c’est juste imbattable à ce niveau de qualité de service) cet hébergeur, situé à Clermont-Ferrand, propose une offre unique et infogérée réellement optimisée pour WordPress.

Je vous propose une solution basée exclusivement sur des plugins gratuits et un peu de code, et offrant des résultats prometteurs : suivez le guide !

Part I : Impact du thème et des médias

En matière de performances, les éléments techniques permettant l’enrichissement des pages HTML impactent fortement les temps de chargement, du fait de leur poids : images, fichiers CSS et Javascript, médias, etc.

Il est donc important de prendre les mesures nécessaires – si possible – pour optimiser les temps de chargement, et offrir aux internautes une expérience utilisateur convenable.

Comment le thème influe sur les performances

Le choix du thème est un élément primordial en matière de performances. Certains templates « Premium » offrent de très nombreuses possibilités de personnalisations, mais demandent en retour l’utilisation d’un grand nombre de ressources techniques (frameworks javascript, plugins intégrés au thème, feuilles de styles CSS complexes, etc.)

Les thèmes gratuits disponibles sur le repository WordPress sont généralement plus légers, mais demandent en retour, si l’on veut envisager des mises en page élaborées, l’utilisation de plugins qui viennent eux, alourdir le code final.

Mon conseil : Si vous ne construisez pas vous-même vos thèmes, n’hésitez pas à auditer les démos de sites sur les templates que vous envisagez d’utiliser.

Certains thèmes, qui utilisent des pages builders propres à leur créateur, offrent des performances étonnantes (à l’image des templates de chez Kriesi, disponibles chez ThemeForest. J’ai notamment utilisé le célèbre Enfold, avec lequel je détiens d’ailleurs mon record absolu de notation sur GTMetrix)

J’ai depuis opté pour Astra Pro (la version payante du très célèbre Astra, disponible gratuitement sur le repository) car outre le fait d’être très bien optimisé pour le SEO (excellence du balisage HTML, légèreté du code) il est très léger et offre des performances natives très élevées.

J’ai fait le choix de l’utiliser avec Gutenberg plutôt qu’Elementor, Beaver Builder ou Brizy, l’intérêt étant qu’en cas de refonte du site ultérieure, il sera plus aisée de retrouver des thèmes compatibles avec le page builder natif de WordPress. Mais aussi parce que cela allège légèrement le code final.

De l’usage intelligent des images

Il est rarissime aujourd’hui de se passer des images pour communiquer. L’optimisation des performances aux petits oignons nécessite donc d’étudier finement quelles tailles d’images sont nécessaires au fonctionnement de votre site dans sa configuration finale.

Mon conseil : une fois votre site terminé, détecter les images ne s’affichant pas dans leurs dimensions d’origine (via les CSS notamment) et en adapter la taille à celle de leur affichage réel.

Il n’y a rien de pire, en matières de plombage de performances, que des images en haute définition affichées en vignettes sur les sites internet ! Des outils d’analyse en ligne comme Dareboost vous permettent de les déceler rapidement, via la catégorie « Volume de données » :

Dareboost sait détecter les images redimensionnées via la feuille de styles CSS
Dareboost vous indique quelles images sont concernées par des problèmes de taille

L’astuce consiste donc à détecter les différents formats d’images réellement utilisés sur votre mise en page, et d’adapter les tailles d’images intermédiaires de WordPress en conséquence pour les utiliser.

Par exemple, sur ce site, j’ai redéfini la taille des « vignettes » (thumbnails) à 128×128 pixels au lieu des 150×150 pixels originels car j’utilise cette taille à l’affichage à plusieurs endroits (mais je n’utilise absolument pas les vignettes en 150 pixels), et la taille « Medium » à 303 pixels de largeur, afin de l’utiliser dans les archives d’articles, car les images à la une font justement 303 pixels de largeur sur mon site. Pour ce faire, je suis passé par le menu Réglages / Médias de mon site WordPress.

Si vous utilisez plus de 3 formats différents, ajoutez ceux manquants via le fichier functions.php de votre thème :

add_image_size( 'Taille80px', 80, 80 );
add_image_size( 'Taille500px', 500, 500 );

Il peut être utile également de supprimer les dimensions d’images inutiles parfois automatiquement ajoutées par les thèmes, grâce à ce petit hack, toujours à placer dans le fichier functions.php de votre thème :

/**
* Suppression des formats d'images inutiles
*/
function optim_remove_image_sizes() {
	remove_image_size('1536x1536');
	remove_image_size('2048x2048');
    remove_image_size('Autre_format');
}
add_action('init', 'optim_remove_image_sizes', 90);

Une fois les tailles convenablement redéfinies, utilisez l’excellent et indispensable plugin Regenerate Thumbnails pour redimensionner toutes vos images aux formats adéquats et supprimer les formats inutilisés.

Le gain est très souvent appréciable et permet d’améliorer clairement les performances, certains thèmes n’étant absolument pas optimisés au niveau de l’affichage des images.

Impact des éléments extérieurs (publicités, réseaux sociaux…)

Il ne faut jamais négliger l’impact des éléments extérieurs à votre site, c’est-à-dire « apportés » par des serveurs externes au votre. Je pense là bien entendu aux addons et autres widgets liés aux réseaux sociaux, mais également aux encarts publicitaires.

L’essor des publicités avec des contenus enrichis impacte considérablement les temps de chargement : sur l’un de mes sites personnels, monétisé simplement avec AdSense et Amazon, le temps de chargement de la page d’accueil passe de 0.6 seconde à des temps compris entre 2.5 et 4.5 secondes (!) uniquement du fait des publicités, qui peuvent alourdir la page de plusieurs méga-octets si les encarts sont enrichis en vidéos !

Il n’existe malheureusement pas de moyens techniques pour améliorer les performances sur ces éléments, sauf à limiter au maximum l’impact performances, et donc (mathématiquement) le nombre d’éléments externes à charger sur vos pages.

Mon conseil : réduire le nombre de publicités sur vos pages et privilégier la pub sur mobile, et utiliser des boutons de partages sociaux à base de liens (URL) comme je le fais au bas de cet article, plutôt que les solutions JavaScript proposées par les réseaux sociaux, qui chargent des scripts souvent peu optimisés.

Part II : de bons plugins pour de bons résultats

Il existe énormément de plugins permettant d’améliorer les performances de vos sites WordPress. Les solutions sont donc nombreuses, et il serait présomptueux d’affirmer que MA solution est la meilleure. Elle a néanmoins le mérite d’offrir de bons résultats sur l’ensemble de mes sites.

Je décompose l’utilisation des plugins pour 3 tâches principales :

  • l’optimisation de la mise en cache, qui va éviter les accès base de données et les temps de calcul inutiles
  • l’optimisation du poids des images, avec les nouveaux formats et plus particulièrement le Webp
  • la minification et le déport asynchrone des fichiers JavaScript et CSS

Et voici donc mon trio gagnant.

Le cache avec WP SuperCache

WPSuperCache est l’une des plus anciennes extensions de cache disponible pour WordPress, éditée par Automattic, la maison mère de WordPress. Il en existe d’autres, celle-ci a l’avantage de fonctionner plutôt bien et de rester simple à utiliser. Elle offre de bonnes performances dans sa configuration de base. Il y a probablement mieux (sur certains projets j’ai notamment utilisé WP Fastest Cache ou W3 Total Cache) mais WPSuperCache est une valeur sûre, qui fait ce qu’on lui demande.

Mes conseils de paramétrage :

Dans l’onglet « Avancé », cocher Activer le cache et sélectionner la méthode de cache « Essentiel ». Puis cocher les options suivantes :

  • Désactiver le cache pour les utilisateurs connectés (ndlr : ralentit votre navigation lorsque vous êtes connectés, mais évite les déboires de mise à jour lorsque vous modifiez vos contenus !)
  • Compresse les pages afin qu’elles soient servies plus rapidement aux visiteurs
  • Régénération du cache
  • Mettre en cache les en-têtes HTTP en même temps que le contenu des pages
  • Cache 304 de navigateur

Les autres options ne sont pas nécessaires dans la grande majorité des cas.

Les images avec WebP Express

Extension relativement récente, Webp Express permet de générer à la volée, pour toutes les images de votre site, leur version au format webp, ultra optimisé pour un chargement rapide. Tous les navigateurs ne prennent pas encore ce nouveau format, mais les résultats sont assez spectaculaires, avec des dizaines de kilo-octets économisées en quelques clics !

Créé par Google, le format webp est un format d’image matriciel, destiné à drastiquement réduire le poids des images sur le web. Et ça fonctionne, avec un gain annoncé de 25% à 37% sur les images au format PNG et JPEG, à qualité d’affichage identique (mais bien souvent plus en pratique puisqu’il est courant de dépasser les 50%)

Mon conseil de paramétrage : activer l’extension et la laisser sur les préférences d’origine ; juste penser la première fois à cliquer sur le bouton Save Settings and force new .htaccess rules en haut à droite de la page Settings afin de d’activer l’optimisation fournie.

La gestion des fichiers JS/CSS avec Fast Velocity Minify

L’extension de cache WPSuperCache n’intègre pas la minification et le chargement asynchrone des fichiers CSS, JavaScript et polices de caractères : il faut donc passer par une autre extension, et c’est là que Fast Velocity Minify entre en jeu ! Elle n’est pas la seule à savoir le faire, mais la finesse de ses paramétrages permet de s’adapter à toutes les situations et thèmes.

En effet, il n’est pas rare que certains templates utilisant de nombreuses ressources JS et CSS supportent mal les regroupements et minifications, ce qui engendrent au mieux des décalages ou des anomalies fonctionnelles, et au pire la disparition pure et simple des styles et fonctionnalités dynamiques côté front (déjà vécu !) ; il y a donc un grand intérêt à pouvoir finement régler l’optimisation.

Mon conseil de paramétrage : voici les réglages que je conseille pour des résultats optimaux. Attention, il est possible que certains choix techniques engendrent des dysfonctionnements ! Il faudra donc adapter en conséquence ces éléments pour ne pas entraver le bon fonctionnement de votre site.

Rendez-vous dans l’onglet « Settings » de l’extension :

  • Functionality : cocher Fix page editors (évite que le back-office parte en vrille !)
  • URL Options : choisir Force HTTPS urls (si vous utilisez un certificat SSL… ce qui est fortement recommandé !)
  • HTML Options : cocher uniquement Cleanup header
  • Font options : à n’utiliser que si vous avez des dysfonctionnements au niveau des fontes de caractères
  • Google Fonts : à n’utiliser que si vous utilisez des Google Fonts. Dans ce cas choisir Async Font Awesome CSS file
  • CSS Options : cocher Preserve the order of CSS et Inline CSS in the footer ; personnellement je coche également Disable the « Print » related stylesheets s’il n’y a pas d’intérêt à les utiliser
  • JavaScript Options : à n’utiliser que si vous avez des dysfonctionnements JS en front (bien purger le cache une fois la minification désactivée)
  • Render-blocking JS : options à utiliser avec certains thèmes ; on peut cocher Enable defer parsing of FVM JS files globally mais à bien tester avant la mise en prod !
  • PageSpeed settings : aucun intérêt (optimise uniquement le rendu pour Google PageSpeed !)

Pour les utilisateurs avancés, les onglets « Pro » et « Developers » permettent d’aller encore plus loin, notamment avec les listes d’exclusion et la mise en place de paramètres spéciaux.

L’alternative payante : WPRocket + WebP Express

Si vous utilisez WPRocket (que je conseille fortement si vous ne voulez pas vous embêter à paramétrer des tas de choses !), seul l’usage de WebP Express sera nécessaire en complément (Il est d’ailleurs conseillé sur le site officiel de l’extension)

Le gros avantage de WPRocket est qu’il vous évite de réaliser les modifications présentées ci-après (Part III) ; c’est à ma connaissance le seul plugin sur le marché intégrant autant d’optimisations.

En termes de performances, vous serez à des niveaux similaires aux résultats obtenus grâce aux conseils prodigués dans cet article, parfois mieux, mais une chose est certaine : ce sera excellent !

Part III : les optimisations complémentaires

On peut ajouter quelques optimisations dans le fichier .htaccess, qui ne sont pas prises en charge par les plugins ci-dessus. On réalise donc 3 types d’amélioration, essentielles pour de bonnes performances et que l’on peut mettre en œuvre sur un serveur Apache.

Mon conseil : tester ces options une à une sur votre serveur avant la mise en production !

Activation de la compression GZip côté serveur

On demande simplement que les fichiers renvoyés par le serveur Apache soient compressés, selon leur typologie (inutile donc de compresser les images par exemple, ce qui occuperait des ressources inutilement) ; une option est également ajoutée pour que les utilisateurs de proxies soient servis convenablement aussi.

# ACTIVATION DE LA COMPRESSION DES PAGES
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php

# POUR LES NAVIGATEURS INCOMPATIBLES
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# PAS DE COMPRESSION DES IMAGES (PAS NECESSAIRE)
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip

# GESTION CORRECTE DES PROXIES (POUR CEUX QUI EN UTILISENT)
Header append Vary User-Agent env=!dont-vary

Dates d’expiration et mise en cache côté serveur

On demande au serveur d’indiquer aux navigateurs de mettre en cache les ressources servies, afin d’éviter leur rechargement systématique à chaque nouvel appel de page. On distingue donc les fichiers statiques des fichiers dynamiques (nb : les règles ci-dessous sont génériques et non propres à WordPress)

# GESTION DE LA MISE EN CACHE
<IfModule mod_headers.c>

	# MISE EN CACHE DES FICHIERS NON DYNAMIQUES
	<FilesMatch "\\.(ico|jpe?g|JPE?G|png|gif|swf|css|gz)$">
	Header set Cache-Control "max-age=2592000, public"
	</FilesMatch>
	<FilesMatch "\\.(js)$">
	Header set Cache-Control "max-age=2592000, private"
	</FilesMatch>
	<filesMatch "\\.(html|htm)$">
	Header set Cache-Control "max-age=7200, public"
	</filesMatch>

	# DÉSACTIVATION DE LA MISE EN CACHE DES FICHIERS DYNAMIQUES
	<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
	Header unset Cache-Control
	</FilesMatch>

</IfModule>

Puis on indique les dates d’expiration des différents éléments (durée durant laquelle ils ne seront pas rafraîchis par les navigateurs) :

# DEFINITION DES DATES D'EXPIRATION POUR FAVORISER LE CACHE NAVIGATEUR
<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Suppression des Etags

On termine notre optimisation par la suppression de l’un des outils d’Apache lui permettant d’identifier la version (unique, selon son URL) de chaque fichier envoyé lors des appels client. En cela, les Etags font généralement double-emploi avec d’autres mécanismes utilisés par Apache (notamment le marqueur Last-modified) : on peut donc les supprimer et ainsi gagner autant de requêtes HTTP que l’on enverra de ressources depuis notre serveur.

# SUPPRESSION DES ETAGS
Header unset ETag
FileETag none

Les résultats

En termes de performances, on arrive à des niveaux intéressants, avec des vitesses de chargement assez impressionnantes (en tant qu’utilisateur s’entend !) et des notations finales significatives.

Plutôt que de grands discours, voici deux notes obtenues avec ces réglages. D’abord sur ce site (qui utilise Astra Pro) :

Note obtenue après optimisation WordPress sur effi10.com
Une jolie note pour effi10.com

Puis sur l’un des derniers sites que j’ai mis en œuvre, basé sur le template premium Enfold :

Note obtenue après optimisation WordPress sur sylcoif.fr

Il existe d’autres méthodes, d’autres techniques pour optimiser les performances de WordPress, car il n’y a pas un chemin unique pour remplir les objectifs que l’on peut se fixer. Et vous, quelles sont vos techniques d’optimisation ?

Voir tous les articles de la catégorie WordPress

Laisser un commentaire

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

consequat. nunc in accumsan nec vel, commodo id suscipit ut Retour haut de page