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

Ma méthode pour rédiger un article de blog facilement

Écrire un nouvel article, c’est du boulot ! S’organiser un peu avant de se lancer dans cette tâche vous fera gagner un temps précieux.

En effet, avec une préparation suffisante, vous produirez votre contenu pour votre blog bien plus rapidement, et éviterez le syndrome de la feuille blanche ! Cela vous aidera aussi à obtenir des articles mieux structurés – ce qui est bénéfique pour votre référencement -.

Je vais détailler ici la méthode de travail que j’utilise pour rédiger du contenu. Au fur et à mesure que vous écrirez, vous serez naturellement amené à développer des habitudes qui vous seront propres – et peut-être parfois radicalement différentes des miennes -. Pour l’écriture comme pour beaucoup de processus créatifs, il n’y a pas de méthode universelle : ce qui importe, c’est de trouver celle qui vous convient. Cette article est donc plus à prendre comme une série de pistes de travail que comme une méthode à utiliser telle quelle !

De plus, suivant le type d’article que vous souhaitez écrire, certaines étapes peuvent être sautées. Par exemple, si vous tenez un blog de cuisine et désirez y partager une recette, il ne sera pas forcément nécessaire de voir ce que produisent vos concurrents sur le sujet. Mais pour un sujet plus ouvert tel que les différentes variétés de poivre ou les différentes façons d’accommoder les restes, cela pourra peut-être vous fournir de l’inspiration supplémentaire !

Travaux de préparation à l’écriture d’un nouvel article

Passer du temps à préparer le nouvel article vous permettra de gagner beaucoup de temps sur sa rédaction.

Je conseille donc d’effectuer d’abord un peu de « brainstorming » quant au sujet du futur article. Ensuite, de se renseigner un peu plus dessus – exactement comme le feront les lecteurs qui liront votre article après l’avoir trouvé sur Google -. Et puis, enfin, de préparer à l’avance les images à intégrer dans votre nouvelle publication.

Voyons dans le détail ces trois étapes préliminaires.

Définir le sujet et trouver du vocabulaire associé

A chaque publication, son sujet ! Commencez-donc par le définir précisément, sous forme d’un mot-clé – voire plusieurs -. Profitez-en pour réfléchir aussi à quelques synonymes ou expressions en lien avec le sujet. J’utilise régulièrement les sites Synonymes et Dictionnaire des synonymes pour m’aider dans cette tâche.

Synonymes de « écrire » d’après synonymes.com

Par exemple, lors de la rédaction de l’article que vous êtes en train de lire, j’essaye de varier le vocabulaire en puisant parmi les mots suivants : article / publication / contenu, rédiger / écrire, sujet / thème…

Approfondir le sujet de l’article

Une fois au clair quant au thème de l’article, pourquoi ne pas se documenter un peu plus à son propos ?

Avant de commencer à écrire sur un sujet donné, je trouve en effet extrêmement utile d’effectuer une recherche dessus. S’il est bien sûr hors de question de recopier le contenu trouvé sur les autres blogs, y jeter un œil présente plusieurs avantages :

  • Lire d’autres articles me permet de vérifier que je ne vais pas raconter de bêtises, et souvent d’enrichir ma connaissance du sujet
  • Cela me permet aussi d’évaluer la qualité du contenu qui sera en concurrence avec le mien, et donc la quantité de travail à fournir pour être encore plus complet qu’eux
  • J’en profite également pour collecter des liens intéressants, qui pourraient me servir dans mon article. Si un autre blog a une approche du sujet différente de la mienne mais que je trouve intéressante, je n’hésite pas à le mentionner !

Ainsi, pour préparer la rédaction de cet article, j’ai effectué plusieurs recherches sur Google telles que « comment préparer un nouvel article » ou « techniques écrire contenu blog ». Les résultats de la première recherche se sont révélé assez différents de mes attentes (probablement parce que j’ai pas inclus le terme « blog ») : ils portaient sur la rédaction d’articles de presse, pour Wikipedia… et même comment préparer un anniversaire ! Par contre, la seconde recherche m’a été assez utile; j’ai ajouté plusieurs résultats à mes favoris pour les relire à tête reposée.

Préparer les images qui illustreront votre publication

Une tâche peu gratifiante est la préparation des images en vue de leur intégration dans l’article. Avouons-le, rien que de le mentionner, j’en baille d’ennui. Mais ce n’est pas une raison pour bâcler le travail !

Tout d’abord, peut-être même que vous ne disposez pas encore d’images à utiliser. Dans ce cas, les bibliothèques d’images telles que Shutterstock (payant) ou Pixabay (gratuit) répondront probablement à votre besoin.

