Optimisation WordPress
Publié le 24 novembre 2023
Votre site est horriblement lent. Votre serveur est mauvais. Peut-être. Mais il y a toujours des actions à mener avant d'incriminer le fournisseur de service. Pourquoi ne pas jeter un oeil du côté des images ? Leur accumulation incontrôlée peut vite devenir un boulet pour les performances de votre WordPress... À moins de recourir à quelques bonnes pratiques radicales.
Poids, taille, format : la base pour un chargement rapide
Je vous ai déjà vanté dans cet article l'importance de bien choisir le format de vos images sur WordPress. JPEG, PNG, WEBP, tout y passe, y compris les moyens de gérer leur taille et de les compresser encore un peu plus. Bien entendu, il s'agit d'une réflexion à globale à faire en amont. Soit lors de la création du site web soit lors de sa refonte. Cependant, s'il s'agit d'une grande part de l'optimisation de votre WordPress, celle-ci ne s'arrête pas (encore) là. Il est toujours possible d'aller encore grappiller quelques % sur les tests de performance et quelques dixièmes de seconde de chargement pour vos utilisateurs.
Sortez le cache !
Qu'est-ce que la mise en cache ? Lorsque votre site web s'affiche, vous avez la possibilité de demander au navigateur du visiteur de sauvegarder certains de ses fichiers sur son propre ordinateur. Les navigateurs tels que Chrome ou Firefox chargeront ensuite ces fichiers dans l'un de leurs répertoires respectifs.
Ainsi, lorsqu'un visiteur revient sur votre site, les données ne sont pas entièrement chargées depuis le serveur de l'hébergeur, mais directement depuis l'ordinateur du visiteur, ce qui permet de gagner du temps. En effet, le temps de chargement dépend fortement de la transmission entre l'ordinateur du visiteur et le serveur. De plus, cette approche peut améliorer la rapidité du site pour de nouveaux visiteurs, car le trafic vers le serveur est réduit de facto. Alors, comment mettre en cache vos images et autres fichiers sous WordPress ? Plusieurs méthodes sont disponibles !
Gérez la mise en cache des images comme un pro dans le .htaccess
Le fichier .htaccess se situe à la racine de votre installation WordPress, juste en-dessous du dossier wp-includes. Vous pouvez accéder à vos fichiers en FTP avec un client. Ici, nous utiliserons Filezilla pour cela.
Le fichier .htaccess se situe à la racine de votre installation WordPress, juste en-dessous du dossier wp-includes.
Si vous souhaitez mettre en cache vos images sans utiliser de plugin, vérifiez d'abord que votre hébergeur a activé mod_headers sur son serveur, ce qui est généralement le cas. Ensuite, ajoutez les lignes suivantes à votre fichier .htaccess, juste après l'annotation #END WORDPRESS.
<IfModule mod_headers.c>
<FilesMatch "\.(gif|ico|jpeg|jpg|png|webp)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>Ces lignes spécifient au serveur quels types de fichiers doivent être mis en cache. Tous les formats d'images tels que gif, jpeg, png, et même ico sont inclus. La durée de mise en cache est définie en secondes, comme illustré dans l'exemple avec une période d'un an. Pendant cette période, les données seront stockées dans un répertoire du navigateur sur l'ordinateur de l'utilisateur.
Pour maintenir la validité de la mise en cache, le navigateur enverra périodiquement des requêtes pour s'assurer que les données en cache sont toujours à jour.
Néanmoins, il existe une possibilité d'éviter l'envoi de cette requête en spécifiant une durée d'expiration de validité. Pour ce faire, assurez-vous que le module mod_expire est activé sur le serveur de votre hébergeur, puis ajoutez les lignes suivantes.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresDefault "access plus 1 year"
</IfModule>Dans ce contexte, la durée d'expiration du cache est fixée à un an en fonction du type de fichier. Vous pouvez enrichir ces en-têtes d'expiration en ajoutant des directives de contrôle de cache avec les lignes suivantes.
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpeg|png|gif|ico|webp)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>Faîtes bien en sorte que les durées de cache correspondent aux durées d'expiration. Après, si vos sites sont hébergés chez WPServeur, vous n'avez pas à vous compliquer la vie avec ces considérations. Ceci pour deux raisons (au moins). D'une part, il n'y a pas de fichier .htaccess sur WPServeur. D'autre part, la configuration du cache est déjà réglée par défaut de manière optimale sur nos serveurs.
Lazy load : de la triche mais de la triche efficace pour charger les images
Voici une méthode fascinante, bien que sa mise en œuvre ait souvent été plus complexe qu'il n'y paraît. À moins d'avoir adopté précocement une solution telle que WP Rocket... Cependant, cela semble appartenir au passé depuis l'avènement de WordPress 5.5.
En effet, à partir de cette version, WordPress prend en charge nativement le lazy load grâce à de nouvelles balises. De plus, les navigateurs eux-mêmes s'adaptent à cette tendance, notamment Chrome et Firefox.
Ainsi, les problèmes d'affichage résultant de la mise en œuvre du lazy loading se font de plus en plus rares, rendant son utilisation de plus en plus attrayante.
Mais qu'est-ce que le lazy load exactement ? Lorsqu'une page web s'affiche, tous ses éléments se chargent simultanément. Ce n'est qu'une fois que ce chargement est terminé que vous pouvez interagir avec la page. Le lazy load, littéralement le "chargement paresseux", consiste à charger un élément uniquement lorsqu'il devient visible à l'écran.
En réalité, il s'agit du processus utilisé par les réseaux sociaux pour afficher leur flux d'activité. C'est le cas de Facebook, Twitter, Pinterest, entre autres. Il permet d'interagir avec la page web sans que tous ses éléments ne soient chargés initialement. C'est particulièrement pratique pour les sites One Page ou ceux proposant de nombreux médias, tels que des portfolios.
En théorie, le lazy load est donc appliqué nativement depuis WordPress 5.5. Mais vous pouvez toujours utiliser un plugin pour mieux le monitorer. WP Rocket propose une option assez sommaire mais fait toujours l'affaire. Le plugin A3 Lazy Load permet quant à lui une gestion plus fine du procédé. En effet, ce plugin vous permet de désactiver le procédé en cas d'incompatibilité. Il permet aussi de ne l'activer qu'à certains endroits de votre WordPress, si nécessaire. Pour cela, un filtrage par type de publication ou par emplacement est disponible entre autres.
CDN : pensez-y !
Un CDN, ou Réseau de diffusion de contenu, est similaire à un serveur tel que celui fourni par votre hébergeur. Cependant, la différence fondamentale réside dans le fait qu'un CDN consiste en un serveur d'origine qui se déploie ensuite sur plusieurs serveurs périphériques. Il agit en complément du serveur fourni par votre hébergeur, lequel demeure essentiel. Il est important de noter que les CDN ne proposent ni services d'hébergement ni noms de domaine.
Ces serveurs périphériques sont répartis à travers le monde, visant ainsi à se rapprocher autant que possible des visiteurs de votre site web. Ainsi, c'est via le serveur périphérique le plus proche de l'internaute que ses pages seront chargées.
Mais pourquoi diable parle-t-il de CDN alors, me direz-vous ? Après tout, vous ne cherchez pas à mieux charger vos pages à l'autre bout du monde. C'est ici et maintenant qui vous intéresse. Seulement, un CDN permet de déplacer tout ou partie du chargement de vos contenus vers un serveur tiers. Ainsi, la charge du serveur hébergeant votre site s'en trouve allégée. De plus, les CDN proposent la plupart du temps leurs propres fonctionnalités d'optimisation (cache, chargement etc...). Vous pouvez donc, par ce biais, régler différemment l'infrastructure chargeant vos images de celle chargeant d'autres ressources de votre WordPress.
Chez WPServeur, un CDN est inclus à partir de notre offre 3 WordPress. Une option est disponible pour les abonnements inférieurs.
Mais vous pouvez tout aussi bien opter pour un autre service. Le plus connu étant très certainement Cloudflare. Ce service est très utilisé car accessible gratuitement. Cependant, Cloudflare vous oblige à déplacer la gestion de votre domaine vers ses services. D'autre part, il ne vous permet pas de choisir les contenus que vous souhaitez service via leurs serveurs. C'est tout ou rien !
À moins que vous ne soyez tenté de recourir à une marque que vous connaissez bien ? Si vous êtes un utilisateur satisfait de WP Rocket, sa maison mère vend un CDN sous le nom de RocketCDN. Comme tous les autres services du genre, WP Rocket vous permet de l'implémenter et le monitorer directement sur votre WordPress plutôt que sur une interface externe.
En bref, il y a de nombreux moyens d'améliorer le chargement de vos images sur WordPress. Et ce qu'il s'agisse du cache ou des moyens de les charger sur vos pages. À l'inverse du poids, de la taille et de la compression des images, ces moyens peuvent se configurer, s'adapter et s'améliorer au fur et à mesure. Toutefois, ces réglages ne rattraperont jamais une mauvaise conception de votre WordPress. Voez donc tout cela comme un tout !
Cela dit, vous n'êtes pas obligé de mettre les doigts dans les code ! Enfin, si vous faîtes le choix de WPServeur ! Non seulement l'infrastructure est optimisée et protégée pour favoriser le chargement de votre site web. Mais le support technique est aussi là pour vous aider dans l'amélioration constante des performances de votre site selon ses spécificités.
N'hésitez pas à consulter nos offres !
