Un site plus rapide, plus vert et plus clair : refonte de Sous le microscope

Posté : 24 janvier 2026 / Mis-à-jour : 26 janvier 2026

Temps de lecture : 10 minutes

Le blog Sous le microscope vient de fêter ses 6 ans en novembre 2025 et profite de l’occasion pour s’offrir une refonte complète : nouveau design, nouvelles fonctionnalités, meilleure accessibilité et des performances améliorées. Tout cela, bien sûr, toujours sans publicité, gratuit, et dans un esprit de sobriété numérique.

Récapitulatif des 6 ans du blog en quelques chiffres

Refonte graphique du site

Le but de cette refonte est de remplacer l’ancien graphisme qui faisait un peu « vieillot » et n’était pas vraiment personnalisé. Le nouveau graphisme se veut plus moderne et épuré tout en mettant l’accent sur le contenu. Le nouveau design a été réalisé en HTML / CSS (SASS) avec de nouvelles illustrations en dessin vectoriel que j’ai créé pour l’occasion (avec les logiciels Inkscape et LibreOffice Drawing).

Cette refonte a été pensée d’emblée pour les écrans de téléphones portables (mobile first). Le graphisme s’adapte également aux écrans de toutes tailles que ce soit tablette ou ordinateur.

Avant Après

Depuis quelques mois, une première version du thème avait été mise en ligne afin de recueillir des retours d’expérience. Ces retours ont permis d’affiner les choix ergonomiques et d’enrichir la version finale que vous découvrez aujourd’hui. Cette refonte ne se limite pas seulement à du graphisme mais a aussi permis l’ajout de nouvelles fonctionnalités.

De nouvelles fonctionnalités

Plusieurs nouvelles fonctionnalités ont été ajoutées :

Moteur de recherche optimisé, permettant de trouver rapidement les informations grâce à un système d’autocomplétion
Barre de progression, indiquant l’avancement de la lecture d’un billet de blog (permettant ainsi de mieux se repérer lors de la lecture)
Ajout d’animations, pour rendre l’expérience de navigation plus fluide
Amélioration de l’ergonomie, une navigation repensée pour une lecture optimisée sur téléphone et tablette
Options inclusives, police adaptée aux lecteurs dyslexiques, taille de texte augmentée et possibilité de réduire les animations
Outils d’administration, pour détecter les images dupliquées ou sans champ alt (pour les lecteurs d’écrans)

Sous le capot de Sous le microscope

Le site Sous le microscope a été ma première expérience dans le monde du web. Lors de sa création, j’avais choisi le logiciel WordPress (système de gestion de contenu ou Content Management System en anglais) qui ne nécessite pas de connaissances en programmation. Ce CMS est facile à prendre en main et largement utilisé. En décembre 2025, 42,8 % des sites internet étaient basés sur WordPress^[1]. Cette nouvelle version utilise toujours WordPress mais en ajoutant un thème que j’ai codé personnellement.

Création d’un thème personnalisé

Plusieurs milliers de thèmes pour WordPress sont disponibles et permettent de personnaliser le graphisme et les fonctions de son site. Dans le cadre de cette refonte graphique, j’ai décidé de coder mon propre thème sur mesure pour offrir une navigation plus fluide et une expérience personnalisée à chaque lecteur⸱rice.

Schéma expliquant le fonctionnement d'un site WordPress. Celui-ci est composé des fonctions de bases représenté sur le schéma par une maison vide. A cela s'ajoutent le graphisme et les les plugins représentés ici par la façade d'une maison et par le plan des câbles électriques et les canalisations d'eau respectivement. — Aux fonctionnalités de base de WordPress s’ajoutent le graphisme provenant d’un thème ainsi que les fonctionnalités apportées par des plugins (extensions).

Pour la conception de ce thème personnalisé, j’ai utilisé plusieurs langages de programmation.

Schéma de la stack technique utilisée pour le site : HTML/CSS/JS en front-end, PHP/MySQL en back-end, et outils comme GitHub et Docker. — Une partie est exécutée directement au niveau du navigateur de l’utilisateur⸱rice : HTML / CSS (SASS) et Javascript. Tandis que du PHP ainsi que l’API de WordPress et MySQL sont utilisés pour le serveur. On parle de *front-end* pour ce qui est exécuté et visible sur le navigateur de l’utilisateur⸱rice et de *back-end* pour les données traitées par le serveur.

La création du thème personnalisé a également permis de remplacer 8 extensions (plugins) tierces, que j’utilisais précédemment, par des fonctions codées spécifiquement pour ce nouveau thème. Cela facilite la maintenance et réduit les risques de sécurités dus aux extensions tierces^[2].

Cookies et vie privée

La diminution du nombre d’extension a aussi permis de réduire le nombre de cookies et ainsi d’améliorer le respect de la vie privée des utilisateurs⸱rices du site. Les seuls cookies encore présents sont ceux proposés de base par WordPress (c’est-à-dire optionnels lors de l’ajout d’un commentaire ; plus d’informations sur la page politique de confidentialité).

Un site beaucoup plus léger et rapide

Ce nouveau thème avait aussi pour objectifs d’être plus léger et écoresponsable. En effet, depuis le début d’internet, les pages ont tendance à devenir de plus en plus lourdes et à contenir plus de contenu (passant d’un poids de 467 à 2950 ko entre novembre 2010 et janvier 2026)^[3]. Cela peut conduire à des pages qui sont plus longues à charger mais également à augmenter l’impact écologique du site en nécessitant de télécharger plus d’informations depuis le serveur.