Une fois les images sélectionnées, il faudra les redimensionner dans une largeur raisonnable, et les renommer afin que leur nom de fichier reflète leur contenu.

En ce qui concerne le téléversement dans la bibliothèque de WordPress, il y a plusieurs écoles. Vous pouvez tout ajouter à l’avance, en mode « une bonne chose de faite ». Une autre option est de les ajouter une par une, au fur et à mesure que vous aurez besoin de les insérer dans l’article. Personnellement, je préfère m’en occuper une fois le brouillon initial terminé. Cela me permet de me concentrer totalement sur l’écriture, sans être perturbé par des manipulations.

Se créer un environnement de travail propice à la concentration

Notre productivité dépend beaucoup de notre environnement. Si on est régulièrement interrompu ou qu’on n’arrive pas à se concentrer à cause du bruit, il est difficile de produire du contenu de qualité et le processus d’écriture peut même devenir frustrant.

Avoir un environnement calme

Si vous travaillez sur votre blog depuis chez vous, il ne vous sera probablement pas trop difficile de travailler dans un environnement calme – a moins d’être confiné avec vos enfants en ces temps de coronavirus 🙂 -.

Par contre, nous avons une longue expérience du travail dans des cafés en Asie du sud-est et le moins qu’on puisse dire est qu’elle a été contrastée. Par exemple, il était souvent impossible de travailler dans les cafés vietnamiens à cause du boucan ambiant, même avec des écouteurs sur les oreilles. Investir dans un casque anti-bruit peut donc se révéler utile dans certaines circonstances !

Beaucoup d’entre nous apprécient aussi d’avoir une boisson à portée de main. En tant qu’accro au café, je ne fais pas exception. Autant le préparer à l’avance, plutôt que d’interrompre votre processus créatif pour vous hydrater !

Trois tasses de café vietnamien en préparation
Café vietnamien

Enfin, comme je ne peux pas travailler sans musique, un fond sonore adapté m’aide énormément à me concentrer.

Travailler sans interruption ni distraction

Du point de vue visuel, quand je rédige un document, je préfère n’avoir que lui à l’écran. Du coup, j’apprécie énormément le mode « Plein écran » du nouvel éditeur de WordPress, accessible depuis le menu tout en haut à droite de l’écran. Je fais aussi disparaître l’onglet des réglages (en cliquant sur l’engrenage) pendant que je suis en train de rédiger.

Sélection du mode Plein écran

Souvent, je pousse même le minimalisme jusqu’à utiliser aussi le mode « Plein écran » (F11) de Firefox pour n’avoir vraiment plus que mon texte à l’écran.

Bien sûr, si j’essaye de ne pas être distrait par les composants de l’éditeur WordPress, ce n’est pas pour avoir des notifications de Facebook ou WhatsApp ! Mon portable étant de toutes façons toujours en mode silencieux, je me contente de fermer l’éventuel onglet Facebook – ou toute autre appli pouvant m’interrompre dans le processus d’écriture –

Une fois confortablement installé dans ma petite bulle numérique, c’est enfin parti pour la rédaction proprement dite !

Rédaction du contenu

J’essaye autant que possible d’écrire mon article d’un trait, sans interruption, en suivant un plan bien défini à l’avance. Ainsi, je commence par écrire le titre et l’introduction avant de définir les titres de l’article et finalement de remplir le contenu.

Pour ce qui est de la longueur du contenu, même après avoir jeté un œil aux autres articles traitant du même sujet, je ne me fixe pas d’objectif en terme de nombre de mots. L’important pour moi est de traiter le sujet de façon aussi complète que possible !

Trouver un titre principal accrocheur pour votre nouvelle publication

Le titre de votre article doit avoir deux qualités :

  • Accrocher le lecteur : c’est en général la première chose qu’il verra lors d’une recherche
  • Indiquer au moteur de recherche qui parcourt la page de quoi elle parle

J’ai par curiosité effectué une recherche avec les termes « techniques écriture article blog ». Voici les titres d’une partie des résultats des deux premières pages :

  • 2 techniques simples pour écrire un article de blog qui va …
  • ▷ 30 conseils pour rédiger un article de blog parfaitement …
  • 10 conseils pour réussir la rédaction d’un article de blog …
  • 5 étapes pour écrire un article de blog en une heure top chrono
  • Comment écrire un article de blog percutant et bien structuré ?
  • 27 Techniques de Rédaction Web Démentielles pour votre Blog
  • Écrire Un Article De Blog Parfait : (Enfin) Le Guide Ultime
  • Écrire un article de blog en 5 étapes – Écrire pour le web
  • 13 façons démentes pour écrire un article de blog inoubliable …
  • 6 Techniques de Rédaction pour Améliorer Vos Articles de blog
  • Comment Structurer un Article de Blog – Formation Rédaction …
  • Content Marketing : 7 étapes pour écrire votre meilleur article …
  • Le guide pour écrire des articles de blog efficacement – Follow …
  • Comment écrire un article de blog optimisé et percutant ?
  • Comment rédiger un bon article de blog ? – Wix.com

