Cela faisait de nombreux mois que je voulais changer et mettre à jour la conception graphique du carnet. Depuis quelques semaines, j’ai commencé à y réfléchir de façon plus concrète. Puis à travailler sur différentes ébauches, de façon itérative, jusqu’à arriver à une version assez stable et satisfaisante pour la mettre en ligne. Comme à chaque changement, c’est l’occasion de rajeunir et retravailler le code, tout en utilisant les (dernières) bonnes pratiques Web. Avec l’objectif double de simplifier la présentation du contenu, et de réduire le poids des pages (et donc, les temps de chargement).
Faisons un petit tour du propriétaire pour découvrir ces nouveautés et optimisations.
Il était une fois…
La précédente refonte datait de 2020, lorsque je cherchais à moderniser et homogénéiser mes sites. Il me semblait intéressant, à l’époque, d’avoir un thème commun et partagé par tous mes sites, y compris pour ce carnet. Avec le temps, je me suis rendu compte que je me contraignais sur certains éléments pour rester homogène avec le thème principal. Par exemple, j’avais conservé la couleur principale, le bleu, et je n’avais pas trouvé de solution pour afficher sur toutes les pages, le nom du carnet, qui n’était visible que sur la page d’accueil. Alors que rien ne m’empêchait de donner une identité propre à ce carnet !
Ancien thème, où le bleu était la couleur dominante.
Je voulais aussi, grâce aux inspirations découvertes au gré de mes navigations, simplifier les pages pour faciliter la lecture et la navigation. Sans aller jusqu’à un dépouillement complet, mais tendre vers un peu plus de minimalisme. Sans compter mon envie de revoir l’identité visuelle : logo revisité, augmentation de la taille du texte, nouvelles couleurs (qui pourraient varier selon les catégories), tout en proposant une version sombre adaptée.
Parlons performances
Pour optimiser les performances et le poids des pages, pas de recette magique, il faut réduire le nombre de requêtes et d’éléments à charger :
suppression de la dépendance au thème partagé,
réécriture de zéro du CSS, avec moins de règles compliquées,
réduction des éléments inutiles du DOM dans les pages HTML,
restriction à deux polices (une sans empattement et une monospace),
utilisation de SVG intégrés pour les quelques icônes présentes,
utilisation du JavaScript pour quelques améliorations progressives uniquement,
minification des fichiers CSS, JavaScript et des images.
Indicateur
Ancienne version (v1)
Nouvelle version (v2)
Poids de la page
1,314 Mo
386 Ko
Éléments du DOM
236
215
Requêtes
22
10
Score EcoIndex
B (78/100)
A (85/100)
Tableau comparatif des performances entre les deux versions.
Objectif atteint avec la réduction de presque trois quarts du poids des pages, et avec deux fois moins de requêtes. Tout en ayant un thème sombre, et avec un rendu visuel qui me plaît !
Polices
Je l’avais déjà évoqué en juillet 2023, mais le choix des polices est toujours un dilemme. Dès 2020, j’utilisais la police Inter de Rasmus Andersson, que j’affectionnais particulièrement, notamment grâce à ses variantes de jeux stylistiques et de caractères. Depuis, son usage s’est popularisé et de nombreux sites l’utilisent ; ajouté à une petite lassitude, j’étais à la recherche d’une autre police. Au hasard de mes perditions sur les Internets, je suis tombé sur la fabuleuse police (non libre) Marblis de Julien Fincker. Elle répondait à (presque) tous mes critères, dont celui de ne pas avoir besoin d’activer des variantes pour avoir un rendu par défaut qui me plait. C’est ainsi qu’elle est devenue la nouvelle police sans empattement du blog.
Quant aux extraits de code qui utilisaient la police JetBrains Mono dans le précédent thème, je l’ai remplacée par la police Google Sans Code. Pour les citations, j’utilisais la police avec empattement, Source Serif 4 d’Adobe. Même si je l’aime beaucoup, j’ai fait le choix de ne plus l’utiliser, et ainsi limiter l’usage à deux polices. Toujours dans cet objectif de sobriété.
Et maintenant ?
C’est l’heure de profiter, de s’habituer à cette nouvelle couleur primaire, le violet, et d’ajuster les derniers petits éléments qui auraient pu être oubliés. Ensuite, je pourrais chercher des couleurs alternatives (qui fonctionnent aussi bien en thème clair que sombre) et les appliquer pour certaines catégories d’articles. Et ce sera peut-être aussi l’occasion de poster plus régulièrement.
Dans quelques temps — mois, années, décennies, qui sait… —, je recommencerais certainement ce cycle avec un nouveau thème.
