La Tartine #80
Le Web Almanac 2024 confirme : la moitié du JavaScript chargé ne sert à rien !
Hello la team 👋,
Cela faisait presque 2 ans que j’avais cette idée en tête, mais je savais qu’elle demanderait pas mal de développement, alors je ne l’avais jamais vraiment priorisée. Finalement grâce à v0, en quelques soirées et deux week-ends, j’ai enfin réussi à lancer Pick&Connect, un comparateur de CMS Headless.
v0 de Vercel m’a offert un moyen ultra-efficace de poser les bases et de déployer rapidement une première version fonctionnelle.
L’idée derrière Pick&Connect est simple : il existe de plus en plus de CMS Headless, chacun avec ses spécificités. Choisir le plus adapté en fonction de notre besoin business et technique peut vite devenir un casse-tête.
Avec Pick&Connect, on peut comparer facilement les solutions en fonction des fonctionnalités, du pricing, de l’expérience éditeur et développeur.
N’hésitez pas à me faire vos retours 🙏 pour que j’améliore l’outil.
Autre actu : j’ai rencontré Pierre Burgy, le CEO de Strapi, qui était de passage à Toulouse. C’était vraiment top de pouvoir échanger avec le fondateur d’une solution phare de l’écosystème headless. Il m’a parlé des gros chantiers en cours de leur côté.
Je peux vous dire que Strapi continue de faire bouger l’écosystème headless, et ils ont pas mal de belles choses en préparation.
D’ailleurs, ils dévoileront toutes leurs nouveautés lors de la Strapi Conf, qui aura lieu le 13 mai à Paris.
Aujourd’hui dans la Tartine, on s’intéresse au Web Almanac qui vient de sortir son dernier chapitre sur Javascript !
Avant de démarrer un dernier petit mot sur React Paris qui est déjà la semaine prochaine !
Bonne lecture 📖
📢 React Paris : l'événement à ne pas manquer !
Si vous bossez avec React, Next.js, Remix ou Astro, React Paris est clairement LE rendez-vous à ne pas rater cette année. 🎤🔥
📅 Ça se passe le 20 et 21 mars 2025
📍 À Paris & Online
🎟️ Conférences, networking et workshops autour des dernières avancées en React !
Au programme : React Server Components, AI, Design Systems, Performance, State Management, Remix, TypeScript avec des Speakers reconnus dans l’écosystème.
Vous pouvez bénéficier de -30% sur votre billet avec le code tartine-30 🎟️✨ (Valable sur les tickets Regular Birds, Online et Workshops.)
Toutes les infos sont ici 👉 React Paris
J’y serai, faites moi signe si vous y aller 😉 !
🍓 La douceur du moment
Une actu sélectionnée avec soin à déguster tranquillement entre deux commits.
JavaScript en 2024 : toujours plus lourd, mais quelques optimisations en vue
JavaScript est partout sur le web, mais son utilisation excessive a un coût. Cette année encore, son poids et son impact sur la performance continuent d’augmenter, même si certaines bonnes pratiques commencent à se généraliser.
Le JavaScript devient de plus en plus lourd
Le poids médian des scripts a bondi de 14 % en un an, atteignant 558 kB sur mobile et 613 kB sur desktop.
Problème : près de 44 % du JavaScript chargé n’est jamais utilisé lors du rendu. Cela signifie que presque la moitié du code téléchargé consomme inutilement de la bande passante et du CPU.
Le nombre de requêtes JavaScript continue d'augmenter
Une page médiane envoie 22 requêtes JS sur mobile et 23 sur desktop.
Dans le top 10 % des sites les plus gourmands, on monte à 68 requêtes sur mobile et 70 sur desktop.
Plus de requêtes = plus de concurrence sur le thread principal = pages plus lentes et interactions moins fluides.
Solution : Limiter le nombre de requêtes en utilisant l'import dynamique, les Web Workers, et en chargeant les scripts de manière asynchrone (async, defer).
Compression : Brotli dépasse enfin Gzip !
Bonne nouvelle : la majorité des sites utilisent maintenant Brotli pour compresser leurs fichiers JS.
Brotli représente 45 % des requêtes JavaScript, contre 41 % pour Gzip.
Résultat : des fichiers plus légers et des chargements plus rapides pour les utilisateurs.
Mauvaise nouvelle : 60 % des scripts tiers utilisent encore Gzip, laissant des gains de performance sur la table.
React progresse, mais jQuery reste ultra-dominant
React est maintenant utilisé sur 10 % des sites (+25 % en un an), ce qui est une belle progression.
Mais jQuery reste imbattable**,** avec 74 % de présence sur les sites web.
Son utilisation massive, notamment via WordPress, le maintient en tête malgré son âge avancé.
Les nouvelles applications partent souvent sur React, mais le web reste dominé par des stacks plus anciennes, et jQuery est encore loin d’être mort.
Ce qu’il faut retenir
L’usage de JavaScript continue de croître, mais les efforts pour en limiter l’impact aussi. Les développeurs adoptent de plus en plus de bonnes pratiques pour trouver un équilibre entre performance et fonctionnalités comme :
la minification
la compression Brotli
une meilleure gestion des dépendances
Cependant, cette dépendance croissante pose de vrais défis pour la performance et l’expérience utilisateur. Réduire l’exécution inutile des scripts et optimiser leur chargement restent des enjeux majeurs. À mesure que la plateforme web évolue, l’adoption des APIs natives et l’amélioration des frameworks en matière de performance seront essentielles.
Pour inverser la tendance, un véritable changement nécessitera une prise de conscience collective, de meilleurs outils et des bonnes pratiques plus largement adoptées. D’ici là, il faut absolument rester attentif à l’optimisation de la livraison des scripts, pour permettre un web rapide, fluide et accessible à tous. 🚀
🥪 JamSnack
Une sélection d’articles et de ressources tech à grignoter sans modération.
Cet article annonce un move de titan : Anders Hejlsberg, le lead architecte de Typescript et son équipe portent le compilateur TypeScript vers Go, permettant des performances jusqu’à 10 fois plus rapides grâce à une meilleure gestion de la mémoire et du parallélisme. Ce choix stratégique marque un tournant majeur qui va permettre des builds bien plus rapides, une consommation mémoire réduite et une expérience développeur nettement améliorée.
Anders Hejlsberg
Lower prices and greater flexibility with improved Strapi Cloud pricing
Strapi présente sa refonte des prix de Strapi Cloud. Plus de flexibilité et d’accessibilité, avec une nouvelle tarification dès 15 $/mois. La bonne nouvelle est la suppression des limites ( CMS Seats / nombre d’entrées dans le CMS, nombre d’emails ) qui étaient présents sur l’ancien pricing. Le stockage d’assets a été également augmenté sur les nouveaux plans.
Une bonne nouvelle pour les agences, la nouvelle structure tarifaire facilite la collaboration avec des coûts plus clairs et une facturation prévisible.
Niklas Winkels
How much traffic can a pre-rendered Next.js site really handle?
Cet article analyse la capacité réelle d’un site Next.js pré-généré à gérer un pic de trafic, en s'appuyant sur des tests de charge et une expérience avec Hacker News. L’auteur montre que, contrairement aux attentes, un simple VPS peut rapidement atteindre ses limites, alors qu’un serveur dédié offre des performances bien supérieures, et confirme avec des chiffres que la pré-génération des pages est bien plus scalable que le rendu côté serveur (SSR).
Martijn Hols
Cet article annonce la sortie de Nuxt UI v3, une refonte majeure qui améliore l’accessibilité, la compatibilité avec Tailwind CSS v4 et l’intégration complète avec Vue. Il introduit un nouveau système de design avec des tokens sémantiques, une compatibilité étendue à tous les projets Vue, une meilleure prise en charge de TypeScript et un large éventail de composants.
Sébastien Chopin, Hugo Richard, Benjamin Canac
Les nouveautés de Astro 5.5 avec une meilleure prise en charge des outils de création de diagrammes, une compatibilité Markdown améliorée et des type-safe experimental sessions
Matt Kane
Cet article sur le blog de Remix présente Split Route Modules, une nouvelle fonctionnalité expérimentale de React Router v7.2.0 qui optimise le chargement des modules de route en les scindant automatiquement, réduisant ainsi les temps d’attente lors des navigations. Bien que cette amélioration ne soit pas encore stable pour la production, elle promet des gains de performance significatifs en permettant le téléchargement et l’exécution indépendants des loaders et des composants.
Mark Dalgleish
Hygraph compare les page builders, qui permettent de créer des sites web sans code via des templates, et les headless CMS, qui offrent une gestion de contenu flexible et évolutive pour une diffusion omnicanale. Tandis que les page builders conviennent aux petites entreprises et projets simples, les headless CMS sont plus adaptés aux entreprises en croissance cherchant un contrôle total sur le design, la scalabilité et l'intégration avec d'autres systèmes.
Katie Lawson
🍯 Le nectar du contenu
Une sélection de vidéos, podcasts et conférences tech à savourer.
📺 TypeScript just changed forever Theo - t3․gg
📺 A 10x faster TypeScript - Microsoft Developer - Anders Hejlsberg
📺 React/Solid-JS Module Federation on TanStack! Jack Herrington
📺 Storyblok's AI SEO Plugin - Walkthrough Storyblok
📺 Building AI platforms on Vercel Lee Robinson - Vercel
🎙️ Les news web dev pour mars 2025 - Double Slash
Conférences à venir :
React Paris - 20 et 21 mars 2025 à Paris
dotJS - 3 avril 2025 à Paris
Strapi Conf - 13 mai 2025 à Paris
React Summit 13 & 17 juin 2025 à Amsterdam
JS Nation 12 & 16 juin 2025 à Amsterdam
Reactnorway - 13 juin à Oslo
Partage la Tartine 🍞
Si tu penses que cette édition pourrait plaire à une personne de ton entourage, n’hésite pas à partager cet e-mail ou à cliquer sur le bouton ci-dessous 👇
👉 Pour suivre nos aventures sur Youtube : https://www.youtube.com/@Pickbeam
👉 Pour prendre rdv avec Pickbeam pour un projet web : https://pickbeam.com
PS : N’oublie pas de mettre un like en bas ou en haut de cet email si ça t’a plu.