Previous Post

Dans les coulisses techniques de korben.info

Next Post
Dans les coulisses techniques de korben.info
1 / 2
DESCRIPTION

Mon site a plus de 20 ans, et aussi bien le moteur que la carrosserie, tout a changé plusieurs fois de carrosserie... C'était SPIP d'abord, puis WordPress durant une éternité, puis un gros déménagement vers du statique, avec aujourd'hui +25 000 pages à générer. Et depuis, je n'arrête pas d'ajouter des petites optimisations un peu partout et j'avoue, ça m'amuse beaucoup de faire évoluer mon bébé ^^.

Alors je me suis dit que ce serait cool de vous rapporter un peu tout ce que j'ai mis en place. Ne voyez pas ça comme une bible des optimisations ou des bonnes pratiques, je n'ai pas cette prétention. C'est juste un retour perso de tout ce que j'ai mis en place et de tout ce que je teste.

Car ce qu'il faut comprendre d'abord c'est qu'un site en 2026, ça cause à 2 publics très différents : les humains qui lisent (vous), et les machines qui indexent, citent et résument (les bots + IA quoi...). Je vais donc regrouper ça par grandes familles d'idées, sans tout détailler en mode micro sinon, ça me prendrait un temps infini. Mais si vous avez des questions sur des points précis, dites le moi et je serai heureux de vous renseigner.

Avant tout, pour commencer, je vais déjà vous expliquer ce qu'est ce fameux JSON-LD et à quoi il sert. Le JSON-LD c'est un graphe de données structurées au format Schema.org embarqué dans chaque page du site : l'article, son auteur, le site, le fil d'Ariane... tout est déclaré et tout pointe vers tout. Vous ne le voyez jamais, mais c'est ce qui permet à Google de vous afficher en jolie fiche enrichie plutôt qu'en lien tout nu. Et les moteurs de réponse IA s'en servent autant que lui.

Sauf que personne ne regarde jamais ce machin, donc une erreur peut y dormir pendant des mois. Alors j'ai récemment mis en place un petit script qui vérifie l'intégralité du graphe à chaque déploiement. Comme ça, si une référence est cassée ou si le JSON ne se parse plus correctement, la génération du site s'arrête, point. Ça coûte quelques secondes au déploiement, mais comme ça, je n'ai plus jamais de données structurées pourries en prod.

Pour les robots, j'ai aussi fait du tri sélectif avec un robots.txt aux petits oignons. Les bots qui citent leurs sources (OAI-SearchBot, PerplexityBot, Claude-SearchBot) sont les bienvenus, et ceux qui aspirent tout pour entraîner leurs modèles (GPTBot, CCBot, Google-Extended) ça dégage. Être cité m'amène des lecteurs, alors qu'être avalé dans un dataset ne me rapporte rien.

Et là, vous vous demandez peut-être ce que fout ce fichier llms.txt à la racine de mon site ? Hé bien même si c'est inutile pour le référencement Google, ça reste une sorte de README pour les IA avec dedans qui je suis, ce que je publie, et une petite règle maison qui concerne l'attribution avec un lien vers l'article. Je ne sais pas si ce sera respecté par les IA mais je tente. Ajoutez à cela des sitemaps découpés (un dédié aux news de moins de 48h + un par catégorie), un fichier IndexNow pour prévenir les moteurs à chaque publication, et un genre de flux de mes articles nettoyé de tout le HTML crado.

Oui, avec moi, les machines sont gâtées !

Passons aux humains maintenant... Parce que souvent les webmasters et autres développeurs web optimisent le référencement, améliorent les temps de chargement de leurs pages, pensent à la sécurité mais oublient totalement l'accessibilité. L'accessibilité web, c'est un sujet vaste et ici sur mon site, ça se traduit par un panneau de préférences de lecture : polices adaptées (Luciole pour les malvoyants, OpenDyslexic pour les dyslexiques, le tout hébergé maison), lecture audio des articles, mode de lecture rythmée pour guider l'œil, fond crème pour reposer vos yeux... Avec ça, vous réglez votre lecture comme vous voulez.

