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 !

Choix d’un hébergeur WordPress : pourquoi je conseille SiteGround

Bien choisir l’hébergeur de son blog sous WordPress est vital.

Je ne résiste pas à la tentation de citer la page de WordPress concernant l’hébergement, malheureusement non traduite en français :

Just like flowers need the right environment to grow, WordPress works best when it’s in a rich hosting environment.

En français, cela donnerait approximativement « Tout comme les fleurs ont besoin d’un bon environnement pour s’épanouir, WordPress fonctionne mieux dans un hébergement riche ».

Un choix inadapté peut avoir plusieurs conséquences :

  • si votre hébergement n’est pas assez rapide, vos lecteurs sur mobile seront rebutés par la lenteur de votre blog
  • en l’absence d’un support de qualité, vous serez livré à vous-même
  • les restrictions mises en place par un hébergeur bas de gamme vont vous brider dans les possibilités d’évolution

Pour ne rien arranger, le choix d’un hébergeur peut être paraître intimidant. Ce ne sont en effet pas les offres qui manquent, en France comme à l’international. Chacun met en avant le critère qui l’arrange, en noyant en général le client potentiel sous un déluge de termes techniques.

Nous allons voir ensemble comment faire le tri parmi les offres d’hébergement WordPress existantes, et pourquoi je recommande SiteGround. Ensuite, nous verrons pas à pas comment se passe la souscription et l’installation de WordPress.

Mais avant tout, commençons par causer finance !

Hébergeur gratuit contre hébergeur payant

Passer par un hébergeur gratuit pour son blog peut paraître tentant. Outre l’aspect financier, ce choix limite en effet le besoin de se frotter à des considération techniques qui sont nécessaires pour choisir un hébergeur payant.

Pour autant, est-ce un bon choix ? Je pense que non. Voyons pourquoi !

Quel sont les avantages et inconvénients d’un hébergeur gratuit ?

Il est possible de créer un blog sur une plateforme gratuite telle que wordpress.com. Dans ce cas, l’hébergement est gratuit, et le site hébergé sur un sous-domaine, tel que monblog.wordpress.com

Le plus gros avantage est bien sûr financier. Si le coût d’un hébergeur payant est devenu très faible, il est bien évidemment plus élevé que pour un service gratuit 🙂 De plus, le fait de devoir payer sur internet peut rebuter certaines personnes, pour des raisons de sécurité. Enfin, cela évite de se poser des questions quant au choix de l’hébergeur, car on n’a pas se soucier des caractéristiques de l’hébergement.

Leur plus gros défaut ? Il est souvent impossible d’ajouter des extensions WordPress, qui permettent d’ajouter des fonctionnalités à ce dernier. De la même façon, personnaliser son apparence en choisissant librement son thème est généralement aussi impossible.

De plus, l’hébergeur impose souvent un bandeau de publicité dans votre blog, sur lequel vous n’aurez aucun contrôle.

Prenons concrètement l’exemple de wordpress.com; voici les fonctionnalités disponibles dans la version gratuite.

Liste des fonctionnalités disponibles sur l'hébergement gratuit wordpress.com

Vous aurez certes accès à « des dizaines » de thèmes gratuits, mais il par exemple sera impossible d’en choisir d’autres que ceux proposés par la plateforme. C’est loin d’être la seule restriction, comme on peut le voir sur cette seconde copie d’écran :

Liste des fonctionnalités non disponibles sur l'hébergement gratuit wordpress.com

Ainsi, l’installation d’extensions sera elle aussi bridée. Dans un registre différent, il sera impossible d’utiliser Google Analytics pour analyser votre trafic. Enfin, un bandeau de publicité pour wordpress.com apparaîtra forcément en bas de votre blog.

Petite digression : la différence entre wordpress.org et wordpress.com

La différence entre ces deux noms de domaine prête souvent à confusion. Cependant, ils ont un but bien distinct.

Le site wordpress.org est la vitrine du programme WordPress; il permet donc de s’informer sur ce projet, et de le télécharger pour les utilisateurs désirant l’installer manuellement. Comme nous le verront bientôt, cette étape n’est que très rarement nécessaire; en effet, chez la plupart des hébergeurs web, WordPress s’installe d’un clic de souris.

D’un autre côté, wordpress.com propose d’héberger des blogs – en utilisant bien sûr WordPress comme moteur -.

Que fournit un hébergeur payant ?

Quand on parle d’hébergement payant, il y a en fait deux composantes :

  • L’achat du nom de domaine (“jeremycuisine.fr” si vous créez en blog de recettes, “marieenasie.org” pour parler de vos voyages…).
  • L’hébergement proprement dit, c’est à dire pouvoir stocker votre blog (les texte, photos…) sur les serveurs de votre hébergeur

S’il est possible d’acheter séparément le nom de domaine et l’hébergement, cette option n’a en pratique que peu d’intérêt. C’est d’autant plus vrai que beaucoup d’hébergeurs offrent le nom de domaine la première année.

A noter que si on parle d’achat de nom de domaine, dans les fait il s’agit plutôt d’une location, puisqu’il faut renouveler son contrat tous les ans. L’hébergement est quant à lui parfois payable mensuellement, même si les options à l’année (ou plus) sont souvent plus avantageuses.

Les hébergeurs offrent aussi un grand nombre de fonctionnalités supplémentaires :

  • Création d’adresses e-mail correspondant à votre site – plutôt que d’avoir une adresse sur Gmail ou autres –
  • Ajout de certificat SSL permettant une connexion sécurisée à votre blog
  • Connexion via FTP pour pouvoir ajouter ou éditer des fichiers directement sur le serveur de votre hébergeur – c’est parfois la seule solution si un problème arrive avec votre installation WordPress ! –

De quel montant parle-t-on ?

L’hébergement ainsi que l’achat du nom de domaine associé reviennent en tout à moins de 10 euros par mois; chez certains hébergeurs, il est possible de descendre à moins de 2€ mensuels la première année, quand le nom de domaine est offert.

Pour prendre un exemple très concret, j’ai payé 186€ pour 3 ans d’hébergement chez SiteGround, en incluant la souscription du nom de domaine pour un an. En ajoutant les frais de renouvellement de domaine (une quinzaine d’euros annuels), mon hébergement me revient à environ six euros par mois. C’est le prix d’un café par semaine, pour un hébergement de qualité et recommandé par WordPress !

En-dehors de ce coût, la solution proposée ici repose sur des composants (thèmes, extensions) entièrement gratuits. Certains élément proposent des fonctionnalités supplémentaires payantes, mais celles-ci ne sont pas nécessaires pour une utilisation normale.

Hébergeur gratuit ou payant : comparaison côté à côté

