Source code of my website
🛠️ : add missing non-breaking spaces
+75
-75
+25
-25
content/posts/2026/2026-01-20-pop-os-24/index.fr.md
+25
-25
content/posts/2026/2026-01-20-pop-os-24/index.fr.md
···
9
9
J'utilise la distribution Linux **Pop!_OS** depuis presque cinq ans.
10
10
J'ai toujours apprécié leur démarche autour de l'auto-tiling, qui est une fonctionnalité qui manque cruellement à GNOME (bien que des plugins existent).
11
11
12
-
Après quelques mois passés sous Manjaro Linux, et des galères liées à des montées de version hasardeuses qui ont plusieurs fois cassé mon système, et avec la sortie récente de Pop!_OS 24.04, il était temps pour moi de revenir sur cette distribution pour me faire un avis sur l'environnement très attendu : COSMIC.
12
+
Après quelques mois passés sous Manjaro Linux, et des galères liées à des montées de version hasardeuses qui ont plusieurs fois cassé mon système, et avec la sortie récente de Pop!_OS 24.04, il était temps pour moi de revenir sur cette distribution pour me faire un avis sur l'environnement très attendu : COSMIC.
13
13
14
14
<!--more-->
15
15
16
-
## Le nouvel environnement de bureau : COSMIC
16
+
## Le nouvel environnement de bureau : COSMIC
17
17
18
18
Pop!_OS n'a pas eu de mise à jour majeure depuis longtemps (la version précédente, 22.04, était sortie en avril 2022 donc)
19
19
La raison est simple, leur effort était principalement concentré autour du développement de leur environnement de bureau COSMIC, qui a duré plus de trois ans.
20
20
21
-
La promesse est forte : un environnement écrit en Rust pour avoir de bonnes performances et de la stabilité, un environnement pensé dès le départ pour supporter l'auto-tiling, ainsi que les workspaces dans un contexte multi-écran.
21
+
La promesse est forte : un environnement écrit en Rust pour avoir de bonnes performances et de la stabilité, un environnement pensé dès le départ pour supporter l'auto-tiling, ainsi que les workspaces dans un contexte multi-écran.
22
22
COSMIC est aussi pensé dès le départ pour s'intégrer avec Wayland, en remplacement de X11.
23
23
24
-
COSMIC se veut être un environnement complet, et propose donc un ensemble de logiciels inclus, qui fournissent à peu près les mêmes outils que la suite GNOME, à savoir :
24
+
COSMIC se veut être un environnement complet, et propose donc un ensemble de logiciels inclus, qui fournissent à peu près les mêmes outils que la suite GNOME, à savoir :
25
25
26
-
* un terminal : COSMIC Terminal
27
-
* un éditeur de texte : COSMIC Text Editor
28
-
* un explorateur de fichiers : COSMIC Files
29
-
* un lecteur multimedia : COSMIC Media Player
30
-
* un gestionnaire de configuration : COSMIC Settings
31
-
* un store d'applications : COSMIC Store
26
+
* un terminal : COSMIC Terminal
27
+
* un éditeur de texte : COSMIC Text Editor
28
+
* un explorateur de fichiers : COSMIC Files
29
+
* un lecteur multimedia : COSMIC Media Player
30
+
* un gestionnaire de configuration : COSMIC Settings
31
+
* un store d'applications : COSMIC Store
32
32
33
33
> Oui, ils ne se sont pas foulés pour les noms, mais au moins c'est facile à retenir 😅
34
34
···
45
45
46
46
## La distribution
47
47
48
-
Pop!_OS (qui est top 5 sur [DistroWatch](https://distrowatch.com/table.php?distribution=popos), même si ça ne veut pas dire grand-chose hormis qu'il y a une hype certaine autour de cette distrib) est une distribution Linux basée sur Ubuntu. Elle est développée par System76, une société américaine qui vend des ordinateurs portables sous Linux uniquement. On y retrouve donc les outils habituels : _apt_ et _flatpak_ pour l'installation de paquets (pas de _snap_ par défaut, et c'est tant mieux).
48
+
Pop!_OS (qui est top 5 sur [DistroWatch](https://distrowatch.com/table.php?distribution=popos), même si ça ne veut pas dire grand-chose hormis qu'il y a une hype certaine autour de cette distrib) est une distribution Linux basée sur Ubuntu. Elle est développée par System76, une société américaine qui vend des ordinateurs portables sous Linux uniquement. On y retrouve donc les outils habituels : _apt_ et _flatpak_ pour l'installation de paquets (pas de _snap_ par défaut, et c'est tant mieux).
49
49
50
-
Au niveau de l'ISO à télécharger, 2 versions sont disponibles : une version simple, et une version embarquant les drivers Nvidia (l'option que j'ai choisie, puisque j'ai un petit GPU dans ma machine). Il existe aussi une version pour les architectures ARM. Je n'ai pas de machine ARM pour tester, mais je pense que ça peut être intéressant pour certains home-labs.
50
+
Au niveau de l'ISO à télécharger, 2 versions sont disponibles : une version simple, et une version embarquant les drivers Nvidia (l'option que j'ai choisie, puisque j'ai un petit GPU dans ma machine). Il existe aussi une version pour les architectures ARM. Je n'ai pas de machine ARM pour tester, mais je pense que ça peut être intéressant pour certains home-labs.
51
51
Les ISOs sont assez lourds (2.8Go et 3.3Go pour la version avec les drivers Nvidia).
52
52
L'installation est simple, avec un helper graphique comme on en trouve dans toutes les distributions.
53
53
···
91
91
> Sur mon setup de bureau, j'ai deux écrans 24 pouces en résolution 2560x1440, je les ai conservés en affichage à 100%, ce qui est plutôt confortable. J'ai activé l'auto-tiling par défaut, et des workspaces verticaux séparés pour chaque écran.
92
92
Sur mon laptop, j'ai un écran 14 pouces en 2880x1800, un scaling partiel à 150% est plus confortable.
93
93
94
-
Un point important : TOUT A FONCTIONNÉ DU PREMIER COUP.
94
+
Un point important : TOUT A FONCTIONNÉ DU PREMIER COUP.
95
95
96
-
C'est, je pense, suffisamment bien pour pouvoir le mentionner (EN CRIANT !).
96
+
C'est, je pense, suffisamment bien pour pouvoir le mentionner (EN CRIANT !).
97
97
98
-
J'ai pu facilement :
99
-
* imprimer ;
100
-
* connecter plusieurs casques Bluetooth ;
101
-
* utiliser mon micro et ma webcam pour une visio ;
102
-
* partager mon écran ;
103
-
* prendre des screenshots ;
104
-
* capturer un peu de video avec OBS Studio connecté à ma PS5 !
98
+
J'ai pu facilement :
99
+
* imprimer ;
100
+
* connecter plusieurs casques Bluetooth ;
101
+
* utiliser mon micro et ma webcam pour une visio ;
102
+
* partager mon écran ;
103
+
* prendre des screenshots ;
104
+
* capturer un peu de video avec OBS Studio connecté à ma PS5 !
105
105
106
106
107
107
108
-
Et tout aussi important :
108
+
Et tout aussi important :
109
109
110
-
* installer Steam ;
111
-
* et jouer à Factorio 🏭⚙️ !
110
+
* installer Steam ;
111
+
* et jouer à Factorio 🏭⚙️ !
112
112
113
113
Tout ça sans aucune galère.
114
114
C'est du niveau attendu pour toute distribution Linux moderne, mais je m'attendais à quelques galères plus importantes, surtout avec un environnement aussi récent.
···
153
153
* La page [Community de COSMIC](https://system76.com/cosmic/community)
154
154
* Le GitHub [cosmic-utils](https://github.com/cosmic-utils)
155
155
* Pop!_OS sur [DistroWatch](https://distrowatch.com/table.php?distribution=popos)
156
-
* [libcosmic](https://github.com/pop-os/libcosmic?) pour développer :
156
+
* [libcosmic](https://github.com/pop-os/libcosmic?) pour développer :
157
157
* des [applets](https://github.com/pop-os/cosmic-applet-template)
158
158
* des [applications](https://github.com/pop-os/cosmic-app-template)
+4
-4
content/posts/2026/2026-01-30-mi-veille/index.md
+4
-4
content/posts/2026/2026-01-30-mi-veille/index.md
···
35
35
36
36
* [A fun trick for getting discovered by LLMs and AI tools](https://cassidoo.co/post/ai-llm-discoverability/) de [Cassidy Williams](https://cassidoo.co)
37
37
38
-
> Comment maintenir son site web à l'air des crawlers IA qui alimentent les LLMs ?
39
-
Et comment réussir à être cité en source ?
38
+
> Comment maintenir son site web à l'air des crawlers IA qui alimentent les LLMs ?
39
+
Et comment réussir à être cité en source ?
40
40
>
41
41
> Cassidy Williams donne quelques pistes qu'elle a expérimentées, avec succès.
42
42
On y retrouve le llms.txt.
···
64
64
C'est joli, et c'est gratuit.
65
65
La variante italique est incroyable. Je pense que je vais utiliser cette font sur mon site, pour les titres surtout.
66
66
67
-
* [Comprendre la loi de Brooks : le mythe du mois-homme, 50 ans plus tard](https://www.sfeir.dev/tendances/comprendre-la-loi-de-brooks-le-mythe-du-mois-homme-50-ans-plus-tard/) _via_ [Siegfried Ehret](https://ehret.me/2026/01/nflm-developer/)
67
+
* [Comprendre la loi de Brooks : le mythe du mois-homme, 50 ans plus tard](https://www.sfeir.dev/tendances/comprendre-la-loi-de-brooks-le-mythe-du-mois-homme-50-ans-plus-tard/) _via_ [Siegfried Ehret](https://ehret.me/2026/01/nflm-developer/)
68
68
69
69
> Chiffrer en jours/homme, ajouter des personnes à un projet en retard, on sait que ça ne fonctionne pas, mais des organisations continuent à le faire.
70
70
>
···
73
73
* [Veille technologique ma méthode pour rester à jour | Camille Roux](https://youtu.be/d8nLfDFcip4) _via_ [LinkedIn](https://www.linkedin.com/posts/camilleroux_veille-technologique-ma-methode-pour-rester-activity-7407785711631933440-hHnQ)
74
74
75
75
> Utiliser un lecteur RSS est de nouveau hype.
76
-
Camille Roux nous donne quelques conseils concrets pour faire sa veille et la partager. En 3 mots : classer, consacrer du temps, partager.
76
+
Camille Roux nous donne quelques conseils concrets pour faire sa veille et la partager. En 3 mots : classer, consacrer du temps, partager.
77
77
Quelques bonnes idées avec un peu d'IA, pour faire des résumés ciblés, ou "écouter" des articles plutôt que les lire.
78
78
S'appuyer sur des aggrégateurs d'actus forme aussi un bon point de départ.
79
79
+22
-22
content/posts/2026/2026-02-17-touraine-tech/index.md
+22
-22
content/posts/2026/2026-02-17-touraine-tech/index.md
···
42
42
43
43
Le constat est sans appel, la manipulation politique de cette crise (mais aussi d'autres évènements) est évidente, puisque les agriculteurs, premiers concernés par cet évènement, sont très peu présents dans le discours face aux mouvements politiques, face aux comptes associés à des ingérences étrangères, et autres mouvements contestataires (anti-vax, théoristes du complot, etc.).
44
44
45
-
Pour conclure, Clément pousse la réflexion au monde de l'IA Gen, qui est entraînée sur ces contenus (en particulier Grok, entraîné sur le contenu de Twitter donc) : la propagande russe infiltre l'IA Gen.
45
+
Pour conclure, Clément pousse la réflexion au monde de l'IA Gen, qui est entraînée sur ces contenus (en particulier Grok, entraîné sur le contenu de Twitter donc) : la propagande russe infiltre l'IA Gen.
46
46
47
47
Il nous a également présenté l'initiative Française VigiNum (unique au monde), qui vise à surveiller les tendances sur les réseaux sociaux, et détecter les tentatives d'ingérences qui pourraient être menées par certains états, ainsi que quelques axes permettant de riposter face à ces attaques.
48
48
···
57
57
58
58
59
59
60
-
Le ton est vite posé. Ce talks est un des plus drôles que j'ai vus récemment. Tout est prétexte à un jeu de mots en _ix_ : une partie de _Chifoumix_ : Menhir/Parchemin/Serpe, la commande `curlix` pour exécuter des requêtes HTTP, le serveur de cache _Redix_.
60
+
Le ton est vite posé. Ce talks est un des plus drôles que j'ai vus récemment. Tout est prétexte à un jeu de mots en _ix_ : une partie de _Chifoumix_ : Menhir/Parchemin/Serpe, la commande `curlix` pour exécuter des requêtes HTTP, le serveur de cache _Redix_.
61
61
62
62
Le jeu entre les deux speakers fonctionne bien, sur fond de rivalité éternelle entre ces deux personnages.
63
63
···
81
81
Chaque exécution est associée à un _seed_ qui va rendre le test reproductible.
82
82
Un axe est aussi d'exécuter les tests dans des répétitions pour maximiser les cas couverts.
83
83
84
-
Un seul point négatif : la librairie est conçue pour être utilisée avec JUnit 4 uniquement, ce qui est un peu limitant pour les projets récents utilisant JUnit 5 ou 6.
84
+
Un seul point négatif : la librairie est conçue pour être utilisée avec JUnit 4 uniquement, ce qui est un peu limitant pour les projets récents utilisant JUnit 5 ou 6.
85
85
86
-
### Metal-As-A-Service : Gérer votre bare-metal en MaaS, comme si c'était une machine virtuelle ! - par Julien Briault
86
+
### Metal-As-A-Service : Gérer votre bare-metal en MaaS, comme si c'était une machine virtuelle ! - par Julien Briault
87
87
88
88
On ne présente plus Julien, bénévole aux Restos du Coeur, et porteur de l'initiative _Le Cloud du Coeur_. Cette fois-ci, il nous présente les challenges associée à la gestion de serveurs en bare-metal.
89
89
···
99
99
>
100
100
> Si vous ne les avez pas vu, allez aussi jetter un oeil aux autres talks de Julien sur le Cloud du Coeur, ça vaut le détour.
101
101
102
-
### Fatigués de la POO ? Passez à la DOP ! - Par Jérôme Tama
102
+
### Fatigués de la POO ? Passez à la DOP ! - Par Jérôme Tama
103
103
104
104
Un talk qui parcours les évolutions de Java depuis la version 8 jusqu'aux versions récentes.
105
105
L'approche est de proposer en live un refactoring de code, d'une application Java 8, sous la forme d'un Kata.
···
119
119
120
120
> Un bon rappel du fonctionnement de la mémoire. C'est dense et technique, mais c'est intéressant pour se refaire l'_overview_ de ce qui existe.
121
121
122
-
### Keynote du Jeudi soir : Speechless - par Jean-François Garreau
122
+
### Keynote du Jeudi soir : Speechless - par Jean-François Garreau
123
123
124
-
Un exercice d'improvisation, animé par Jean-François, avec quatre speakers de légende : Estelle Landry, Aurélie Vache, Mickael Alves, et Sébastien Ferrer; plus deux membres du jury : Marjorie Aubert et Thierry Chantier.
124
+
Un exercice d'improvisation, animé par Jean-François, avec quatre speakers de légende : Estelle Landry, Aurélie Vache, Mickael Alves, et Sébastien Ferrer; plus deux membres du jury : Marjorie Aubert et Thierry Chantier.
125
125
Un bel exercice, très drôle, pendant lequel le public participe au choix des sujets.
126
126
127
127
···
134
134
135
135
J'ai profité du regain d'énergie de l'heure du midi pour aller voir quelques talks _Lightning_ de 15 minutes.
136
136
137
-
### Keynote - Gray Hat, Black Hat, Users : comment protéger une plateforme de 85M d'utilisateurs face à des menaces hybrides - Par Mikael Robert et Yohan Boyer
137
+
### Keynote - Gray Hat, Black Hat, Users : comment protéger une plateforme de 85M d'utilisateurs face à des menaces hybrides - Par Mikael Robert et Yohan Boyer
138
138
139
139
Mikael et Yohan sont co-fondateurs du réseau social Yubo, réseau social Français 🇫🇷, avec pour cible des utilisateurs de la Gen Z (donc _obviously_, je ne connaissais pas ce réseau).
140
140
···
150
150
151
151
> Le message principal est donc que le risque vient aussi de l'intérieur et des usages détournés. La surveillance des signaux dits "faibles" prend une place importante.
152
152
153
-
### Mieux écrire, mieux trouver : Diátaxis comme guide de documentation - par Alexis "Horgix" Chotar
153
+
### Mieux écrire, mieux trouver : Diátaxis comme guide de documentation - par Alexis "Horgix" Chotar
154
154
155
155
Alexis présente rapidement le concept de Diataxis, framework d'organisation de documentation.
156
156
157
157
158
158
159
-
Ce framework propose d'organiser la doc selon 2 axes, en 4 parties : les tutoriels et how-tos visant à documenter des actions, et les explications et la références plus portées sur la connaissance.
159
+
Ce framework propose d'organiser la doc selon 2 axes, en 4 parties : les tutoriels et how-tos visant à documenter des actions, et les explications et la références plus portées sur la connaissance.
160
160
161
161
Quelques tips intéressants, en particulier ne pas hésiter à lier les articles de documentation, ainsi qu'être le plus spécifique possible.
162
162
163
163
164
164
165
165
> J'ai bien aimé l'approche avec les exemples sur la photo précédente, qui aide à se projetter dans l'organisation proposée par le framework.
166
-
> Comme l'a dit Alexis, le mieux, c'est de se lancer !
166
+
> Comme l'a dit Alexis, le mieux, c'est de se lancer !
167
167
168
-
### Déchaînez le Chaos : Tester la résilience de votre application avec Chaos Monkey - par Erwan Le Tutour
168
+
### Déchaînez le Chaos : Tester la résilience de votre application avec Chaos Monkey - par Erwan Le Tutour
169
169
170
170
Erwan présente les approches de Chaos Monkey, qui ont été popularisées par Netflix, avec la Simian Army.
171
171
···
175
175
176
176
La démo est intéressante, Erwan nous montre comment activer le Chaos Monkey, sur les différentes couches de notre application, pour y introduire des latences ou des erreurs. À tester couplé avec des tirs de charge pour observer comment les applications se comportent et améliorer leur résilience.
177
177
178
-
> Probablement une brique que je vais tester à l'avenir, vu que c'est tout pile dans ma stack !
178
+
> Probablement une brique que je vais tester à l'avenir, vu que c'est tout pile dans ma stack !
179
179
180
-
### Tricher pour mieux apprendre : 30 minutes par jour pour rester curieux dans nos métiers de la tech - par Yann Schepens
180
+
### Tricher pour mieux apprendre : 30 minutes par jour pour rester curieux dans nos métiers de la tech - par Yann Schepens
181
181
182
182
Yann nous parle de veille techno, et nous propose de prendre 30 minutes chaque jour, sur notre temps de travail pour faire de la veille.
183
183
Il nous invite à pratiquer, lancer des projets persos, partager.
184
184
185
185
186
186
187
-
L'idée la plus pertinente à mon sens : faire sa veille 30 minutes avant le daily. Cela permet de bien gérer le temps, de ne pas déborder.
187
+
L'idée la plus pertinente à mon sens : faire sa veille 30 minutes avant le daily. Cela permet de bien gérer le temps, de ne pas déborder.
188
188
30 minutes par jour, ça représente une dizaine d'heures par mois, donc cette "triche" permet quand même de cumuler pas mal de temps, c'est une bonne astuce si on a pas encore de temps consacré à la veille.
189
189
190
190
> Je reste convaincu que la veille est probablement une des pratiques les plus importantes de nos métiers.
···
198
198
199
199
Antoine et Mathieu nous présentent l'histoire de l'utilisation des images sur le web, depuis la photo des Cernettes (première photo publiée sur internet), en passant par les différents formats, des BMP, GIF, en passant par les JPG et PNG, jusqu'aux formats modernes AVIF ET WEBP, dont les codecs sont issus du monde de la vidéo.
200
200
201
-
Ils nous listent avec humour les piliers de l'enfer : des JPG non-transparents, aux images qui ne chargent pas, à l'image de 20 pixels affichée en grand donc floue, à l'image de 4000 pixels affichée en tout petit.
201
+
Ils nous listent avec humour les piliers de l'enfer : des JPG non-transparents, aux images qui ne chargent pas, à l'image de 20 pixels affichée en grand donc floue, à l'image de 4000 pixels affichée en tout petit.
202
202
203
-
Mais au delà de cet aspect humoristique, ils nous partagent des axes d'amélioration très concrets : l'utilisation des formats modernes qui sont très légers, le redimensionnement des images et la mise à disposition au browser d'un `srcset` pour lui permettre de choisir parmi les formats, les `lazy loading` et `fetchpriority` pour aller chercher des images au bon moment.
203
+
Mais au delà de cet aspect humoristique, ils nous partagent des axes d'amélioration très concrets : l'utilisation des formats modernes qui sont très légers, le redimensionnement des images et la mise à disposition au browser d'un `srcset` pour lui permettre de choisir parmi les formats, les `lazy loading` et `fetchpriority` pour aller chercher des images au bon moment.
204
204
205
205
Une architecture est aussi proposée pour redimensionner les images à la volée et les conserver en cache, plutôt que de faire ces redimensionnements au build (pas comme sur ce blog donc), à base de Strapi, imgproxy, d'un bucket et d'une BDD pour le stockage, et d'un Varnish ou d'un CDN pour le cache.
206
206
C'est plutôt intéressant pour des sites publics, je testerai probablement une ou deux de ces astuces dans les prochains mois.
207
207
208
208
> J'avais déjà entamé un travail sur les images de ce blog sur les bons conseils d'Antoine, il m'a redonné des idées supplémentaires avec ce talk. J'en avais pas besoin ahah.
209
209
210
-
### Local-first et sync-engines, l'architecture du futur ? - par Benjamin Legrand
210
+
### Local-first et sync-engines, l'architecture du futur ? - par Benjamin Legrand
211
211
212
-
Benjamin présente les problèmes liés aux architectures classiques _n-tiers_, avec le Frontend qui communique à un Backend, avec des requêtes HTTP par exemple. Ces communications sont sources d'attente côté utilisateur en cas de latence réseau, et on met en place des mécanismes pour y palier : loaders et spinners. La gestion d'erreur est également un problème en soi, ainsi que la disponibilité du Backend qui doit être maximale, sous peine de rendre le Frontend inutilisable.
212
+
Benjamin présente les problèmes liés aux architectures classiques _n-tiers_, avec le Frontend qui communique à un Backend, avec des requêtes HTTP par exemple. Ces communications sont sources d'attente côté utilisateur en cas de latence réseau, et on met en place des mécanismes pour y palier : loaders et spinners. La gestion d'erreur est également un problème en soi, ainsi que la disponibilité du Backend qui doit être maximale, sous peine de rendre le Frontend inutilisable.
213
213
214
214
215
215
216
216
Il présente ensuite les approches _local-first_, qui consistent à avoir une base de données locale au Frontend (type _IndexedDB_ ou _sqLite_), couplée à un moteur de synchronisation.
217
217
218
-
Les avantages sont nombreux : plus besoin de _spinner_, l'accès réseau devient optionnel car l'application peut fonctionner en mode déconnecté, les données peuvent être plus facilement sécurisées et privées si besoin, le Frontend devient alors aussi plus tolérant aux pannes du Backend.
218
+
Les avantages sont nombreux : plus besoin de _spinner_, l'accès réseau devient optionnel car l'application peut fonctionner en mode déconnecté, les données peuvent être plus facilement sécurisées et privées si besoin, le Frontend devient alors aussi plus tolérant aux pannes du Backend.
219
219
220
220
Côté Frontend, l'utilisation de _live-queries_ permet d'implémenter le lien entre les écrans et la base de données facilement (ainsi que le refresh pour les données synchronisées entrantes). Côté moteur de synchronisation, la plupart des moteurs du marché proposent l'utilisation d'un _CRDT_ (pour _Conflict-free Replicated Data Type_), une espèce d'API de Documents à la MongoDb, pour implémenter la synchronisation simplement.
221
221
···
223
223
224
224
> J'avais déjà vu ce genre d'architecture par le passé. Le principal problème est pour moi le besoin de déplacer (ou dupliquer) les règles de gestion dans le Frontend, mais je trouve l'approche intéressant quand l'application Web est le seul canal.
225
225
226
-
## Keynote de fin : Une belle démarche de transparence
226
+
## Keynote de fin : Une belle démarche de transparence
227
227
228
-
La keynote de cloture du vendredi soir (juste après ma game de Factorio), a été l'occasion pour les orgas de remercier tout le monde : sponsors, speakeuses et speakers, et le public présent.
228
+
La keynote de cloture du vendredi soir (juste après ma game de Factorio), a été l'occasion pour les orgas de remercier tout le monde : sponsors, speakeuses et speakers, et le public présent.
229
229
230
230
231
231
+24
-24
content/posts/2026/2026-02-20-optimiser-site-statique/index.md
+24
-24
content/posts/2026/2026-02-20-optimiser-site-statique/index.md
···
26
26
27
27
C'est, je pense, un bon point de départ.
28
28
29
-
Voici les scores de mon site à l'heure actuelle, pour une navigation mobile et desktop :
29
+
Voici les scores de mon site à l'heure actuelle, pour une navigation mobile et desktop :
30
30
31
31
32
32
33
33
{ class="images-grid-2" }
34
34
35
35
Ces scores peuvent sembler intéressants sur la page d'accueil, mais ils se dégradent fortement sur certaines pages.
36
-
Voici les scores pour la page de mon talk sur Factorio :
36
+
Voici les scores pour la page de mon talk sur Factorio :
37
37
38
38
39
39
···
50
50
Cette étape est très simple à mettre en place, car elle est déjà supportée par Hugo.
51
51
Il suffit lors du build d'ajouter le flag `--minify` pour demander à Hugo de minifier toutes les ressources.
52
52
53
-
Ma commande de build est la suivante dans mon `mise.toml` :
53
+
Ma commande de build est la suivante dans mon `mise.toml` :
54
54
55
55
```toml
56
56
[tasks.build]
···
88
88
| xargs -n 1 -P "$JOBS" -I IMG sh -c 'cwebp -q 75 IMG -o $(echo "IMG" | sed "s/\.[^.]*$/.webp/")'
89
89
```
90
90
91
-
Puis un gros `sed` pour remplacer les références dans mes markdown :
91
+
Puis un gros `sed` pour remplacer les références dans mes markdown :
92
92
93
93
```shell
94
94
sed -Ei 's/\.(jpe?g|png)$/\.webp/I' **/*.md
···
115
115
Hugo supporte la recompression des images dans différents formats à la volée (qui aurait pu remplacer mes scripts, mais il vallait mieux ne pas faire ça au build), mais pas leur redimensionnement automatique, il faut implémenter soi-même la mécanique.
116
116
Pour pouvoir redimensionner les images à la volée (au build donc), la meilleure solution semble d'utiliser un hook _img_ Hugo, qui permet de surcharger la traduction du markdown et d'y mettre le code qu'on souhaite.
117
117
118
-
Le hook utilisé par défaut est le suivant :
118
+
Le hook utilisé par défaut est le suivant :
119
119
120
120
```go
121
121
<img src="{{ .Destination | safeURL }}"
···
130
130
131
131
```
132
132
133
-
aura pour équivalent HTML le code suivant :
133
+
aura pour équivalent HTML le code suivant :
134
134
135
135
```html
136
136
<img src="/photo.jpg" alt="Une image">
···
154
154
La magie a lieu sur les premières lignes.
155
155
Je redimensionne l'image à la taille maximale de 820px (ou moins si l'image est plus petite).
156
156
157
-
Le HTML généré par Hugo pour mes images est maintenant le suivant :
157
+
Le HTML généré par Hugo pour mes images est maintenant le suivant :
158
158
159
159
```html
160
160
<img src="/photo_hu_ed495de5ae801a42.webp" width="820" height="540" alt="Une image">
···
186
186
{{ with $.Title }}title="{{ . }}"{{ end }}>
187
187
```
188
188
189
-
Le code HTML généré ressemble donc à ça :
189
+
Le code HTML généré ressemble donc à ça :
190
190
191
191
```html
192
192
<img srcset="/photo_hu_ed495de5ae801a42.webp 820w,
···
237
237
Cependant, la compression se fait en utilisant un peu de CPU à la volée.
238
238
Il est alors intéressant de pré-compresser les ressources statiques à la phase de build pour économiser un peu de CPU.
239
239
240
-
Une directive Caddy permet de servir des fichiers statiques pré-compressés : `precompressed`.
240
+
Une directive Caddy permet de servir des fichiers statiques pré-compressés : `precompressed`.
241
241
Caddy va alors rechercher des variantes compressées des fichiers, sous la forme de fichiers sidecar.
242
242
À côté de chaque fichier statique, il faut donc générer les variantes compressées et les nommer en utilisant les extensions `.gz`, `.br` et `.zst` par exemple.
243
243
244
244
Hugo ne permet pas de générer ces variantes compressées de lui-même, donc je dois utiliser un petit script qui s'exécutera en fin de la phase de build.
245
245
246
-
J'ai donc créé un script `precompress` dans mon fichier `mise.toml` :
246
+
J'ai donc créé un script `precompress` dans mon fichier `mise.toml` :
247
247
248
248
```toml
249
249
[tasks.build]
···
276
276
245 files compressed : 80.99% ( 83.3 MiB => 67.4 MiB) B ==> 98%^T
277
277
```
278
278
279
-
On peut valider que les fichiers buildés sont précompressés comme souhaité, avec les extensions `.gz` et `.zst` :
279
+
On peut valider que les fichiers buildés sont précompressés comme souhaité, avec les extensions `.gz` et `.zst` :
280
280
281
281
```bash
282
282
$ ls public/
···
305
305
306
306
> On a encore un joli gain avec les compressions `gzip` et `zstd`, de l'ordre de 75%.
307
307
308
-
Pour ensuite servir les fichiers précompressés, il faut ajouter la [directive `precompressed`](https://caddyserver.com/docs/caddyfile/directives/file_server#precompressed) dans le `Caddyfile` :
308
+
Pour ensuite servir les fichiers précompressés, il faut ajouter la [directive `precompressed`](https://caddyserver.com/docs/caddyfile/directives/file_server#precompressed) dans le `Caddyfile` :
309
309
310
310
```Caddyfile
311
311
# Clever Cloud needs us to listen on port 8080
···
336
336
Server: Caddy
337
337
```
338
338
339
-
et la même commande après la compression :
339
+
et la même commande après la compression :
340
340
341
341
```bash
342
342
$ curl --compressed --head https://codeka.io
···
377
377
Strict-Transport-Security: max-age=63072000
378
378
```
379
379
380
-
Dans mon Caddyfile, rien de plus simple, j'ajoute le header `Strict-Transport-Security` :
380
+
Dans mon Caddyfile, rien de plus simple, j'ajoute le header `Strict-Transport-Security` :
381
381
382
382
```Caddyfile
383
383
# Clever Cloud needs us to listen on port 8080
···
447
447
La directive `img-src` permet d'autoriser les images qui proviennent de shields.io, que j'utilise pour afficher quelques badges.
448
448
Enfin, la directive `default-src` sert de fallback pour toutes les directives possibles, et indique que seul mon site est une source autorisée.
449
449
450
-
## Et ça donne quoi ?
450
+
## Et ça donne quoi ?
451
451
452
-
Après toutes ces modifications, voici les résultats de l'analyse LightHouse :
452
+
Après toutes ces modifications, voici les résultats de l'analyse LightHouse :
453
453
454
-
Voici les scores de mon site à l'heure actuelle, pour une navigation mobile et desktop :
454
+
Voici les scores de mon site à l'heure actuelle, pour une navigation mobile et desktop :
455
455
456
456
457
457
···
459
459
460
460
96 et 100 en performance sur la page d'accueil, on est mieux que les 91 initiaux, mission accomplie ici.
461
461
462
-
Pour la page qui avait un résultat vraiment mauvais, le résultat est un peu plus mitigé :
462
+
Pour la page qui avait un résultat vraiment mauvais, le résultat est un peu plus mitigé :
463
463
464
464
465
465
···
468
468
Les scores initiaux étaient de 43 en mobile et de 58 en desktop.
469
469
En fouillant un peu, ce sont les `iframes` qui plombent les perfs, donc je n'y pourrai pas grand chose.
470
470
471
-
Côté headers de sécurité, j'ai atteint la perfection avec le joli score de 105/100, soit un A+, à la place du D- initial :
471
+
Côté headers de sécurité, j'ai atteint la perfection avec le joli score de 105/100, soit un A+, à la place du D- initial :
472
472
473
473
474
474
···
486
486
487
487
## Liens et références
488
488
489
-
* Documentation de Hugo :
489
+
* Documentation de Hugo :
490
490
* Configuration de l'[optimisation des images avec Hugo](https://gohugo.io/configuration/imaging/#quality)
491
491
* La [méthode Resize de Hugo](https://gohugo.io/methods/resource/resize/)
492
492
* Les [formats supportés par Hugo](https://gohugo.io/functions/images/process/#format)
493
493
* [Le hookimage de Hugo](https://gohugo.io/render-hooks/images/#article)
494
494
495
-
* Documentation de Caddy :
495
+
* Documentation de Caddy :
496
496
* [La directive `encode`](https://caddyserver.com/docs/caddyfile/directives/encode#syntax)
497
497
* [La directive `precompressed`](https://caddyserver.com/docs/caddyfile/directives/file_server#precompressed)
498
498
499
-
* Documentation MDN :
499
+
* Documentation MDN :
500
500
* [Responsive Images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
501
501
* [MDN HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
502
502
* [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy)
···
505
505
506
506
* [Precompressing Content With Hugo and Caddy](https://scottstuff.net/posts/2025/03/09/precompressing-content-with-hugo-and-caddy/)
507
507
508
-
* L'excellent talk de Antoine Caron et Hubert Sablonière : [La compression Web : comment (re)prendre le contrôle ?](https://www.youtube.com/watch?v=LWd0hr6ljZk)
508
+
* L'excellent talk de Antoine Caron et Hubert Sablonière : [La compression Web : comment (re)prendre le contrôle ?](https://www.youtube.com/watch?v=LWd0hr6ljZk)
509
509
510
-
* L'article de Denis Germain, qui a fait la même chose que moi cette semaine : [Optimisation webperf : AVIF et pré-compression pour le blog](https://blog.zwindler.fr/2026/02/19/optimisation-webperf-avif-precompression/)
510
+
* L'article de Denis Germain, qui a fait la même chose que moi cette semaine : [Optimisation webperf : AVIF et pré-compression pour le blog](https://blog.zwindler.fr/2026/02/19/optimisation-webperf-avif-precompression/)