Modern Web Guidance est désormais stable. Améliorez vos agents de codage grâce aux bonnes pratiques de développement Web validées par des experts. Lire l'annonce

Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Modern Web Guidance 1.0 : l'expertise de la plate-forme Web qui manque à votre agent de codage

Philip Walton

Date de publication : 10 novembre 2026

Dans cette nouvelle ère du développement Web agentique, les développeurs attendent de leurs agents de codage qu'ils soient des experts du développement Web. Bien que les derniers modèles de codage de pointe soient très performants et puissent généralement produire un code fonctionnel, si vous demandez à un expert en développement Web d'examiner le code généré par l'IA, il trouvera presque toujours des moyens de le rendre plus rapide, plus accessible ou plus sécurisé.

Chrome investit massivement dans l'avenir du développement Web agentique. Pour relever ce défi, nous avons présenté une preview anticipée de Modern Web Guidance lors de la conférence Google I/O en mai. Modern Web Guidance est un ensemble de compétences qui intègrent l'expertise de la plate-forme Web, les bonnes pratiques et les données de compatibilité des navigateurs directement dans vos agents de codage.

Aujourd'hui, nous sommes heureux d'annoncer la sortie de la version stable 1.0 de Modern Web Guidance, qui inclut :

Nouveau workflow de modernisation qui analyse votre codebase existant pour aider votre agent à identifier des opportunités de modernisation sécurisée.
Base de données de guides étendue ciblant des centaines de lacunes de connaissances vérifiées de l'IA avec des solutions multi-navigateurs validées par des experts.
Examen approfondi par des experts humains pour chaque guide, y compris l'approbation des responsables techniques du domaine de contenu et un examen dédié à l'accessibilité de nos guides destinés aux utilisateurs.
Couverture complète de l'évaluation dans tous nos guides, avec un tableau de bord d'évaluation public montrant les améliorations mesurables par rapport aux agents sans Modern Web Guidance.

Avec la version 1.0, nous sommes également ravis d'annoncer que Modern Web Guidance devient un projet multi-navigateur, avec Firefox et Edge qui rejoignent Chrome pour prendre en charge, améliorer la compatibilité multi-navigateur et contribuer au projet. En nous appuyant sur notre travail partagé avec Baseline, notre objectif est de veiller à ce que toute personne codant avec un agent puisse profiter pleinement de la puissance et des capacités de la plate-forme Web moderne.

Quels que soient les modèles ou les harnais d'agent que vous utilisez, si vous développez pour le Web, Modern Web Guidance doit faire partie de votre workflow agentique.

Pour installer Modern Web Guidance, exécutez cette commande à partir du répertoire de votre projet :

npx modern-web-guidance@latest install

Si vous avez déjà installé une version antérieure, vous pouvez passer à la version 1.0 en exécutant la commande suivante :

npx modern-web-guidance@latest update

Pour obtenir des instructions d'installation supplémentaires ou en savoir plus, consultez la documentation sur Modern Web Guidance ou regardez cette vidéo pour une brève présentation :

Pourquoi les développeurs et les entreprises devraient utiliser Modern Web Guidance

Il est indéniable que les agents de codage ont aidé les développeurs à écrire du code plus rapidement que jamais. Mais dans un monde où tout le monde utilise des agents de codage, la vitesse n'est plus un avantage concurrentiel.

De nos jours, il est plus important que jamais de se démarquer sur des facteurs fondamentaux tels que la facilité d'utilisation et la qualité de l'expérience. Voici quelques exemples de ce que Modern Web Guidance peut faire :

Renforcez les bonnes pratiques que les modèles oublient souvent.

Bien que les modèles de codage de pointe maîtrisent de nombreuses bonnes pratiques, nos évaluations montrent qu'il existe encore un certain nombre de domaines importants dans lesquels ils ne sont pas à la hauteur, par exemple :

Accessibilité : gestion du focus clavier et des éléments inertes, prise en charge de l'option "Réduire les animations" et validation des formulaires accessibles.
Expérience utilisateur : gestes de balayage et de pression, transitions de boîtes de dialogue et de popovers, et implémentations de thèmes clairs/sombres.
Performances : planification des tâches du thread principal, isolation du rendu hors écran et prévention des décalages de mise en page.
Sécurité : nettoyage HTML sécurisé, règles de sécurité du contenu strictes et gestion des identifiants par clé d'accès.

