Pourquoi et comment accélérer son blog sous WordPress

Les bénéfices d’un site rapide

L’intérêt principale d’accélérer son blog est de fournir une meilleure expérience aux utilisateurs sur mobile. En effet, qui n’a jamais été découragé par la lenteur de chargement d’un site ? Chaque seconde de chargement supplémentaire incite les visiteurs à arrêter leur navigation.

De façon très marginale, accélérer votre site peut également permettre d’améliorer son référencement par les moteurs de recherche.

Commençons par passer en revue le contenu des pages web; cela aidera à comprendre comment on peut par la suite les accélérer.

Les différents composants d’une page web

De façon schématique, toutes les pages que vous visitez sur le net sont constituées des éléments suivants :

  • Le code HTML de la page, qui décrit son contenu. Il contient principalement le texte que vous lisez, ainsi que des indications sur le rôle des différents éléments : titre, liste, image…
  • Le code CSS (feuille de style) de la page, qui décrit son apparence
  • Les images et icônes en format variés : JPEG, GIF, PNG, SVG…

De façon optionnelle, on peut aussi trouver :

  • Un ou plusieurs bout de code en langage JavaScript, en général utilisés pour gérer l’interactivité de la page. Ces scripts servent par exemple à apparaître le menu déroulant sur mobile, ou à valider une adresse e-mail lors de la souscription à une lettre d’information
  • Des fontes, car l’ordinateur ou le téléphone de l’utilisateur ne dispose peut-être pas de la fonte choisie par le créateur du blog

Dans le cas d’un site sous WordPress, les thèmes et extensions ont la possibilité d’ajouter leur propres scripts et feuilles de style.

Avec ces éléments en tête, passons maintenant en revue les causes possible de lenteur d’un blog.

Les éléments impactant la vitesse d’un site

Plusieurs éléments peuvent impacter négativement la vitesse de votre site. Passons-les en revue brièvement, avant de voir comment les quantifier.

Qualité de l’hébergement

De façon assez évidente, la rapidité avec laquelle l’hébergeur répond à une requête est déterminante. Le temps de réponse d’un blog hébergé sur des serveurs lents restera une source de frustration pour ses utilisateurs, quelques soient les optimisations appliquées !

Nombre et poids des fichiers transférés

Là encore, c’est une évidence : plus un blog nécessite de données (en particulier les images), plus il faudra de temps pour les transférer.

Charger moins de données, ou au moins retarder leur chargement est donc une priorité pour accélérer son site.

Cependant, comme on le verra dans la suite de l’article, les technologies comme http/2 permettent maintenant de transférer efficacement un nombre important de petits fichiers depuis un même serveur.

Nombre de connexions à d’autres domaines

Le fait d’établir des connexions à plusieurs sites (par exemple Google pour les fontes ou les cartes, Facebook pour un compteur de like, Gravatar pour les icônes des commentaires…) fait aussi perdre un peu de temps à chaque fois, avant même d’avoir transféré quoi que ce soit depuis ces domaines.

Travail à fournir par le navigateur pour afficher le site

Une fois tout le contenu transféré, le travail de votre navigateur commence à peine ! En effet, il va falloir qu’il utilise les feuilles de style pour déterminer l’apparence de la page à afficher. De même, faire tourner certains scripts est souvent nécessaire.

Assez de théorie pour l’instant ! Regardons plutôt les outils disponibles pour évaluer de façon objective la vitesse de votre blog.

Les outils utiles pour mesurer la vitesse de son site

Il existe plusieurs sites permettant d’évaluer la vitesse des pages de votre site et le poids de leur contenu. En complément, ils fournissent souvent des suggestions d’amélioration pertinentes.

D’une façon générale, il est conseillé d’avoir un temps de chargement en-dessous de deux secondes, et un poids inférieur à deux méga-octets.

Google PageSpeed Insights

Google PageSpeed Insights est un outil développé par Google. Comme la plupart de ses concurrents, il est très simple d’utilisation. Il suffit en effet d’entrer l’adresse du site à tester et c’est parti !

Après quelques secondes, vous obtiendrez une note de vitesse entre 0 et 100.

Ces résultats sont disponibles pour un mobile et un ordinateur. Les critères sont bien sûr plus stricts pour un téléphone, qui utilisent un général un réseau plus lent et disposent d’un processeur plus faible.

Cet outil présente ensuite un certain nombre de mesures, qui peuvent être obtenues via deux méthodes différentes :

  • Vous verrez dans tous les cas des données dites « de laboratoire », c’est-à-dire collectées depuis un serveur de Google dédié à cet usage.
  • Si votre site a beaucoup de trafic, il est possible de visualiser aussi des données « de champ », collectées directement depuis les navigateurs des visiteurs de votre site qui utilisent Chrome !

Par défaut, l’affichage simplifié n’indique pas la signification des différents champs. Le bouton situé tout à droite de « Données de laboratoire » permet de basculer vers un affichage plus détaillé.

Ensuite, vous pouvez visualiser les pistes d’accélération proposées.

Pour finir, la section « Diagnostic » vous permet de visualiser les feuilles de styles et scripts qui sont chargés. Ceux-ci sont cependant affichés bien plus clairement dans le second outil que j’utilise : Pingdom Tools.

Pingdom Tools

Pingdom Tools est tout aussi facile d’utilisation que PageSpeed Insights. Outre l’adresse du site, il est possible de sélectionner l’endroit d’où les tests seront lancés. Actuellement, le plus proche de nous est à Francfort.

Les résultats du test sont présentés de façon synthétique et lisibles; on peut voir en un coup d’œil le poids de la page et son temps de chargement.

Tout comme PageSpeed Insights, Pingdom Tools fournit des suggestions d’amélioration.

Un des points forts de Pingdom Tools est la présentation des résultats, qui permet d’analyser facilement le contenu la page testée. En effet, il indique le poids des différents éléments qui la composent, éclaté par domaine ou par type de contenu (HTML, JavaScript, fontes, CSS…). Le nombre de requêtes est affiché de la même façon.

Pour ce qui est de la durée de chargement, là encore, ce site est extrêmement utile. Il fournit en effet un affichage de type « cascade » du déroulement du chargement de la page.

On voit ici une caractéristique assez marquante de SiteGround, qui est délai de réponse initial assez lent, mais plus que compensé par les chargements ultérieurs.

Cet affichage permet aussi d’avoir une vue détaillée de tous les éléments chargés. On peut ainsi vérifier à quels sites se connectent les extensions installées.

Google Lighthouse

Contrairement à PageSpeed Insights, Google Lighthouse fait partie des outils développeurs fournis avec Chrome.

Ce mode de fonctionnement différent offre l’avantage de pouvoir tester un site en cours de développement sur votre ordinateur.

Je conseille par contre de lancer les tests dans une fenêtre de navigation privée, sinon la présence de la barre d’administration de WordPress risque de fausser les résultats.

Pour démarrer un audit, il faut se rendre sur le site à tester, puis ouvrir les outils développeurs (Ctrl-Shift-I). L’onglet « Audit » permet de paramétrer le périmètre à auditer. En effet, Google Lighthouse est un outil très complet qui ne se limite pas à la partie « performance » des sites; il permet par exemple aussi d’évaluer l’accessibilité et le SEO.

Je décoche en général « Progressive Web App », et c’est parti ! Le test est souvent rapide; comme ses concurrents, Google Lighthouse attribue une évaluation de 0 à 100.

