Web Performance

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é.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.