Performance, SEO & accessibilité

Un site professionnel ne se juge pas seulement à ce qu’il affiche, mais à la façon dont il l’affiche : vite, visible sur Google, et utilisable par tous. Ces trois dimensions — performance, SEO, accessibilité — sont souvent négligées par les débutants, alors qu’elles font la différence entre un site qui existe et un site qui travaille pour vous.

Optimiser les performances

La vitesse n’est pas un détail : un site lent fait fuir les visiteurs et est pénalisé par Google. Les points les plus rentables :

Les images.

Première cause de lenteur, et de loin. Compressez-les, utilisez des formats modernes (WebP, ou JPG plutôt que PNG pour les photos), chargez en différé (lazy loading) celles qui ne sont pas immédiatement visibles. Le composant Image de Next.js automatise une grande partie de ce travail.

Le poids du code envoyé (bundle).

Plus vous ajoutez de librairies, plus le navigateur télécharge. Chaque dépendance a un coût : n’ajoutez que ce qui est utile.

Le rendu.

Next.js permet de générer les pages à l’avance (statique) ou côté serveur, ce qui accélère l’affichage et aide le référencement.

Mesurez avec Lighthouse (intégré à Chrome) : l’outil analyse votre page et attribue des scores de performance, accessibilité, bonnes pratiques et SEO, avec des recommandations concrètes. C’est votre tableau de bord objectif. Principe sain : n’optimisez que ce que vous avez mesuré. L’optimisation prématurée — des heures sur un problème inexistant — est une perte de temps classique.

Optimiser le SEO

Le SEO (référencement naturel) détermine si vos clients vous trouvent sur Google. Sujet vaste, mais quelques fondations sont incontournables et à la portée de tous :

• Les balises title et meta description : chaque page doit avoir un titre unique et une description claire (c’est ce qui s’affiche dans les résultats). Sur Next.js, cela se gère page par page via `generateMetadata`.
• La structure des titres (Hn) : un seul H1 par page, puis des H2, H3 hiérarchisés. Cette structure aide Google — et les lecteurs.
• Les données structurées (schema.org) : un balisage qui aide Google à comprendre la nature de votre contenu (article, entreprise, FAQ…) et peut enrichir votre affichage.
• Le sitemap et le fichier robots : le premier liste vos pages pour les moteurs, le second leur indique ce qu’ils peuvent explorer.
• Le contenu, avant tout : aucune astuce technique ne remplace un contenu utile, original et complet. Google récompense la valeur réelle apportée au lecteur.

Ce que l’IA fait bien, et ce qu’elle oublie. Claude gère très bien la partie technique du SEO (balises, structure, données structurées) si vous le demandez. Mais il ne connaît ni votre marché, ni les mots-clés que cherchent réellement vos clients, ni votre stratégie éditoriale. La technique se délègue ; la stratégie SEO, non.

Rendre son site accessible

L’accessibilité (« a11y ») consiste à rendre votre site utilisable par tout le monde, y compris les personnes en situation de handicap. Ce n’est pas qu’une question éthique ou légale : un site accessible est aussi mieux structuré, mieux référencé et plus agréable pour tous. Les fondamentaux :

• Les contrastes : un texte suffisamment contrasté avec le fond (Lighthouse le vérifie automatiquement).
• La navigation au clavier : tout ce qui est cliquable à la souris doit l’être au clavier (touche Tab).
• Le HTML sémantique : les bonnes balises (`<button>`, `<nav>`…) plutôt que des `<div>` génériques.
• Les textes alternatifs des images (`alt`), lus par les lecteurs d’écran.
• Les attributs ARIA, à utiliser avec parcimonie, quand le HTML seul ne suffit pas.

Là encore, l’IA est une bonne assistante : elle génère du code accessible si vous l’exigez. Inscrivez-le dans votre CLAUDE.md (« le site doit rester accessible ») et vérifiez avec Lighthouse.