Les résultats fournis sont en général assez similaires à ceux de PageSpeed Insights; cependant, comme le test est effectué depuis votre ordinateur plutôt que via un serveur dédié, il se rapproche des données « de champ » de PageSpeed Insights.

Dernière remarque, cet outil est aussi disponible en ligne de commande. Il est possible de l’installer via npm install -g lighthouse.

GTmetrix

J’utilise GTmetrix en complément des autres outils pour être vraiment complet, mais il apporte rarement de nouvelles indications.

Choisir un bon hébergeur

Le choix d’un hébergeur est crucial.

Au-delà de la performance de l’hébergement, un autre aspect est à prendre en compte : la qualité du support. En effet, il est important que votre hébergeur vous accompagne dans les démarches techniquement pointues, si nécessaire.

Si vraiment votre hébergeur actuel n’est pas à la hauteur en terme de performance ou de support, il est possible de migrer votre site vers des cieux plus cléments. SiteGround propose par exemple une migration gratuite lors de la souscription d’un hébergement.

Voici un aperçu des fonctionnalités utiles pour accélérer l’accès à votre blog. Si l’hébergeur que vous utilisez ne les fournit pas en standard, c’est assez mauvais signe !

Activer la compression gzip

gzip est un format de fichier compressé très répandu, qui permet souvent de diviser la taille d’un fichier texte par deux. Or, quand on visite un site web, beaucoup de ressources sont en fait des fichiers textes :

  • le code HTML
  • les feuilles de style CSS
  • les fichiers JavaScript
  • … et même les images au format SVG !

Ainsi, quand votre navigateur communique avec un serveur qui supporte cette compression, celui-ci renvoie une version compressée : c’est autant de données de moins à transférer.

La majorité des hébergeurs activent en général la compression gzip par défaut. Chez les trois hébergeurs que j’ai utilisé (SiteGround, o2switch OVH), il n’y a rien à faire.

Il existe d’autres protocoles tels que Brotli permettant des gains supplémentaires, mais ceux-ci sont souvent anecdotiques.

Utiliser http/2

Comme son nom l’indique, le protocole http/2 est une évolution de http, utilisé pour la communication entre votre navigateur et les serveurs web.

Parmi ses avantages, le fait de pouvoir envoyer plusieurs fichiers en une seule connexion. Cela limite le besoin de recourir à certaines techniques qu’on verra plus bas, telles que le fait de concaténer plusieurs fichiers en un seul.

Les lecteurs intéressés par les détails pourront lire cet excellent article sur HTTP/2.

Là encore, la majorité des hébergeurs de qualité activent ce protocole par défaut.

Utiliser une version récente de PHP

PHP est le langage utilisé par les développeurs de WordPress. Chaque nouvelle itération de PHP apporte un gain de vitesse; il est donc important d’utiliser une version récente de ce langage. De plus, cela permet de bénéficier des dernières mises à jour en terme de sécurité !

Dans le même temps, inutile de se précipiter tout de suite sur chaque nouvelle version : certaines extensions ou thèmes (voire WordPress lui-même) risque de ne pas tourner sur une version trop récente.

Le site de WordPress indique les versions recommandées pour PHP et MySQL (le système de base de données). Lors de l’écriture de cette article, il est conseiller d’utiliser PHP en version 7.3 ou plus récente (la version stable de PHP est actuellement la 7.4).

SiteGround utilise la version 7.3 par défaut, qui est la version stable précédente. C’est aussi le cas d’OVH.

Capture d'écran indiquant la version de PHP utilisée par SiteGround

Choisir l’emplacement du serveur hébergeant votre blog

Plus les serveurs de votre hébergeur seront proches de vos utilisateurs, plus vite ceux-ci accéderont à votre site ! Ainsi, si vous visez un public francophone, le fait de choisir un hébergeur français ou ayant des serveurs en Europe sera un gros plus.

SiteGround propose quatre emplacements au choix pour les serveurs des hébergements mutualisés :

  • Iowa (États-Unis)
  • Londre (Grande-Bretagne)
  • Eemshaven (Pays-Bas)
  • Singapour

Passons maintenant à un point qui a un impact déterminant sur la vitesse de votre site. Il s’agit de la quantité (et de la qualité) des thèmes et extensions WordPress utilisés.

Attention à l’overdose de fonctionnalités

Au risque de paraître rabat-joie, la meilleure façon d’accélérer un site est de réduire les fonctionnalités qu’il utilise. En effet, si WordPress est un moteur de blogs extrêmement rapide, il peut être catastrophiquement ralenti par l’utilisation d’extensions mal codées.

Utiliser un thème rapide

Le choix d’un thème WordPress est délicat. Il est tentant de choisir un thème qui flashe, avec des carrousels d’images et une multitude d’icônes. Ces effets sont malheureusement souvent coûteux, tant en terme de quantité de données transférées que de travail à fournir par le processeur.

Je conseille donc d’utiliser un thème de base, tels que ceux développés par WordPress (Twenty Twenty, Twenty Nineteen…) ou un thème développé avec la vitesse comme objectif, tel que Generate Press, Astra, Neve ou encore OceanWP.

Se méfier de certaines extensions

Les extensions WordPress sont extrêmement utiles, voire carrément indispensables. Ce n’est cependant pas une raison pour en abuser, car elles peuvent provoquer de très forts ralentissements de votre site.

Parmi les extensions dont il faut se méfier comme de la peste, celles en relation avec les réseaux sociaux tiennent le haut du pavé. Les fonctionnalités proposées sont souvent tentantes : bouton de partage sur les réseaux sociaux, affichage d’une galerie de vos dernières photos… Cependant, chacune de ces fonctionnalités nécessite d’ouvrir de nouvelles connexions, ce qui prend du temps.

Après chaque installation d’une nouvelle extension, je conseille donc d’évaluer son impact sur la performance (via PageSpeed Insights et Pingdom Tools). Une simple désactivation de la nouvelle extension vous permettra de comparer la différence de vitesse.

Utiliser Google Fonts avec parcimonie

Tout le monde aime s’amuser avec les fontes. Et il faut bien reconnaître que Google Fonts est un service très pratique, qui permet facilement d’ajouter une ou plusieurs fontes à son blog.

Il faut cependant limiter leur utilisation, du fait de leur poids. En complément, je présente plus bas une extension qui permet d’optimiser leur usage.

Dans le cas de la réécriture du thème de notre blog de voyage, j’ai choisi de déployer les deux fontes utilisées localement. Cela permet d’éviter plusieurs aller-retour sur les serveurs de Google : un pour le fichier CSS, puis un pour chaque fonte.

Éviter les fontes de Font Awesome

Une autre utilisation très répandue des fontes est l’affichage des icônes d’un site, via un service tel que le très populaire Font Awesome.

Pendant longtemps, le support des fichiers SVG par les navigateurs laissait à désirer. Le fait de passer par des fontes pour afficher des icônes permettait de pallier à ce manque.

Cependant, maintenant que ce format est supporté quasi universellement, il est difficile de justifier l’utilisation des fontes d’icônes. En effet, faute d’une granularité suffisante, même l’utilisation d’une unique icône entraîne le téléchargement de la feuille de style complète, ainsi que des fontes pour toutes les icônes de la famille sélectionnée.

La feuille de style pèse plus de 70ko, et les fichiers des fontes entre 13ko et 80ko. A côté de ça, les même icônes au format SVG pèsent en général un à deux kilo-octets chacun !