On peut tirer plusieurs enseignements de cette liste. Tout d’abord, les trois premiers articles ont beau être en tête de liste, le fait que leur titre soit tronqué n’incite pas à cliquer dessus. Il est donc bon de limiter la longueur du titre afin qu’il soit visible intégralement lors d’une recherche ! En général, il vaut mieux ne pas dépasser une soixantaine de caractères, mais cela dépend du contenu (car un i est moins large qu’un u, par exemple). Beaucoup d’extensions SEO (Search Engine Optimization, soit optimisation pour les moteurs de recherche) proposent de visualiser l’apparence du titre choisi dans les résultats Google; cela permet d’ajuster la taille du titre.

Titre avec une largeur optimale et des chiffres

En terme de contenu, il y a plusieurs écoles. L’utilisation de superlatifs est assez en vogue : « Démentielles », « Parfait », « Ultime », « inoubliable » (et je vous épargne le « explosives » qui est tronqué). Soyons francs, ce n’est pas ma tasse de thé, mais il en faut pour tous les goûts !

Une autre tendance à noter est la quantification : 2 techniques, 30 conseils, 5 étapes… Cette pratique permet de donner au lecteur une idée de la quantité d’informations à ingérer : par exemple, « Écrire un article de blog en 5 étapes » est plutôt rassurant pour un débutant, alors que « 30 conseils » s’adressera probablement plutôt à un blogueur cherchant à approfondir le sujet. L’utilisation d’une durée telle que « une heure top chrono » suit la même logique – même si je demande à voir la qualité d’un article produit en un laps de temps aussi court ! –

D’un point de vue esthétique, on notera parfois l’utilisation de majuscules pour chaque mot. Cela n’a aucune influence en terme de référencement, et est donc un choix purement cosmétique ! De façon anecdotique, l’utilisation de caractères spéciaux ou emojis (tels que le ▷ de la troisième entrée) permet de sortir un peu du lot. Attention cependant, Google n’affiche pas tous les caractères existants, et la politique du moteur de recherche vis-à-vis de cette pratique est assez fluctuante. N’en abusez donc pas !

Trop d’emojis tue les emojis

Enfin, certaines extensions proposent d’ajouter automatiquement le nom du blog après le titre. On peut le voir dans certains résultats au-dessus (« Écrire pour le web », « Formation Rédaction Web » ou « Wix.com »). Cette pratique est en fait plutôt pénalisante, dans la mesure où cela raccourcit la partie utile du titre. Je déconseille donc l’utilisation de cette fonctionnalité.

Écrire l’introduction

Une fois que vous avez attiré le lecteur avec votre titre, il reste à rédiger une introduction qui lui donne envie de continuer la lecture ! Le plus efficace reste de jouer sur les émotions, en lui indiquant ce qu’il a à gagner en poursuivant sa lecture (ou inversement, ce qu’il risque de rater en quittant la page). Ici, j’ai utilisé le fait de gagner du temps dans le processus d’écriture.

Définir le plan de votre article

L’écriture du contenu de votre article sera grandement facilitée si vous écrivez en avance le « squelette » sur lequel s’appuyer. Commencez donc par écrire les titres, en utilisant si possible une hiérarchie (balises h2, h3).

Le sujet devra apparaître régulièrement dans les titres choisis – si possible en variant un peu le vocabulaire, grâce aux synonymes trouvés précédemment -. N’hésitez pas pendant cette phase-là à réorganiser vos titres, changer leur ordre, ajouter des sous-titres : c’est bien plus facile à faire maintenant qu’une fois que le texte sera rempli !

Rédiger le contenu proprement dit

C’est parti pour boucher les trous !

Chacun a sa technique – qui évolue bien sûr au fil du temps -. Pour ma part, je suis de l’école « écriture au kilomètre » : j’enchaîne la rédaction des paragraphes l’un après l’autre, sans me soucier des mises en forme – y compris la création des puces – ou même des fautes d’orthographes aimablement soulignées par mon correcteur. Si l’appétit vient en mangeant, dans mon cas, l’inspiration vient en écrivant ! Ce n’est qu’une fois le premier brouillon terminé en intégralité que je commence à me relire, corriger les erreurs, aérer le texte et mettre en forme.

