Étiquette : Images

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.

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 !