Privilégiez donc autant que possible les icônes au format SVG.

Restons sur le sujet des images, en abordant les nombreuses optimisations possibles.

Optimiser ses images

Nous avons déjà vu dans notre guide des images sous WordPress à quel point la gestion des images est cruciale pour la vitesse de votre site.

Si ce sont les éléments de votre blog qui pèsent généralement le plus, elles ont le bon goût d’être très facilement optimisées par plusieurs techniques.

Compresser ses images

L’utilisation de l’extension reSmush.it permet de compresser automatiquement les images lors de leur ajout. Cela fera souvent diminuer leur poids de moitié, sans perte de qualité visible !

Je conseille d’utiliser une qualité de 82, voire de 72. Avec un facteur de 82, nous avons économisé 37% sur le poids des images de notre blog de voyage.

Par défaut, cette extension conserve l’image originale sur le serveur hébergeant votre site. Il est donc possible de relancer une optimisation ultérieurement avec un facteur de qualité différent.

Charger les images à la volée

La technique dite du « lazy loading » (chargement paresseux) consiste à différer le chargement des images. Au lieu de les charger dès le départ, le navigateur ne les chargera que quand elles deviendront visibles pour l’utilisateur (en général une fois qu’il a scrollé).

Très simple d’utilisation, l’extension Lazy Load – Optimize Images permet en un clic d’activer ce mécanisme.

Activer la prise en charge de WebP

Le format WebP permet une meilleure compression des images que le format JPEG. Typiquement, il est possible de diviser leur poids par deux ! Malheureusement, il est peu répandu, et WordPress ne le supporte pas nativement.

L’extension WebP Express permet de convertir les images de votre bibliothèque dans ce format, et de fournir aux navigateurs compatibles une image WebP.

Contrairement aux deux extensions précédentes, sa mise en place est un peu complexe et dépend de votre hébergeur.

Chez SiteGround, j’ai choisi « CDN Friendly » comme mode de fonctionnement, et autorisé « Alter HTML ».

Chez OVH, il est possible d’utiliser les règles de réécriture de Apache. J’ai donc pu utiliser l’option « Varied image responses », qui évite de modifier le HTML.

Avoir des images correctement dimensionnées et un thème « responsive »

Si WordPress fournit depuis longtemps des fonctionnalités permettant d’afficher des images de taille différente suivant la taille de l’écran, celles-ci sont malheureusement rarement gérées de façon optimales par les thèmes.

Il faut bien avouer qu’en tant que développeur, la façon dont WordPress les gère est une grosse source de frustration. Je comprends donc que la plupart des développeurs de thème préfèrent ignorer le sujet !

Passons maintenant aux extensions de cache et d’optimisation.

Un peu de théorie sur les optimiseurs

Pour comprendre l’intérêt des différentes optimisations, il faut se plonger – un peu – dans le fonctionnement de WordPress.

En effet, quand vous visitez une page d’un blog tournant sous WordPress, il se passe en fait beaucoup de choses sous le capot !

Génération d’une version statique des pages

Une des forces de WordPress est son extensibilité. Ainsi, avant la génération de chaque partie d’une page (en-tête, menu, contenu principal…), il offre la possibilité aux thèmes et extensions de modifier ce qui va être affiché.

Ce « dialogue » prend un certain temps. Les caches vont donc générer une version statique de la page, et renvoyer le résultat déjà traité.

Minification

La minification (aussi appelée « uglification » en anglais) consiste à réduire la taille d’un fichier texte en supprimant les commentaires, espaces et retour à la ligne. Il est appliqué aux fichier JavaScript et aux feuilles de style CSS.

Voici un exemple de code JavaScript :

/* Appellé quand un intervalle de dates est choisi. el est l'élément litepicker */
function setRange(el, start, end)
{
    // cf https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd
    function formatDate(date) 
    {
        var d = new Date(date);
        var month = '' + (d.getMonth() + 1);
        var day = '' + d.getDate();
        var year = d.getFullYear();

        if (month.length < 2) 
            month = '0' + month;
        if (day.length < 2) 
            day = '0' + day;

        return [year, month, day].join('-');
    }
        
    var form = el.parentNode.parentNode.parentNode;
    form.querySelector("[name=checkin]").value = formatDate(start);
    form.querySelector("[name=checkout]").value = formatDate(end);
}

Une fois minifié, le fichier obtenu est le suivant :

function setRange(e,t,n){function a(e){var t=new Date(e),n=""+(t.getMonth()+1),a=""+t.getDate(),r=t.getFullYear();return n.length<2&&(n="0"+n),a.length<2&&(a="0"+a),[r,n,a].join("-")}var r=e.parentNode.parentNode.parentNode;r.querySelector("[name=checkin]").value=a(t),r.querySelector("[name=checkout]").value=a(n)}

S’il est plutôt illisible pour un humain, cela ne fait aucune différence pour un ordinateur. Par contre, sa taille a nettement diminué. Le code d’origine fait 775 octets, quand la version minifiée n’en pèse plus que 316. C’est un gain de près de 60% ! Cette technique permet donc de diminuer assez drastiquement la quantité de données qui transitent, sachant que les scripts dans la vie réelle sont bien plus longs que ce petit échantillon.

Concaténation

Sur le papier, la concaténation des fichiers est très simple. Comme son nom l’indique, il s’agit de générer un fichier unique à partir de plusieurs fichiers (JavaScript ou feuille de style CSS).

Le but de cette technique est donc de diminuer le temps d’accès au site, vu qu’un seul fichier sera transféré.

Cependant, dans les faits, c’est un peu plus compliqué. Déjà, en utilisant le protocole http/2, transférer plusieurs petits fichiers n’est pas réellement plus coûteux.

Surtout, dans le cas des fichiers JavaScript, il faut veiller à ce que les fichiers soient concaténés dans le bon ordre. En effet, il y a souvent des dépendances entre eux, ce qui nécessite de respecter l’ordre de chargement. Dans le cas contraire, les scripts ne fonctionneraient plus !

En cas de problème avec cette option, il suffit de ne concaténer que les fichiers CSS.

Voyons maintenant les extensions WordPress qui utilisent ces techniques.

Les extensions de cache disponibles

De nombreuses extensions de cache sont disponible sous WordPress. Je ne présente ici que celles que j’ai déjà utilisé.

Autoptimize

Autoptimize est un excellent compromis entre la performance et la simplicité d’utilisation. Je l’utilise pour optimiser le CSS et les scripts de Un blog pas à pas et cette extension me donne toute satisfaction.

Voici les réglages que j’applique. Tout d’abord, pour le Javascript, je choisir de les optimiser et de les concaténer. Comme indiqué plus haut, en cas de problème avec cette option, il suffit de désactiver la concaténation pour qu’ils soient juste minifiés.

Pour le CSS, j’ai laissé quasiment toutes les options par défaut.

Du côté du HTML, j’active l’optimisation (qui consiste principalement en une minification)

Pour finir sur l’écran principal, je laisse également les options diverses telles qu’elles sont par défaut.

Dans l’onglet des images, je désactive toutes les optimisations qui sont effectuées par des extensions spécifiques.

Enfin, dans l’onglet « Extra », il est possible de spécifier l’optimisation des Google Fonts si vous les utilisez. L’option recommandée est « Combiner et charger les polices Google de manière asynchrone avec webfont.js ».

