3 moyens de favoriser le chargement des images sur WordPress

Dernier chapitre de mon tour d’horizon sur les images sous WordPress ! Un sujet qui peut vite devenir un véritable problème en terme de performance… Il y a peu, je vous expliquais comment optimiser la taille de vos médias. Ensuite, nous avons vu ensemble comment alléger nos photos.

Toutefois, il existe encore d’autres moyens pour en favoriser le chargement ! D’ailleurs, par extension, c’est l’affichage de vos pages qui s’en trouvera accéléré. Donc, une fois que vos images sont bien dimensionnées et allégées au maximum, voyons comment encore gagner en rapidité !

 

Optimiser le cache des images

Oui mais voilà… Qu’est-ce donc que la mise en cache ? Lorsque votre site web s’affiche, vous pouvez lui demander de copier certains de ses fichiers sur l’ordinateur du visiteur. Le navigateur utilisé (Chrome, Firefox…) va donc charger ces fichiers dans l’un de ses répertoires.

Ainsi, lorsque ce visiteur reviendra, les données ne seront pas toutes chargées depuis le serveur de votre hébergeur mais directement depuis son ordinateur. Gain de temps assuré !

En effet, le temps de chargement dépend fortement du temps de transmission entre l’ordinateur du visiteur et le serveur. De plus, cela peut favoriser la rapidité de votre site pour les nouveaux visiteurs puisque le trafic vers le serveur s’en trouve de facto réduit ! Donc comment mettre en cache vos images et autres fichiers sous WordPress ? Plusieurs méthodes s’offrent à nous !

Mettre en cache manuellement des images via .htaccess

Avant toute chose : si vous ne savez pas ce qu’est le fichier .htaccess ou si vous tâtonnez, voici de quoi éclairer votre lanterne. Pour les autres, c’est parti ! Celui-ci se trouve à la racine de votre WordPress, juste en-dessous du dossier wp-includes.

Si vous souhaitez mettre vos images en cache sans passer par un plugin, assurez-vous d’abord que votre hébergeur ait activé mod_headers sur son serveur. Sachez que c’est généralement le cas. Ensuite, ajoutez ces quelques lignes dans votre .htaccess à la suite de l’annotation #END WORDPRESS.

<IfModule mod_headers.c>

<FilesMatch “\.(gif|ico|jpeg|jpg|png|css|js)$”>

Header set Cache-Control “max-age=604800, public”

</FilesMatch>

</IfModule>

Elles indiquent au serveur quels types de fichiers mettre en cache. Tous les types d’images y passent (gif, jpeg, png et même ico). De plus, pour le bien de l’exemple, on a même ajouté les javascripts et le style CSS.

La durée de mise en cache se définit en secondes soit 7 jours dans l’exemple donné. Ces données seront donc sauvegardées dans un répertoire de votre navigateur sur votre ordinateur pendant cette durée. Le navigateur va ainsi transmettre régulièrement une requête pour vérifier que la mise en cache est toujours valide.

Cependant, il est possible d’éviter la transmission de cette requête en indiquant une durée de validité d’expiration. Pour cela, il faut vous assurer que mod_expire soit bien activé sur le serveur de votre hébergeur. Ensuite, entrez 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 text/css „access plus 1 month“

ExpiresByType text/html „access plus 1 month“

ExpiresByType application/pdf „access plus 1 month“

ExpiresByType text/x-javascript „access plus 1 month“

ExpiresByType application/x-shockwave-flash „access plus 1 month“

ExpiresByType image/x-icon „access plus 1 year“

ExpiresDefault „access plus 1 month“

</IfModule>

Ici, selon le type de fichier, l’expiration du cache est définie entre un mois et un an. Vous pouvez compléter ces en-têtes d’expiration avec du cache control en entrant les lignes suivantes.

<IfModule mod_headers.c>

<FilesMatch "\.(ico|jpeg|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>

# Disable caching for scripts and other dynamic files

<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">

Header unset Cache-Control

</FilesMatch>

</IfModule>

Essayez juste que les durées de cache control soient en accord, plus ou moins, avec celles des en-têtes d’expiration.

