Comment reprendre un site WordPress pas à pas – étude de cas

Il est important de remettre à niveau régulièrement son site Web, mais il faut bien se préparer ! Ce projet est un peu un projet “à tiroirs”, avec de nouvelles tâches qui s’accumulent rapidement. Cette étude de cas est une mission que j’ai réalisée, qui avait pour objet de reprendre un site WordPress de cabinet de conseil.

Un site WordPress qui nécessitait une refonte sans attente

Le client, un cabinet de conseil d’environ 30 consultants, avait fait réaliser son site Web WordPress pour une agence web délocalisée en Inde, offrant des coûts avantageux.

Le résultat s’est rapidement avéré décevant. Le site était difficile à utiliser avec un design obsolète et de nombreux bugs. Après plusieurs mois à essayer de corriger le site sans succès, la décision de trouver un autre prestataire a été prise.

Les grandes étapes pour la remise à niveau ont été :

  1. Fixer les objectifs de la remise à niveau
  2. Réaliser un audit technique complet
  3. Passer en revue l’UX du site
  4. Sélectionner la marche à suivre
  5. Implémenter les évolutions et corrections

Et enfin, admirer le résultat !

1. Fixer les objectifs du projet

En premier lieu, on cadre le projet ! J’ai organisé un premier atelier avec le directeur, qui prenait directement en main le projet du site web. Après discussion, il est vite venu apparent que le site avait pour but de :

  • De moderniser l’image du cabinet en ligne, qui n’avait pas changé de site depuis 8 ans
  • D’attirer davantage de prospects, le directeur souhaitant mettre en place une stratégie ambitieuse de content marketing.

Le site actuel avec ses bugs et ses lourdeurs d’utilisation ne permettent pas de mettre en place cette stratégie.

En gardant ces deux objectifs en tête, j’ai commencé le projet.

2. Réaliser un audit complet technique du site à reprendre

En premier lieu, il était important de faire un état des lieux. On ne ve pas se mentir, ce n’était pas glorieux ! La page d’accueil elle-même n’était pas fonctionnelle : liens morts, images de taille démesurée, bugs d’affichages, messages d’alerte à cause d’erreurs de code… et tout ça en production, à la vue du public !

Le site était à reprendre en profondeur pour qu’il puisse atteindre ses objectifs.

2.1 Des outils automatiques pour une première revue rapide

Une première passe a été faite avec des outils gratuits permettant de mettre en avant une série de problèmes.

Outil gratuit principalement concentré sur le SEO, il relève les problèmes techniques qui y sont liés. Neil Patel, le CEO,  offre régulèrement d’excellents conseils en SEO et Ubersuggest est régulièrement amélioré.

Ce contrôle est au niveau du domaine et permet de mettre en avant quelques erreurs récurrentes à travers le site.

Résultat : pas mal de petits problèmes de structure, les templates sont à revoir.

Cette extension Google Chrome passe un scan en profondeur d’une page. Les contrôles sont nombreux et permettent de lever un certain nombre de problèmes sur les performances de la page. A noter que les contrôles diffèrent pour la version “mobile” et “moniteur”.

Certains des contrôles sont très – voire trop – exigeants, il est vain d’essayer de tout corriger.

Attention, ce contrôle se fait par page, donc il ne faut pas se limiter à seulement évaluer la homepage.

Des insuffisances sur tous les plans qui impactent aussi bien le SEO que l'expérience utilisateur.
Des insuffisances sur tous les plans qui impactent aussi bien le SEO que l’expérience utilisateur.

Résultat : là, c’est plus problématique. Performance médiocre, plusieurs problèmes d’accessibilité. De nombreux liens et images non nommées. Enfin, le SEO peine avec un manque de mots clefs.

Un dernier pour la route, cet outil permet d’évaluer la performance du site d’une façon plus concrète, en évaluant en particulier le temps de chargement jusqu’à la première version “lisible” du site. Ce contrôle se fait uniquement à la page également.

Pingdom Tools est une solution similaire avec des résultats utiles pour approfondir davantage.

Webpagetest met en lumière les problèmes de vitesse liés au caching, problèmes de compression de fichier et de lenteur lié au serveur.
Webpagetest met en lumière les problèmes de vitesse liés au caching, problèmes de compression de fichier et de lenteur lié au serveur.

Résultat : on voit rapidement un problème de compression et de taille d’images à régler.

2.2 Passer en revue les plugins WordPress

Comme le site est un WordPress, pas de surprise, on y retrouve de nombreux plugins. Dans le cas de ce projet, 17, ce qui est légèrement au-dessus de la moyenne.

Une première revue permet de voir si certains plugins ne sont pas en double.

Dans notre cas, le client utilisait YoastSEO ET Rank Math. Les deux plugins dédiés au SEO sont lourds, redondants et nuisent à la performance du site.

Le site n’avait également pas de plugin de compression, ni de cache, nuisant à la performance.

2.3 Vérifier les feuilles de style (CSS)

Ce contrôle est plus une lecture en diagonale, afin de voir si les styles ne sont pas redondants.

Je l’ai fait dans le cadre de ce projet vu que le fichier CSS pesait 300kb, ce qui est démesuré au regard de la simplicité du design.

Résultat : une avalanche de problèmes :

  • un design obsolète avec les mobiles pensés en second temps : les recommendations, notamment de Google pour le SEO privilègie les design “mobile first”
  • Des styles copiés collés pour chaque section, non réutilisés d’une page à l’autre,

Pas mal de ménage en perspective de ce côté-ci.

2.4 Vérifier le Javascript

Idem que pour le CSS, on passe en revue les fichiers Javascript.

