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

Les bénéfices d’un site rapide

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

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

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

Les différents composants d’une page web

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

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

De façon optionnelle, on peut aussi trouver :

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

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

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

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

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

Qualité de l’hébergement

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

Nombre et poids des fichiers transférés

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

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

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

Nombre de connexions à d’autres domaines

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

Travail à fournir par le navigateur pour afficher le site

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

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

Les outils utiles pour mesurer la vitesse de son site

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

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

Google PageSpeed Insights

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

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

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

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

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

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

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

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

Pingdom Tools

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

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

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

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

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

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

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

Google Lighthouse

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

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

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

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

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

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

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

GTmetrix

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

Choisir un bon hébergeur

Le choix d’un hébergeur est crucial.

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

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

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

Activer la compression gzip

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

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

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

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

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

Utiliser http/2

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

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

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

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

Utiliser une version récente de PHP

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

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

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

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

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

Choisir l’emplacement du serveur hébergeant votre blog

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

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

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

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

Attention à l’overdose de fonctionnalités

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

Utiliser un thème rapide

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

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

Se méfier de certaines extensions

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

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

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

Utiliser Google Fonts avec parcimonie

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

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

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

Éviter les fontes de Font Awesome

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

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

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

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

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

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

Optimiser ses images

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

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

Compresser ses images

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

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

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

Charger les images à la volée

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

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

Activer la prise en charge de WebP

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

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

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

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

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

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

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

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

Passons maintenant aux extensions de cache et d’optimisation.

Un peu de théorie sur les optimiseurs

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

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

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

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

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

Minification

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

Voici un exemple de code JavaScript :

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

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

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

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

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

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

Concaténation

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

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

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

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

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

Voyons maintenant les extensions WordPress qui utilisent ces techniques.

Les extensions de cache disponibles

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

Autoptimize

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

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

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

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

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

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

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

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

SG Optimizer

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

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

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

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

W3 Total Cache

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

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

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

Supprimer les pingback

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

Désactiver Gravatar

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

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

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

Diminuer le nombre de révisions

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

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

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

define( 'WP_POST_REVISIONS', 3 );

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

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

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

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

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

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

Optimiser les fonctionnalités proposées par Google

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

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

Optimiser les fontes Google

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

Héberger Google Analytics en local

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

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

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

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

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

Se passer de Google Maps

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

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

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

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

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

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

Le mot de la fin

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

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

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

Le guide complet des images sous WordPress

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

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

Dans cet article, nous allons :

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

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

Les différents formats d’images

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

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

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

Images matricielles de qualité photographique : JPEG, webp

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

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

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

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

Autres images matricielles : GIF et PNG

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

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

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

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

Les images vectorielles : SVG

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

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

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

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

Itinéraire au format SVG dessiné avec Inkscape

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

Quelques chiffres sur les images

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

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

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

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

Compression des images JPEG et PNG

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

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

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

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

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

Poids relatif des images sur une page web

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

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

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

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

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

Comprendre les images stockées par WordPress

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

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

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

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

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

Format d’image et orientation

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

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

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

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

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

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

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

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

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

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

Préparer vos images

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

Redimensionnement

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

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

Renommage

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

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

Comprendre les attributs WordPress des images

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

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

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

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

Texte alternatif

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

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

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

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

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

Le cinéma Laochaleun à l’abandon à Savannakhet

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

Titre de l’image

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

Légende

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

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

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

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

Description

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

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

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

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

En résumé

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

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

La bibliothèque des médias WordPress

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

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

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

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

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

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

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

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

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

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

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

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

Définition de l’image mise en avant

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

Image mise en avant sur notre site Endless Travel

Insertion d’une image simple

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

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

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

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

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

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

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

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

Gazebo au jardin botanique de Singapour, avec un style arrondi

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

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

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

Ajout d’une galerie d’images

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

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

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

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

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

Ajouter un bloc mixte média et texte

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

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

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

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

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

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

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

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

Création d’une bannière

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

La boucle de Thakhek au Laos

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

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

Extensions WordPress utiles

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

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

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

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

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