CritèreHébergeur gratuitHébergeur payant
CoûtGratuitEn général entre 5 et 10 euros par mois
Installation de WordPressPré-installéProcédure d’installation variable suivant l’hébergeur (mais sans difficulté technique)
Choix de l’offrePas besoin de s’intéresser à la techniqueComparaison parfois difficile entre les différentes formules
Nom du siteAssez long : par exemple, patrickbricole.wordpress.comAisément mémorisable : patrickbricole.com ou patrickbricole.fr
PerformanceSouvent plus faible qu’un hébergement payantVarie d’un hébergeur à l’autre, mais en général bien meilleure qu’un hébergeur gratuit
Installation d’extensions et thèmesSouvent impossibleLiberté totale d’installation des composants WordPress
SupportLimité ou inexistantSupport dédié
PublicitéPrésence possible de publicitéAucune publicité, sauf si vous le désirez

Mon conseil : ne pas se laisser tenter par un hébergeur gratuit

Au vu du faible coût d’un hébergement, je conseille fortement de vous tourner vers une plateforme payante. Si la quasi-totalité de cette formation est utilisable chez la plupart des hébergeurs payants, ce n’est pas le cas chez les hébergeurs gratuits en raison de l’impossibilité de gérer librement les extensions et thèmes WordPress.

Passons maintenant en revue les critères pertinents pour comparer les offres des hébergeurs.

Affichage des prix : attention aux astuces marketing des hébergeurs

Concernant ce dernier point, deux pièges assez courant sont à éviter. Le premier, chez les hébergeurs français, est l’affichage des prix hors taxe. Quant aux américains, ils raffolent de la technique consistant à consentir une énorme réduction le premier mois (ou la première année), en mettant en avant ce prix… par contre, passé ce délai, le prix n’est parfois plus du tout intéressant lors du renouvellement. Méfiance donc !

Critères de choix de son hébergeur WordPress

Parmi les caractéristiques mises en avant par les hébergeurs WordPress, deux reviennent systématiquement :

  • La quantité d’espace disque disponible
  • La taille de l’espace alloué en base de données

La différence peut paraître peu claire, et les tailles indiquées ne vous parleront peut-être pas beaucoup. Décryptons-les ensemble !

L’espace disque sert d’abord à installer, les thèmes et les extensions, ainsi que les fichiers (principalement des images) apparaissant sur le blog. La base de donnée, elle, ne stocke que le texte (code HTML) du blog et les réglages de WordPress et ses extensions. Sa taille n’a donc pas un aspect critique; même un gros site n’a besoin que d’assez peu d’espace. Par exemple, la base de données de Endless Travel a une taille de 100 méga-octets, alors qu’elle stocke aussi des anciens sites. Une base de données de 200 méga-octets sera suffisante pour la plupart des sites web.

L’espace disque occupé par les photos peut, lui, grimper assez vite; cependant, les hébergeurs sont souvent assez généreux. Par exemple, une image typique sur Endless Travel, redimensionnée à 1500 pixels de large et optimisée pour réduire sa taille occupe au maximum 500 kilo-octets (ko). Il faudrait donc qu’on stocke 2000 photos pour occuper un seul giga-octet, alors que notre hébergeur nous en alloue cent ! Là encore, pas la peine d’investir dans une offre comprenant un espace disque énorme; 10 giga-octets seront souvent amplement suffisants.

De façon peu intuitive, il faut se méfier des offres proposant un espace de stockage trop important. En effet, des disques durs rapides représentent un gros budget pour votre hébergeur. Un hébergeur trop généreux quant à l’espace disque utilise probablement du matériel de moindre qualité, ce qui se traduira par un accès plus lent à votre site ! Si leur utilisation de garantit pas forcément des performances optimales, mieux vaut choisir un hébergeur mettant en avant l’utilisation de disques dur SSD.

Petit aparté : liens d’affiliation

Parmi les liens menant aux trois hébergeurs que je cite dans cet article, les deux que je recommande (o2switch et SiteGround) sont des liens d’affiliation. Cela signifie que si vous passez commande chez eux, je touche une rémunération pour me remercier de leur avoir amené un client.

Pourquoi je n’utilise plus OVHcloud (nouveau nom d’OVH) sur mes nouveaux sites

J’étais un fidèle client d’OVHcloud sur plusieurs blogs; cependant, j’ai subi de nombreuses interruptions de service, parfois assez longues. Autre inconvénient, leur interface d’administration du site est assez peu flexible et les opérations de maintenance sont souvent longues. Enfin, les conditions de renouvellement sont assez opaques : aucune mention du nouveau tarif n’apparaît, et il faut se rendre sur le site afin de faire une simulation de paiement pour savoir combien on va payer !

Pour les budgets très serrés, OVHcloud propose une offre nommée Kimsufi, pour le prix imbattable de 1,79€ par mois. Je l’utilise encore sur un de mes sites peu consommateur en ressources, et elle me donne satisfaction pour cet usage simple. Cependant, le support se faisant uniquement via un système de tickets, il est dur de la recommander aux débutants.

Résumé de l'offre Kimsufi d'OVH

Avantages d’OVH

  • Support en Français
  • Une société reconnue pour son savoir-faire
  • Offre d’hébergement Kimsufi à moins de deux euros par mois

Inconvénients d’OVH

  • Offre peu claire
  • Support peu réactif
  • Beaucoup d’interruptions de service (courtes)
  • Interface d’administration propriétaire et peu agréable

SiteGround : l’hébergeur WordPress que je recommande désormais

Les lecteurs en recherche d’une société reconnue pourront se tourner vers SiteGround, que j’utilise pour Un blog pas à pas. Cet hébergeur américain fait partie des trois sociétés recommandées par wordpress.org. Elle propose une offre dédiée à l’hébergement WordPress (« Managed WordPress Hosting »), déclinée en plusieurs formules.

La formule “StartUp” à moins de cinq euros par mois initialement (puis une douzaine d’euros mensuels lors du renouvellement) sera suffisante pour la plupart des usages.

Tarification des différentes formules pour l'hébergement WordPress chez SiteGround
Tarification des différentes formules pour l’hébergement WordPress chez SiteGround

On note d’emblée la différence de prix entre la souscription initiale et le renouvellement. A noter que par défaut, SiteGround affiche les prix hors taxe, pour passer en TTC, il faut cliquer sur « Show prices with VAT » tout en bas de la page. Dernière remarque, les prix proposés peuvent être légèrement différents de ceux indiqués sur cette copie d’écran, car ils varient marginalement suivant le taux de change euro/dollar.

Il est possible de s’engager pour un, deux ou trois ans; afin de profiter le plus longtemps possible de la tarification initiale, j’ai signé pour trois ans. Avec le coût du nom de domaine, l’hébergement via SiteGround me revient pour cette durée à un peu plus de 186€, soit 62€ par an – un peu plus de 5 euros mensuels -. C’est extrêmement raisonnable au vu de la qualité de l’hébergement; le seul souci est qu’il faut débourser cette somme dès le départ.

Voyons donc en détail ce que propose la formule « StartUp ». L’hébergeur ayant tendance à très (trop ?) détailler les caractéristiques, on ne regardera ici que les points importants.

