# Web Performance · Veille technologique [Source canonique]() Mesure et amélioration du chargement, du rendu et de la réactivité des applications web. ## [Modern Web Guidance : des pratiques web actuelles pour les agents de code]() Modern Web Guidance fournit aux agents de code des recommandations expertes sur les API du navigateur, CSS, performance et accessibilité, pour les orienter vers des solutions natives plutôt que vers des patterns legacy. Le dépôt rassemble 232 fonctionnalités et 186 cas d’usage, sous forme de skills installables dans plusieurs agents. Le CLI recherche un guide en local, puis l’injecte dans le contexte de l’agent. Les consignes intègrent compatibilité Baseline, fallbacks ciblés et évaluation automatisée ; le projet est annoncé en preview. 2026-11-01 · [Markdown]() · [Ressource originale]() ## [Next.js : une skill IA analyse et réduit les imports JavaScript]() Next.js 16.4 fournit une skill d’agent IA qui analyse le graphe des modules et des chunks Turbopack pour repérer les imports qui alourdissent le JavaScript livré. Elle peut notamment détecter qu’un import statique ailleurs dans le bundle annule le chargement différé d’un composant, puis proposer des changements à examiner avant de les appliquer. L’analyseur compare aussi des snapshots et filtre le code chargé au rendu initial. Vercel rapporte près de deux mégaoctets de JavaScript compressé économisés sur v0 et vercel.com ; les corrections ont été vérifiées sur des déploiements preview. L’outil requiert Turbopack, le bundler par défaut depuis Next.js 16. 2026-10-30 · [Markdown]() · [Ressource originale]() ## [Vinext 1.4 : moins de travail serveur et une hydratation plus rapide]() Vinext 1.4 réduit le travail à plusieurs étapes du rendu : les layouts App Router s’exécutent une seule fois par requête, le prefetch des routes dynamiques ne génère plus la page entière et les chunks nécessaires à l’hydratation se compilent en arrière-plan dans Chrome récent. Sur le benchmark Hacker News, l’éditeur mesure 31,1 ms de CPU par requête, contre 54,4 ms en 1.3 et 33,7 ms pour Next.js. La version synchronise aussi la génération du HTML et du payload RSC en cache. Les résultats restent toutefois dépendants du scénario : sur un prototype de site éditorial, Next.js peint plus vite et consomme moins de CPU par requête. Le test de TanStack Redact révèle un autre compromis : moins de JavaScript téléchargé, mais une hydratation nettement plus coûteuse sur les pages chargées. 2026-10-30 · [Markdown]() · [Ressource originale]() ## [TanStack Redact réduit le runtime client de React]() TanStack Redact 0.2.0 remplace React et React DOM dans le navigateur sans modifier le code de l’application. Ses intégrations stables couvrent TanStack Start, Vite, Vinext et Next.js ; dans ces deux derniers frameworks, React reste chargé du rendu serveur tandis que Redact gère l’hydratation et le rendu client. Les mesures fournies par TanStack montrent des réductions de bundle allant de 20,4 % à 70,5 % sur leurs applications de référence, mais ces gains varient selon le projet. Le compromis est concret : Redact rend de façon synchrone, sans time slicing ni rendu interruptible de React. Un rendu lourd peut donc retarder les interactions ; la compatibilité et les écrans les plus chargés méritent d’être vérifiés dans chaque application. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Redact : un runtime React allégé, avec un rendu synchrone]() L’expérience de projection React pilotée par l’IA de Tanner Linsley est devenue un projet TanStack utilisé en production. Redact propose un runtime plus léger, compatible avec React et déjà fonctionnel avec Start, Next.js, Vinext et Vite. Côté serveur, React continue de gérer le SSR et les Server Components. Le compromis se situe dans le rendu : Redact travaille de façon synchrone, sans le time slicing de React. Comme le reconnaît le billet, un rendu lourd peut encore retarder les interactions. Le gain de légèreté s’accompagne donc d’une limite à prendre en compte pour les interfaces exigeantes en réactivité. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [The Website Specification : les exigences techniques d’un site web]() Cette spécification rassemble 178 sujets sur les responsabilités techniques d’un site : HTML, accessibilité, sécurité, performance, SEO, vie privée et résilience, entre autres. Chaque sujet explique son importance et sa mise en œuvre, avec des éléments classés comme requis, recommandés, facultatifs ou à éviter. La checklist transforme ces critères en vérifications oui/non, ce qui aide à repérer les lacunes puis à les contrôler après correction. Fondée sur des sources primaires et indépendante des plateformes, la spécification est aussi consultable par les agents via un serveur MCP en lecture seule, sans authentification pour les outils de référence. 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Fallback Font Generator : réduire le CLS des polices]() Cet outil ajuste une police système pour qu’elle ressemble davantage à la police de marque pendant le chargement. Il génère les règles `@font-face` nécessaires, notamment `size-adjust`, `ascent-override`, `descent-override` et `line-gap-override`, à partir d’un aperçu comparatif et de réglages visuels. L’approche cible le décalage de mise en page causé par les différences de métriques entre polices. Le CSS obtenu peut être copié dans le projet ; la page précise toutefois que l’outil n’est pas pris en charge par Safari. 2026-10-27 · [Markdown]() · [Ressource originale]() ## [Next.js 16.4 : accélérer les navigations sans tout précharger]() Pour réduire les skeletons dans v0, l’équipe combine le Partial Prefetching de Next.js avec des règles de cache adaptées aux données publiques ou personnalisées. Les tests Playwright `instant()` vérifient que le contenu prioritaire est déjà disponible au clic, et restent comme garde-fous en CI. Le préchargement dépend aussi de l’intention : dans les grandes grilles, les détails ne sont chargés qu’au survol, au focus ou au toucher. Ce réglage répond à une hausse de 2,9× des requêtes de préchargement ; le bilan global rapporte des coûts quotidiens en baisse, sans attribuer cette évolution au seul refactoring. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [Une checklist front-end de plus de 350 règles]() Front-End Checklist organise plus de 350 règles en parcours de vérification pour l’accessibilité, le CSS, la performance, la sécurité, la vie privée et le SEO. Le site propose des listes guidées pour les lancements et les audits, et expose les mêmes standards aux agents via MCP pour structurer les revues de code. 2026-09-18 · [Markdown]() · [Ressource originale]() ## [Patterns.dev : comprendre les motifs JavaScript et performance web]() Patterns.dev documente des motifs de conception JavaScript et des techniques de performance pour les applications web. Les exemples aident à relier les choix d’architecture à leurs effets sur le chargement et le rendu. 2026-05-10 · [Markdown]() · [Ressource originale]() ## [Les bonnes pratiques React de Vercel organisées pour les agents]() Vercel structure ses recommandations autour des causes majeures de lenteur : waterfalls, bundles et rendus inutiles. L’ordre de priorité aide les agents à traiter les problèmes les plus coûteux avant les micro-optimisations. 2026-01-25 · [Markdown]() · [Ressource originale]() ## [React Intersection Observer : suivre l’entrée d’éléments dans le viewport]() La bibliothèque expose Intersection Observer via des hooks et composants React. Elle réutilise les observers compatibles et fournit des mocks pour tester lazy loading et animations au scroll. 2025-11-06 · [Markdown]() · [Ressource originale]() ## [IPX : redimensionner et convertir les images depuis leur URL]() IPX combine sharp et svgo pour transformer des images locales ou issues de domaines autorisés. Taille, format et qualité peuvent être définis dans l’URL de la ressource. 2025-09-07 · [Markdown]() · [Ressource originale]() ## [ForesightJS : anticiper les navigations pour déclencher le prefetch]() ForesightJS observe trajectoire du curseur, tabulation et défilement pour estimer les prochains éléments visés. Il permet de commencer le chargement avant le clic ou le contact tactile. 2025-08-17 · [Markdown]() · [Ressource originale]() ## [Paraglide JS : compiler les traductions en fonctions typées]() Paraglide génère des fonctions de message typées et des traductions compatibles avec le tree shaking. Son intégration avec plusieurs frameworks permet de partager une approche i18n côté client et serveur. 2025-03-23 · [Markdown]() · [Ressource originale]() ## [Subfont : générer des sous-ensembles de polices adaptés aux pages]() Subfont analyse les caractères réellement utilisés puis génère des fichiers de police réduits. Il ajoute aussi des indications de préchargement pour raccourcir le chemin critique d’affichage du texte. 2025-02-25 · [Markdown]() · [Ressource originale]() ## [Transformer des images Directus avec le provider Unpic]() Ce guide montre comment générer des URL d’images Directus ou utiliser le provider dans un composant Unpic. Les options spécifiques au CMS peuvent être transmises sans changer l’API du composant. 2025-01-23 · [Markdown]() · [Ressource originale]() ## [React Scan : repérer visuellement les rendus coûteux]() React Scan signale les composants à examiner pour améliorer les performances d’une application React. Son intégration par script ou package facilite un premier diagnostic sans réécrire les composants. 2024-11-24 · [Markdown]() · [Ressource originale]() ## [ThumbHash : encoder un aperçu d’image compact avec transparence]() ThumbHash représente un aperçu d’image dans quelques données faciles à stocker avec le contenu. Il encode notamment le ratio et la transparence pour améliorer l’affichage avant le chargement de l’image complète. 2024-09-14 · [Markdown]() · [Ressource originale]() ## [BlurHash : afficher un aperçu pendant le chargement des images]() BlurHash transforme une image en une courte chaîne représentant un aperçu flouté. Le client peut l’afficher immédiatement pour éviter les cases vides pendant le téléchargement. 2024-09-14 · [Markdown]() · [Ressource originale]() Page 1 / 2 [Suivant]()