Écran de paramétrage de reSmush.it

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

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

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

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

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

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

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

Les options de Lazy Load by WP Rocket

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

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

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

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

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

Attachment Pages Redirect : rediriger les pages de fichiers joints

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

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

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

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

En résumé

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

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

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

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

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

Extensions à installer pour accélérer son site

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

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

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.

Gestion des extensions WordPress

Il existe une quantité phénoménale d’extensions WordPress. Leurs fonctionnalités sont extrêmement variées :

  • amélioration de la performance
  • ajout de nouvelles fonctionnalités non présentes par défaut dans WordPress
  • simplification de la création des pages grâce aux constructeurs de page
  • amélioration de l’apparence, par exemple avec des galeries photo

Dans cet article, nous verrons d’abord comment gérer les extensions sous WordPress. Un second article présente deux extensions extrêmement utiles, que je conseille d’installer sur votre blog dès le départ.

Vue d’ensemble de la gestion des extensions WordPress

Le menu Extensions permet d’accéder à trois sous-menus :

  • Extensions installées
  • Ajouter
  • Éditeur

Nous allons voir en détail comment utiliser les deux premiers écrans; le dernier sera inutile pour la majorité des utilisateurs.

Gestion des extensions installées

Cette page affiche une vue d’ensemble des extensions WordPress installées, et de leur état. Vous pourrez ainsi voir rapidement celles pour lesquelles une mise à jour est disponible.

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

Beaucoup d’extensions permettent l’accès à leurs réglages sur cet écran, via le bouton situé en-dessous du nom de l’extension. Comme on le verra plus bas, ce n’est cependant pas le cas de toutes les extensions.

Il est aussi possible de désactiver ou réactiver une extension. Quel est l’intérêt de cette opération ? Il y a deux cas où cela peut être utile :

  • Si un comportement WordPress étrange se produit après avoir installé une extension, il est possible de la désactiver temporairement afin de vérifier que c’est bien elle qui est à l’origine du problème
  • Quand on veut tester une extension avec les mêmes fonctionnalités qu’une extension déjà installée, il est pratique de désactiver l’extension existante pour éviter tout conflit. Si les tests sont concluants, celle-ci peut être supprimée; dans le cas contraire, il suffit de supprimer la nouvelle extension.

Pour supprimer individuellement une extension, il est d’abord nécessaire de la désactiver. Par rapport à une suppression, la simple désactivation a deux avantages :

  • cette opération conserve la configuration, qui est en général purgée lors de la désinstallation
  • à la réactivation, il n’y a pas besoin de réinstaller (et donc de télécharger) quoi que ce soit

Comme pour les autres éléments WordPress (thèmes, pages, articles…), il est possible d’agir sur plusieurs extensions à la fois en les cochant, puis en utilisant le menu en haut de l’écran. A part l’activation/désactivation, il est cependant rare d’avoir à agir sur plus d’une extension à la fois.

Ajout d’une extension WordPress

L’écran d’ajout d’une extension WordPress est accessible avec le menu Extensions / Ajouter.

La recherche parmi les extensions WordPress disponibles peut se faire par son nom, si vous le connaissez déjà; sinon, entrer des mots-clés permet de rechercher dans les descriptions. Dans ce cas, il peut être nécessaire de saisir des termes en anglais, car toutes les extensions ne sont pas traduites !

L’installation se fait en deux clics : d’abord sur le bouton « Installer », qui se transforme ensuite en « Activer » une fois le téléchargement terminé. Le bouton passe alors à « Actif », comme pour Elementor dans la copie d’écran suivante.

Recherche et ajout d'une extension WordPress
Recherche et ajout d’une extension WordPress

Depuis cette page, il est aussi possible d’installer une extension que vous auriez au préalable téléchargé sur votre ordinateur. Il faut pour cela utiliser le menu « Téléverser une extension », en haut à gauche de l’écran.

Impact des extensions WordPress sur le tableau de bord

Un défaut des extensions WordPress est leur tendance à ajouter des menus un peu dans tous les sens.