Caractéristiques essentielles de la formule "StartUp" de SiteGround pour l'hébergement WordPress
Caractéristiques essentielles de la formule « StartUp » de SiteGround pour l’hébergement WordPress
  • Web space : l’espace alloué de 10go est suffisant pour la plupart des usages.
  • Data transfer (Unmetered) : il n’y a pas de restriction quant au volume de données transférées.
  • Free email accounts : il est possible de créer gratuitement des adresses mail correspondant à votre domaine
  • 100% renewable energy match : depuis début 2020, SiteGround utilise l’infrastructure de Google Cloud. Non seulement c’est une garantie de qualité, mais en plus Google s’engage à produire assez d’énergie renouvelable pour compenser la consommation de ses serveurs !

Passons ensuite à l’aspect « performance » :

Aspect "performance" de la formule "StartUp" de SiteGround pour l'hébergement WordPress
Aspect « performance » de la formule « StartUp » de SiteGround pour l’hébergement WordPress

On retiendra surtout la présence de serveurs en Europe – plus précisément à Eemshaven, aux Pays-Bas -. Pour des blogs francophones, c’est un gros avantage par rapport à d’autres hébergeurs américains tels que BlueHost qui ne proposent que des serveurs aux États-Unis. En effet, être hébergé au plus près de vos visiteurs leur permet d’accéder à votre site plus rapidement. De même, l’activation de http/2 qui permet des transferts plus rapides.

Enfin, deux points importants ne sont pas visibles sur ces copies d’écran. Tout d’abord, les indispensables certificats SSL permettant de sécuriser les connections sont gratuits. Du côté de l’espace base de données, on a droit à 500 méga-octets, ce qui est plus que suffisant.

Si ces écrans très complets permettent à SiteGround d’étaler les points forts de ses hébergements, il ne mettent bien sûr pas en avant le fait que le prix du nom de domaine n’est pas inclus dans cette tarification. Il faut donc compter annuellement une quinzaine d’euros supplémentaires chaque année pour un .fr, ou un peu moins de 17€ pour un .com.

Un point que j’apprécie beaucoup chez SiteGround est la qualité de l’interface d’administration. Elle est réellement très bien pensée, claire et facile d’utilisation. Voici par exemple l’écran de création d’une compte de courrier électronique :

Création d'un compte e-mail avec l'interface d'administration SiteGround
Création d’un compte e-mail avec l’interface d’administration de SiteGround

Le support, joignable par chat ou par téléphone est disponible rapidement et m’a paru techniquement solide.

Avantages de SiteGround

  • Hébergeur très réputé et recommandé par WordPress
  • Un site très fiable, quasiment sans interruption de service
  • Hébergement sur l’infrastructure de Google
  • Interface d’administration très agréable d’utilisation, bien qu’en anglais
  • Support compétent et disponible

Inconvénients de SiteGround

  • Site et support en anglais
  • Offre moins claire que celle de o2switch
  • Prix bien plus élevé lors du renouvellement que lors de la souscription initiale
  • Nom de domaine en supplément

o2switch : un très bon hébergeur WordPress français

Les lecteurs peu à l’aise avec un hébergeur américain pourront quant à eux se tourner vers o2switch. J’ai testé précédemment l’hébergement proposé par cette société française suite à ma relative déception concernant OVH, et j’ai été séduit par la simplicité de leur offre. En effet, quand la plupart des hébergeurs offrent de nombreuses formules parfois difficiles à comparer, o2switch propose un hébergement unique à 5€ HT par mois, soit 78€ TTC/an.

Voici un résumé des principales caractéristiques de cette offre :

L'offre unique o2switch en résumé
L’offre unique o2switch en résumé

De façon plus aride visuellement, voici une description un peu plus détaillée de l’hébergement proposé par o2switch.

Détail de l'hébergement chez o2switch
Détail de l’hébergement chez o2switch

Décryptons ensemble les points essentiels :

  • Espace disque illimité : vous n’aurez donc pas à vous soucier de l’espace de stockage, en particulier si votre site propose beaucoup de photographies.
  • Transfert mensuel illimité : certains hébergeurs imposent des limites quant au volume de données transférées mensuellement. C’est rarement un problème quand on débute; ici, les transferts n’étant pas limités, vous n’aurez pas de souci en cas de croissance de votre audience.
  • Nom de domaine (un offert) : il est inclus dans le prix, contrairement à ce que propose SiteGround.
  • Interface Cpanel : c’est l’interface standard d’administration de votre hébergement. Son utilisation est aisée, et comme elle est utilisée par une majorité d’hébergeurs, il est ainsi facile de s’y retrouver en cas de changement d’hébergeur.
  • Gestion SSL avec http/2 : la norme SSL permet des connexions sécurisées à votre site; ici, il est possible de l’utiliser avec le protocole http/2, qui permet des gains de vitesse de chargement.

J’apprécie beaucoup la clarté de l’offre proposée, avec un prime un tarif tout à fait compétitif et sans mauvaise surprise lors du renouvellement. Le support en français est bien sûr un plus .

Côté négatif, c’est une petite structure, on a donc moins de visibilité à long terme qu’avec une plus grosse entreprise. De plus, bien que l’interface d’administration utilise le standard cPanel, elle est assez laide et peu ergonomique. De plus, tout n’est pas traduit en français, ce qui limite l’intérêt par rapport à SiteGround.

Avantages de o2switch

  • Support en Français
  • Espace disque illimité
  • Clarté de l’offre
  • Excellent rapport qualité/prix

Inconvénients de o2switch

  • Hébergeur peu connu
  • Interface d’administration peu agréable

Ma recommandation

Si l’anglais ne vous effraye pas, SiteGround est un excellent hébergeur, unanimement reconnu pour son sérieux. L’ergonomie sans faille de son interface d’administration en fait un excellent choix pour les débutants, malgré l’absence de traduction en français.

Et si vous préférez un hébergeur français, je ne peux que recommander o2switch pour son excellent rapport qualité-prix, la simplicité et la clarté de son offre !

Si vous choisissez un autre hébergeur

J’aurai certes le cœur brisé que vous ne suiviez pas ma recommandation :). Cependant, rassurez vous ! Quelque soit votre choix, l’intégralité du contenu de Un blog pas à pas sera utilisable; la seule exception sera peut-être l’installation de WordPress, car la procédure varie d’un hébergeur à l’autre. Mais cette étape pose rarement problème, car elle est en général bien documentée.

Achat de l’hébergement chez SiteGround

Nous allons maintenant voir pas à pas comment se passe l’achat d’un hébergement et l’installation de WordPress chez SiteGround.

L’ensemble du processus prend environ dix minutes… plus une à deux heures d’attente pour que la dernière manipulation soit effective.

Rendons-nous sur la page d’accueil de SiteGround. Il faut tout d’abord choisir l’offre « Managed WordPress hosting », puis le plan « StartUp ».  L’écran suivant permet de choisir le nom de domaine désiré et l’extension correspondante.