Sur cet écran, je choisis de désactiver les emojis. En effet, WordPress inclut du code permettant de transformer automatiquement certaines suites de caractères en emojis pour les navigateurs qui ne les intègrent pas directement. Comme cela cause l’inclusion de JavaScript et CSS supplémentaire, je désactive cette option. La plupart des navigateurs récents incluent de toutes façons le support des emojis.

SG Optimizer

Ce cache est développé spécifiquement par SiteGround pour une utilisation par ses clients. Il ne fonctionnera donc pas chez un autre hébergeur.

En termes d’ergonomie, il est à l’image des autres produits SiteGround. L’interface est donc claire et facile à utiliser.

Pour ce qui est des fonctionnalités, SG Optimizer propose la minification et concaténation des fichiers JS et CSS, ainsi que le « lazy-load » des images.

Une bonne partie des options de cache ne seront cependant disponibles que pour les utilisateurs ayant souscrit une offre supérieure.

W3 Total Cache

Cette extension est réservée à ceux qui veulent vraiment pourvoir optimiser le moindre aspect de leur site. Il y a en effet beaucoup d’écrans de configuration (une dizaine !), et l’interface n’est pas un modèle d’ergonomie.

Les réglages WordPress pour accélérer votre blog

La modification de certains options va permettre de rendre votre site encore plus rapide, en désactivant certaines fonctionnalités de WordPress.

Supprimer les pingback

Vérifiez tout en haut de la page Réglages / Discussions que l’option « Autoriser les notification de lien en provenance d’autres blogs (pings et rétroliens) sur les nouvelles publications. » est bien décochée.

Désactiver Gravatar

Le service Gravatar permet d’afficher une icône spécifique à côté du nom des commentateurs. Son utilisation dans WordPress engendre donc une connexion supplémentaire.

Cette fonctionnalité est normalement désactivée par défaut dans WordPress, mais autant en être sûr !

Rendez-vous dans Réglages / Discussions et vérifier en bas de la page que l’option « Afficher les avatars » est décochée.

Diminuer le nombre de révisions

A chaque nouveau brouillon ou publication, WordPress enregistre automatiquement une révision correspondante. Vous avez donc accès à l’historique des modifications de chaque article, ce qui est parfois pratique.

Cependant, il n’y a par défaut aucune limitation quant au nombre de révisions stockées. Or, s’il peut être utile de retrouver une modification récente, celles datant de plusieurs mois ne présentent aucun intérêt.

Il y plusieurs des façons de limiter le nombre de révisions. Si vous avez accès via FTP au fichier de configuration de WordPress wp-config.ini, il suffit d’y ajouter une ligne indiquant le nombre de révisions à utiliser.

define( 'WP_POST_REVISIONS', 3 );

Sinon, le plus simple reste d’utiliser une extension telle que WP Revisions Control. Celle-ci permet en outre de paramétrer un nombre de révisions différent pour les articles, pages ou pour le CSS personnalisé.

L’étape suivante est de nettoyer les révisions déjà créées. J’utilise pour cela WP-Sweep, qui va en plus supprimer les options inutilisées des extensions supprimées. Une fois installée, elle se cache dans Outils / Nettoyer.

Un message en haut de l’écran conseille d’effectuer une sauvegarde de votre base de données. Si vous n’utilisez pas encore Updraft Plus, n’hésitez pas à vous rendre d’abord sur cet article vous indiquant comment sauvegarder automatiquement votre blog.

Pour nettoyer les révisions, il suffit de cliquer sur le bouton correspondant.

En plus des révisions, WP-Sweep peut nettoyer différents types de contenu inutile, tel que les options laissées par les extensions désinstallées ou encore les commentaires supprimés.

Si la majorité de ces nettoyages peuvent être effectués sans souci, la suppression des termes inutilisés ne doit être effectuée que s’il n’y a pas de brouillon en cours de rédaction !

Optimiser les fonctionnalités proposées par Google

Quand on a un blog, l’utilisation de certains services Google est séduisante. Entre les fontes de Google Fonts, le suivi d’audience avec Google Analytics et l’intégration de cartes via Google Maps, les fonctionnalités proposées sont nombreuses… et fournissent autant d’occasion de ralentir votre site.

Regardons donc comment on peut accélérer leur utilisation, ou quelles sont les alternatives disponibles.

Optimiser les fontes Google

L’extension Autoptimize présentéee plus haut permet d’optimiser le chargement des fontes hébergées par Google.

Héberger Google Analytics en local

L’excellente extension CAOS (Complete Analytics Optimization Suite) permet de stocker les scripts Google Analytics sur les serveurs de votre hébergeur.

Elle est très simple d’utilisation. Il suffit dans un premier temps d’entrer son identifiant Google Analytics (de la forme UA-123456789-1) dans le premier champ de l’onglet « Basic Settings ».

Toujours dans le même écran, je sélectionne l’option « Footer » afin que le script soit inséré en bas de page.

Dans les options avancées, j’ai également coché l’option « Enable pre-connect » qui peut accélérer les chargements.

À noter que l’auteur de cette extension a rédigé des explications sur la façon de se mettre conformité avec le RGDP (Règlement général sur la protection des données).

Se passer de Google Maps

L’intégration de cartes Google Maps est extrêmement lente.

Les articles de notre blog de voyage obtiennent un général au moins une note sur mobile de 95 avec PageSpeed Insights. En testant une des pages qui intègre une carte de Google Maps, j’obtiens à la place un score de 72 !

Les recommandations de l’outil sont assez explicites quant au coupable :

Un certain nombre d’extensions existent afin d’améliorer les choses, mais elles ne m’ont pas convaincues. De plus, si on apprécie beaucoup Google Maps, l’apparence des cartes intégrées dans un blog ainsi que leur ergonomie laisse à désirer.

Du coup, s’il traîne encore quelques cartes Google Maps sur notre blog de voyages, on a choisi de re-dessiner la plupart des itinéraires avec Inkscape.

En effet, le résultat est bien plus lisible, et la performance n’a rien a voir.

Le mot de la fin

Si l’optimisation des blogs est un terrain de jeu très ludique pour ceux qui aiment mettre les mains dans le cambouis, il ne faut pas perdre de vue son but essentiel : l’expérience utilisateur.

Dans cette optique, une simple compression des images couplée à l’utilisation d’un cache tel que Autoptimize, ainsi qu’une utilisation raisonnée des différentes extensions seront suffisants pour accélérer la plupart des sites.

Inutile donc de vous prendre trop la tête si votre site est loin de la note de 100 sur les différents outils !

Le guide complet des images sous WordPress

Un article entier sur les images ? Eh oui ! Si le sujet parait extrêmement simple (qu’y a-t-il de plus bateau qu’une image dans un article de blog ?), il y a en fait beaucoup de subtilités à maîtriser.

En effet, à cause de leur poids, les images présentes sur votre blog peuvent amener à des temps de chargement trop longs sur mobile. Par contre, bien utilisées, elles peuvent permettre d’améliorer votre référencement.

Dans cet article, nous allons :

  • passer en revue les caractéristiques des images (format, orientation)
  • voir comment préparer ses images pour les utiliser sur votre site
  • examiner les différents blocs WordPress affichant des images
  • voir comment les moteurs de recherche indexent les images, et comment en tirer parti
  • et enfin, installer plusieurs extensions permettant entre autres d’obtenir facilement de gros gains de performance

Après cela, les images sous WordPress n’auront plus de secret pour vous !

Les différents formats d’images