Utilisez la compression GZip

Ce n’est pas une méthode de cache à proprement parler. Cependant, cette option étant proposée dans la quasi totalité des plugins de cache, je vous en fais part ici.

Comme son nom l’indique, il s’agit de requêtes forçant la compression des fichiers. Plus petits, leur chargement et donc celui de votre site web s’en trouve accéléré. Voici les lignes à ajouter :

RewriteEngine on

#Check to see if browser can accept gzip files. If so and we have it - serve it!

ReWriteCond %{HTTP:accept-encoding} gzip

RewriteCond %{HTTP_USER_AGENT} !Safari

#make sure there's no trailing .gz on the url

ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$

#check to see if a .gz version of the file exists.

RewriteCond %{REQUEST_FILENAME}.gz -f

#All conditions met so add .gz to URL filename (invisibly)

RewriteRule ^(.+) $1.gz [QSA,L]

<IfModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_keep_workfiles No

mod_gzip_can_negotiate Yes

mod_gzip_add_header_count Yes

mod_gzip_send_vary Yes

mod_gzip_command_version '/mod_gzip_status'

mod_gzip_min_http 1000

mod_gzip_minimum_file_size 300

mod_gzip_maximum_file_size 512000

mod_gzip_maximum_inmem_size 60000

mod_gzip_handle_methods GET POST

mod_gzip_temp_dir /tmp

mod_gzip_item_include file \.html$

mod_gzip_item_include file \.php$

mod_gzip_item_include file \.pl$

mod_gzip_item_include file \.rb$

mod_gzip_item_include file \.py$

mod_gzip_item_include file \.cgi$

mod_gzip_item_include file \.css$

mod_gzip_item_include file \.js$

mod_gzip_item_include mime ^application/javascript$

mod_gzip_item_include mime ^application/x-javascript$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^httpd/unix-directory$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include handler ^server-status$

mod_gzip_item_include handler ^server-info$

mod_gzip_item_include handler ^application/x-httpd-php

mod_gzip_item_exclude mime ^image/.*

</IfModule>

Existe-il un plugin pour ça sur WordPress ?

Mais très certainement ! D’ailleurs, ils proposent, plus ou moins, les mêmes options. C’est sur leur prise en main et leur efficacité que la différence va se faire.

WP Super Cache : l’ami des noobies

Si vous ne savez pas très bien où vous mettez les pieds, WP Super Cache est fait pour vous ! Un simple bouton vous permet de mettre votre WordPress en cache sans vous embêter avec des réglages hasardeux.

Au cas où vous voudriez vous y essayer, chaque option a son explication et la mention “recommandé” ou non. Dommage que son efficacité soit très limitée par rapport à la concurrence. Même si elle fait très bien l’affaire.

WP Fastest Cache : simple et (presque) efficace

Question simplicité, WP Fastest Cache se situe dans le haut du panier. Même s’il vous faudra plus d’un clic pour activer le cache sur votre WordPress. Toutefois, les options essentielles sont là et bien expliquées quoique succinctement.

Cependant, on regrettera le nombre élevé d’options disponibles uniquement dans la version premium. Mais aussi une efficacité limitée au moment d’ouvrir les rapports de performance, notamment au niveau des minifications et combinaisons JS, CSS puis HTML.

W3 Total Cache : un outil (un peu trop) avancé

W3 Total Cache est probablement le plugin de cache gratuit le plus recommandé dans la communauté WordPress. Il n’empêche qu’il est aussi le plus compliqué à mettre en place. Ceci parce qu’il vous donne le contrôle sur toutes les options disponibles jusqu’à la durée exacte du cache.

Pour cela, pas question de se limiter à une seule page et un seul bouton. Onze onglets vous permettent customizer une cinquantaine de paramètres.

Des paramètres qui vont aussi lorgner du côté des en-têtes de sécurité incorporables dans votre .htaccess. Et c’est pour ça qu’une erreur d’affichage peut vite survenir à la suite d’un réglage malheureux. Et ce, même si vous suivez les nombreux tutos présents sur internet.