Ainsi, certaines vont se configurer via l’écran des extensions; d’autres vont s’ajouter dans  » Outils », et certaines dans une catégorie relative à leur fonctionnalité. Par exemple, une extension optimisant les images pourra s’installer dans  » Médias ». Enfin, beaucoup ajoutent une entrée dans le menu latéral, comme on peut le voir dans cette copie d’écran.

Extensions WordPress dans le menu latéral
Extensions WordPress dans le menu latéral

Après avoir installé une nouvelle extension, il peut donc être un peu frustrant d’avoir à chercher partout comment la configurer !

Les taxonomies WordPress : découvrir les catégories et étiquettes

Les catégories et les étiquettes sont un moyen simple d’organiser les articles de votre blog sous WordPress.

Ces deux concepts font partie de ce qu’on appelle dans le jargon WordPress des taxonomies – c’est à dire des moyens de regrouper des articles semblables -.

Voyons tout d’abord pourquoi il est important d’utiliser cette fonctionnalité, tant pour vos utilisateurs que du point de vue du référencement par les moteurs de recherche.

Pourquoi structurer son blog en utilisant des taxonomies ?

L’utilisation des catégories et étiquettes permet d’abord de faciliter la vie de vos lecteurs.

En effet, le gros avantage de ces taxomonies est de permettre de trouver facilement des articles similaires, sans passer par la recherche de votre site. Un simple clic sur une catégorie ou étiquette permet d’afficher les articles correspondants. Rien de plus facile !

L’autre bénéfice des taxonomies est d’aider les moteurs de recherche à comprendre la structure de votre site.

Ceux-ci sont friands de liens, qu’ils pointent vers d’autres articles de votre site ou vers l’extérieur. Comme les taxonomies permettent de créer automatiquement un maillage entre articles similaires, c’est autant d’informations supplémentaires à exploiter.

Les catégorie WordPress

La notion de catégorie permet d’organiser (potentiellement hiérarchiquement) les articles du site.

Par exemple, pour un site de cuisine, les catégories pourraient être les suivantes :

  • Recettes
    • Sucré
    • Salé
    • Apéritif
    • Boissons
  • Tour de main
  • Matériel
  • Ingrédients

Suivant le degré de précision souhaitée, la hiérarchie peut avoir une profondeur arbitraire. Par exemple, notre blog de voyage classe les articles de la façon suivante :

  • Destinations
    • Europe
      • France
      • Espagne
    • Amérique du nord
      • États-Unis
    • Asie
      • Chine
      • Laos
      • Thaïlande
  • Pratique
    • Les visas
    • Quel matériel choisir

S’il est possible d’assigner plusieurs catégories à un article, cela présente peu d’intérêt en pratique et peut même prêter à confusion.

Gestion des catégories

Un écran de gestion des catégories est accessible via la barre latérale en suivant Articles / Catégories. Cependant, le plus simple est de travailler directement depuis l’écran d’édition de l’article.

En sélectionnant Document dans la barre de droite, on voit que l’article a initialement la catégorie Non classé.

Réglages d'un document sous l'éditeur de blocs WordPress montrant la catégorie "non classée" sélectionnée
Catégorie par défaut des articles WordPress (non classé)

En cliquant sur Ajouter une nouvelle catégorie, on peut saisir son nom et sélectionner éventuellement une catégorie parente pour créer une hiérarchie. Si je crée par exemple la catégorie Recette, puis la catégorie Salé ayant Recettes comme parent, j’obtiens la hiérarchie suivante :

Réglages d'un document sous l'éditeur de blocs WordPress montrant plusieurs catégories sélectionnées et la fonctionnalité de création d'une catégorie
Création d’une hiérarchie (arborescence) de catégories

Pour affecter cette nouvelle catégorie à votre article, il faut alors décocher les catégories Recette et Non classé pour ne laisser plus que Salé coché.

Bien sûr, si vous désirez par la suite affecter une catégorie existante à d’autres articles, il ne sera pas nécessaire de repasser par l’étape de création : il suffira de cocher directement la catégorie désirée.

Affichage des catégories

La façon dont les catégories sont affichées dans votre blog dépend du thème utilisé. Elles sont souvent présentées en bas de l’article, à côté des étiquettes.