Si le domaine désiré est bien disponible, il faut alors remplir un assez long formulaire. Passons ensemble en revue les différentes parties à remplir.

Il faut tout d’abord remplir les informations concernant votre compte : votre adresse e-mail, ainsi qu’un mot de passe à confirmer.

Les contraintes sur le mot de passe sont les suivantes :

  • Entre six et cinquante caractères de long
  • Au moins une lettre
  • Au moins un chiffre
  • Au moins une majuscule ou un caractère spécial (ponctuation par exemple)
Section "Compte" du formulaire SiteGround
Section « Compte » du formulaire SiteGround

Le pavé suivant concerne vos informations : dans la première colonne, pays, prénom, nom, et le cas échéant entreprise et numéro de TVA. Dans la seconde colonne, ville, adresse, code postal et numéro de téléphone.

Section "Client" du formulaire SiteGround
Section « Client » du formulaire SiteGround

Il faut ensuite fournir des informations supplémentaires qui seront transmises au gestionnaire du nom de domaine. Il faut donc indiquer qu’on est un individu, son pays et sa date de naissance. Cette dernière est à saisir au format AAAA-MM-JJ; ainsi, le 3 avril 1981 sera 1981-04-03.

Section "Propriétaire du domaine" du formulaire SiteGround
Section « Propriétaire du domaine » du formulaire SiteGround

Passons ensuite au paiement. De façon classique, il faut donner son numéro de carte de crédit, sa date d’expiration, le code de validation CCV ainsi que le nom du titulaire.

Section "Paiement" du formulaire SiteGround
Section « Paiement » du formulaire SiteGround

Pour finir, il faut vérifier les informations concernant les services achetés. Le plan « StartUp » est suffisant pour débuter; vérifiez aussi que l’hébergement se fait bien en Europe. Choisissez ensuite la durée d’hébergement, et vérifier que « SG site scanner » est décoché.

A noter que même si vous choisissez une durée supérieure à un an, le nom de domaine ne sera facturé que pour la première année, avec renouvellement automatique.

N’oubliez pas que les prix sont affichés hors taxes, la TVA sera indiquée dans la partie suivante.

Section "Achat" du formulaire SiteGround
Section « Achat » du formulaire SiteGround

Pour certaines extensions telles que les .com, l’option « Domain privacy » apparaîtra dans la liste des services supplémentaires.

Option "Domain privacy" chez SiteGround
Option « Domain privacy » chez SiteGround

De quoi s’agit-il ? Elle permet de cacher vos informations personnelles, qui sont dans le cas contraire visibles publiquement. Si cette option est disponible pour votre extension, je vous conseille de la sélectionner.

Enfin, tout en bas de l’écran s’affiche un récapitulatif du prix à payer.

Section "Total" du formulaire SiteGround
Section « Total » du formulaire SiteGround

Si tout vous semble correct, il n’y a plus qu’à cocher les deux dernières cases pour accepter et valider ! Une fois le paiement validé, un message de confirmation s’affichera.

Installation de WordPress sous SiteGround

Commençons par nous connecter sur my.siteground.com et utilisons le bouton « Set up site ».

Sur l’écran suivant, il faut valider successivement « Start New Website », « WordPress » puis choisir un mot de passe pour WordPress (l’adresse e-mail devrait être pré-remplie).

Enfin, validons la confirmation (sans ajouter le « Site Scanner ») avec le bouton « Finish ».

Dans mon cas, j’ai eu après un peu d’attente un message m’indiquant que l’opération était plus longue que d’habitude. Pas de panique, un mail m’a vite indiqué qu’elle était terminée !

Création d’un certificat SSL

Les certificats SSL sont devenus indispensables. Ils servent à se connecter via le protocole https plutôt que http (le « s » supplémentaire indiquant « sécurisé »). Sans ce certificat, les utilisateurs se connectant à votre site verront dans leur navigateur un message d’avertissement indiquant une connexion non sécurisée. Cela risque de les dissuader de continuer leur visite !

De plus, sans certificat SSL, la connexion à votre espace d’administration WordPress ne serait pas sécurisée. Il serait donc possible de se faire dérober votre mot de passe en vous connectant à votre site via certains réseaux wifi par exemple !

Heureusement, l’installation d’un certificat SSL chez SiteGround est extrêmement simple, et ne nécessite aucune connaissance technique.

Retournons sur la page d’accueil de SiteGround, puis dans Websites / SSL.

Vérifier que le certificat de gauche (« Let’s Encrypt SSL ») est sélectionné, et cliquez sur « Activate » en bas de l’écran.

Vous arriverez alors sur l’écran « SSL Manager ». Vérifiez que le domaine indiqué est le bon et que « Let’s Encrypt » est bien sélectionné dans « Select SSL », et cliquez « Get ».

Vous obtenez alors l’écran de confirmation suivant.

A noter que si le certificat est installé immédiatement, il se passe un certain temps avant qu’il soit utilisable. Dans mon cas, il a fallu patienter 2-3 heures; dans l’intervalle, Firefox m’indiquait une erreur. Prenez donc votre mal en patience !

Une fois que vous arrivez à vous connecter à votre site sans erreur, nous en avons fini avec l’administration sous SiteGround ! Il est grand temps de se frotter à WordPress, en commençant par son tableau de bord.

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.

Deux extensions WordPress indispensables

Nous aborderons ultérieurement Yoast SEO, qui permet d’améliorer votre référencement et mérite un chapitre à elle toute seule ! De même, les extensions permettant d’accélérer votre site feront l’objet d’un traitement spécifique.

Voici déjà deux extensions WordPress dont je recommande vivement l’utilisation. La première servira à protéger automatiquement votre site des commentaires indésirables, à la manière du dossier « Spams » de Gmail. La seconde, quant à elle, effectuera régulièrement une sauvegarde de votre blog.

Akismet Anti-Spam

Le spam dans les commentaires est un vrai fléau. Une fois votre site bien référencé sur Google, vous pouvez vous attendre à avoir des dizaines de commentaires indésirables du plus mauvais effet.

Quelques exemples de commentaires indésirables (spam)
Quelques exemples de commentaires indésirables (spam)

S’il est possible de valider les commentaires manuellement, pourquoi perdre du temps avec cette tâche répétitive et peu gratifiante quand elle peut être effectuée efficacement de manière automatique ? C’est ce que propose l’extension WordPress Akismet. Elle est installée par défaut, mais nécessite de s’enregistrer pour l’activer. Son utilisation est gratuite pour un site non commercial.

Activation d’Akismet

Pour activer Akismet, rendez-vous tout d’abord sur la page Extensions / Extensions installées. Localisez Akismet dans la liste, ou utilisez la fonctionnalité de recherche (en haut à droite de l’écran).

Akismet dans la liste des extensions
Akismet dans la liste des extensions

Cliquez sur le bouton « Activer » situé sous l’extension. Une nouvelle page apparaîtra. On notera au passage que seule une partie de l’écran a été traduite, ce qui est malheureusement un phénomène assez répandu.