Si en cours d’écriture, je me retrouve bloqué par une phrase qui « refuse de sortir », je note simplement l’idée avec une marque à côté, telle que TODO ou XXX. J’y reviendrai lors d’un second passage, pour ne pas interrompre le flux de mes idées !

Toujours dans l’optique de laisser libre cours à ma prose, j’essaye d’utiliser le moins souvent la souris quand je rédige. Ainsi, une fois un paragraphe terminé, j’utilise la touche « Entrée » pour en créer un nouveau, ou la flèche vers le bas pour aller au titre suivant. Cela m’aide à rester focalisé à 100% sur le texte en cours d’écriture. Et puis on ne sait jamais, si j’utilisais la souris, la tentation pourrait être forte d’aller vérifier mes mails 🙂

Relecture et réorganisation éventuelle

Une fois le premier jet terminé vient le long processus de relecture et correction. Si le correcteur orthographique de Firefox fait un excellent travail pour l’orthographe, d’autres erreurs sont plus dures à détecter. Il est fréquent de trouver au milieu d’une phrase un mot sans rapport oublié lors d’une réécriture, ou des doublons !

C’est aussi le moment de se creuser les méninges pour trouver les formules sur lesquelles on bloquait précédemment. Passez donc du temps à éliminer les TODO ou XXX présents dans le texte. Je m’aperçois que souvent, le blocage est cause par un mauvais choix de vocabulaire ou une tournure de phrase difficile à utiliser. Ainsi, en général, je choisis l’option bulldozer pour régler le problème : je supprime la ou les phrases existantes, et essaye de les reformuler de façon totalement différente.

Il peut aussi être nécessaire d’altérer un peu la structure de l’article initialement prévue. En effet, parfois, en cours d’écriture, il me vient une idée à laquelle je n’avais pas pensé avant. Ou alors, le fait d’écrire me permet de me rendre compte que la structure de mon article serait plus cohérente avec une autre organisation des titres. Il m’arrive donc régulièrement d’ajouter des titres non prévus initialement. Maintenant que les titres sont éloignés les un des autres par le contenu que je viens de rédiger, l’aperçu du document fourni par le nouvel éditeur WordPress m’est d’une grande aide pour visualiser le plan.

Plan du document en cours d’écriture

Par exemple, sur la copie d’écran ci-dessus (prise pendant la rédaction de l’article), beaucoup de titres ne font pas référence au sujet de l’article. Je pourrai par exemple changer « Améliorer sa connaissance du sujet » en « Approfondir le sujet de l’article »

Attendre avant de publier un contenu fraîchement écrit

Il est très tentant de publier directement le contenu qu’on a écrit. Cependant, je vous conseille plutôt de prendre votre temps. En effet, il est fort probable qu’à force d’avoir passé du temps à écrire et relire votre nouvel article, vos relecture ne soient pas très efficaces – vous connaissez son contenu par cœur, ce qui diminue l’efficacité de vos relectures -.

Laissez donc passer un ou deux jours et relisez alors votre contenu à tête reposée. Il est possible qu’en plus de retrouver de nouvelles coquilles, vous ayez à nouveau envie de le remanier un peu !

Si vous n’êtes pas convaincus, voici le titre de l’article que j’ai posté il y a quelques jours. Malgré maintes relectures, j’ai réussi à publier un article avec une énorme faute de grammaire !

Eh oui, il manquait le « s » à « points ».

Enfin, une fois que vous vous sentez prêt à publier, vous n’en avez pas fini ! Jetez donc un œil aux points à vérifier avant publication.

Les points à vérifier avant de publier un article

Une fois qu’on a terminé de rédiger un article, on n’a généralement qu’une seule envie : presser « Publier ».
Hop, une bonne chose de faite ! Au suivant !

Oui, je sais, ça démange

… Pas si vite !

Il y a une multitude de petit détails qui peuvent nous avoir échappé. Et autant publier un article impeccable dès le début plutôt que d’avoir à l’éditer à nouveau, non ? En particulier si vous avez déjà une petite audience et que vous avez l’habitude d’annoncer vos nouvelles publications dans la foulée sur Facebook ou via une lettre de diffusion…

Une partie de ces vérifications est assez mécanique, comme dans le cas des liens; d’un autre côté, il y a aussi des vérifications plus subjectives en terme de lisibilité ou de référencement.

Voici donc la liste des points que je passe en revue avant chaque publication – et parfois aussi après une grosse modification d’un article existant -.

Se concentrer sur le titre de votre article

Le titre de l’article est la partie qui saute aux yeux de vos lecteurs – que ce soit directement sur votre blog ou encore plus les résultats d’un moteur de recherche -. Il faut donc lui prêter une attention particulière !