Plus qu’une extension de cache, W3 Total Cache devient donc plutôt un plugin d’optimisation du .htaccess. Bien pratique mais demandant un temps de prise en main et de compréhension assez important quand on débute. Le tout pour des performances pas toujours à la hauteur si on les compare à celles de WP Fastest Cache.

En règle générale, j’essaye de vous exposer les solutions gratuites ou, tout du moins, freemiums. Toutefois, en ce qui concerne les plugins de cache, vous pouvez vous tourner vers WP Rocket. Si vous avez de quoi investir, c’est bien l’extension qui allie le mieux efficacité et simplicité.

Chargez vos pages en Lazy Load

Voici un procédé très intéressant ! Cependant, sa mise en oeuvre s’est souvent révélée plus compliquée qu’il n’y paraît. À moins d’avoir investi très tôt dans une solution comme WP Rocket… Mais ceci semble appartenir à une époque révolue depuis l’avènement de WordPress 5.5.

En effet, depuis cette version, WordPress supporte nativement le lazy load via de nouvelles balises. D’autre part, les navigateurs se mettent aussi à la page dans ce domaine. Notamment Chrome et Firefox.

Ainsi, les problèmes d’affichage consécutifs à l’implantation du lazy loading se font de plus en plus rares. Il est donc de plus en plus intéressant d’y recourir !

Mais qu’est-ce donc que le lazy load ? Quand une page web s’affiche, tous ses éléments se chargent en même temps. Ce n’est qu’une fois que ce chargement est terminé que vous pouvez interagir avec la page. Le lazy load, littéralement “chargement paresseux”, consiste à ne charger un élément qu’une fois que celui-ci apparaît à l’écran.

En fait, il s’agit du procédé utilisé par les réseaux sociaux pour afficher leur flux d’activité. C’est le cas de Facebook, Twitter, Pinterest… Il permet d’interagir avec la page web sans que tous ses éléments ne soient chargés. Pratique si vous avez un site One Page ou proposant beaucoup de médias (portfolio etc…).

Quel plugin choisir pour charger mes images en Lazy Load ?

Désormais, la plupart des plugins de cache proposent cette option. C’est le cas de W3 Total Cache ou encore de WP Fastest Cache et WP Rocket en version payante. Toutefois, si vous avez opté pour une mise en cache manuelle, vous pouvez vous tourner vers quelques petites extensions monotâches qui font très bien leur travail.

A3 Lazy Load : la référence en la matière

C’est le plus connu. C’est aussi le plus simple et le plus complet des plugins de lazy loading. A3 Lazy Load propose un panel d’options permettant notamment de différencier les images à charger en différé ou non. Ceci selon leur classe CSS ou leur placement au sein de la page.

Cependant, l’extension s’occupe aussi des vidéos, des iframes et des scripts. Il est aussi possible d’exclure des pages entières du processus, si besoin. Le tout avec quelques options supplémentaires comme celles liées au panneau d’administration, à l’apparence des images pendant leur chargement ou encore la compatibilité avec JetPack.

BJ Lazy Load : droit à l’essentiel

Interface minimaliste, poids minimum et options essentielles : voici BJ Lazy Load !

Ici aussi, on retrouve le paramétrage du chargement des images selon leur placement dans la page, leur type ou encore leur classe CSS. Mais c’est tout… ou presque. Oui, le lazy load est applicables aussi aux iframes.

Mais rien pour les videos, les embeds et les scripts. Cela dit, vous pouvez définir une image par défaut qui s’affichera à la place de celles en cours de chargement.

Recourir à un CDN

CDN comme Content Delivery Network ! Qu’est-ce que c’est ? Il s’agit d’un serveur comme celui que propose votre hébergeur. La différence réside dans le fait que ce serveur d’origine se déploie ensuite en plusieurs serveurs périphériques. Pour autant, il complète le serveur de votre hébergeur. Vous ne pouvez donc pas vous passer de ce dernier. En effet, les CDN ne propose pas d’hébergement et encore moins de nom de domaine.

Ceux-ci sont répartis partout dans le monde afin d’être au plus près des visiteurs de votre site web. Ainsi, c’est via le serveur périphérique le plus proche de l’internaute que celui-ci va charger vos pages.