S’il existe énormément de formats d’images, on les divise généralement en deux familles : image matricielle ou image vectorielle.

Une image matricielle est constituée d’une suite de points : c’est le cas des photographies ou des captures d’écran. Leur principal inconvénient est la perte de qualité quand on les redimensionne.

L’image vectorielle, elle, est bien plus proche du dessin que de la photographie. Son contenu décrit en fait un processus de création : tracer une ligne, un cercle, afficher du texte… Les images vectorielles sont très adaptées à la création de logos et peuvent être redimensionnées sans perte de qualité.

Images matricielles de qualité photographique : JPEG, webp

Les images au format JPEG (Joint Photographic Experts Group) sont les plus répandues. Elles sont produites par la majorité des appareil photos, et permettent d’obtenir une bonne qualité d’image tout en se compressant correctement.

Bassin au palais de Titra Gannga (Indonésie)
La plupart des photographies sont stockées au format JPEG

WebP est un format bien plus récent, développé par Google. Par rapport aux images JPEG, il permet une compression bien meilleure. En effet, il n’est pas rare d’arriver à diminuer le poids d’une image de moitié ! Malheureusement, il n’est pas supporté nativement par WordPress et nécessite donc une extension pour être pris en charge.

J’expérimente actuellement l’une d’entre elles sur ce site; je mettrai cet article à jour une fois que je l’aurai validée.

Autres images matricielles : GIF et PNG

Si vous êtes utilisateur de Facebook, vous n’avez probablement pas échappé aux images animées sur votre flux. C’est l’utilisation principale du format GIF (Graphics Interchange Format). Du côté des blogs, si les GIFs étaient très en vogue à l’époque de Geocities, ils ont fort heureusement quasiment disparu.

Gif animé représentant Pikachu sous une barrière "En construction"
Le bon vieux temps

Pour les images fixes, le standard PNG (Portable Network Graphics) fournit les même fonctionnalités, et est en général meilleur en terme de compression. La principale utilisation de ce format est la compression d’images numériques, telles que les captures d’écran ou les dessins réalisés sur ordinateur.

Les personnages de la série "Happy Tree Friends"
Le format PNG est particulièrement adapté pour les créations numériques. Source : Fandom

Les images vectorielles : SVG

L’utilité principale des fichier SVG (Scalable Vector Graphics) est l’affichage d’icônes. Par exemple, les icônes affichées en page d’accueil de Un blog pas à pas sont initialement au format SVG.

Elles peuvent aussi être utilisées pour égayer un titre, comme on le fait sur notre blog de voyage : un lit pour les hébergements, un appareil photos pour les sites à voir, etc…

Copie d'écran de notre site Endless Travel montrant une icône avant le titre
Ajouter une icône avant les titres permet de briser la monotonie du texte

Une autre utilisation est par exemple l’affichage d’une carte dans un blog de voyage. Nous nous sommes beaucoup amusés à dessiner les itinéraires avec Inkscape; par rapport à Google Maps, le résultat est bien plus lisible et beaucoup rapide à charger.

Itinéraire au format SVG dessiné avec Inkscape

A noter que par défaut, WordPress n’autorise pas l’ajout d’images SVG dans la bibliothèque de médias; il est nécessaire d’utiliser une extension qui sécurise les fichiers. Celle-ci sera présentée en fin d’article.

Quelques chiffres sur les images

Si les images sont un sujet important quand on blogue, c’est principalement à cause de leur poids. Comme on va le voir, si on n’est pas précautionneux, un mauvais usage des images risque de ruiner l’expérience utilisateur sur mobile, à cause des temps de chargement trop longs !

Quelques ordres de grandeur sur la taille et le poids des images

L’appareil photo que j’utilise produit des photos d’environ 5000 pixels de large pour 3200 de haut. Si une telle résolution est utile pour des tirages photo de haute qualité, elle est clairement exagérée pour une utilisation dans une page web. En comparaison, un écran d’ordinateur 27 pouces affiche en général 2560 pixels de large, l’écran de mon PC portable 1920 pixels, tandis que la résolution la plus utilisée pour un portable en 2019 était de seulement 360 pixels de large.

On s’aperçoit bien qu’il est inutile d’utiliser une image aussi large pour au final l’afficher en taille réduite : non seulement le temps de transfert sur un téléphone mobile va exploser, mais en plus le navigateur va devoir perdre du temps à réduire l’image.

Compression des images JPEG et PNG

Les appareils photos produisent des fichiers JPEG qui peuvent être compressés encore d’avantage sans perte d’information visuelle notable – à moins par exemple de zoomer très fortement -. Il est en général possible de diviser le poids d’une image par deux ou trois sans que l’utilisateur ne puisse percevoir la différence. Le même principe est valable pour les images PNG.

A titre d’exemple, j’ai compressé une image avec différents facteurs de qualité (100 étant la meilleure qualité, et 0 la compression maximale). Contrairement aux autres images de cette article, je les ai téléchargé sans réduire leur taille afin qu’on puisse zoomer et les comparer.

Si l’image compressée avec une qualité de 42 présente clairement des défauts telles que les bandes horizontales au-dessus de la fenêtre, l’image compressée avec une qualité de 82 ne présente quasiment pas de différence avec l’originale. Pourtant, son poids a été divisé par plus de trois !

Plusieurs sites proposent d’effectuer cette opération en ligne. Parmi eux, tinyjpg pour le format JPEG et tinypng pour les images en PNG. Il suffit de téléverser une image, et de télécharger la version compressée après un peu d’attente. Cependant, ce procédé est assez fastidieux.

La bonne nouvelle, c’est qu’il existe des extensions WordPress qui se chargent d’effectuer cette compression supplémentaire pour vous, de façon transparente. Je présente l’une d’entre elles à la fin de cette article.

Poids relatif des images sur une page web

Les images sont de loin les éléments qui pèsent le plus dans une page web. Une répartition typique des autres éléments est la suivante :

  • 50 kilo-octets pour les fichiers CSS, qui définissent l’apparence du site
  • A peu près a même chose pour le code HTML décrivant le contenu (comme le texte que vous êtes en train de lire)
  • Si le site utilise des fontes spéciales, elles pèsent aussi une cinquantaine de kilo-octets
  • Enfin, les scripts (petits programmes) utilisée par WordPress et ses extensions pèsent moins de 200 kilo-octets

On arrive donc à 300 ou 400 kilo-octets pour le contenu hors images. À côté de ça, même bien optimisée, une seule photo au format JPEG pèse dans les 200 kilo-octets, soit la moitié !

A titre d’exemple, voici un résumé du contenu d’une des pages de notre blog de voyages, obtenu via Pingdom Tools :

Le grand nombre d’images (une soixantaine !) dans cet article a pour conséquence un poids très important. Ce chiffre doit cependant être nuancé, car il serait bien moindre sur mobile. De plus, grâce à l’extension reSmush.it présentée plus bas, les images ne sont chargées que lorsqu’elles deviennent visibles, et non plus dès que l’utilisateur visualise la page.

Comprendre les images stockées par WordPress

Quand on ajoute une image à la bibliothèque WordPress, il y a en fait plusieurs images qui sont stockées – en général, quatre -. WordPress stocke bien sûr l’image que vous avez fournie dans sa résolution originale. Mais en plus, il génère plusieurs images de taille réduite : en général, une pour les miniatures (images carrées de 150×150 pixels), une de taille moyenne (maximum 300 pixels de largeur et hauteur) et une de grande taille (maximum 1024 pixels pour chaque dimension).