Le dark mode suit également le réglage de votre système, et un micro-script appliqué avant le rendu évite le fameux flash blanc au chargement.

Pour la recherche interne, pas besoin de service tiers non plus. C'était un morceau un peu compliqué parce que le site est statique, mais heureusement, pour les paresseux, il existe un outil qui fera le boulot d'indexation à votre place : ça s'appelle Pagefind, ça tourne uniquement côté client avec un index régénéré après chaque génération du site, et ça m'a permis de virer Algolia. Et côté vie privée, vous le savez, j'ai fait un choix radical : plus de pub display depuis juillet 2025, pas de Google Fonts, pas de Google Analytics, aucun tracker tiers. Votre navigateur charge uniquement mes pages, et pas un aspirateur à données comme sur d'autres sites. J'ai même pu virer cet horrible bandeau RGPD grâce à ça !

Maintenant pour la vitesse, pour ceux qui se demandent comment améliorer les performances de leur site, commencez par mesurer avant de bricoler, puis attaquez dans l'ordre : images, cache, polices. D'ailleurs, mes conseils de 2017 sur le sujet tiennent toujours, c'est juste l'outillage qui a changé. Ici, le gros du gain se joue sur les images : AVIF avec repli WebP, plusieurs tailles servies selon la taille de l'écran, chargement différé partout sauf les images au dessus de la ligne de flottaison du site qui elles sont préchargée en priorité. Si vous avez déjà été confronté à un fort trafic, vous connaissez sans doute les technologies Redis ou Memcached. Ici, plus besoin puisque je suis en statique derrière un CDN, et des CSS et JS fingerprintés (un hash dans le nom de fichier, qui change à chaque version) puis mis en cache durant 1 an. De mon côté, ça a vraiment allégé mon site.

J'ai aussi mis en place du recadrages automatiques « intelligents ». J'ai testé la fonction gravity de Cloudflare Images mais c'était pas foufou, alors je suis revenu à 100% au recadrage smart de Hugo (mon générateur de site), qui fait le job sans décapiter personne. Comme quoi, la solution native est parfois meilleure que le service externe à la mode.

Retour aux machines maintenant avec ce bon vieux SEO, et les fondamentaux : Des redirections 301 pour chaque ancienne URL, des canonical propres sur la pagination (le canonical, c'est l'URL de référence que Google doit indexer), un fil d'Ariane balisé et des pages hub par grandes thématiques pour le maillage. Mon .htaccess fait presque 9 000 lignes, géré à la main (oui oui j'avais plein de redirections de merde à gérer). Et la contrepartie, c'est que toute modification manuelle ne doit pas être effectuée à la légère, car cela peut entraîner des problèmes du genre mon site entier en erreur 500. Donc faut que je sois bien réveillé le jour où j'y touche.

Reste la tuyauterie ensuite... HSTS, CSP stricte, et un security.txt conforme au RFC 9116 pour que les chercheurs en sécurité sachent où signaler une faille. Et si vous souhaitez aller plus loin, pensez à sécuriser votre installation dans son ensemble. Mon déploiement en prod se fait ensuite par rsync en 2 passes : tout le contenu d'abord, puis la home et les flux en dernier, pour que la page d'accueil ne pointe jamais vers un article qui ne serait pas encore en ligne.

Cela fait donc plus d'un an que j'utilise quasi quotidiennement ce setup de site statique généré avec Hugo, et je dois dire que ça m'a forcé à bien me creuser les méninges mais aussi à rendre chaque rouage totalement explicite : ce que voit Google, ce que lit une IA, et ce que charge votre navigateur, pour que tout soit propre, rapide, sécurisé.

Voilà, vous savez tout ! Maintenant, y'a plus qu'à adapter ça à votre propre site...

Amusez-vous bien !

Korben PATREON 0 favs
VIEWS1
FILES2 files
POSTEDJun 11, 2026
ARCHIVEDJun 11, 2026