Schéma montrant de façon simplifié la consommation d'électricité et d'eau par des serveurs selon que la page soit légère ou lourde. — Une page lourde va souvent nécessiter le transferts de plus de fichiers ainsi que des transferts de données avec d’autres serveurs (via des API) ce qui entraine une consommation d’eau et d’électricité plus importante que pour une page légère.

Pour réduire la taille des pages, j’ai notamment mis en place plusieurs bonnes pratiques (plus d’informations sur la page écoresponsabilité) :

changement du format des images (qui passe de .png vers .svg et .webp ce qui permet de réduire le poids des pages à charger)
améliorations dans le code pour être plus rapide
désactivation de fonctions non utilisées de WordPress comme les émojis dans les commentaires
meilleur paramétrage du système de cache

Pour évaluer l’impact de ces modifications, j’ai réalisé des mesures sur la page d’accueil et sur un billet de blog fréquemment visité. Dans les deux cas, la taille des pages à été diminuée de 75 %.

Ces deux pages sont également plus rapides à charger. La page d’accueil de la première version mettait en moyenne 504 ms à se charger tandis que la nouvelle est à 180 ms. Cette meilleure vitesse améliore le confort de navigation sur le site et peux aussi être positive pour le référencement du site par les moteurs de recherche (SEO).

Chaque point représente une mesure effectuée. Le losange représente la médiane. Les données ont été obtenues avec la console de développeur / DevTools du navigateur Firefox.

Ces améliorations en terme de vitesse de chargement et de poids des pages permettent d’avoir un site plus sobre d’un point de vue numérique. Cela a pu être vérifié via des sites internet comme Website carbon qui indique que Sous le microscope émet moins de gaz à effets de serres que 98 % des sites internet.

A titre de comparaison pour un an avec 10 000 pages vues par mois, cela correspond à 4,08 kg d’équivalent CO₂ (eq CO₂).

L’impact numérique pour 120 000 visites par an correspond au visionnage de la moitié des 236 épisodes de Friends (7,86 kg eq CO₂ au total) ou à 0,04 % de l’empreinte carbone d’un·e Français·e (9,1 T eq CO₂) ou à 39,5 km en voiture électrique (103 g eq CO₂ par km). Ces données proviennent du comparateur Impact CO₂ de l’ADEME ^[4].

Amélioration de l’accessibilité

Des options d’accessibilité ont été ajoutées afin de rendre la lecture plus agréable pour un public varié :

Mode lecture facilitée, avec une police spécialement conçue pour les personnes dyslexiques et une taille plus grande
Mode sombre, avec un contraste élevé
Mode avec des animations réduites, pour les personnes sensibles aux effets visuels

A cela s’ajoute une amélioration du code HTML en terme de balises pour faciliter la navigation au clavier et la reconnaissance du contenu par un lecteur d’écran. Les couleurs ont également été choisies pour apporter un bon contraste entre elles et ainsi faciliter la lecture.

Une politique IA pour un usage responsable

Depuis la création du site il y a 6 ans, l’IA générative est apparue et a profondément changé la manière de rechercher et consommer l’information en ligne. Cet outil peut conduire à la diffusion de fausses informations dans le domaine de la santé et n’est donc pas utilisé pour Sous le microscope ^[5].

Sur ce site tous les articles sont rédigés manuellement et avec des articles scientifiques comme sources. Aucune IA n’est utilisée pour écrire les contenus du blog ou pour la génération d’images. En revanche, j’ai ajouté une politique IA pour expliquer à ces outils ce qu’ils peuvent lire sur le site et les règles d’utilisations (lien).

Soutenir le site

Si vous appréciez ce contenu, vous pouvez envisager de soutenir le site via une plateforme de dons Ko-fi (lien). Ce projet sans publicités est 100 % indépendant et autofinancé. Les dons serviront à couvrir en partie :

des frais d’hébergement (100,66 € en 2026)
des frais de nom de domaine (20,60 € en 2026)

Je ne cherche pas à monétiser Sous le microscope, mais à pérenniser un espace de vulgarisation simple, sans publicités et accessible à tous.

Ajout de nouveau contenu de vulgarisation

En 2025, en plus de la création de ce nouveau thème, j’ai posté un nouveau billet de blog :

Les murs d’un château fort attaqués par des microbes

Plusieurs nouvelles définitions ont aussi été ajoutées dans le glossaire :

Bilan des améliorations

Cette refont touche plusieurs domaines comme le graphisme, l’accessibilité dans le but d’obtenir un site plus durable avec une réduction du poids des pages et respectant mieux la vie privée.

Schéma circulaire illustrant les 4 axes de la refonte du site Sous le microscope : Vie privée (moins de cookies, absence de traqueurs, respect des données), Environnement (site plus rapide et plus léger), Accessibilité (police adaptée, mode sombre, balisage optimisé), et Technique (nouveaux graphismes, code allégé, sécurité renforcée, cache optimisé, images optimisées, animations réduites).

J’espère que cette nouvelle version de Sous le microscope vous plaira ! N’hésitez pas à explorer les nouvelles fonctionnalités et à partager votre ressenti dans les commentaires.

Sources

[1] https://w3techs.com (consulté le 26 janvier 2026)

[2] https://flashpoint.io/blog/wordpress-vulnerabilities/ (consulté le 26 janvier 2026)

[3] https://httparchive.org/reports/page-weight?start=earliest&end=latest&view=list (consulté le 23 septembre 2025)

[4] Comparateur Impact CO2 ADEME (consulté le 06 décembre 2025)

[5] Menz, B. D., Modi, N. D., Sorich, M. J., & Hopkins, A. M. (2024). Health disinformation use case highlighting the urgent need for artificial intelligence vigilance: Weapons of mass disinformation. JAMA internal medicine, 184(1), 92-96. doi: 10.1001/jamainternmed.2023.5947 (lien)