Est-ce qu’il reflète le sujet de l’article ? Donne-t-il envie de cliquer sur l’article ? Est-ce qu’il n’est pas trop long ?

Et tant qu’à vérifier le titre, autant jeter un œil au permalien (accessible en cliquant sur le titre de l’article), qu’on a trop souvent tendance à oublier – surtout si on modifie le titre en cours d’écriture ou lors de la relecture -. Est-ce que qu’il reflète encore le titre ? Et est-ce que je l’ai bien raccourci pour supprimer les mots de liaison ?

Titre de l’article et permalien correspondant sous Gutenberg

Vérifier l’onglet « Document »

Je continue mes vérifications dans l’onglet « Document » de Gutenberg. Est-ce que la catégorie est la bonne ? Et les étiquettes sont-elles bien assignées ? Peut-être est-il nécessaire d’en définir de nouvelles.

Si j’utilise les images mises en avant sur le blog, est-ce que j’ai pensé à en définir une ? Et finalement, est-ce que j’ai autorisé les commentaires ?

Passer en revue le plan de l’article

Vous aviez probablement une idée claire du plan de l’article avant de commencer à le rédiger. Il est cependant possible que sa structure ait évolué pendant l’écriture. Il est possible de visualiser uniquement les titres de l’article en cliquant sur l’icône « Structure du contenu », en haut à gauche de l’éditeur.

Aperçu du document sous Gutenberg

Maintenant que l’article est terminé, est-ce que le plan est toujours clair ? La structure est-elle suffisamment hiérarchisée en utilisant des balises h2, h3… pour les titres ? J’ai pour ma part tendance à produire des articles avec une structure trop « plate », comme l’indique l’absence de titre de niveau h3 dans l’aperçu ci-dessus !

Autre interrogation, est-ce que le sujet apparaît dans l’introduction et est repris dans les titres ?

Enfin, c’est le moment de vérifier que tous les titres ont la même structure grammaticale. Par exemple, la copie d’écran ci-dessus, ils commencent quasiment tous par un verbe à l’infinitif.

Évaluer la lisibilité de l’article

Ensuite, je prévisualise l’article, et j’essaye de me mettre à la place du lecteur. Est-ce que le texte n’est pas trop dense par endroits ? Si besoin est, j’aère le contenu en découpant un gros paragraphe en plusieurs parties.

Ajouter des images peut aussi être un bon moyen de soulager un peu les yeux des lecteurs.

Toujours en terme de structure, est-ce que certains éléments ne gagneraient pas à être présentés sous forme de puces ? C’est une question que je me suis beaucoup posée sur ce même article !

Prévisualiser aussi la version mobile

J’effectue également une prévisualisation de la version mobile en utilisant les outils développeur de Firefox. Pas de panique en lisant ces mots, c’est extrêmement simple !

Sous Firefox, lorsque je prévisualise l’article, j’appuie sur la touche F12 pour faire apparaître la barre d’outils développeur. Là, je clique sur l’icône bleue située tout en haut à droite de la barre d’outils, représentant un téléphone et une tablette.

Barre d’outils développeur de Firefox

Cela me permet d’évaluer rapidement la lisibilité qu’aura mon article sur un téléphone.

Prévisualisation de la version mobile d’un article sous Firefox

Si vous utilisez Chrome plutôt que Firefox, la manipulation est la même, mais l’icône se trouve en haut à gauche de la barre d’outils, plutôt que en haut à droite.

Passer en revue les images

Ah, les images… c’est probablement la partie de l’article la plus fastidieuse à vérifier. Pour chacune d’entre elles, il faut passer en revue les point suivants :

  • Tout d’abord, est-ce que le nom de fichier est descriptif ? Si ce n’est pas le cas, mieux vaut le supprimer de la bibliothèque des médias WordPress et réinsérer une version renommée. Autre alternative, utiliser une extension telle que Phoenix Media Rename qui vous permettra d’effectuer le renommage directement sous WordPress
  • Si vous avez comme moi l’habitude de centrer les images horizontalement, est-ce que le centrage est correct ?
  • Est-ce qu’on visualise l’image en haute résolution en cliquant dessus ? C’est-à-dire sous Gutenberg, est-ce que l’image est liée au fichier média ?
  • L’image a-t-elle une légende et un texte alternatif ? Est-ce que le sujet de l’article est présent dans un ou plusieurs d’entre eux ?
Lien vers le fichier média d’une image

Créer et vérifier les liens internes et externes

C’est un aspect souvent oublié – y compris par moi -. Il ne faut pas hésiter à ajouter des liens dans son contenu, qu’ils soient internes (vers votre site) ou externes (vers d’autres sites). Une bonne utilisation des liens peut améliorer votre référencement !