Accès à l'écran de configuration d'Akismet
Accès à l’écran de configuration d’Akismet

Cliquez alors sur « Configurer votre compte Akismet » pour vous rendre sur le site de l’extension. Vous y verrez les différentes formules de tarification de Akismet, incluant la version gratuite pour une utilisation personnelle.

Tarification d'Akismet
Tarification d’Akismet

Choisir « Get started with Personal », dans la colonne de gauche. Comme Akismet a été racheté par la compagnie gérant wordpress.com, il vous faudra créer un compte sur cette plateforme. Rassurez-vous, cela ne nécessite pas d’y héberger votre blog !

L’inscription se fait sur l’écran suivant :

Inscription sur wordpress.com
Inscription sur wordpress.com

Il vous suffit de renseigner votre adresse e-mail, ainsi que de choisir un nom d’utilisateur (je vous conseille d’utiliser le nom de votre blog) et un mot de passe.

Enfin, une fois le compte créé, vous vous retrouverez sur un dernier écran permettant de faire une donation optionnelle pour utiliser Akismet.

Montant de la donation optionnelle
Montant de la donation optionnelle

Renseignez votre nom et prénom puis vérifiez que votre site remplit bien les exigences d’un site non-commercial en cochant les cases, et choisissez finalement le montant du don – qui peut être zéro -.

Après validation, choisissez « Automatically save your Akismet API key » dans la fenêtre pop-up qui apparaît; ça y est, Akismet est enfin activé !

Vérification des spams collectés

Votre site sera dorénavant protégé du spam. Je vous conseille d’aller régulièrement vérifier et vider les spams dans l’onglet « Spams » de la section Commentaires de votre blog.

Faire une sauvegarde du blog : UpdraftPlus – Backup/Restore

Même si la plupart des hébergeurs proposent une fonctionnalité de sauvegarde, celle-ci est rarement très souple. L’extension UpdraftPlus permet de paramétrer facilement la fréquence des sauvegardes et leur moyen de stockage.

Vous vous demandez peut-être quel est l’intérêt de sauvegarder son blog. Soyons clairs, il est très rare d’avoir besoin de restaurer une sauvegarde : en trois ans de blogging, je n’ai jamais eu à effectuer cette opération. Cependant, il peut y avoir des situations extrêmes dans lesquelles votre site sera inutilisable.

Par exemple, on ne peut pas exclure qu’une vulnérabilité dans une extension WordPress soit utilisée à des fins malveillantes. Et si c’était le cas, vous vous mordriez les doigts d’avoir perdu des dizaines d’heures de travail. Alors, autant prévenir que guérir, d’autant que la mise en place des sauvegardes via UpdraftPlus est plutôt simple !

Il est possible de stocker les sauvegardes (qui sont de simples fichiers compressés au format ZIP) sur différents supports, principalement sur le cloud (Google Drive, DropBox, Amazon S3…) mais aussi sur un site FTP.

Pour ma part, j’ai créé un compte Google que j’utilise uniquement pour stocker les sauvegardes sur Google Drive; cela me permet de ne pas me soucier de l’espace disponible ! Si vous n’avez qu’un seul site, vous pouvez très bien utiliser votre compte Google principal.

Installation de UpdraftPlus

Commençons par nous rendre sur l’écran d’ajout d’une extension, et recherchons « Updraft ». La première extension proposée devrait être la bonne, nommée « UpdraftPlus WordPress Backup Plugin ». Cliquez sur « Installer » puis sur « Activer ». Voilà, vous avez installé votre première extension !

Extension "UpdraftPlus" installée
Extension « UpdraftPlus » installée

Connexion de UpdraftPlus à Google Drive

Pour la paramétrer, il faut se rendre dans l’écran des extensions installées et y rechercher UpdraftPlus. Pour la localiser, plutôt que de parcourir toute la liste des extensions, le plus simple est d’utiliser la fonctionnalité de recherche en haut à droite de l’écran. Comme lors de l’installation, tapez-y « Updraft » et validez.

UpdraftPlus dans la liste des extensions
UpdraftPlus dans la liste des extensions

Cliquer sur l’option « Réglages » située en-dessous du nom de l’extension. L’écran suivant est presque intégralement traduit.

Écran initial de configuration d'UpdraftPlus
Écran initial de configuration d’UpdraftPlus

Commençons par paramétrer la sauvegarde sur Google Drive. Pour cela, allons dans l’onglet « Réglages » et choisissons d’abord la fréquence de sauvegarde.

Celle-ci doit être définie pour les fichiers et la base de données. Les fichiers comprennent principalement les images stockées dans la bibliothèque de WordPress, ainsi que le code de WordPress, de ses thèmes et extensions. La base de données, quant à elle, stocke le contenu de vos pages et articles, ainsi que les réglages de WordPress et ses composants.

De mon point de vue, la base de données a un aspect plus vital que les fichiers. En effet, la plupart du temps, vous aurez sur votre ordinateur une copie des photos de votre blog. Par contre, il est bien plus rageant de perdre plusieurs heures de travail passées à rédiger un article !

De plus, la base de données a une taille relativement modeste, comparée à celle des images.

En conséquence, je programme une sauvegarde quotidienne de la base de données (en gardant une petite semaine d’historique), et une sauvegarde seulement hebdomadaire des fichiers (avec deux sauvegardes conservées).

Paramétrage de la fréquence de sauvegarde
Paramétrage de la fréquence de sauvegarde

Cliquer ensuite sur l’icône « Google Drive » dans la liste des moyens de stockage.

Choix du stockage des sauvegardes UpdraftPlus
Choix du stockage des sauvegardes UpdraftPlus

Valider votre choix avec le bouton « Enregistrer », tout en bas de la page. Une fenêtre popup apparaît; cliquez sur le lien fourni pour autoriser UpdraftPlus à se connecter à Google Drive.

Lien vers l'autorisation Google Drive
Lien vers l’autorisation Google Drive

Dans la fenêtre suivante, choisissez le compte Google à utiliser. L’étape suivant est la validation de l’accès à votre compte par UpdraftPlus. Le système d’autorisations fonctionne suivant le même principe que les applications sur téléphone. Google Drive va donc vous indiquer de quelles permissions l’application UpdraftPlus a besoin (accès aux fichiers, gestion des répertoires).

Confirmation d’autorisation Google Drive

Validez-les avec « Allow » afin de donner l’accès à UpdraftPlus. Finalement, sur la page suivante, cliquez sur « Complete setup » pour retourner sur la page des sauvegardes de UpdraftPlus.

Lancement d’une sauvegarde manuelle

De retour sur la page des sauvegardes, utilisez le bouton « Sauvegarder » pour forcer à déclencher une sauvegarde et vérifier que le processus se passe bien.

Création d'une sauvegarde
Création d’une sauvegarde

Validez les paramètres proposés dans la nouvelle fenêtre.

Paramètres de sauvegarde manuelle
Paramètres de sauvegarde manuelle

