English version available

Voici quelques outils en ligne pour vous assurer que votre site web soit performant, ne contienne pas d’erreurs et soit optimisé pour le référencement. Ces trois caractéristiques sont très importantes car elles forment un cercle vertueux en se renforcant mutuellement. Aucune ne doit donc être négligée.

Performance

Après avoir analysé votre site, GTMetrix vous donnera de précieux conseils pour améliorer sa performance.

• Minimiser les ressources à charger pour diminuer le nombre de requêtes HTTP (utilisation de sprites, fusion des fichiers)
• Réduire la taille de vos ressources. Il existe de très bons compresseurs en ligne pour les images (TinyPNG), les fichiers CSS et Javascript.
• Spécifier les dimensions des images, le navigateur n’a plus besoin de faire ce calcul
• Utiliser le cache du navigateur

Référencement et SEO

Vous pouvez vérifier votre référencement avec SEO SiteCheckup. Cet outil vous donnera de précieuses informations afin d’améliorer la visibilité de votre site sur Internet.

• Utilisation des balises et attributs HTML standards (title, description, h1, h2, alt…)
• Présence du plan du site (fichier sitemap)
• Détection des liens cassés
• Détection de l’activité sociale liée à votre site, votre présence sur les réseaux sociaux

Validation technique

Vous devez aussi vous assurer que votre site est valide d’un point de vue technique. Je vous conseille les outils officiels fournis par le World Wide Web Consortium (W3C). Chaque outil est spécifique pour un usage particulier. Par exemple, vous trouverez un outil pour valider:

• Les fichiers HTML
• Les fichiers CSS
• Les liens
• Votre flux RSS

Il n’est pas nécessaire de valider chacune de vos pages, une par une. La validation de la page d’accueil est en général suffisante, les autres pages en découlant.

Email

Votre application envoie des emails? Avec Mail tester, vous pouvez tester la pertinence et le format de vos emails. Cet outil vous permettra de savoir si votre courrier est considéré comme indésirable par les clients de messagerie et vous donnera également des astuces pour éviter une telle situation.

• Le contenu doit s’adapter à la taille de l’écran (design responsive)
• Un format texte alternatif doit être présent pour les clients email qui ne peuvent lire du HTML
• La configuration de l’authentification de vos emails doit être valide (SPF, DKIM)

Pour vous donner une idée des résultats de votre site par rapport aux autres, la plupart des outils énoncés dans l’article vous attribueront une note, à vous de jouer pour augmenter votre score!

 English version available

Un blogueur WordPress a une fâcheuse tendance à installer de nombreux plugins sur son blog pour ajouter des fonctionnalités et de l’interactivité. Lisez l’article Extensions WordPress de CarmaBlog pour vous en convaincre. Au fil du temps, le blog devient de plus en plus lent et long à charger. Je suis arrivé à un point où je pense qu’il fallait faire quelque chose…

Le site GTmetrix permet de calculer la performance de n’importe quel site en lui assignant une note globale et surtout il fournit un rapport détaillé pour vous aider à optimiser et améliorer votre note. Le but est d’obtenir un score honorable, je dirais vers les 75-85% ce qui correspond à des notes entre B et C. Pour CarmaBlog, le résultat était peu glorieux avec un résultat proche des 60% et donc du D, le temps de chargement de la page d’accueil (soit 3 articles) autour des 6-7 secondes était franchement tout juste passable.

Un plugin de gestion de cache: W3 Total Cache

En cette fin d’année, j’ai donc décidé de m’attaquer directement au problème en installant un plugin WordPress pour ajouter la gestion de cache. Pour ceux qui ne connaissent pas, un cache est un endroit (généralement de l’espace disque directement sur le serveur) où l’on stocke les pages déjà pré-calculées. Le serveur affiche directement cette page plutôt que de recalculer l’original ce qui améliore sensiblement les performances. Si vous modifiez la page, il faut alors penser à purger le cache pour que les modifications soient visibles. Pour être honnête, j’étais un peu récalcitrant au début de peur de casser mon site, mais son faible résultat sous GTmetrix m’a un peu poussé.