N’hésitez pas à cliquer sur tous les liens de votre article pour vérifier leur bon fonctionnement – les fautes de frappes peuvent en effet aussi s’y glisser ! -.

Certains blogueurs conseillent de faire systématiquement ouvrir les liens dans un nouvel onglet. Si cela peut aider vos lecteurs néophytes en informatique qui ne savent pas le faire via le menu contextuel ou la touche Control, je trouve personnellement cette pratique insupportable. C’est à l’utilisateur de décider comment il veut ouvrir ses liens, et le blogueur n’a pas à lui imposer !

Relire et vérifier l’orthographe

Je repasse ensuite (pour la énième fois) mon texte en revue. Tout d’abord dans l’éditeur, pour voir si le correcteur orthographique n’a pas détecté une faute passée inaperçue. Ensuite, à nouveau, en prévisualisant mon article.

Le problème, c’est qu’à force de relire, on connaît son texte par cœur et on ne fait même plus attention à ce qui est réellement écrit !

Un conseil qui je vois passer assez souvent est de relire son article à haute voix; cela force à se concentrer sur le texte. Ainsi, on remarquera mieux les mots inutiles qui ont pu se glisser, ou les non-sens.

Prévoir les évolutions futures

On y est presque ! Mais tant qu’à faire, autant évaluer tout de suite le travail restant à fournir sur l’article lors des évolutions à venir.

J’utilise d’abord le compteur intégré à Gutenberg pour avoir une idée du nombre de mots de ma publication.

Statistiques du document sous Gutenberg

Mon but est d’arriver autant que possible à des articles d’environ deux mille mots, car la longueur des articles est déterminante dans leur référencement. Inutile pour autant de s’étaler systématiquement; certains articles resteront à jamais courts. Si un sujet peut être traité totalement en moins de mille mots, je ne vois pas l’intérêt de doubler sa taille artificiellement – au risque d’endormir le lecteur et au final, d’avoir un article ennuyeux à lire ! –

Chacun a des habitudes rédactionnelles qui lui sont propres. Certains sont capables de rédiger d’un trait un article de plusieurs milliers de mots. Je préfère pour ma part travailler par itérations successives. Afin de ne pas oublier les évolutions que je souhaite apporter à chaque article, j’ai créé un document Google Docs dans lequel je note mes idées pour les changements ultérieurs : compléments à ajouter, points à vérifier…

En plus de ces compléments à apporter, il est également bon de prévoir une relecture régulière des articles du blog. Sont-ils toujours à jour ? Sur beaucoup de sujet, il y a toujours des précisions à ajouter ultérieurement, des corrections à apporter… Garder ses articles « frais » est une excellente stratégie en terme de référencement !

Une fois l’article publié…

… vous n’en avez pas fini ! Voici encore quelques tâches à effectuer.

Vous pouvez le soumettre manuellement à la Google Search Console. Cet outil fera l’objet d’un article à venir, donc si ça ne vous dit rien, pas de panique ! Votre site sera de toutes façons parcouru régulièrement par Google, qui va donc indexer votre article lors de son prochain passage.

N’hésitez pas à effectuer une relecture directement sur votre portable, même après avoir effectué la prévisualisation conseillée auparavant.

On a déjà évoqué le fait d’ajouter des liens dans l’article. Mais tant qu’on n’y est, est-ce qu’il n’est pas possible de créer un lien depuis ou plusieurs articles existants vers l’article actuel ? Par exemple, lors quand je publierai mon article sur Google Search Console, ce sera l’occasion d’ajouter un lien depuis cet article ! Passez donc rapidement en revue les titres des articles existants pour voir si leur sujet n’est pas proche de celui de votre nouvel article.

Enfin, toujours en ce qui concerne les liens… est-ce que l’article devra apparaître dans un menu ou une page récapitulative (comme la liste des articles par niveau sur Un blog pas à pas) ? Si c’est le cas, autant le faire dès la publication de l’article, pour ne pas l’oublier !

A noter que je n’ai pas encore abordé la thématique du référencement avec Yoast SEO dans cette liste de vérifications. Si vous utilisez cette extension (ou une autre extension WordPress similaire), il est clair que son statut fait partie des choses à vérifier avant toute publication !

Création d’une page de contact

Dans cet article, nous allons voir ensemble comment créer un formulaire de contact. Avec les commentaires, c’est le principal moyen qu’auront vos lecteurs pour communiquer avec vous ! C’est donc un élément à ne pas négliger.

Un grand nombre d’extensions WordPress existent pour créer le formulaire approprié. J’utilisais précédemment Ninja Forms, qui est extrêmement facile d’utilisation et m’a donné pendant longtemps entière satisfaction. Malheureusement, j’ai eu des soucis de cohabitation avec une autre extension, et j’ai dû trouver une autre solution.

