Alsacreations.com - Actualités - Archives (septembre 2026)
Les dernières actualités d'Alsacreations.com
La semaine dernière s'est tenue l'édition 2026 de Paris Web. Quel plaisir de monter sur scène cette année pour parler de typographie et d'intégration web, et de profiter de l'événement pour échanger et continuer d'apprendre ! Voici un résumé de ces journées intenses.
Une édition (encore) portée par la bienveillance
Ce que je retiens particulièrement de cette année, c'est l'ambiance générale. L'événement s'est montré très ouvert et résolument inclusif. La bienveillance était au rendez-vous à chaque instant, ce qui a rendu les discussions d'autant plus constructives. Mais pour les habitués de Paris Web, ce n'est pas une nouveauté !
Les thématiques abordées étaient globalement moins techniques que lors des éditions précédentes. Cela n'a pourtant rien enlevé à leur pertinence, car chaque prise de parole était portée par la passion des intervenantes et intervenants.
Le dilemme du programme
Du côté de l'organisation, le nouveau format m'a un peu déstabilisé. Avec une seule salle de conférences face à trois salles d'ateliers, le choix était souvent difficile. Participer à un atelier impliquait inévitablement de manquer au moins deux conférences en parallèle. J'ai tout de même pu suivre l'atelier Webperf : apprenons à maîtriser les outils de Jean-Pierre Vincent, particulièrement instructif, même s'il a fallu faire des concessions sur la suite du planning.
Inclusion, accessibilité et introspection
Malgré ce programme serré, les sessions auxquelles j'ai pu assister étaient d'une grande richesse.
L'accessibilité a été traitée sous plusieurs angles. Nous avons eu droit à des retours d'expérience concrets avec Grise Bouille : de l'a11y dans un blog BD, ainsi qu'à une analyse budgétaire très pragmatique grâce à Le juste prix (ou ce que l'accessibilité coûte pour de vrai). Le témoignage Comment l'IA m'a permis de dépasser mon handicap de Sophie Drouvroy a également apporté un regard essentiel et très personnel sur les outils d'assistance.
Au-delà de l'accessibilité technique, c'est l'inclusion de façon plus large qui a été questionnée. Le programme a rappelé que l'inclusion démarre dès la constitution des équipes (Concevoir entre les cultures : l'inclusion commence dans l'équipe), tout en soulignant nos biais de conception (Ce que l'écran ne voit pas : vulnérabilité et exclusion systémique). Des sessions marquantes comme Le numérique, à la fois allié et barrière pour les personnes trans ou Libres et citoyennes ont parfaitement illustré la complexité (et les écueils) de nos environnements numériques.
Enfin, nos habitudes de conception et d'analyse ont aussi été challengées. J'ai pu découvrir le fonctionnement interne du fédivers (Mastodon 5.0 Behind the scenes), m'interroger sur la standardisation de nos interfaces (Ce que nous avons perdu avec les design systems), et revoir ma méthode d'investigation des bugs (Développeur ou chercheur : pourquoi votre prochain bug nécessite une blouse blanche).
En résumé, cette édition 2026 de Paris Web a fait un bien fou. Elle nous a rappelé la raison principale pour laquelle nous faisons ce métier : pour les humains qui se trouvent derrière l'écran.
Et pour les personnes atteintes de "pédanterie grammaticale" comme moi : oui, j'ai pensé à insérer une espace fine insécable avant les doubles ponctuations de cet article ;)
Ah et… rendez-vous l'année prochaine !
Nuxt est un framework que nous apprécions pour son efficacité dans de multiples situations, projets de sites ou d'applications web. Il comporte nativement des aides bien agréables pour contrôler plus finement la performance et la façon dont les composants sont compilés et chargés, notamment Lazy et ClientOnly.
Ce ne sont pas les seules approches possibles, mais souvent les plus rapides à intégrer, et parfois combinées.
Préfixer un composant par Lazy
Exemple :
<LazyMonComposant />
Le préfixe Lazy active le code-splitting automatique via des imports dynamiques (defineAsyncComponent).
- Poids du bundle : Réduit. Le code du composant n'est plus inclus dans le bundle JavaScript initial. Nuxt le isole dans un chunk séparé.
- Point fort : Le bundle initial étant plus léger, le navigateur télécharge et analyse le JavaScript plus rapidement (amélioration du FCP et du TTI).
- Fonctionnement : Si le composant est rendu lors du SSR initial, son chunk est préchargé en parallèle. S'il est masqué par un
v-ifà l'état initial, le code n'est téléchargé sur le client qu'au moment où la condition passe àtrue.
Dans les outils de bundling comme Vite, Webpack, Rollup, un chunk désigne un fichier généré contenant une partie du code de l'application ou du site. Cela permet de :
- Diviser le code en morceaux pour optimiser le chargement (ex. : code splitting).
- Charger dynamiquement et de façon asynchrone des parties de l'application, c'est à dire ne charger qu'à la demande certaines fonctionnalités quand on en a réellement besoin, et pas par défaut.
Encadrer par <ClientOnly>
Exemple :
<ClientOnly>
<MonComposant/>
</ClientOnly>
<ClientOnly> désactive le rendu côté serveur (SSR) pour la partie du code ciblée. Comme son nom l'indique, le code est destiné exclusivement au "client" c'est-à-dire au navigateur.
- Poids du bundle : Aucun impact. Le composant reste inclus dans le bundle JavaScript principal. Son code est toujours téléchargé et évalué lors de la charge initiale de la page.
- Point fort : Allège le travail du serveur lors de la génération du HTML (gain léger sur le TTFB) et évite les erreurs d'hydratation si le composant utilise des API navigateur (
window,document). - Inconvénient : Le contenu n'existe pas dans le HTML initial. Cela peut provoquer un décalage visuel (CLS ou Cumulative Layout Shift) pendant le rendu client, et le contenu encadré n'est pas indexable par le SEO.
Combiner les deux !
Combiner les deux permet de différer à la fois le SSR et le chargement du JavaScript.
- Poids du bundle : Gain optimal : le composant est exclu du bundle principal (grâce à
Lazy) et n'est pas requis pour le rendu serveur (grâce à<ClientOnly>). - Cas d'usage idéal : Parfait pour les composants lourds, interactifs et non critiques pour le SEO (ex. : un éditeur WYSIWYG, des graphiques type Chart.js, ou une carte interactive).
- ð Résultat : Le serveur répond vite, la page initiale s'affiche immédiatement avec un bundle minimal, puis le composant charge son chunk séparé en arrière-plan sur le navigateur.
Pour éviter un saut visuel (CLS) le temps que le chunk soit téléchargé et exécuté, il faut utiliser le slot #fallback ou #placeholder de <ClientOnly>.
Comparatif
| Approche | Poids bundle initial | SSR (Serveur) | Chargement du JS |
|---|---|---|---|
| Composant standard | Inclus | Rendu sur le serveur | Immédiat |
Lazy |
Exclu (chunk séparé) | Rendu si présent au load | À la volée (ou préchargé) |
<ClientOnly> |
Inclus | Ignoré | Évalué au montage client |
ClientOnly + Lazy |
Exclu (chunk séparé) | Ignoré | Téléchargé au montage client |