L’intérêt de ces images multiples est de permettre au navigateur de choisir la plus adaptée à la taille de l’écran – en particulier sur un mobile -. Ainsi, la plupart des images seront affichées avec une largeur de 1024 pixels sur la plupart des ordinateurs, tandis que le navigateur utilisé sur un téléphone portable avec un petit écran ne téléchargera que la version de 300 pixels de large. Ce sera autant de données à ne pas transférer !

Il est aussi possible de spécifier une taille quand on insère une image ou une galerie dans un document WordPress. C’est cependant rarement nécessaire, sauf éventuellement dans le cas des captures d’écran, comme on le verra dans la partie consacrée à l’ajout d’images dans WordPress.

Suivant le thème utilisé, les tailles d’images seront parfois différentes de celles indiquées ici. il est possible de les visualiser dans l’écran de configuration Réglages / Médias.

Réglage de la taille des images sous WordPress
Les tailles d’images avec le thème GeneratePress

Format d’image et orientation

Bien que cette partie relève plus de la photographie, il y a deux aspects importants qui vont impacter la façon dont une image est affichée. Il s’agit du format d’image, et de son orientation.

Format d’image : 16/9, 4/3, 3/2…

De façon similaire à un écran de télévision, le ratio entre la longueur et la hauteur détermine si l’image a un aspect plutôt carré ou plutôt allongée.

Les images au format 4/3 et 3/2 se rapprochent d’un carré. Elles sont aussi bien adaptées aux portraits qu’à la photographie d’intérieur, à l’architecture, ou encore pour les photos de cuisine.

Le format 16/9 est plus rectangulaire. S’il est surtout utilisé pour photographier des paysages, il sera aussi utile pour capturer des objets de taille allongée.

Sur un blog, les différents formats peuvent être en général utilisés indifféremment. Un même article pourra comporter des images individuelles en différents formats sans que cela frappe visuellement. Cependant, comme on le verra plus tard, les galeries seront plus esthétiques si elles contiennent des images de proportions similaires.

Orientation : image horizontale (paysage) ou verticale (portrait)

Là encore, l’orientation dépend du sujet. Si les deux orientations peuvent être utilisées dans vos articles, je conseille de limiter l’usage des images au format portrait de grande taille. En effet, sur un écran d’ordinateur, elles ont tendance à occuper beaucoup d’espace verticalement tout en laissant beaucoup de vide sur le côté.

Tresse de piment séché à côté de caractères chinois

Il peut donc être judicieux d’en regrouper plusieurs dans une galerie pour densifier un peu le contenu.

Préparer vos images

Avant d’ajouter vos images à la bibliothèque de média WordPress, je conseille au minimum les redimensionner et de les renommer. Voyons en détail l’intérêt de ces deux opérations.

Redimensionnement

Comme on l’a vu précédemment, les appareils photos actuels produisent des images ayant des résolutions bien plus larges que ce qui est visible sur nos écrans. Il serait donc inutile de les afficher tel quelles. De plus, les hébergeurs limitent en général la taille des fichiers téléchargés. Une tentative d’insérer une image de plusieurs méga-octets se soldera donc probablement par un message d’erreur.

Une première tâche consiste donc à redimensionner vos photos. Dans l’idéal, leur largeur dépend du thème que vous utilisez; cependant, pour ne pas trop se compliquer la vie, une largeur de 1600 pixels est en général adaptée.

Renommage

Si cette étape n’est pas indispensable, elle permet d’améliorer votre référencement par les moteurs de recherche. En effet, avec le texte alternatif dont on parlera plus bas, le nom du fichier est un des seuls moyens pour un programme informatique de savoir ce que contient l’image !

Les caractères spéciaux tels que les points d’exclamation ou les virgules sont à proscrire. De façon générale, je conseille de n’utiliser que des caractères non accentués dans les noms de fichier, ainsi que des chiffres. Pour séparer les mots, plutôt que des espaces, utilisez le caractère souligné _ ou moins -. Ainsi, des noms valides seraient « tarte-aux-pommes-avant-cuisson.jpeg » ou encore « coucher_soleil_krabi.jpg ».

Comprendre les attributs WordPress des images

Soyons francs : comprendre les différents champs utilisés par WordPress dans la bibliothèque des médias est compliqué. Quand on y édite une image, on se retrouve avec pas moins de quatre champs à remplir.

Copie de l'écran d'édition d'une image sous WordPress

On peut donc modifier le texte alternatif, le titre, la légende et la description. Parmi ces quatre champs, il y en a un qui est essentiel, un autre est cosmétique, et les deux autres n’ont pas d’intérêt dans la plupart des cas.

Il ne faudrait pas se mélanger les pinceaux : voyons donc clairement le rôle de chacun.

Texte alternatif

Le texte alternatif est assez crucial, et a plusieurs rôles :

  • Il est affiché à la place de l’image si le navigateur n’arrive pas à la charger
  • Les lecteurs d’écran l’utilisent pour décrire l’image à des personnes aveugles ou malvoyantes
  • Les moteurs de recherche l’exploitent connaître le contenu de l’image

Il en résulte deux bonnes pratiques pour rédiger des textes alternatifs adaptés

  • Pour mieux rédiger votre texte alternatif, je vous conseille de penser à leur but initial : décrire l’image à une personne malvoyante ou aveugle. Est-ce que votre texte décrit correctement l’image pour une personne qui ne peut pas la voir ?
  • Dans vos articles, il faudra donc faire apparaître le sujet de l’article dans les textes alternatifs de plusieurs images. Il ne faut cependant pas tomber dans l’excès et se forcer pour qu’il apparaisse systématiquement !

Prenons le cas de l’image suivante, représentant un cinéma quasiment en ruines à Savannakhet (Laos).

Le cinéma Laochaleun à l’abandon à Savannakhet

Si l’article porte sur la ville de Savannakhet, un texte alternatif pourrait être « Le cinéma Laochaleun à l’abandon à Savannakhet », « Un cinéma en ruines à Savannakhet ». Par contre, un texte alternatif inadapté serait « Patrimoine délaissé à Savannakhet » qui n’est pas assez descriptif.

Titre de l’image

Le titre est affiché dans la bibliothèque des médias. Par défaut, c’est le nom de l’image. A moins d’être perfectionniste, il n’est pas nécessaire de l’éditer – en particulier si le nom de vos fichiers reflète le contenu de l’image -. C’est toujours ça de gagné !

Légende

La légende apparaît sous l’image. Si elle peut être simplement une description textuelle de l’image, il est aussi possible de l’utiliser pour décrire une émotion ou une réaction. Cela dépend de votre style rédactionnel, de l’image elle-même, et de la réaction que vous souhaitez provoquer chez votre lectorat.

Si on reprend l’exemple de l’image précédente, un légende adaptée pourrait être :

  • « Ce qu’il reste du cinéma Laochaleun » – une description visuelle
  • « Les bâtiments délabrés ne manquent pas dans la ville » – une constatation générique
  • « Attention la tête ! » – une exclamation humoristique
  • « Quel dommage de voir tout ce patrimoine laissé à l’abandon ! » – une légende faisant appel à l’émotion

A noter que la légende est optionnelle. Il est possible par exemple possible de l’omettre si l’image a été introduite par le paragraphe précédent.

Description