Je me suis donc par la suite tourné vers WPForms, une autre extension populaire toute aussi ergonomique.

Quelle adresse de contact utiliser ?

Si le plus simple est d’utiliser votre adresse personnelle, je déconseille fortement cette solution. En effet, cela veut dire que cette adresse sera aussi utilisée quand vous répondrez à un message reçu. Pour des raisons évidentes de confidentialité, mieux vaut créer une adresse dédiée.

Une autre solution est de créer un compte Gmail pour avoir une adresse votreblog@gmail.com, mais comme la plupart des hébergeurs proposent de créer des comptes mail correspondant à votre domaine, pourquoi s’en priver ?

Je conseille donc de créer un compte de courrier électronique chez votre hébergeur, par exemple prenom@votreblog.fr. Il vaut mieux éviter d’utiliser une adresse générique telle que contact@votreblog.fr, car ce type d’adresse est fréquemment spammé ! Voyons concrètement comment se passe ce processus, en général assez simple.

Création d’un compte e-mail avec SiteGround

Chez SiteGround, il est extrêmement simple de créer des adresses e-mail pour votre domaine. Dans les outils de votre site, allez dans l’écran Email / Accounts, et remplissez les deux champs sous « Create New Email Account » avec le nom d’utilisateur et le mot de passe désiré. Validez avec le bouton « Create » et voilà, votre adresse est prête à être utilisée !

Création d’un compte email chez SiteGround

Pour consulter vos mails, il faut en bas de ce même écran cliquer sur le menu à droite du nom d’utilisateur et choisir « Login to Webmail ». Vous serez alors amené sur l’écran de la boite de réception utilisant RoundCube.

Création d’un compte e-mail chez o2switch

La procédure est toute aussi simple que chez SiteGround, bien que les écrans soient bien moins esthétiques ! Rendez-vous d’abord sur votre interface cPanel, et recherchez le bloc « e-mail ». Cliquez sur l’icône « Comptes de messagerie » juste en-dessous.

Gestions des e-mails avec cPanel chez o2switch

Sur la page suivante, cliquez sur le bouton « Créer ». Entrez le nom d’utilisateur et le mot de passe désiré, puis validez avec « Créer ».

Création d’un compte e-mail chez o2switch

Vous serez alors ramené sur un écran listant les comptes e-mail, d’où vous pourrez accéder à la page de consultation des mails.

Consulter ses mails depuis Gmail

Il est assez contraignant d’avoir à consulter les mails via l’interface d’administration de son hébergeur. Voyons donc comment les lire et y répondre directement sous Gmail !

Pour pouvoir gérer votre boite aux lettre depuis Gmail, il faut connaître la configuration mail utilisée par votre hébergeur. Celle-ci est constituée des mails entrants (« Incoming server ») utilisant le protocole POP3, et des mails sortants (« Outgoing server »), avec le protocole SMTP. Pour chacune d’entre elle, il faut connaître le nom du serveur ainsi que le port utilisés (souvent 995 pour le protocole POP3 et 465 en SMTP).

C’est du charabia pour vous ? Pas de panique ! Prenons le cas de SiteGround. La configuration est indiquée clairement en bas à droite de l’écran de création d’un compte mail.

Configuration du serveur mail chez SiteGround

Comme un peut le voir, chez SiteGround, c’est à nouveau très simple; en effet, le serveur à utiliser est simplement le nom de domaine de votre site, tandis que les ports sont standards (995 pour les emails entrants en POP3, 465 pour les emails sortants en SMTP).

Chez o2switch, la configuration est quasiment tout aussi simple, mais il faut préfixer votre domaine par « mail. » (par exemple mail.monblog.fr). Les ports utilisés sont 995 et 465.

Chez les autres hébergeurs, la configuration devrait être aussi trouvable sans difficulté majeure (recherchez SMTP ou POP3 dans la documentation)

Passons donc aux choses concrètes : la configuration de Gmail pour qu’il récupère les mails sur le serveur de votre hébergeur. Cliquez sur l’engrenage en haut à droite de votre boite de réception, et choisissez « Paramètres » dans le menu. L’onglet qui nous intéresse est « Comptes et importation », et plus précisément la section « Consulter d’autres comptes de messagerie ».

Cliquez sur « Ajouter un compte de messagerie »; une fenêtre pop-up va s’ouvrir, indiquez l’adresse e-mail que vous avez créé chez votre hébergeur. Entrez le mot de passe, le serveur POP (c’est donc votre nom de domaine si vous êtes chez SiteGround), et choisissez le port (995 chez SiteGround et o2switch). Si elle n’est pas cochée, cochez la case concernant la connexion SSL afin de sécuriser la connexion. Enfin, je conseille de stocker les mails reçus sur votre site dans un dossier spécifique afin de vous y retrouver plus facilement.