Il est particulièrement important de respecter les bonnes pratiques d'accessibilité, car des erreurs telles qu'un mauvais ARIA peuvent rendre une page moins accessible que si elle n'avait pas d'ARIA du tout. Pour la version 1.0, nos guides destinés aux utilisateurs ont été examinés et testés avec de vraies technologies d'assistance par des experts en accessibilité qui les utilisent au quotidien.

Utiliser la meilleure fonctionnalité Web pour la tâche

Les modèles d'IA sont très doués pour trouver comment faire fonctionner quelque chose avec JavaScript, mais dans de nombreux cas, il existe des fonctionnalités HTML ou CSS qui peuvent faire la même chose avec beaucoup moins de code. Comme ils sont gérés par le navigateur, ils sont généralement plus performants et offrent des fonctionnalités d'accessibilité. Exemple :

Fonctionnalités permettant d'animer les popovers et les boîtes de dialogue
Fonctionnalités permettant d'améliorer les interactions basées sur le défilement et le balayage
De meilleures API pour des transitions de page fluides

Les nouvelles fonctionnalités peuvent également améliorer l'expérience d'un site d'une manière qui compte pour les utilisateurs. Exemple :

Clés d'accès et WebAuthn : pour des expériences de connexion plus rapides et plus sécurisées
Saisie automatique : pour améliorer les processus de paiement (en particulier sur mobile) qui échouent souvent lors de l'utilisation de commandes de formulaire personnalisées basées sur JavaScript

Modern Web Guidance est conçu pour recommander la meilleure fonctionnalité pour la tâche, en fonction de vos exigences de compatibilité avec les navigateurs. Ses guides intègrent des données de compatibilité avec Baseline et les navigateurs, ce qui lui permet d'adapter ses recommandations aux besoins de votre projet.

Analysez votre codebase et trouvez des opportunités de modernisation

La plupart des développements Web ne se font pas dans de nouveaux projets. Cela se produit dans les codebases existants qui ont accumulé des années de solutions de contournement obsolètes, de dépendances inutiles et de polyfills qui ne sont plus nécessaires.

La version 1.0 ajoute un nouveau workflow de modernisation qui peut analyser vos fichiers HTML, CSS, JavaScript et package.json existants pour identifier les opportunités de mise à niveau sécurisée, puis guider votre agent tout au long des modifications.

/modern-web-guidance Modernize the code in this directory

Dans cette première version, le workflow de modernisation utilise l'analyse statique pour rechercher un ensemble limité de modèles. Nous avons choisi de commencer par un champ d'application restreint qui donne des résultats prévisibles, puis de l'étendre. À terme, nous prévoyons de couvrir de nombreux autres domaines, y compris les audits agentiques, où votre agent raisonne directement sur votre code au lieu de simplement faire correspondre des modèles connus.

Restez informé de l'évolution de la plate-forme Web

La plate-forme Web est une cible mouvante. De nouvelles fonctionnalités sont intégrées aux navigateurs à chaque étape, et les fonctionnalités existantes que vous ne pouviez peut-être pas utiliser auparavant deviennent Baseline à chaque nouvelle version du navigateur.

Comme Modern Web Guidance est basé sur les données de compatibilité Baseline, et que ses recommandations sont gérées par des ingénieurs de navigateur, des experts en normes Web et des spécialistes de l'accessibilité, ces recommandations évoluent en même temps que la plate-forme elle-même, et votre projet peut désormais en faire autant.

Découvrez les nouvelles fonctionnalités Web et les bonnes pratiques

Bien que Modern Web Guidance soit principalement conçu comme un outil pour les agents, de nombreux développeurs nous ont dit qu'ils trouvaient ces conseils très utiles en eux-mêmes, en tant que ressource d'apprentissage.

Même à l'ère du codage agentique, il est toujours utile de développer une expertise dans un domaine. Modern Web Guidance peut vous aider à y parvenir, soit en lisant les guides eux-mêmes, soit en utilisant la CLI pour rechercher des cas d'utilisation et découvrir de nouvelles techniques susceptibles d'être pertinentes pour votre projet.

Associer Modern Web Guidance aux Outils de développement Chrome pour les agents

Dans le développement Web agentique, l'écriture du code n'est qu'une partie du workflow. Vous devez également exécuter ce code pour vous assurer qu'il fonctionne comme prévu. C'est pourquoi nous recommandons aux développeurs d'utiliser Modern Web Guidance avec les Outils de développement Chrome pour les agents.

Modern Web Guidance fournit à votre agent l'expertise initiale nécessaire pour écrire du code en suivant les bonnes pratiques modernes.
Les Outils de développement Chrome pour les agents offrent à votre agent une visibilité sur l'environnement d'exécution, ce qui lui permet de vérifier, de déboguer et d'optimiser ce code sur un large éventail de fonctionnalités d'appareil, de préférences utilisateur et de conditions réseau.