Suivant la taille de votre site web, le processus compression et surtout de téléchargement sur Google Drive peut être assez long. Une barre de progression vous informera de l’avancement de cette tâche.

Avancement de la sauvegarde UpdraftPlus
Avancement de la sauvegarde UpdraftPlus

Quand elle est terminée, une fenêtre popup apparaît brièvement pour vous l’indiquer. Le dernier message dans le journal sera aussi mis à jour, et la sauvegarde apparaîtra dans la liste en-dessous.

Sauvegarde UpdraftPlus terminée
Sauvegarde UpdraftPlus terminée

Sauvegardes automatiques

Une fois la sauvegarde manuelle réussie, il n’y aura plus besoin d’effectuer ce processus; on laissera UpdraftPlus gérer la sauvegarde suivant la fréquence définie. Il peut cependant être utile de vérifier que la première sauvegarde automatique se déclenche; l’heure prévue est indiquée en haut de l’écran.

Heure des prochaines sauvegardes automatiques par UpdraftPlus
Heure des prochaines sauvegardes automatiques par UpdraftPlus

En vous connectant à Google Drive, vous verrez un répertoire nommé « UpdraftPlus » qui contient les sauvegarde effectuée. Chaque fichier est suffixé suivant son contenu : « db » pour la base de données, « uploads » pour les fichiers téléchargés, « themes » pour les thèmes, etc…

Vous devriez aussi recevoir une alerte sur votre compte Gmail, confirmant l’autorisation donnée à UpdraftPlus.

Nettoyage de WordPress

Lors de son installation, WordPress publie par défaut une page et un article d’exemple; nous allons voir ici comment s’en débarrasser. Nous allons également effleurer la gestion des commentaires, ainsi que des extensions. Défaire et refaire, c’est toujours faire 🙂

Notez que suivant votre version de WordPress et votre hébergeur, toutes les étapes présentées ici ne seront peut-être pas nécessaires. n’ayez donc pas d’inquiétude si un élément mentionné sur cette page n’apparaît pas !

Suppression de l’extension « Hello Dolly »

L’extension « Hello Dolly » est installée par défaut mais désactivée; elle est totalement inutile. Pour s’en débarrasser, rendez-vous dans l’écran des extensions installées, en utilisant le menu Extensions / Extensions installées. Vous y verrez Hello Dolly dans la liste :

Liste des extensions installées
Liste des extensions installées

Cliquez sur « Supprimer » (en-dessous du nom de l’extension), et confirmez la suppression. Voilà, c’est fait ! Bon débarras 🙂

Nous verrons un peu plus en détail la gestion des extensions dans un article dédié à ce sujet. En attendant, continuons notre tour d’horizon de l’administration WordPress en effleurant le sujet de la gestion des commentaires.

Suppression du commentaire par défaut

Il faut d’abord se rendre sur l’écran de gestion des commentaires, en cliquant sur l’icône de la barre d’administration.

D’ailleurs, vous vous demandez peut-être pourquoi cette icône indique le chiffre zéro, alors qu’il y a un commentaire ? Il correspond en fait au nombre de commentaires en attente de validation. Cependant, le commentaire généré automatiquement a été validé afin d’apparaître sur l’article.

Voilà à quoi ressemble la page des commentaires :

Page des commentaires sous WordPress

Comme sur la plupart des écrans de gestion, il y a deux façons d’interagir :

  • individuellement : en passant le curseur sur le commentaire, les options correspondantes apparaissent : Désapprouver, Répondre, Modification rapide, Modifier, Indésirable, Corbeille. On notera que les actions correspondant à des suppressions sont affichées en rouge. Choisir l’action désirée, dans notre cas Corbeille. L’article sera alors déplacé dans la corbeille.
  • en groupe : cocher un ou plusieurs commentaires (ou cocher la case à côté de « Auteur » pour tous les sélectionner), puis sélectionner une action dans le menu Actions groupées et cliquer sur Appliquer

Une fois la suppression effectuée, la liste des commentaires est vide.

Liste des commentaires vides

Le fonctionnement des écrans de gestion des articles et pages suit un principe similaire, comme on va le voir.

Suppression de l’article déjà créé

La suppression d’un article se fait globalement de la même façon que pour les extensions ou commentaires. Consultons la liste des articles publiés en allant dans Articles / Tous les articles. Vous devriez voir l’article publié par WordPress.

Supprimons-le via le lien Corbeille qui apparaît sous l’article.

Liste d’articles vide

Si jamais vous mettez par erreur un article dans la corbeille, pas de panique ! Il suffit depuis ce même écran de cliquer sur le lien « Corbeille » (en dessous du bouton « Ajouter). Là, choisir « Rétablir », de façon individuelle ou groupée.

A noter que mettre un article à la corbeille va aussi supprimer les commentaires qui s’y rapportent.

Suppression de la page par défaut

Finalement, la page Page d’exemple peut elle aussi être supprimée en se rendant dans Pages / Toutes les pages.

Un dernière réglage pour la route

Par défaut, les articles publiés auront une adresse comportant la date de création. Ainsi, un article intitulé « Mon premier article WordPress » publié en mars 2020 est accessible par défaut via monblog.fr/2020/03/mon-premier-article-wordpress. Débarrassons-nous de cette inutile date en visitant les réglage WordPress via Réglages / Permaliens.

Dans cet écran, sélectionnez Titre de la publication dans la catégorie Réglages les plus courants.

Réglages des permaliens WordPress
Réglages des permaliens WordPress

Validez ensuite ce changement grâce au bouton Enregistrer les modifications en bas de page.

Le tableau de bord WordPress

Le tableau de bord est l’écran devant lequel vous vous trouvez une fois connecté à WordPress. Doté d’un grand nombre de menus, il peut paraître intimidant au départ; cependant, vous ne serez en général amené à utiliser qu’un petit nombre de ses fonctionnalités.

Voyons tout d’abord comment s’y connecter. En effet, si vous tapez juste l’adresse de votre site, vous accéderez à la version publique; les fonctionnalités d’administration de WordPress ne seront pas visibles.

Connexion au tableau de bord de WordPress

Il suffit d’ajouter /wp-admin à l’adresse de votre site. Ainsi, si votre site est https://monblog.fr, il faut se rendre sur https://monblog.fr/wp-admin.

Vous vous retrouverez alors face à l’écran de connexion, où vous pourrez saisir votre nom d’utilisateur (ou adresse e-mail) et le mot de passe choisi lors de l’installation de WordPress.

Écran de connexion au tableau de bord WordPress
Écran de connexion au tableau de bord WordPress

Vue d’ensemble du tableau de bord WordPress

Votre tableau de bord devrait ressembler à peu près à cela :

Le tableau de bord de WordPress
Le tableau de bord de WordPress

Il peut varier un peu de celui présenté ici, selon la version de WordPress installée et la présence d’extensions par défaut chez votre hébergeur.

Passons en revue les trois parties principales de ce tableau de bord : barre d’administration, barre latérale, et partie centrale.

