Optimisation SEO et performance d'un site React

Contexte

Ce site (al-si.com) est mon portfolio personnel. Il a été concu initialement comme un site vitrine simple avec React, un fichier CSS custom et quelques animations basiques. Le site était fonctionnel, mais n'avait jamais été optimisé pour le SEO ou la performance.

L'objectif de cette étude de cas est de documenter le processus complet d'optimisation, de l'audit initial aux résultats mesurables, en passant par chaque décision technique prise en cours de route.

Méthodologie

L'optimisation a suivi une démarche en cinq étapes, conçue pour être reproductible sur tout projet similaire.

1. Audit initial — Établir une baseline mesurable : rankings Google (via SerpAPI), audit technique automatisé (meta tags, JSON-LD, sitemap, OG image), et analyse du build (taille du bundle, modules).
2. Modernisation du stack — Mettre à jour les dépendances et l'architecture : migration CSS vers Tailwind v4, remplacement des librairies d'animation, refactoring des composants, HTML sémantique.
3. Optimisation SEO technique — Corriger chaque problème identifié à l'audit : JSON-LD, meta tags, sitemap, image OG. Puis relancer l'audit technique pour valider que tous les checks passent avant de déployer. Si des problèmes persistent, corriger et re-tester jusqu'à atteindre un score parfait.
4. Déploiement et indexation — Déployer en production, purger le cache CDN, soumettre le sitemap à Google Search Console et demander l'indexation de la page principale.
5. Mesure des résultats — Après un délai d'indexation de 2 à 3 semaines, relancer les mesures de rankings, capturer les scores Lighthouse et analyser les données Search Console (impressions, clics, couverture).

État initial

Avant toute modification, j'ai réalisé un audit complet du site pour établir une baseline mesurable.

Rankings Google

Résumé : 3 mots-clés sur 7 trouvés dans le top 100. Position #1 sur les requêtes de nom + métier, mais absent sur le nom seul et les termes géolocalisés. Les positions finales seront mesurées 2 à 3 semaines après déploiement.

Audit technique

Score : 6/8 vérifications passées.

Performance (build)

Problèmes identifiés

1. JSON-LD cassé : erreur de syntaxe empêchant Google de lire les données structurées
2. Image OG manquante : partage sur les réseaux sociaux sans image
3. Sitemap avec hash anchors : URLs non crawlables par les moteurs de recherche
4. CSS orphelin : styles pour des éléments qui n'existent plus
5. Pas de balise main : structure HTML non sémantique
6. react-transition-group : dépendance lourde (~15 KB) pour une seule animation

Travaux réalisés et résultats

Modernisation du stack

• Migration de CSS custom vers Tailwind CSS v4
• Remplacement de react-transition-group par Framer Motion
• Création de composants réutilisables (Button, SectionHeader, ScrollReveal)
• Séparation de la navigation du footer dans son propre composant
• Refactoring complet de la structure des composants

Redesign visuel

• Navigation fixe avec hide/show au scroll et backdrop blur
• Animations de scroll reveal sur toutes les sections
• Ajout de sections : Projets, Articles
• Photo personnelle dans le hero avec cadrage optimisé
• Dark theme raffiné avec système de couleurs cohérent

Optimisation SEO technique

• Correction du JSON-LD (syntaxe + enrichissement des données)
• Création de l'image OG (share-card.png)
• Nettoyage du sitemap (retrait des hash anchors, ajout de lastmod)
• Ajout de <main> pour la sémantique HTML
• Meta description enrichie avec mots-clés cibles
• Ajout de og:locale, meta robots, et URLs OG absolues
• Enrichissement du JSON-LD : adresse (QC/CA), LinkedIn, langues, compétences

Repositionnement du contenu

• Repositionnement du site vers applications web, SaaS et automatisation
• Réécriture de toutes les sections pour refléter le nouveau positionnement
• Ajout de l'expérience récente (plateforme SaaS construction) dans un bloc visuel séparé
• Meta tags, OG et JSON-LD réalignés sur le positionnement

Impact mesuré

Le bundle JS est passé de 209 KB à 371 KB (66 → 116 KB gzip), et le CSS de 4.6 KB à 33 KB (1.6 → 6.3 KB gzip). Cette augmentation s'explique par l'ajout de Framer Motion, Tailwind CSS v4, de nouvelles sections (Projets, Articles), un système de navigation complet, des animations sur chaque section et un article de fond. Malgré tout ce qui a été ajouté, le site reste léger — un résultat direct de l'optimisation effectuée en parallèle : suppression des dépendances inutiles, refactoring des composants et nettoyage du CSS orphelin.

Conclusion provisoire

Cette étude de cas documente un projet en cours. Les gains les plus importants viennent souvent des corrections simples : un JSON-LD valide, une image OG qui existe, un sitemap propre. La modernisation du stack n'était pas strictement nécessaire pour le SEO, mais elle améliore la maintenabilité et l'expérience utilisateur.

Il reste la mise en ligne officielle et le suivi des résultats SEO sur plusieurs semaines. Cet article sera mis à jour avec les données finales une fois le délai d'indexation écoulé.

Le meilleur moment pour optimiser le SEO d'un site, c'est avant le lancement. Le deuxième meilleur moment, c'est maintenant.