Ensemble, ces éléments aident votre agent à trouver une meilleure solution en moins de tours. Voici quelques exemples d'utilisation conjointe de ces outils pour maximiser l'efficacité :

Optimisez jusqu'à atteindre votre objectif de performances.

Modern Web Guidance peut apprendre à votre agent à diviser efficacement les tâches JavaScript de longue durée qui bloquent le thread principal, mais il ne peut pas tester votre code pour voir combien de temps ces tâches JavaScript bloquent réellement le thread principal.

Avec les Outils de développement Chrome pour les agents, vous pouvez exécuter une trace de performances sur un processeur bas de gamme simulé pour voir si vous rencontrez un problème, puis utiliser les conseils de performances de Modern Web Guidance pour itérer jusqu'à ce que votre code ne bloque jamais le thread principal pendant plus de 50 millisecondes (afin de ne pas contribuer à un mauvais INP).

Tester et affiner vos animations

Modern Web Guidance peut montrer à votre agent comment animer correctement et efficacement des fonctionnalités telles que les boîtes de dialogue modales, les info-bulles et les menus popover. Toutefois, même avec ces conseils, vous devez vérifier que les animations fonctionnent réellement et qu'elles sont esthétiques lorsqu'elles sont utilisées dans le contexte de votre application complète.

Les Outils de développement Chrome pour les agents peuvent exécuter votre code, interagir avec la page et enregistrer l'animation en action. Il peut ensuite étudier l'enregistrement pour s'assurer que l'animation s'exécute et qu'elle correspond au style et à l'apparence du reste du site.

Vous pouvez également utiliser les Outils de développement Chrome pour les agents afin de vérifier que, lorsque prefers-reduced-motion est défini, le composant respecte les préférences de l'utilisateur.

Mettre en cache des vues sans fuite de mémoire

Modern Web Guidance peut apprendre à votre agent à rendre les transitions SPA instantanées en affichant et en mettant en cache les vues en mémoire, tout en les masquant correctement de l'arborescence d'accessibilité.

Toutefois, dans ce cas, il est important de veiller à nettoyer correctement les vues inutilisées afin de ne pas provoquer de fuite de mémoire si l'utilisateur reste longtemps sur la page. Les outils de développement Chrome pour les agents disposent d'outils de débogage de la mémoire, ce qui permet à votre agent de s'assurer que l'utilisation de la mémoire n'augmente pas sans limite.

Pour en savoir plus sur l'utilisation conjointe de Modern Web Guidance et des Outils de développement Chrome pour les agents, regardez cette vidéo :

Témoignages

Des équipes d'ingénierie du monde entier utilisent déjà Modern Web Guidance et les outils de développement Chrome pour les agents afin d'améliorer la qualité du code, d'accélérer la livraison et d'éliminer les goulots d'étranglement liés au débogage manuel :

Pensionbazaar et Policybazaar

Pensionbazaar, une nouvelle plate-forme de planification de la retraite lancée par l'entreprise indienne de fintech Paisabazaar, a associé Modern Web Guidance aux Outils de développement Chrome pour les agents afin de créer et de vérifier de nouvelles pages. Cela a permis de réduire le délai de traitement de plus de 90 % (passant d'environ quatre jours à quelques heures) et de réduire de plus de 90 % les bugs d'interface utilisateur sur les nouveaux écrans. Sa plate-forme sœur Policybazaar, l'une des principales plates-formes d'assurance en Inde avec plus de 97 millions de clients enregistrés, a utilisé les Outils de développement Chrome pour les agents afin d'automatiser les audits de performances sur environ 30 pages de destination à fort trafic, réduisant ainsi l'effort d'audit manuel de 92 % :

"Pour Pensionbazaar, notre priorité était de créer un code de qualité dès le premier jour afin d'éviter toute dette technique par la suite. Modern Web Guidance a guidé notre agent de codage pour qu'il adopte les normes Web modernes et les bonnes pratiques de performances, tout en respectant nos objectifs spécifiques de compatibilité avec les navigateurs. Cela a considérablement facilité et accéléré nos revues de code d'interface, ce qui a permis d'améliorer notre délai de développement."

— Aman Soni, responsable ingénierie, Policybazaar

WeTV