De ce côté, un peu plus de chance, seulement du Javascript “vanilla”, peu complexe. Très peu optimisé néanmoins, avec du code abandonné en commentaires et des fonctions en doublon.

2.5 Vérifier les chargements via l’onglet Network

Dans le navigateur, aller dans la fenêtre “outils de développeur”. Puis, aller dans l’onglet “network”, effacer le cache et actualiser la page.

Cela permet de voir si des chargements sont fait en doublon.

On profite d’avoir cette fenêtre ouverte pour vérifier si la console n’affiche pas d’erreurs.

Le même fichier est chargé plusieurs fois, dû à des erreurs de code dans le header.
Le même fichier est chargé plusieurs fois, dû à des erreurs de code dans le header.

Résultat: les feuilles de styles étaient chargés en doublon, ainsi que les fichiers de Google Analytics, qui étaient présents dans plusieurs fichiers Javascript.

2.6 Vérifier les templates du site à reprendre

Là, on rentre davantage dans le code puisque je suis allé vérifier les différents templates utilisés par WordPress pour générer les pages.

Ce contrôle demande davantage d’expertise puisqu’il consiste à vériUier que le code est correct et suit les bonnes pratiques.

Résultat : le code était fait à la va vite, avec une absence de commentaires permettant de le comprendre. Plusieurs alertes de bug étaient dues à des erreurs de frappe dans le code.

Un travail très important était à engager sur ces templates, tout était à refaire.

2.7 Vérifier les bases de données

Ce contrôle peut se faire dans le cadre d’applications plus spécifiques. Dans notre cas, le site étant en WordPress, il n’y avait pas de bases de données spécifiques à analyser.

2.8 Une revue du contenu du site pour identifier les problèmes liés au code du reste

Le site étant relativement limité avec une centaine de pages, en 3 langues. Un revue manuelle des pages principales a été faite pour s’assurer si les problèmes étaient liés au code ou au contenu qui avait été inséré par les utilisateurs.

Résultat : les deux, mon capitaine !

3. Passer en revue de l’UX du site à reprendre

En plus des problèmes techniques, la revue doit aussi comprendre l’expérience utilisateur. Le but du site étant d’attirer des prospects, il faut s’assurer qu’il soit articulé dans ce but.

Dans notre cas, à nouveau; le site n’était pas satisfaisant : en plus de nombreux bugs graphiques, le site etait démultiplié en de nombreuses sous-rubriques, confus pour les utilisateurs.

Très peu d’incitation au contact avec seulent un formulaire caché dans le footer… non fonctionnel. Aucun contenu recommandé à travers le site, ni de “call to actions” pour inciter à ine lecture plus approfondie.

Un lourd travail de refonte des templates était à prévoir pour davantage inciter les visiteurs à entrer en contact avec le cabinet.

4. Sélectionner la marche à suivre pour reprendre le site

Une fois l’état des lieux faits, j’ai organisé un nouvel atelier pour présenter les résultats avec :

  • La liste des bugs à régler
  • La liste des défauts d’UX
  • La mise en avant des problématiques impactant le SEO
  • Et mes recommendations pour améliorer le sites : évolutions, corrections,

Le client souhaitant néanmoins garder la base du site plutôt que de recommencer de zéro, les recommendations se sont adaptées à cette contrainte.

A l’issue de cet atelier, les décisions suivantes ont été prises par le directeur :

  • La priorité des corrections,
  • Les évolutions retenues pour le site

5. Implémenter les évolutions

Il n’y avait plus qu’à ! Après avoir installé le site sur un environemment de dévelopemment, les travaux ont commencé.

Les problèmes de ce projet était lié à des mauvaises pratiques de code et des erreurs parsemés dans les templates. Les problèmes étant déjà listés et ciblés, il ne restait plus qu’à les résoudre un à un.

Une fois les templates et les styles corrigés, j’ai ajouté quelques plugins recommandés pour la performance de sites WordPress :

  • Autoptimize, réalisé par un développeur belge, qui fait gagner énormément sur les fichiers CSS, Javascript ainsi que les images; tout en limitant le nombre de requêtes. A utiliser sans l’option avec Pixel, qui n’est pas indispensable
  • Far Future Expiry Header, qui permet de forcer les expirations sur toutes les requêtes qui n’en ont pas. Très pratique puisque la configuration est au niveau d’Apache, rien ne lui échappe.
  • Imsanity : plugin limitant l’upload d’images trop lourdes. Il permet également de réduire toutes les images en ligne en un seul click.

Quels résultats à l’issue de la reprise ?

Après l’implémentations des évolutions et corrections, le site a connu un gain de performance marquée en termes de performance.

De bien meilleurs résultats sur tous les plans après la reprise du site.
De bien meilleurs résultats sur tous les plans après la reprise du site.
Le First Byte Time reste insatisfaisant en raison de l’hébergeur du site, que le client souhait conserver.
Une amélioration des visites du site la semaine suivant le mise en ligne des corrections.
+40% de visiteurs en touchant à peine au contenu !

Mais aussi en termes de rétention, le bounce rate ayant réduit de près de 10 points et le trafic ayant augmenté de 25%. Et ce, sans avoir changé le contenu d’une virgule!

Et maintenant, c’est à vous ?

Vous connaissez maintenant les grandes étapes afin de reprendre un site qui ne donne plus satisfaction. La clef est dans une revue approfondie avant de commencer à coder et empiler de nouveaux plugins.

Si vous avez besoin de conseil, n’hésitez pas à me contacter à contact@sapiowork.com ou à laisser un commentaire ci-dessous. Pour en savoir plus sur le contenu à mettre dans votre site, cliquez ici !

Laisser un commentaire

Fermer le menu