Après validation, Gmail va essayer de se connecter. En cas de succès, essayer d’envoyer un mail depuis votre compte personnel à votre adresse de blog; celui-ci devrait être récupéré par Gmail après un petit délai.

Voyons maintenant comment envoyer des mail en utilisant l’e-mail de votre blog (cela servira aussi à répondre à vos lecteurs).

Envoyer des mails depuis Gmail

Dans l’écran de paramétrage de Gmail précédent, on s’intéresse maintenant à la section « Envoyer des e-mails en tant que ». Cliquer sur « Ajouter une autre adresse e-mail », et rentrez le nom d’expéditeur et l’adresse e-mail correspondante. Là encore, pour des raisons de confidentialité, je vous conseille d’utiliser comme nom d’expéditeur le nom de votre blog, ou simplement votre prénom.

Sur l’écran suivant, il faut reporter la configuration mail de l’hébergeur : nom du serveur et port (votre domaine / 465 si vous utilisez SiteGround), le nom d’utilisateur et mot de passe. Petite subtilité, le nom d’utilisateur doit contenir le domaine; il sera donc de la forme prenom@domaine.fr. Vérifier que la connexion SSL est activée, et validez.

Il vous sera désormais possible de choisir l’adresse e-mail utilisée quand vous rédigerez un e-mail sous Gmail, grâce à la liste déroulante présente à côté du champ « De : ». De même, quand vous répondrez à un e-mail envoyé sur cette adresse, la réponse proviendra de cette même adresse plutôt que de votre adresse personnelle.

Voyons maintenant comment intégrer un formulaire de contact dans votre site. Par rapport à la gestion des adresses mail, cette étape sera bien plus rapide !

Création d’un formulaire de contact avec WPForms

Commencez par installer l’extension WPForms via Extensions / Ajouter; tapez WPForms dans la boite de recherche en haut à droite et installez / activez l’extension.

Celle-ci ajoute un menu WPForms dans le menu principal du tableau de bord. Rendez-vous dans la section « Ajouter » de ce menu, et choisissez « Créer un formulaire de contact simple ». Vous pourrez alors prévisualiser ce à quoi ressemblera le formulaire.

Il est possible de personnaliser facilement cette interface. Vous pouvez soit modifier un champ existant en cliquant dessus, ou alors en ajouter un via le glisser-déposer. Pour ma part, j’ai trouvé la version proposée suffisante pour mes besoins.

Rendez-vous ensuite dans la section « Réglages » / « Notification », et entrez l’adresse mail à laquelle recevoir les notifications dans le champ « adresse e-mail du destinataire ».

Pour « Nom de l’expéditeur », cliquez sur « Afficher les balises intelligentes » et choisissez « Nom » dans la liste. De même, pour « E-mail de l’expéditeur » et « Répondre à », choisissez « E-mail ». La configuration devrait ressembler à cela :

Paramétrage des notifications sous WPForms

Enregistrez ensuite les modifications. C’est parti pour intégrer ce formulaire dans votre site !

Intégration et test du formulaire de contact WPForms

Depuis l’écran de paramétrage du formulaire WPForms, cliquez sur le bouton « intégration » et haut à droite. Une popup apparaîtra alors, affichant un bout de code un peu barbare, qu’on va copier-coller dans la page de contact. Copiez donc le bout de texte affiché (appelé shortcode).

Le numéro indiqué après id sera probablement différent de celui de la copie d’écran, c’est normal.

Shortcode WPForms pour l’intégration dans votre blog

Créons alors une nouvelle page (Créer / page en haut de l’écran) qu’on appellera « Contact ». Vérifier que le permalien (dans l’onglet « Document » à droite de l’écran) est bien « contact », et collez le shortcode dans un bloc de type « paragraphe », comme vous le feriez avec du texte normal.

Si vous le désirez, vous pouvez bien sûr personnaliser la page en ajoutant un message avant le formulaire, ou encore une image.

Prévisualisez ensuite la page, et si vous êtes satisfait du résultat, c’est parti pour la publier ! Elle devrait ressembler plus ou moins à celle-ci, avec probablement quelques différences suivant le thème utilisé !

Vous pouvez alors tester votre formulaire. Rendez-vous sur votre page de contact, et envoyez un message en utilisant votre adresse personnelle comme expéditeur. Après un petit délai, votre message devrait être visible dans le dossier correspondant de votre compte Gmail !

Finalement, n’oubliez pas de rendre la page de contact accessible via le menu de votre site.