WeTV, la plate-forme internationale de streaming vidéo de Tencent, a ajouté un agent de codage IA à son pipeline CI/CD. Cet agent utilise les outils de développement Chrome pour les agents afin de diagnostiquer les régressions de performances, et Modern Web Guidance pour les corriger à l'aide des fonctionnalités de la plate-forme Web moderne. L'agent diagnostique et résout désormais automatiquement 90 % des échecs de vérification des performances, ce qui réduit le temps de débogage et de résolution de 87 % (de quatre heures à 30 minutes, y compris l'évaluation manuelle) :

"Les résultats ont été très efficaces, tant en termes de rapidité que de qualité. Les insights de diagnostic fournis par les Outils de développement Chrome pour les agents et Modern Web Guidance nous ont fourni des références fiables pour résoudre les problèmes de mise en page complexes. Nous effectuons une validation stricte après chaque correction, et le taux de réussite et la stabilité actuels ont considérablement amélioré notre confiance dans les versions."

— Yangjie Zheng, responsable de l'ingénierie, WeTV (Tencent)

note inc.

note inc., l'une des plus grandes plates-formes de créateurs et de médias du Japon avec plus de 90 millions d'utilisateurs actifs par mois, a utilisé Modern Web Guidance en parallèle de son système de conception interne dans le cadre d'un effort continu de modernisation de son interface Next.js. Lors d'une évaluation de 180 exécutions sur sa codebase de production, Modern Web Guidance a fait passer le taux de réussite des vérifications Web modernes de 61 % à 94 % en incitant les agents à utiliser des fonctionnalités HTML et CSS natives au lieu de JavaScript personnalisé pour les animations de défilement, les info-bulles et les accordéons. Il a également augmenté de 28 % la priorisation appropriée des images LCP sur 431 RP fusionnées :

"Notre mission chez note est de permettre aux créateurs de se lancer et de continuer à créer. Notre plate-forme doit donc rester rapide et accessible pour tous les créateurs et lecteurs. Comme une part croissante de notre code est écrite avec des agents de codage IA, Modern Web Guidance les aide à trouver des solutions modernes basées sur des normes au lieu de se rabattre sur d'anciens modèles JavaScript. Il signale également les détails qui peuvent facilement passer inaperçus, comme la priorité de chargement des images et l'accessibilité des formulaires. Combiné à notre système de conception, il nous permet de continuer à améliorer l'application tout en maintenant la cohérence de notre UI."

— Takehiko Itabashi, vice-président de la technologie, note inc.

MetaMask

MetaMask, une plate-forme financière auto-hébergée qui compte plus de 100 millions de téléchargements dans environ 190 pays, exécute Modern Web Guidance en tant que bot d'examen automatique sur chaque demande d'extraction de son extension de navigateur Open Source, configurée avec un prompt de seulement trois lignes. Au cours de ses cinq premières semaines, le bot a examiné environ 480 demandes d'extraction et a commenté 64 d'entre elles, ce qui a conduit les ingénieurs à corriger 43 problèmes (principalement des problèmes d'accessibilité, de sémantique HTML et de formulaires que les linters ne détectent pas) avec un temps médian de 15 minutes entre le commentaire et la correction :

"Les avis sont vraiment utiles. Ils ont permis de faire connaître et de familiariser nos ingénieurs avec des API modernes telles que les appelants d'intérêt et l'API Popover. Cela n'a pas augmenté les délais d'examen des demandes d'extraction, et les a même probablement réduits. Les problèmes détectés par MWG auraient autrement nécessité l'intervention d'un réviseur humain familiarisé avec ces techniques Web modernes."

Francis Nepomuceno, ingénieur UX, MetaMask

Compatibilité de l'écosystème et assistance de la communauté

Modern Web Guidance a commencé comme une initiative au sein de Chrome, mais l'atteinte de cette version 1.0 est le fruit d'un effort collaboratif avec de nombreux experts de la communauté Web.

Nous remercions les responsables techniques des domaines de contenu qui supervisent chaque domaine de la plate-forme Web, nos partenaires de navigateur chez Firefox et Edge, les experts indépendants en normes Web et en accessibilité qui ont rédigé et testé les guides, ainsi que tous les contributeurs Open Source sur GitHub qui ont contribué à façonner cette version.

Si vous remarquez une lacune dans les connaissances des agents de codage sur le Web ou si vous souhaitez contribuer à l'amélioration d'un guide existant, consultez le guide de contribution pour participer.

Premiers pas avec Modern Web Guidance

Pour ajouter Modern Web Guidance à votre projet, exécutez le programme d'installation de la CLI à partir du répertoire de votre projet :

npx modern-web-guidance@latest install