D’accord, très bien. Mais en quoi est-ce plus intéressant que le serveur proposé par votre hébergeur ? Eh bien, comme pour la mise en cache, un CDN permet d’alléger le trafic entre les visiteurs et le serveur d’origine puisque celui-ci est divisé sur plusieurs serveurs périphériques.

D’autre part, un tel réseau permet aussi de réduire la distance entre les visiteurs et le serveur d’origine. En effet, le site web est servi à l’utilisateur via le serveur le plus proche de lui, ce qui favorise le temps de chargement. C’est particulièrement utile si votre audience est mondiale !

Vers quel CDN me tourner ?

Cloudflare : l’incoutournable

Sa version gratuite en fait aisément le CDN le plus populaire. Ainsi, la plupart des plugins de cache proposant une connexion avec un CDN ont dû ajouter Cloudflare dans leur liste. C’est le cas de WP Rocket et WP Fastest Cache. Mais les hébergeurs s’y sont aussi mis !

Toutefois, ce n’est pas son seul atout. En effet, Cloudflare est présent dans plus de 200 villes réparties dans une centaine de pays à travers le monde. C’est d’ailleurs celui proposant la meilleure couverture mondiale parmi les références du marché. Et ce n’est pas négligeable au regard de ce qu’on a évoqué plus haut.

D’autre part, il propose dans sa version gratuite la plupart des options demandées à un CDN. Chiffrement SSL/TLS, HTTP/2 (et même HTTP/3 maintenant), sécurité. Quant à la compression via Brotli, on la retrouve dans la version payante en compagnie de réglages de sécurité avancés.

StackPath : le concurrent ?

Si vous êtes familier de l’optimisation WordPress, vous connaissez StackPath. En fait, vous connaissez le CDN que cette entreprise vient de racheter : MaxCDN. Une référence puisque présent dans la liste de nombreux plugins de cache comme WP Fastest Cache mais aussi W3 Total Cache avec lequel il a d’ailleurs une exclusivité.

Ceci explique peut-être les fonctionnalités avancées de l’extension. En effet, StackPath propose lui-même des fonctionnalités très avancées en terme de cache. En tout cas plus que celles proposées par Cloudflare, par exemple.

Ainsi, en plus d’un chargement optimisé, c’est ici que le CDN tente de tirer son épingle du jeu en plus des fonctionnalités courantes. Car, question présence mondiale, la solution est loin du premier cité. 65 villes sont irriguées réparties dans 16 pays. Si vous recherchez surtout l’optimisation du chargement et de l’affichage, l’accessibilité payante de la solution peut vite devenir un frein.

 

KeyCDN : la force du prix

Il n’est présent que dans 34 villes mais au sein de 25 pays. Pourtant KeyCDN propose des performances légèrement supérieures à celles de Cloudflare en termes d’affichage et de chargement. Toutefois, elles sont comparables à celles de StackPath.

D’autre part, en plus des fonctionnalités courantes, KeyCDN propose des options de sécurité et de cache avancées. Niveau performance, des options d’économie de la bande passante sont aussi déployées.

Mais la grande force de la solution réside dans sa formule de paiement au crédit. Celle-ci permet à l’utilisateur de ne payer que les données utilisées. Un modèle qui fait de KeyCDN une solution trois à cinq fois moins chère que ses deux concurrents précités.

 

Vous l’aurez compris, l’optimisation du chargement de vos pages web ne concerne pas que vos images. En effet, elle concerne tous les éléments de votre WordPress. Cependant, c’est souvent avec l’accumulation que les problèmes de chargement apparaissent.

Quoiqu’il en soit, vous avez maintenant toutes les cartes en main pour favoriser l’affichage d’un site web avec beaucoup de photos. Optimiser la taille, alléger leur poids et favoriser leur chargement.

Et vous, comment optimisez-vous le chargement des images sous WordPress ? Peut-être recourez-vous à d’autres méthodes non explicitées ici. Dans ce cas, n’hésitez pas à les partager dans les commentaires !