J’ai fait le choix d’afficher plutôt la catégorie sous forme de fil d’Ariane, juste sous le titre. Pour cela, j’utilise l’extension ayant le nom un peu barbare de Breadcrumb NavXT. Elle n’est cependant pas très facile à mettre en place; j’y reviendrai donc dans un article ultérieur.

Certains thèmes permettent aussi d’afficher une page spécifique de présentation de chaque catégorie. C’est cependant une fonctionnalité rarement utilisée. On envisage à terme de s’en servir sur notre blog pour présenter en détail chaque destination.

Une autre possibilité est d’assigner à chaque catégorie une image, par exemple via l’extension Taxonomy Images. Nous avons ainsi défini une image pour chaque continent et pays, ainsi qu’une courte description. Ces données sont ensuite utilisées pour générer automatiquement la page des destinations.

Les étiquettes WordPress

Tout comme les catégories, les étiquettes permettent permettent de regrouper les articles. Les deux différences principales entre ceux deux taxonomies sont les suivantes :

  • il n’y a pas de hiérarchie entre les étiquettes
  • Il est possible (et souhaitable) d’assigner plusieurs étiquettes à un même article

Les étiquettes permettent de grouper les articles suivant un thème donné.

Concrètement, pour un blog de cuisine, on peut avoir envie de les regrouper par mode de cuisson, par occasion, ou encore par type de cuisine. Ainsi, des étiquettes possibles seraient Tarte, Végétarien, Au four, Vite préparé, Sur le pouce, Dîner de fête

Pour un blog de voyage, on peut considérer la géographie de l’endroit, la durée du séjour, le type de visites… Ainsi, on utilise entre autres Montagne, Mer, Ville, Escapade, Week-end ou Architecture comme étiquettes.

Par rapport aux catégories, les étiquettes permettent une classification bien plus souple. Il faut cependant éviter d’en créer trop, ce qui deviendrait vite ingérable.

Mon conseil est de créer une nouvelle étiquette uniquement si elle regroupe un nombre minimum d’articles, par exemple cinq ou plus. En-dessous, cela a peu de sens de les regrouper.

Assigner une ou plusieurs étiquettes à un article

Comme pour les catégories, un écran dédié de gestion est disponible via Articles / Catégories. Mais là encore, il est bien plus confortable de les gérer directement en éditant un article.

Le bloc de gestion des étiquettes est situé directement en-dessous de celui des catégories. Pour créer une étiquette, tapez son nom dans l’espace en-dessous de Ajouter une étiquette et appuyez sur la touche Entrée. Il est possible d’en assigner plusieurs, ou d’en retirer en cliquant sur la croix située à coté de leur intitulé.

Plusieurs étiquettes sélectionnées dans l'éditeur de blocs de WordPress

Par la suite, pour réutiliser une catégorie existante, il suffit de commencer à taper son nom dans le même espace; WordPress affichera alors les catégories commençant par ces caractères.

Affichage des étiquettes

Tout comme pour l’affichage des catégories, c’est le thème utilisé qui décidera de l’emplacement des étiquettes; celui-ci peut être paramétrable.

Utilisation des catégories et étiquettes pour affichage des articles liés

Sur Endless Travel, nous affichons en bas de chaque article une mosaïque présentant un ou plusieurs articles en lien avec l’article courant.

Exemple d’articles liés

Cette fonctionnalité est fournie par l’extension YARPP (Yet Another Related Posts Plugin). Si d’autres extensions similaires existent, je trouve que YARPP est de loin celle qui fournit les résultats les plus pertinents.

En effet, la plupart des autres extensions du même type se contentent de sélectionner les articles dans la même catégorie. Dans le cas de YARPP, il est possible de choisir d’utiliser :

  • Le titre de l’article
  • Son contenu
  • Les catégories
  • Les étiquettes

Cette extension fournit même la possibilité de choisir d’affecter à certains critères un poids plus ou moins important. Après un peu d’expérimentation, j’ai choisi de sur-pondérer les catégories, et de nécessiter au moins une étiquette en commun.