Mon choix s’est finalement porté sur le plugin W3 Total Cache très populaire. Mon choix est un peu arbitraire, en fait je me suis basé seulement sur le nombre d’utilisateurs et les avis favorables. Pour ce genre de plugin, la configuration est très importante et c’est sans doute la partie la plus délicate. Il faut y aller pas à pas et prendre son mal en patience… Le meilleur moyen de tout casser et d’activer toutes les optimisations en même temps et ensuite de voir le résultat (mais si vous avez l’amour du risque, c’est aussi une bonne option…).

Finalement, j’ai pu activer la majorité des optimisations. Je me suis tout de même rendu compte que la minimisation des fichiers JS faisait littéralement planter le navigateur sur certains articles (je l’ai donc naturellement désactivée). Aussi, pour une raison inconnue, le cache des pages en utilisant l’option « Disk:enhanced » engendrait des problèmes d’encoding (ah! ces fameux caractères français!) alors que « Disk:Basics » non, j’ai donc opté pour la seconde option, même si elle est moins efficace.

En fouillant la configuration, je me suis rendu compte que W3 Total Cache supportait lui-même des extensions, notamment une extension pour Feedburner et une extension pour WordPress SEO. Comme je les utilise tous les deux, cela tombait bien.

Des optimisations manuelles sur les images

Une fois la gestion de cache mise en place et correctement configurée, j’ai pu noter une progression des performances significatives, mais pas transcendantes. Le site GTmetrix donne aussi de nombreux indicateurs pour améliorer les performances, voici les deux actions manuelles que j’ai réalisées:

• Optimisation des images. GTmetrix vous fournit les images optimisées que vous pouvez télécharger et utiliser pour remplacer vos anciennes images, vous gagnez facilement 50% de taille sans perte de qualité… Bluffant! Imaginez le gain apporté sur quelques images de 200-300 ko. Aussi, je vous conseille de bookmarker le site TinyPNG, une aide précieuse pour faire maigrir vos prochaines images. Cette optimisation est particulièrement importante pour les images communes, celles situées dans le header, footer ou autres sidebars… et qui seront forcément chargées lorsque l’on navigue sur votre site.
• Ajout des dimensions sur les images. Les attributs width et height sur les balises img. On n’y pense pas forcément, mais cela évite au navigateur de faire le calcul à votre place et donc cela augmente les performances. De plus, la place occupée par les images est déjà définie ce qui évite de faire « bouger » la page ou la scrollbar (si vous n’avez pas compris, voyez cela comme un point positif).

Ce sont les deux grandes optimisations que j’ai dû faire manuellement, W3 Total Cache gère le reste lui-même de manière automatique.

Un CDN gratuit: CloudFlare

Seconde étape, je vois la possibilité de coupler CloudFlare à W3 Total Cache grâce à une extension interne. Je vais voir du côté de CloudFlare. En fait, j’en avais déjà entendu parler, mais sans plus.

Bonne nouvelle, ils ont une offre gratuite et il n’y a pas de pub ni de limitations particulières (pour un blog perso comme le mien en tout cas). Mais en fait c’est quoi? CloudFlare agit comme une interface entre le visiteur et votre hébergeur (1and1 dans mon cas) et fait office de CDN (Content Delivery Network). C’est un peu du chinois même pour moi, mais ça a l’air d’influer grandement sur les perfs et GTMetrix me conseillait l’utilisation d’un CDN alors… Par contre, je vois qu’il y a de la reconfiguration DNS à faire, brrr ça fait peur. Je ne suis pas un pro en réseau, mais le DNS (Domain Name System) est un peu comme un annuaire téléphonique, à partir du domaine, il définit l’adresse IP du serveur à contacter. Changer de DNS, c’est un peu comme changer d’adresse et si le déménagement se passe mal, vous n’êtes plus accessible. Après réflexion, je me lance, quitte à tout casser, autant le faire pendant la période de fête où le trafic sur mon site sera sûrement plus faible.

