PG Concept : Refonte complète du site web

Le contexte

Le besoin d’un nouveau site pour PG Concept se faisait de plus en plus sentir, l’ancien site n’ayant plus évolué depuis un certain temps, en dehors bien sûr de la rédaction de quelques articles, les mises à jour régulières des plugins et thèmes et quelques actions correctives. Créé en 2021 suite à mon acquisition de la licence lifetime de Divi, il se concentrait alors sur mon offre phare : la création de sites web. Mais depuis, j’ai élargi mon champ d’action :

• Depuis novembre 2021 j’anime des formations au langage SQL en tant que sous-traitant pour des organismes de formation.
• En décembre 2023, j’ai obtenu ma certification RS5938 : Améliorer la visibilité d’un site internet de TPE/PME grâce au référencement naturel (SEO).

Il était donc important pour moi de prendre en compte ces nouvelles cordes à mon arc et, tant qu’à faire, de faire une refonte totale de mon site, le tout en tirant parti de ces nouvelles compétences !

Le projet

Les objectifs

Entrons davantage dans le détail, voici les objectifs que je me suis fixés :

• Redonner un coup de jeune au site pour coller aux tendances actuelles, notamment en revoyant de A à Z son web design, et le rendre plus attrayant, plus lisible et plus accessible.
• Renforcer mon image professionnelle, notamment grâce à l’utilisation de photos réalisées par un·e vrai·e photographe.
• Optimiser la structure qui, au fil du temps, s’était complexifiée.
• Optimiser le référencement naturel.
• Améliorer la vitesse de chargement des pages (pagespeed).
• Mettre en place un portfolio simple et efficace, ne nécessitant de modifier les pages où il apparaît pour prendre un compte une nouvelle réalisation.
• Simplifier le blog, qui comptait bien trop de catégories différentes.
• Mettre en place un système de témoignages plus élégant et ne nécessitant pas de modifier les pages où ils apparaissent lors d’un ajout.
• Ne surtout pas perdre le bénéfice du référencement initial qui, sans être optimal, m’amenait quand même un nombre non négligeable de visiteurs.
• Conserver le même niveau de sécurité et la même conformité RGPD.

Les actions

Design général

Je suis littéralement reparti d’une page blanche. Je craignais en effet que, sinon, le nouveau site ressemble trop à l’ancien ! J’ai certes conservé les mêmes typographies, en revanche j’ai totalement revu la palette de couleurs et l’agencement des pages, des menus et du pied de page.

J’ai également fait appel à une amie photographe professionnelle pour me tirer le portrait : Angélique Bloquet Photographe, que je recommande vivement ! Je tiens toutefois à préciser que, avec son autorisation, j’ai retravaillé les photos. J’ai notamment utilisé un fond transparent pour une intégration parfaite à la section “hero” de la page d’accueil.

Plutôt que d’utiliser des images de stock, j’ai opté pour la génération par IA. Cela me permet notamment d’illustrer mes articles par des images libres de droits, réellement cohérentes avec mon identité visuelle et qu’on ne trouvera absolument nulle part ailleurs.

Au fil du temps, j’ai acquis de nouveaux outils de création, m’ayant permis entre autres d’intégrer des “flipboxes”, des “lotties”, etc., et ainsi de dynamiser le nouveau site.

Globalement, je me suis efforcé de créer un nouveau site clair, convivial, agréable.

Structure

Là aussi, j’ai totalement révisé ma copie ! La “méthode des silos” vue lors de ma formation en SEO m’a permis de repenser le plan de site, de le rendre bien plus ergonomique et intuitif.

J’ai d’autre part fait de gros efforts sur le maillage interne afin de permettre aux moteurs de recherche de parcourir plus facilement le nouveau site et donc d’améliorer le référencement des pages et articles réellement importants.

Portfolio

Mon approche de ce portfolio était, je dois le reconnaître, un peu bancale jusque là. Mes réalisations apparaissaient uniquement sur la page d’accueil de l’ancien site ainsi qu’à l’occasion dans des articles de blog. Il était donc fréquent que mes prospects me demandent des exemples de sites conçus par mes soins lors de nos premiers échanges.

J’ai donc totalement repensé mon portfolio, en créant un nouveau type de contenu ainsi que des champs personnalisés (un lien vers le site réalisé, la liste des technologies utilisées et la complexité du projet), affichés dans une barre latérale à droite de chaque réalisation. Ces réalisations sont également classées par catégories pour faciliter la navigation et la recherche.

Blog

Lorsque j’ai initialement créé le blog, je n’avais pas d’idée précise du type d’articles que je voulais publier, aussi celui-ci s’est-il complexifié au fil de mes élans rédactionnels. C’était devenu un véritable fourre-tout à la cohérence douteuse !