Réglages de l'extension YARPP

A noter que pendant assez longtemps, YARPP a eu assez mauvaise presse; en effet, cette extension a été accusée de ralentir les sites qui l’utilisent. Je n’ai cependant constaté aucun problème de ce type.

Les mises à jour de WordPress et de ses composants

Les mises à jour de WordPress, pourquoi faire ?

Comme tout programme informatique, WordPress et ses éléments ont des bugs. Même si la majorité d’entre eux passent inaperçus, il se peut que certains d’entre eux posent des problèmes de sécurité. Par exemple, en février 2020, une faille de sécurité dans une extension fournie avec un thème populaire a mis en danger les 200 000 sites l’utilisant !

Il est donc vital de mettre à jour WordPress et ses composants régulièrement (et comme on le verra plus tard, d’effectuer une sauvegarde régulière de son blog).

De plus, les évolutions permettent aussi de fournir de nouvelles fonctionnalités.

Vérifier la disponibilité des mises à jour de WordPress

La présence de mise à jour est signalée de deux façons différentes.

Tout d’abord, dans la barre d’administration, par un petit cercle formé par deux flèches . Le chiffre indiqué à côté est le nombre de mises à jour disponibles : par exemple, ici, une mise à jour est disponible.

Affichage des mises à jour WordPress dans la barre d'outils
Affichage des mises à jour WordPress dans la barre d’outils

De façon plus visible, la barre latérale indiquera en rouge le nombre total de mises à jour disponibles, ainsi que le nombre de mises à jour d’extensions. On voit que parmi les cinq mises à jour disponibles, une concerne les extensions.

Barre latérale de WordPress montrant des mises à jour disponibles
Mises à jour WordPress dans la barre latérale

Il suffit de cliquer sur l’icône ou sur le menu Tableau de bord / Mises à jour de la barre latérale pour faire apparaître l’écran des mises à jour.

Celui-ci est subdivisé en plusieurs sections, correspondant chacune à un type d’élément : WordPress lui-même, les extensions, les thèmes, et les traductions.

Mise à jour du coeur de WordPress

WordPress est lui même mis à jour régulièrement. Si la plupart de ces mises à jour ne proposent que de légers changements, les versions majeures apportent de grosses modifications à son fonctionnement.

Par exemple, dans la version 5.0 sortie fin 2018, le nouvel éditeur de blocs (anciennement nommé Gutenberg) a révolutionné la façon d’écrire le contenu des articles.

Si une mise à jour est disponible, une notification telle que celle-ci devrait s’afficher :

Mises à jour de WordPress
Mises à jour de WordPress

Vous remarquerez que le message de WordPress incite à faire une sauvegarde du site avant d’appliquer la mise à jour. Nous verrons par la suite comment installer une extension qui s’en chargera automatiquement.