Je crée donc mon compte CloudFlare, j’ajoute le site CarmaBlog, je laisse la configuration par défaut pour la plupart des options. Je choisis une sécurité assez basse (de toute façon, ça pourra difficilement être pire qu’avant), je choisis CDN seulement pour le profil de performance, car W3 Total Cache s’occupe des optimisations, je n’ai pas envie de tester un autre profil et voir arriver des conflits (restons raisonnable). L’assistant de configuration est très bien fait et s’adresse à des novices. Puis, arrive cette fameuse configuration DNS, CloudFlare me demande de mettre à jour mes paramètres DNS côté 1and1… Oups, les choses sérieuses commencent!

C’est la phase délicate, car c’est là où on peut rendre son site parfaitement indisponible. Je me connecte fébrilement à mon compte client 1and1, sélectionne la gestion des domaines, tout un tas de messages du style « Etes-vous conscient de ce que vous faites? », je ne suis pas persuadé moi-même, mais je mets « oui » quand même et je renseigne les champs pour pointer vers les deux nouveaux DNS de CloudFlare. Le changement DNS peut prendre entre 1h et 48h, c’est de la configuration réseau, c’est au-delà de mes compétences, je confirme donc mon choix. Dans la foulée, j’active l’extension interne CloudFlare de W3 Total Cache et je renseigne les champs pour faire le lien avec mon compte… Il est déjà tard, je me couche.

Le lendemain matin, premier réflexe, je vais sur le blog. Ouf, il est toujours disponible. Je note déjà une certaine vitesse (peut-être psychologique, nous verrons dans la conclusion…). Je me connecte sur mon compte CloudFlare… Victoire! CarmaBlog est bien configuré, la reconfiguration DNS s’est bien déroulée, maintenant tout le trafic passe par CloudFlare. CloudFlare fournit un tableau de bord en indiquant les visites, les menaces (oui!), la bande passante économisée, etc. Je me pose alors la question si le fait de passer par un fournisseur tiers est un choix judicieux? Que se passera-t-il si le DNS CloudFlare tombe? Mais après réflexion, un serveur DNS tombe rarement et s’il tombe, il y a toujours le 2ème de secours pour prendre la relève. Et le problème était déjà le même avec 1and1, donc il ne devrait pas y avoir de soucis! Dans le pire des cas, je peux toujours revenir à la configuration précédente et repasser par le DNS de 1and1 en moins de 24h.

Conclusion

Je me balade un peu sur le blog pour être sûr que tout fonctionne, j’active la navigation privée pour mettre toutes les chances de côté et être certain que le navigateur n’utilise pas des données cachées. Tout fonctionne, c’est rapide et fluide, vraiment une bonne nouvelle. Je soumets à nouveau le site sur GTmetrix, et là… Je gagne nettement en performance. Je passe la barre des 80% et je me vois attribuer la note B. La note A est accessible à partir de 90%, mais c’est un score difficilement atteignable si votre blog a pas mal de plugins activés et utilise un thème assez complexe.

Après toutes ces optimisations, je suis passé d’une page à charger de 1.2 mo à 800 ko (cela dépend bien évidemment des images des articles, mais j’ai fait la comparaison sur la même page pour me donner une bonne idée), cela fait un gain de 33%. Le nombre de requêtes quant à lui est passé de plus de 100 à environ 65 (grâce à la combinaison des fichiers CSS et JS entre autres). J’avais déjà noté un temps de chargement plus rapide avec W3 Total Cache, mais avec CloudFlare en plus, je suis passé en dessous de la barre des 3 secondes contre 6-7 secondes auparavant (soit un peu plus de 50% de gain).

Le combo W3 Total Cache + CloudFlare marche vraiment du tonnerre! Cet article est davantage un retour d’expérience qu’un tutoriel, mais vous trouverez toutes les ressources nécessaires sur internet si vous décidez vous aussi de vous lancer.

Non seulement mon hébergeur doit être soulagé, car une bonne partie de la bande passante est déportée vers les serveurs de CloudFlare (architecture bien plus puissante), mais mes visiteurs aussi, car la page s’affiche bien plus rapidement. Aujourd’hui, la seule question que je me pose c’est: pourquoi ne l’ai-je pas fait plus tôt?