Barre d’administration

Elle est située en haut de l’écran; elle contient deux séries de raccourcis, de part et d’autre de l’écran.

La partie la plus utile est celle de gauche. Elle permet principalement de créer des nouveaux éléments (page, article, fichier média).

Partie gauche de la barre d'administration WordPress
Partie gauche de la barre d’administration WordPress

Voici la signification des différentes icônes. Les fonctions auxquelles vous accéderez le plus souvent sont dénotées par ; dans un premier temps, vous pourrez ignorer les autres pour vous concentrer sur l’essentiel !

Ce menu a peu d’utilité, si ce n’est pour l’accès à la documentation.
VotreBlogMenu déroulant permettant de visiter votre site

0

Les deux flèches en forme de cercle indiquent la présence éventuelle de mises à jour; le nombre indiqué à côté est le nombre de mises à jour disponibles. Si aucune mise à jour n’est disponible, cette icône n’apparaît pas.

0

L’icône en forme de phylactère (bulle de bande dessinée) vous permet de gérer les commentaires déposés sur le site; le chiffre indique le nombre de commentaires en attente de validation (et non pas le nombre total de commentaires).

Créer

Enfin, le dernier élément est un menu permettant rapidement de créer une page, un article, ou d’autres éléments WordPress.

Une fonctionnalité très pratique de la barre d’administration est que son contenu s’adapte à la page sur laquelle vous êtes. Ainsi, lors de l’écriture d’un article, elle sera toujours là, mais fournira aussi un raccourci pour visualiser l’article en cours d’édition.

Barre d'administration WordPress pendant l'édition d'un article
Barre d’administration WordPress pendant l’édition d’un article

De même, quand vous visitez votre site, elle permettra d’éditer la page courante ou de personnaliser son apparence.

Barre d'administration WordPress lors de la visualisation d'un article
Barre d’administration WordPress lors de la visualisation d’un article

De par son adaptabilité, elle évite donc des aller-retours sur le tableau de bord complet; n’hésitez donc pas à user et abuser des raccourcis et menus qui s’y trouvent !

A droite se trouve un seul menu; il permet d’éditer les informations de votre profil et de se déconnecter.

Raccourci utilisateur WordPress

Vous aurez rarement à l’utiliser, sauf pour vous déconnecter si vous utilisez un ordinateur partagé.

Barre latérale

Le menu latéral de WordPress

Nous verrons en détail la plupart des fonctions proposées par ce menu dans les modules à venir !

De façon générale, pour chaque élément présent dans WordPress (pages, articles, commentaire, image…), un menu correspondant permet au moins d’accéder à la liste des éléments, et d’en créer un nouveau.

A noter que si un chiffre rouge apparaît à côté d’un élément, cela signifie que des mises à jour sont disponibles.

En survolant la barre latérale avec le curseur de la souris, un menu apparaîtra pour la plupart des éléments. Par exemple, en survolant « Pages », un menu avec deux éléments « Toutes les pages » et « Créer » apparaît. En cliquant sur un élément de la barre latérale, vous serez amené directement au premier élément du menu. Ainsi, si vous cliquez sur « Extensions », vous vous retrouverez sur la page des extensions WordPress installées. De même, cliquer directement sur Médias revient au même que de sélectionner Bibliothèque dans le sous-menu des médias.

Passons maintenant en revue les sous-menus les plus utilisés.

Tableau de bord

Accueil

Retourner au tableau de bord

Mises à jour

Consulter les mises à jour disponibles et de les installer

Articles

Une distinction de base dans WordPress est celle entre une page et un article. La majeure partie du contenu de votre blog sera constitué d’articles. Par rapport aux pages, ceux-ci affichent des informations supplémentaires telles que la date de publication et l’auteur. Ils sont classés par catégorie, permettant au lecteur de trouver facilement des articles sur un même sujet.

Tous les articles

Consulter les articles déjà écrits, et les gérer

Ajouter

Créer un nouvel article; identique à l’utilisation du menu Créer / Article en haut de page

Catégories

Ces deux fonctionnalités permettent de regrouper les articles par thème; les catégories et étiquettes seront abordées en détail dans le chapitre sur la façon de structurer votre blog.

Étiquettes

Médias

Les médias sont essentiellement les images affichées sur votre site.

Bibliothèque

La bibliothèque WordPress stocke l’ensemble des médias de votre site.

Ajouter

Identique à l’utilisation du menu Créer / Fichier média en haut de page.

La plupart du temps, vous ajouterez plutôt les médias directement lors de la création des articles et pages, sans passer par l’écran dédié.

Pages

Contrairement aux articles, les pages contiennent souvent du contenu assez statique, comme des informations sur le site. C’est le cas de la page à propos, par exemple, ou de la page permettant de contacter l’auteur du site. Un cas particulier est la page d’accueil du site.

Toutes les pages

Consulter les pages déjà écrites, et les gérer

Ajouter

Créer une nouvelle page; identique à l’utilisation du menu Créer / Page en haut de page

Commentaires

Accès à la page de gestion des commentaires laissés par les visiteurs où vous pourrez les approuver, les rejeter ou y répondre.

Apparence

Ce menu est extrêmement utile pour modifier tout ce qui touche à l’apparence de votre blog : installation des thèmes, création d’un menu, personnalisation…

Thèmes

L’apparence du blog (ou site web) est contrôlée par ce qu’on appelle son thème. C’est lui qui détermine les couleurs du site, la police de caractères, l’apparence des menus, les éléments affichés sur le côté de l’écran…

Sans les thèmes, il serait nécessaire d’avoir des connaissances en HTML et CSS pour modifier l’apparence globale de votre blog.

Personnaliser

Ce sous-menu permet d’accéder à toutes les options de votre thème afin de modifier l’apparence de votre site.

Widgets

Les widgets sont les éléments apparaissant en général autour de l’écran quand on visite un site. Parmi les widgets disponibles dans WordPress, on peut citer le formulaire de recherche, la liste des articles ou commentaires récents, ou la navigation par catégorie.

Menus

Les menus permettent de naviguer dans votre site. Nous évoquerons leur création dans un chapitre ultérieur.

Extensions

Les extensions permettent d’ajouter de nouvelles fonctionnalités à WordPress. Elles répondent souvent à un besoin technique : sauvegarde, optimisation (pour que le site charge plus vite)… Ce menu permet d’accéder aux extensions déjà installées, d’en installer de nouvelles, et d’accéder à leur code.

Extensions installées

Permet de gérer les extensions déjà installées : mise à jour, activation/désactivation, suppression

Ajouter

Installe une nouvelle extension

Utilisateurs

Ce menu permet de lister les utilisateurs, créer un nouvel utilisateur, et accéder à votre profil. Normalement vous n’aurez pas besoin de ces fonctions, sauf si plusieurs personnes collaborent sur un même blog.

Outils

Les outils installés par défaut par WordPress sont globalement assez peu utiles. Cependant, au fur et à mesure que vous installerez des extensions, certaines d’entre elles créeront une entrée dans ce menu pour leur configuration.