La mise à jour se fait via le bouton Mettre à jour maintenant (attention à bien sélectionner celui de la version française, reconnaissable à la présence de fr dans le lien, et non pas celle qui finit en en_US.

Notez que pendant la durée de la mise à jour, le blog ne sera plus accessible aux visiteurs : WordPress affichera à la place un message indiquant que le site est en maintenance. C’est le cas pour tout type de mise à jour; dans le cas d’un site à fort trafic, il est conseillé d’effectuer les mises à jour à une plage horaire où il reçoit peu de visites.

Mise à jour des extensions

WordPress liste ensuite les extensions qu’on peut mettre à jour. Nous verrons bientôt comment gérer les extensions; pour l’instant, contentons-nous de mettre à jour celles qui le nécessitent.

Dans mon cas, l’extension Akismet nécessite une mise à jour.

Mise à jour disponible pour l'extension Akismet
Mise à jour disponible pour l’extension Akismet

Il est possible d’avoir des détails sur les changements induits par la mise à jour en cliquant sur « Afficher les détails de la version ».

Pour effectuer la mise à jour, il suffit de cliquer sur la case à gauche de Tout sélectionner, puis sur le bouton Mettre à jour les extensions. Suivant le nombre de mises à jour, le processus peut prendre un certain temps. Quand il est terminé, le message « Toutes les mises à jour sont terminées » s’affiche.

Résultat de la mise à jour des extensions

Il est également possible d’effectuer la mise à jour directement depuis l’écran des extensions. Pour cela, aller dans le menu Extensions / Extensions installées. Une notification telle que celle ci-dessous apparaît pour les extensions qui ne sont pas à jour :

Disponibilité d'une mise à jour de Akismet sur l'écran des extensions
Disponibilité d’une mise à jour de Akismet sur l’écran des extensions

Il suffit de cliquer alors sur le lien mettre à jour maintenant apparaissant dans le texte mis en valeur.

Mise à jour des thèmes

Elle se fait de la même façon que pour les extensions, sur l’écran des mises à jour. Nous verrons par la suite en détail comment gérer les thèmes.

Liste de thèmes nécessitant une mise à jour
Liste de thèmes nécessitant une mise à jour

Mise à jour des traductions

Si des traductions mises à jour sont disponibles, le bouton Mettre à jour les traductions permet d’effectuer cette opération en un clic.

Une fois les diverses mises à jour appliquées, l’écran Tableau de bord / Mises à jour devrait ressembler à ceci :

WordPress totalement à jour
WordPress totalement à jour

Mises à jour automatiques de WordPress

Certaines mises à jour de WordPress sont appliquées automatiquement; il s’agit de celles contenant principalement des corrections de bug. Lors de la sortie des versions mineures, vous recevrez une notification par e-mail.

Les versions mineures ne sont sensée comporter que des corrections et évolutions à la marge; il y a donc peu de risque que cette mise à jour automatique casse quelque chose sur votre blog. Par contre, cela permet de réduire la vulnérabilité de votre site si vous ne vous connectez pas régulièrement à l’interface d’administration de WordPress.

De la même façon, certaines extensions permettent de choisir entre plusieurs modes de mise à jour :

  • manuelle; il faudra alors utiliser la procédure ci-dessous
  • totalement automatique : les mises à jour sont systématiquement installées, sans intervention de l’utilisateur
  • automatique pour les mises à jour de sécurité (conseillé)

La prochaine mise à jour majeure de WordPress devrait appliquer automatiquement certaines mises à jour des extensions et thèmes. Je prévois donc de modifier cet article en conséquence à sa sortie !

Mise à jour automatique chez SiteGround

Dans l’onglet « Websites » de votre interface d’administration SiteGround, cliquez sur « WordPress Kit » de votre site web, et choisissez « AutoUpdate » dans l’écran qui apparaît.

Le kit "WordPress" de SiteGround
Le kit « WordPress » de SiteGround

Sur l’écran suivant, il sera possible de paramétrer le délai de mise à jour suivant le type de version (majeure / mineure), et d’activer / désactiver la mise à jour des extensions.

Statut de la mise à jour automatique chez SiteGround
Statut de la mise à jour automatique chez SiteGround

Concrètement, les mises à jour majeures (« Major releases ») introduisent parfois des gros changements. Il est donc bon d’avoir un peu de temps pour s’y préparer. Du coup, j’ai paramétré la durée maximale possible (72 heures).

Par contre, les mises à jour mineures (« Minor releases ») sont souvent sans conséquence en termes de fonctionnalités. J’ai donc choisi de les appliquer immédiatement.

Surtout, j’ai validé l’option de mise à jour des extensions, qui sont le maillon faible de WordPress du point de vue de la sécurité !

A noter que si cette fonctionnalité est un excellent choix en terme de sécurité, elle a aussi un défaut gênant. En effet, lors des mises à jour, il n’est pas rare que des conflits apparaissent entre deux extensions. Les mises à jour effectuées par SiteGround étant transparentes, il peut être difficile de comprendre la cause du dysfonctionnement d’une extension !

De même, il peut être bon d’avoir un peu de temps pour passer à une version majeure, à cause des changements engendrés (et de la probabilité de bugs !). J’avais l’habitude d’attendre que quelques versions passent avant de procéder à une telle mise à jour; ce n’est pas possible chez SiteGround. Un peu plus de flexibilité ne ferait pas de mal !