J’ai donc décidé d’en revenir à une structure simple et efficace, avec pour le moment 2 catégories seulement : Actualité et Technique. Une troisième s’y adjoindra peut-être à l’avenir, mais je ne souhaite pas créer de sous-catégories, qui rendraient la navigation plus laborieuse. D’autre part, le blog comportait une catégorie Réalisations, dans laquelle je parlais de mes divers projets, en cours ou terminés. Mais j’ai décidé de la supprimer au profit du portfolio.

J’ai supprimé un certain nombres de vieux articles, qui n’étaient plus pertinents. D’autres ont été conservés en l’état mais avec quelques optimisations dans leur contenu. Enfin, j’ai d’ores et déjà rédigé de nouveaux articles, notamment techniques, quant à eux totalement optimisés.

SEO

Le SEO de l’ancien site était loin d’être catastrophique, mais j’avais encore quelques lacunes avant ma certification SEO. J’ai donc profité de cette occasion de nouveau site pour rebattre les cartes et appliquer une méthodologie sans faille.

• Analyse des mots-clés pertinents : Sans doute l’étape la plus longue et la plus complexe. Il s’agit d’établir une liste exhaustive de mots-clés en cohérence avec le contenu du nouveau site et de déterminer les quels sont les plus pertinents et doivent donc être travaillés en priorité.
• Optimisation du contenu : Le contenu d’une page doit être en cohérence avec les mots-clés ciblés. Les champs lexicaux employés sont donc cruciaux ! J’ai donc rédigé l’ensemble des pages de façon à ce qu’elles soient :
  • Informatives et agréables à lire pour les visiteurs
  • Facilement compréhensibles par les moteurs de recherche
• Optimisation de la structure : Comme je l’ai dit plus haut, une structure optimale est essentielle pour rendre la navigation intuitive aussi bien pour les visiteurs que pour les moteurs de recherche. J’ai donc apporté un soin tout particulier au maillage interne ainsi qu’à l’organisation des menus.
• Optimisation des méta-données et des balises : Méta-descriptions, titres SEO, mais aussi balises diverses (Hn, Strong, listes…) sont également des éléments très importants pour garantir une compréhension optimale du contenu par les moteurs de recherches et donc favoriser le référencement. J’ai appliqué autant que possible les bonnes pratiques en la matière.
• Mise en place de redirections : La structure du site ayant grandement évolué, il était essentiel que les visiteurs ne tombent pas sur une page d’erreur 404 en cliquant sur un résultat de recherche Google ! Pour éviter cela, j’ai mis en place des redirections 301 pour toutes les pages dont l’URL a changé.

Sécurité

Sur ce point, l’ancien site n’avait pas grand chose à se reprocher. En plus de 3 ans d’existence, il a fait l’objet de nombreuses tentatives d’attaques (comme tout site web), mais aucune de ces tentatives n’a abouti.

Si vous souhaitez en savoir plus, je vous invite à consulter mon article Comment sécuriser votre site WordPress efficacement.

Conformité RGPD

Là encore, l’ancien site respectait toutes les exigences légales. Pour ce nouveau site, j’ai toutefois opté pour l’ajout d’une vraie page Conditions générales de vente plutôt que pour un lien vers la version PDF.

Performances

La vitesse d’affichage des pages de l’ancien site était tout à fait satisfaisante. Toutefois, j’ai pu dégager des axes d’amélioration pour ce nouveau site :

• Limitation du nombre de plugins : L’excès d’extensions peut alourdir un site et donc nuire à ses performances. Je me suis restreint aux plugins strictement nécessaires.
• Optimisation des images : Un bon dimensionnement des images est important et tout particulièrement pour les appareils mobiles. Inutile en effet d’utiliser une image ayant une largeur de 1920px si elle doit être affichée sur un terminal dont l’écran ne fait que 400px de large ! D’autre part, il faut trouver le meilleur compromis possible entre compression et qualité d’image. Enfin, l’utilisation d’images de nouvelle génération (WebP, AVIF) est fortement recommandée.
• Optimisation de la stratégie de cache : Le nouveau site utilise la technologie LiteSpeed Cache. Cela comprend une mise en cache des ressources extrêmement efficace, le report de chargement des contenus non critiques (entre autres, situés sous la ligne de flottaison), la minification/combinaison du code JavaScript et du CSS, etc.

Les suites du projet

Ce nouveau site terminé, je peux dire sans fausse modestie que je suis très fier du travail accompli ! Reste à déterminer s’il plaira autant aux visiteurs qu’à moi-même, mais j’ai d’ores et déjà reçu d’excellents retours. Je remercie par ailleurs chaleureusement les confrères et consœurs ayant eu la gentillesse de me donner un avis professionnel et objectif et de me faire des suggestions pertinentes dont j’ai évidemment tenu compte.

Le suivi SEO va être déterminant dans les prochaines semaines et les prochains mois. Mais d’ores et déjà, les effets commencent à se faire sentir : le trafic général est en hausse, y compris le trafic organique (issu des moteurs de recherche).

Côté performances, j’obtiens de très jolis scores sur PageSpeed Insights ainsi que GT Metrix, sensiblement supérieurs à ceux de l’ancien site notamment sur mobile.