Ce dernier champ n’aura que peu d’utilité pour la majorité d’entre nous, et n’est en général pas visible dans l’article. Cependant, si vous êtes curieux de savoir à quoi elle sert, examinons ensemble les méconnues pages des fichiers joints !

Pour chaque fichier de la bibliothèque, WordPress génère automatiquement une page correspondante (dont le permalien est visible sous le titre).

C’est d’ailleurs à cette page que correspond l’option « Page du fichier joint », dans le menu de création de lien des images.

Certains thèmes personnalisent l’affichage de cette page en affichant le contenu de la description. A moins d’être un photographe qui veut présenter en détail chacun de ses clichés, cette fonctionnalité ne nous servira pas. Au contraire, ces nombreuses pages vides de contenu réel peuvent être pénalisantes en terme de référencement. C’est pourquoi je présente en fin d’article une extension qui empêche de visiter ces pages, en redirigeant le visiteur vers l’article correspondant.

En résumé

Seuls deux champs sont réellement utiles : la légende et le texte alternatif. Si vous pouvez laisser libre cours à votre imagination en ce qui concerne la légende, soigner le texte alternatif aura des bénéfices en terme de référencement. Alors, au travail !

J’avoue que pendant longtemps, j’ai été de l’école (très répandue) « je copie-colle ma légende dans le texte alternatif ». J’essaye depuis de remplir consciencieusement ce champ, même si c’est une tâche assez mécanique.

La bibliothèque des médias WordPress

On ne va pas se mentir : je trouve que si l’éditeur de blocs est de loin l’avancée majeure des dernières évolutions de WordPress, la bibliothèque des médias est totalement dépassée en terme d’ergonomie. La bonne nouvelle, c’est qu’il est de moins en moins nécessaire de l’utiliser. En effet, la plupart des manipulations sur les images telles que le téléversement d’un fichier ou l’édition des textes alternatifs et légendes peuvent être réalisées directement depuis l’éditeur de blocs.

La bibliothèque des médias WordPress stocke les fichiers que vous avez téléversé. Si on l’utilise surtout pour les images, il est possible d’y stocker aussi des vidéos, des fichiers sons ou même des feuilles de calcul.

Copie d'écran de la bibliothèque de médias de WordPress

Parmi les fonctionnalités utiles, le passage de la visualisation sous forme de liste à une visualisation sous forme de vignette, en cliquant sur les deux premières icônes à gauche de de la barre d’outils. Il est également possible de rechercher un fichier par son nom.

En cliquant sur une image, on passe en mode édition.

Détail d'un fichier joint dans la bibliothèque WordPress

Il est possible de modifier le texte alternatif, le titre, la légende et la description. Il est important de noter que si vous modifiez ces champs pour une image déjà présente dans un document, celui-ci ne sera pas modifié. Il faudra réinsérer l’image pour qu’ils soient pris en compte ! Une autre utilité de cette page est la possibilité de supprimer un fichier, via le lien « Supprimer définitivement » situé en bas à droite de l’écran.

Le bouton « Modifier l’image » permet d’accéder à un nouvel écran fournissant plusieurs fonctionnalités d’édition de l’image :

  • Rotation
  • Retournement (effet miroir)
  • Recadrage
  • Redimensionnement

Si elles peuvent dépanner, cet écran est bien moins ergonomique qu’un outil de bureau dédié; la majorité des utilisateurs n’en auront que très rarement l’utilité.

Les images dans le nouvel éditeur de blocs WordPress (Gutenberg)

De nombreux blocs permettent d’afficher une ou plusieurs images dans vos articles. Passons en revue les différentes possibilités qui s’offrent à vous !

Définition de l’image mise en avant

L’image mise en avant peut être choisie dans l’onglet « Document » de l’éditeur de blocs. La façon de l’afficher est différente suivant chaque thème. Par exemple, sur notre site Endless Travel, j’ai adapté le thème GeneratePress pour qu’elle ait l’apparence suivante :

Image mise en avant sur notre site Endless Travel

Insertion d’une image simple

La façon la plus répandue d’ajouter une image dans un article est l’utilisation du bloc « Image ».

Une manière très simple de procéder est de déposer une image depuis votre ordinateur dans l’éditeur de blocs, ce qui créera automatiquement le bloc.

Si vous préférez utiliser une autre méthode pour choisir l’image (par exemple si elle est déjà présente dans votre bibliothèque de médias), il faut tout d’abord créer le bloc. Choisissez donc le type « Image » dans la liste des types de blocs; l’éditeur affichera trois boutons correspondants à autant de méthodes de sélection de l’image.

La méthode à utiliser dépend de l’endroit où est stockée l’image :

  • Le bouton « Téléverser » permet de choisir un fichier sur votre ordinateur; il est aussi possible de glisser-déposer un fichier sur cette zone pour parvenir au même résultat.
  • Si l’image est déjà présente dans la bibliothèque de médias, vous pouvez l’insérer en utilisant le second bouton.
  • Enfin, vous pouvez utiliser une image sur un site web en saisissant son adresse.

La plupart des blocs contenants des images offrent ces quatre méthodes pour spécifier l’image utilisée.

Après avoir choisi l’image, il est possible de saisir une légende en-dessous.

Les réglages possible sur ce type de bloc sont assez simplistes. Via la barre d’outils, il est possible de lier l’image (à une adresse ou au fichier média correspondant) ainsi que de choisir le centrage horizontal. Dans l’onglet « Bloc », on peut aussi saisir le texte alternatif ou choisir un style arrondi.

Gazebo au jardin botanique de Singapour, avec un style arrondi

Il est aussi possible de modifier la taille de l’image. Si on a rarement à utiliser cette option, elle peut s’avérer utile dans le cas des captures d’écran. Reprenons par exemple la capture d’écran de notre blog de voyage présentée en introduction, qui fait 1210 pixels de largeur. Avec un affichage en grande taille (soit 1024 pixels), l’image obtenue est floue :

Copie d'écran de notre site EndlessTravel montrant une icone avant le titre

Le redimensionnement des textes leur donne souvent cet apparence. Pour pallier à cet effet, il faut forcer la taille de l’image à « Taille originale ».

Ajout d’une galerie d’images

Les galeries d’images permettent de présenter plusieurs images dans un format compact.

Quand on crée une galerie, il vaut mieux qu’elle ne contienne que des images d’un même format; en effet, avoir côté à côté des images d’aspect ou d’orientation différents n’est pas très esthétique. Voici par exemples deux photographies prises à Girona; l’une est au format 3:2 et l’autre au format 16:9. La différence de hauteur est assez inesthétique. Le résultat serait encore bien pire en mélangeant des images au format portrait et paysage !

L’option « Recadrer les images » de la galerie permet de remédier à ce problème, au prix d’une découpe des bords de l’image de droite. Ici, le résultat est plutôt bon, mais le recadrage peut avoir un effet bien moins réussi si les images sont de formats très différents !

Il est possible de créer une galerie sur plusieurs lignes, en paramétrant un nombre de colonnes inférieur au nombre d’images.

Actuellement (sous WordPress 5.4), l’édition des textes alternatifs pour les images d’une galerie est peu ergonomique. En effet, il n’est pas possible de le modifier via les réglages du bloc, et il faut donc repasser par la bibliothèque de médias pour l’ajouter !

Ajouter un bloc mixte média et texte

Une fleur de frangipanier sur les ruines d'un temple à Champassak

Ce type de bloc est un excellent moyen moyen de dynamiser la présentation d’un article sur ordinateur, en brisant un peu l’uniformité. Sur mobile, il sera présenté au format vertical.