Réglages

Si beaucoup de réglages sont disponibles, dans les faits peu d’entre eux seront utilisés.

Réduire le menu

Utile si vous travaillez sur un plus petit écran; permet de n’afficher que les icônes du menu.

Zone principale du tableau de bord WordPress

Bien que ce soit l’écran devant lequel on se retrouve après s’être connecté à WordPress, je le trouve plutôt inutile.

En haut, des notifications de mises à jour peuvent apparaître. Le reste du tableau de bord vous donne des statistiques sur votre blog : nombre de pages et d’articles, commentaires, dernières publications… Au fur et à mesure que vous rajouterez des extensions à votre blog, d’autres affichages seront ajoutés.

Vous remarquerez d’ailleurs que WordPress liste la présence d’un article, d’une page et d’un commentaire sur votre blog ! Ce sont en fait des exemples destinés à vous montrer le fonctionnement de WordPress. Nous verrons très bientôt comment nous en débarrasser.

Les éléments créés par défaut par WordPress

Si vous êtes curieux, vous pouvez cliquer sur le nom de votre blog dans la barre d’administration (à droite de l’icône ) pour voir ce à quoi il ressemble pour l’instant !

Retourner ultérieurement sur votre tableau de bord

Si vous ne vous êtes pas déconnecté de WordPress, vous verrez la barre d’administration en haut du site lors de vos visites, même si vous tapez simplement l’adresse de votre site sans ajouter /wp-admin . Il vous suffira de cliquer sur le nom de votre site en haut à gauche, puis sur « Tableau de bord » dans le menu. De la même façon, des raccourcis existent vers les fonctions les plus utiles : configuration du thème et des menus, mises à jour…

Choisir le nom de son blog et le nom de domaine associé

Le choix du nom de votre blog (ou site web) est primordial, car ce sera en quelque sorte votre « marque » sur internet. Cependant, comme on va le voir, vous serez un peu contraint dans ce choix.

Un peu de vocabulaire

Une adresse internet (techniquement une URL : Uniform Resource Locator en anglais) est l’adresse que vous tapez dans votre navigateur pour visiter un site. Par exemple, l’adresse de cette page est https://unblogpasapas.fr/choisir-nom-blog-domaine/.

Le nom de domaine constitue la première partie de cette adresse. Par exemple, le nom de domaine de ce blog est unblogpasapas.fr. Choisir un nom de domaine revient donc à répondre à la question suivante : quelle adresse les internautes qui veulent visiter votre site devront-ils taper ? Bien sûr, le nom de domaine utilisé devra être cohérent par rapport nom de votre blog. Ainsi, le domaine correspondant à Un blog pas à pas est unblogpasapas.fr

Le risque est que le nom de domaine correspondant au nom que vous désirez donner à votre blog soit déjà pris; nous verrons ci-dessous comment parer à cette situation.

La première partie du nom de domaine (avant le point) reflète bien évidemment le nom du blog. La seconde partie est l’extension : les plus utilisées sont .com, .org et .fr mais il en existe énormément d’autres, souvent pour un thème précis (.travel, .money)…

Comment choisir le nom de son blog (et donc le domaine associé) ?

De façon assez intuitive, le nom de votre blog devra refléter son contenu.

Une façon simple d’avoir nom un blog à la fois spécifique et facile à mémoriser est de combiner votre prénom et le sujet du blog (sous forme de verbe ou de nom). Par exemple, un de mes blogs de cuisine favori est La cuisine de Bernard, qui a pour nom de domaine lacuisinedebernard.com. Le fait d’inclure votre prénom a aussi l’avantage d’ajouter un côté « humain » à votre blog !

A l’inverse, si vous êtes allergique à toute forme d’auto-promotion, vous pouvez très bien choisir un nom plus générique, à l’image de C’est ma fournée (cestmafournee.com) pour la pâtisserie, ou Mon petit coin vert (monpetitcoinvert.com) pour le jardinage. Il faudra alors faire preuve d’un peu d’imagination, car le risque est que le domaine correspondant au nom désiré soit déjà pris !

Quelle extension choisir ?

Autant faire simple, et choisir l’extension correspondant à votre pays : .fr pour les français, .be pour les belges, ou .ch pour les suisses. Il est aussi possible d’être plus générique, avec un site en .com

Le prix d’un domaine varie suivant l’extension. Si la différence de prix entre un .com et un .fr est négligeable (moins de 15 euros par an dans les deux cas), certaines extensions spécifiques coûtent plusieurs centaines d’euros annuellement – une raison de plus pour ne pas être trop « exotique » ! –

Comment vérifier que le nom de domaine désiré est disponible ?

De nombreux hébergeurs et sites de vente de nom de domaine proposent cette fonctionnalité. C’est par exemple le cas d’OVHcloud (nouveau nom d’OVH), que j’utilise pour cet exemple. Il suffit d’entrer le nom de domaine désiré, et de cliquer sur le bouton « Rechercher ».

Copie d'écran de la vérification de disponibilité d'un domaine chez OVHcloud, comportant un champ pour le nom de domaine et le bouton de recherche
Formulaire de vérification de disponibilité d’un nom de domaine chez OVHcloud

Le site vous indiquera alors sa disponibilité, en proposant le cas échéant des alternatives.

Concrètement, imaginons que vous vouliez créer le blog Marie cuisine, avec un domaine mariecuisine.fr. Pas de chance, il est déjà pris (le statut « Transférable » indique un nom de domaine non disponible).

mariecuisine.fr est indisponible
mariecuisine.fr est indisponible

Parmi les alternatives proposées, l’extension .com est disponible pour la modique somme de 2738€ ! Essayons plutôt une variante du nom de blog désiré, telle que La cuisine de Marie. Malheureusement, le domaine correspondant lacuisinedemarie.fr n’est pas non plus disponible. Damned ! Essayons finalement avec marieencuisine.fr : Victoire !

Confirmation de la disponibilité du nom de domaine marieencuisine.fr chez OVHcloud
Disponibilité de marieencuisine.fr

A noter que s’il existe déjà un blog avec un nom similaire, ce n’est pas forcément une bonne idée d’en créer un qui soit trop semblable, car cela risque de prêter à confusion. Cependant, en se rendant sur mariecuisine.fr, on tombe sur… un site de vente de chaussures ! Dans ce cas précis, il n’y a donc pas de problème à choisir comme nom de blog Marie en cuisine, avec pour nom de domaine correspondant marieencuisine.fr.

Il est aussi possible de remplacer un verbe par un nom, ou un verbe conjugué par un infinitif. A l’origine, je voulais nommer ce site « Créer mon blog », mais creermonblog.fr était déjà pris. J’aurai donc pu choisir pour nom de blog « Je crée mon blog » (avec un domaine jecreemonblog.fr), mais j’ai au final préféré choisir un nom vraiment différent.

Dans l’article suivant, nous verrons comment sélectionner un hébergeur.