L’inconvénient de ce bloc est qu’il faut avoir un contenu assez long, sans quoi la différence de taille entre le texte et l’image est très inesthétique !

Il est cependant possible de recadrer l’image afin que sa hauteur s’adapte à celle de la colonne de contenu. Cependant, le résultat sera souvent décevant.

A noter que malgré son nom, il est possible d’ajouter autre chose que du texte dans la seconde colonne.

Parmi les options intéressantes de la barre d’outils du bloc, on trouve :

  • la possibilité de placer l’image à droite plutôt qu’à gauche
  • la modification de l’alignement vertical

Le bloc média et texte est un parfait exemple des améliorations apportées par l’éditeur de blocs de WordPress : avec l’éditeur classique, créer une telle mise en forme était tout bonnement impossible. Avec cette évolution, c’est désormais trivial !

Création d’une bannière

Une bannière est une image en grande largeur (toute la largeur de l’espace dédié aux poste de blog) ou carrément en pleine largeur, agrémentée d’un texte.

La boucle de Thakhek au Laos

Ce bloc est pour l’instant un peu pauvre en fonctionnalités. S’il est possible de spécifier que l’image d’arrière-plan est fixe quand on scrolle et d’appliquer une teinte de couleur, il manque la possibilité d’ajouter automatiquement certaines informations. Il est par exemple impossible d’afficher les catégories ou étiquettes de l’article, ou encore son auteur, comme le font la plupart des thèmes.

Ce type de bloc est cependant prometteur et j’espère le voir évoluer dans les prochaines versions de WordPress !

Extensions WordPress utiles

Les images étant un point crucial dans l’utilisation de WordPress, il n’est pas étonnant qu’on trouve énormément d’extensions s’y rapportant. Parmi celles-ci, voici ma sélection pour accélérer votre blog, gérer les images SVG, et permettre de renommer un fichier dans la bibliothèque WordPress.

reSmush.it : pour compresser les images de façon transparente

J’ai évoqué plus haut les gains possible en compressant plus fortement les images JPEG et PNG. Beaucoup d’extensions proposent cette fonctionnalité. Après en avoir testé plusieurs, j’utilise désormais reSmush.it Image Optimizer, qui a trois qualités primordiales :

  • Sa simplicité d’utilisation : cette extension se charge de compresser automatiquement toutes les images lors de leur téléchargement dans la bibliothèque WordPress
  • Son efficacité : le taux de compression est bien meilleur que celui de la plupart de ses concurrents. Dans l’ensemble, sur notre blog de voyage, l’espace occupé par les images a été divisé par deux. Quant à Un blog pas à pas, où les images sont plutôt des copies d’écran, les gains sont encore plus importants : 62% de gain, soit autant de données qu’il ne faudra pas transférer !
  • Sa gratuité : certaines alternatives vous limitent à un petit nombre d’images compressées chaque mois. reSmush.it, lui, n’impose aucune limitation.

Par défaut, cette extension utilise un facteur de qualité d’image 92 (0 étant la pire qualité mais avec une compression maximale, et 100 la compression la plus faible possible). Je conseille de diminuer cette valeur à 82. Pour la modifier, rendez-vous sur Médias / reSmush.it et dans les paramètres, remplacez la valeur 92 par 82 puis validez avec le bouton « Enregistrer les modifications ».

Écran de paramétrage de reSmush.it

Si vous avez téléchargé des images sur WordPress avant d’installer l’extension, il est nécessaire de lancer manuellement leur compression. Utilisez pour cela le bouton « Optimiser toutes les images » pour de lancer la compression. L’opération est assez longue, alors soyez patient !

L’autre intérêt de cet écran est d’afficher les statistiques de compression; vous y verrez donc le pourcentage de gain global ainsi que l’espace économisé.

Il est très peu probable que vous remarquiez des dégradations de la qualité des images en utilisant reSmush.it. Cependant, si c’était le cas, il est possible de désactiver la compression pour une image donnée. Il suffit pour cela de se rendre dans la bibliothèque des médias WordPress, d’éditer l’image, et de cocher l’option « Désactiver l’optimisation reSmush.it » tout en bas.

Lazy Load : le chargement des images à la volée

Sous ce nom barbare se cache une extension permettant d’accélérer grandement la réactivité de votre site.

Son principe (« Lazy load » : chargement paresseux) est extrêmement simple. Au lieu de charger toutes les images dès que l’utilisateur visite une page, elle ne les charge qu’une fois qu’elles sont visibles à l’écran. Ainsi, le temps de réponse initial est grandement amélioré.

Tout comme reSmush.it, un des gros avantages de Lazy Load by WP Rocket est sa simplicité d’utilisation. Une fois installé, il suffit d’activer le « lazy load » pour les images dans les réglages de l’extension.

Les options de Lazy Load by WP Rocket

A noter qu’auparavant, j’ai longtemps utilisé une extension similaire, nommée a3 Lazy Load. Cependant, celle-ci occasionnait des bugs étranges qui au final diminuaient la performance de notre site ! Je suis donc passé à Lazy Load by WP Rocket dont je suis totalement satisfait.

SafeSVG : autoriser le téléversement des images au format SVG

Par défaut, WordPress n’autorise pas le téléchargement d’images SVG pour des raisons de sécurité. Vous serez donc confronté au message d’erreur suivant :

Message d'erreur WordPress indiquant l'échec du téléversement d'une image SVG

L’extension Safe SVG permet de télécharger des images dans votre bibliothèque tout en les sécurisant. Son utilisation est transparente; une fois installée, vous ne remarquerez plus sa présence !

Attachment Pages Redirect : rediriger les pages de fichiers joints

L’extension Attachment Pages Redirect est très minimaliste : ne disposant même pas d’un écran de configuration, elle saura se faire oublier une fois l’installation terminée. Mais alors, à quoi bon installer une extension invisible ? Nous avons évoqué précédemment le fait que WordPress crée automatiquement une page pour chaque fichier téléchargé. Cela peut être nuisible en terme de référencement; Attachment Pages Redirect va donc rediriger automatiquement cette page vers l’article correspondant, ce qui va éviter leur indexation par les moteurs de recherche.

Phoenix Media Rename : renommer les fichiers dans la bibliothèque de médias

La bibliothèque de médias WordPress ne propose pas de fonctionnalité de renommage de fichier; c’est pour cela que je conseille de les renommer avant de les téléverser. Si jamais vous avez déjà des fichiers non renommés sur votre blog, l’extension Phoenix Media Rename vous permettra de les renommer, grâce à un champ ajouté tout en bas de la fenêtre d’édition des fichiers.

Champ d'édition du nom du fichier ajouté par Phoenix Media Rename

En résumé

Bien gérer les images dans WordPress a deux bénéfices :

  • Effet positif sur le référencement
  • Augmentation de la vitesse de son blog, et donc amélioration de l’expérience utilisateur sur mobile

Améliorer son référencement grâce aux images

Les images doivent être redimensionnées et renommées avant d’être insérées dans la bibliothèque de médias WordPress.

Le texte alternatif doit décrire l’image. A l’intérieur d’un article, le sujet devra apparaître de façon naturelle dans plusieurs textes alternatifs.

Extensions à installer pour accélérer son site

Installer les deux extensions suivantes va grandement améliorer la performance de votre blog

  • Lazy Load
  • reSmush.it avec un niveau de compression de 82