Veröffentlicht: 10. November 2026
In dieser neuen Ära der agentenbasierten Webentwicklung erwarten Entwickler, dass ihre Programmier-Agenten Experten für die Webentwicklung sind. Die neuesten Frontier-Modelle für die Programmierung sind zwar recht leistungsfähig und können in der Regel etwas produzieren, das funktioniert. Wenn Sie jedoch einen Experten für Webentwicklung bitten, den KI-generierten Code zu überprüfen, wird er fast immer Möglichkeiten finden, den Code schneller, barrierefreier oder sicherer zu machen.
Chrome investiert stark in die Zukunft der agentenbasierten Webentwicklung. Um diese Herausforderung anzugehen, haben wir im Mai auf der Google I/O eine frühe Vorabversion von Modern Web Guidance vorgestellt. Modern Web Guidance ist eine Reihe von Skills, mit denen Fachwissen zur Webplattform, Best Practices und Daten zur Browserkompatibilität direkt in Ihre Coding-Agents eingebunden werden.
Heute freuen wir uns, die stabile Version 1.0 von Modern Web Guidance anzukündigen. Sie umfasst:
- Neuer Modernisierungs-Workflow, der Ihre vorhandene Codebasis scannt, damit Ihr Agent Möglichkeiten zur sicheren Modernisierung finden kann.
- Erweiterte Leitfadendatenbank, die Hunderte von verifizierten KI-Wissenslücken mit von Experten geprüften, browserübergreifenden Lösungen abdeckt.
- Gründlichere Überprüfung durch menschliche Experten jedes Leitfadens, einschließlich der Freigabe durch die technischen Leiter der Inhaltsbereiche und einer speziellen Überprüfung der Barrierefreiheit unserer für Nutzer sichtbaren Leitfäden.
- Vollständige Bewertung aller unserer Leitfäden mit einem öffentlichen Bewertungs-Dashboard, das die messbaren Verbesserungen im Vergleich zu Agenten ohne Modern Web Guidance zeigt.
Mit Version 1.0 wird Modern Web Guidance zu einem browserübergreifenden Projekt. Firefox und Edge schließen sich Chrome an, um die browserübergreifende Kompatibilität zu unterstützen und zu verbessern und zum Projekt beizutragen. Aufbauend auf unserer gemeinsamen Arbeit mit Baseline möchten wir dafür sorgen, dass alle, die mit einem Agenten programmieren, die Leistungsfähigkeit und Funktionen der modernen Webplattform voll ausschöpfen können.
Unabhängig davon, welche Modelle oder Agenten-Frameworks Sie verwenden, gehört Modern Web Guidance in Ihren agentischen Workflow, wenn Sie für das Web entwickeln.
Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus, um Modern Web Guidance zu installieren:
npx modern-web-guidance@latest install
Wenn Sie bereits eine frühere Version installiert haben, können Sie mit dem folgenden Befehl ein Update auf 1.0 durchführen:
npx modern-web-guidance@latest update
Weitere Installationsanleitungen und Informationen finden Sie in der Dokumentation zu Modern Web Guidance oder in diesem Video:
Warum Entwickler und Unternehmen Modern Web Guidance verwenden sollten
Es ist unbestreitbar, dass Programmier-Agenten Entwicklern helfen, Code schneller als je zuvor zu schreiben. In einer Welt, in der alle Programmier-Agenten nutzen, ist Geschwindigkeit jedoch kein Wettbewerbsvorteil mehr.
Heutzutage ist es wichtiger denn je, sich durch grundlegende Faktoren wie Nutzerfreundlichkeit und Qualität der Nutzererfahrung von der Konkurrenz abzuheben. Hier sind einige Beispiele, wie Modern Web Guidance helfen kann:
Best Practices verstärken, die von Modellen oft nicht berücksichtigt werden
Zwar kennen Frontier-Modelle für die Programmierung viele Best Practices, aber unsere Bewertungen zeigen, dass es noch eine Reihe wichtiger Bereiche gibt, in denen sie nicht gut abschneiden, z. B.:
- Bedienungshilfen: Tastaturfokus und Inert-Verwaltung, Unterstützung für reduzierte Bewegung und barrierefreie Formularvalidierung.
- Nutzererfahrung: Wisch- und Touch-Gesten, Übergänge für Dialoge und Popover sowie Implementierungen für helle und dunkle Designs.
- Leistung: Planung von Aufgaben im Hauptthread, Isolierung des Offscreen-Renderings und Vermeidung von Layoutverschiebungen.
- Sicherheit: Sichere HTML-Bereinigung, strenge Content Security Policies und Verwaltung von Passkey-Anmeldedaten.
Best Practices für Barrierefreiheit sind besonders wichtig, da Fehler wie schlechte ARIA-Attribute eine Seite weniger barrierefrei machen können als gar keine ARIA-Attribute. Für Version 1.0 wurden unsere für Nutzer sichtbaren Leitfäden von Experten für Barrierefreiheit, die täglich auf Hilfstechnologien angewiesen sind, mit echten Hilfstechnologien überprüft und getestet.
Die beste Webfunktion für die Aufgabe verwenden
KI-Modelle sind sehr gut darin, herauszufinden, wie etwas mit JavaScript funktioniert. In vielen Fällen gibt es jedoch HTML- oder CSS-Funktionen, die dasselbe mit viel weniger Code erreichen können. Da sie vom Browser verarbeitet werden, sind sie in der Regel leistungsfähiger und bieten Funktionen für Bedienungshilfen. Beispiel:
- Funktionen zum Animieren von Pop-overs und Dialogfeldern
- Funktionen zur Verbesserung von Scroll- und Wischinteraktionen
- Bessere APIs für reibungslose und flüssige Seitenübergänge
Neue Funktionen können auch die Nutzererfahrung einer Website auf eine Weise verbessern, die für Nutzer wichtig ist. Beispiel:
- Passkeys und WebAuthn: Für eine schnellere und sicherere Anmeldung
- Autofill: Zur Verbesserung von Bezahlvorgängen (insbesondere auf Mobilgeräten), die bei Verwendung benutzerdefinierter JavaScript-basierter Formularsteuerelemente häufig fehlschlagen.
Modern Web Guidance empfiehlt die beste Funktion für die jeweilige Aufgabe, basierend auf Ihren Anforderungen an die Browserunterstützung. Die Leitfäden enthalten eingebettete Baseline- und Browserkompatibilitätsdaten, sodass die Empfehlungen auf die Anforderungen Ihres Projekts zugeschnitten werden können.
Codebasis scannen und Modernisierungsmöglichkeiten finden
Die meiste Webentwicklung findet nicht in brandneuen Projekten statt. Er tritt in bestehenden Codebasen auf, in denen sich über Jahre hinweg veraltete Problemumgehungen, unnötige Abhängigkeiten und nicht mehr benötigte Polyfills angesammelt haben.
In Version 1.0 wurde ein neuer Modernisierungs-Workflow hinzugefügt, mit dem vorhandene HTML-, CSS-, JavaScript- und package.json-Dateien analysiert werden können, um Möglichkeiten für ein sicheres Upgrade zu finden. Anschließend wird der Agent durch die Änderungen geführt.
/modern-web-guidance Modernize the code in this directory
In dieser ersten Version verwendet der Modernisierungs-Workflow eine statische Analyse, um nach einer begrenzten Anzahl von Mustern zu suchen. Wir haben uns entschieden, mit einem engen Umfang zu beginnen, der vorhersehbare Ergebnisse liefert, und dann darauf aufzubauen. Im Laufe der Zeit möchten wir noch viele weitere Bereiche abdecken, darunter agentische Audits, bei denen Ihr Agent Ihren Code direkt analysiert, anstatt nur bekannte Muster abzugleichen.
Bleiben Sie über die Entwicklung der Webplattform auf dem neuesten Stand
Die Webplattform ist ein bewegliches Ziel. Mit jedem Meilenstein werden neue Funktionen in Browsern eingeführt und vorhandene Funktionen, die Sie zuvor möglicherweise nicht verwenden konnten, werden mit jedem neuen Browser-Release Teil der Baseline.
Da Modern Web Guidance auf Baseline-Kompatibilitätsdaten basiert und die Empfehlungen von Browser-Entwicklern, Experten für Webstandards und Spezialisten für Barrierefreiheit gepflegt werden, entwickeln sich diese Empfehlungen zusammen mit der Plattform selbst weiter – und jetzt auch Ihr Projekt.
Informationen zu neuen Webfunktionen und Best Practices
Modern Web Guidance wurde zwar in erster Linie als Tool für KI-Agenten entwickelt, aber viele Entwickler haben uns mitgeteilt, dass sie die Anleitung auch als eigenständige Lernressource sehr nützlich finden.
Auch in dieser Ära des agentischen Codings ist es immer noch wichtig, Fachwissen aufzubauen. Modern Web Guidance kann Ihnen dabei helfen, entweder durch Lesen der Leitfäden selbst oder durch Verwendung der Befehlszeile, um nach Anwendungsfällen zu suchen und neue Techniken zu entdecken, die für Ihr Projekt relevant sein könnten.
Modern Web Guidance mit Chrome-Entwicklertools für KI-Agenten kombinieren
In der agentischen Webentwicklung ist das Schreiben von Code nur ein Teil des Workflows. Außerdem müssen Sie den Code ausführen, um sicherzustellen, dass er wie erwartet funktioniert. Daher empfehlen wir Entwicklern, Modern Web Guidance zusammen mit den Chrome-Entwicklertools für KI-Agenten zu verwenden.
- Modern Web Guidance vermittelt Ihrem Agenten das nötige Fachwissen, um Code nach modernen Best Practices zu schreiben.
- Die Chrome-Entwicklertools für KI-Agenten bieten Ihrem Agenten Laufzeitsichtbarkeit, sodass er den Code für eine Vielzahl von Gerätefunktionen, Nutzereinstellungen und Netzwerkbedingungen prüfen, debuggen und optimieren kann.
Zusammen helfen diese dem Agenten, in weniger Schritten eine bessere Lösung zu finden. Hier sind einige Beispiele dafür, wie Sie diese Tools gemeinsam verwenden können, um die Effektivität zu maximieren:
Optimieren Sie so lange, bis Sie Ihr Leistungsziel erreichen.
Modern Web Guidance kann Ihrem KI-Agenten beibringen, wie er lang laufende JavaScript-Aufgaben, die den Hauptthread blockieren, effektiv aufteilt. Es kann Ihren Code jedoch nicht testen, um zu sehen, wie lange diese JavaScript-Aufgaben den Hauptthread tatsächlich blockieren.
Mit den Chrome-Entwicklertools für KI-Agenten können Sie einen Leistungs-Trace auf einer simulierten Low-End-CPU ausführen, um zu sehen, ob ein Problem vorliegt. Anschließend können Sie die Leistungsempfehlungen aus Modern Web Guidance verwenden, um den Code so lange zu optimieren, bis der Hauptthread nie länger als 50 Millisekunden blockiert wird (damit er nicht zu einem schlechten INP beiträgt).
Animationen testen und optimieren
Modern Web Guidance kann Ihrem Agenten zeigen, wie er Funktionen wie modale Dialogfelder, Kurzinfos und Popover-Menüs richtig und leistungsstark animiert. Trotzdem müssen Sie prüfen, ob die Animationen im Kontext Ihrer gesamten Anwendung tatsächlich funktionieren und gut aussehen.
Die Chrome-Entwicklertools für KI-Agenten können Ihren Code ausführen, mit der Seite interagieren und eine Bildschirmaufzeichnung der Animation erstellen. Anschließend kann es die Aufnahme analysieren, um sicherzustellen, dass die Animation ausgeführt wird und zum Stil und Design des Rests der Website passt.
Sie können auch die Chrome-Entwicklertools für KI-Agenten verwenden, um zu prüfen, ob die Komponente die Einstellungen des Nutzers berücksichtigt, wenn prefers-reduced-motion festgelegt ist.
Ansichten ohne Speicherlecks im Cache speichern
Mit Modern Web Guidance können Sie Ihrem Agenten beibringen, wie er SPA-Übergänge sofort ausführen kann, indem er Ansichten im Arbeitsspeicher rendert und im Cache speichert und sie gleichzeitig ordnungsgemäß vor der Barrierefreiheitsstruktur verbirgt.
Dabei ist es jedoch wichtig, nicht verwendete Ansichten ordnungsgemäß zu bereinigen, um Speicherlecks zu vermeiden, wenn der Nutzer lange auf der Seite bleibt. Die Chrome-Entwicklertools für KI-Agenten enthalten Tools zur Fehlerbehebung im Arbeitsspeicher, damit Ihr Agent dafür sorgen kann, dass die Speichernutzung nicht unbegrenzt steigt.
In diesem Video erfahren Sie, wie Sie Modern Web Guidance und die Chrome-Entwicklertools für KI-Agenten zusammen verwenden:
Erfolgsgeschichten
Entwicklungsteams auf der ganzen Welt nutzen bereits Modern Web Guidance und die Chrome-Entwicklertools für KI-Agenten, um die Codequalität zu verbessern, die Bereitstellung zu beschleunigen und Engpässe beim manuellen Debugging zu beseitigen:
Pensionbazaar und Policybazaar
Pensionbazaar, eine neue Plattform für die Altersvorsorge, die vom indischen Fintech-Unternehmen Paisabazaar eingeführt wurde, kombinierte Modern Web Guidance mit Chrome-Entwicklertools für KI-Agenten, um neue Seiten zu erstellen und zu prüfen. Dadurch wurde die Bearbeitungszeit um mehr als 90 % verkürzt (von etwa vier Tagen auf wenige Stunden) und die Anzahl der UI-Fehler auf neuen Bildschirmen um über 90 % reduziert. Die Schwesterplattform Policybazaar, eine der führenden Versicherungsplattformen Indiens mit mehr als 97 Millionen registrierten Kunden, nutzte die Chrome-Entwicklertools für KI-Agenten, um Leistungsprüfungen auf etwa 30 Landingpages mit hohem Traffic zu automatisieren. Dadurch konnte der manuelle Prüfaufwand um 92 % reduziert werden:
„Für Pensionbazaar war es von Anfang an unsere Priorität, hochwertigen Code zu erstellen, um später technische Schulden zu vermeiden. Modern Web Guidance hat unseren Coding-Agenten dazu gebracht, moderne Webstandards und Best Practices für die Leistung zu übernehmen und gleichzeitig unsere spezifischen Ziele für die Browserkompatibilität zu berücksichtigen. Dadurch wurden unsere Frontend-Codeüberprüfungen erheblich einfacher und schneller, was letztendlich unsere Entwicklungszeit verkürzte.“
– Aman Soni, Engineering Manager, Policybazaar
WeTV
WeTV, die internationale Videostreaming-Plattform von Tencent, hat ihrer CI/CD-Pipeline einen KI-Codierungs-Agenten hinzugefügt, der Chrome-Entwicklertools für Agenten verwendet, um Leistungsrückgänge zu diagnostizieren, und Modern Web Guidance, um sie mithilfe moderner Webplattformfunktionen zu beheben. Der KI-Agent diagnostiziert und behebt jetzt automatisch 90 % der fehlgeschlagenen Leistungsprüfungen. Dadurch wird die Zeit für die Fehlerbehebung und Lösung um 87 % verkürzt (von vier Stunden auf 30 Minuten, einschließlich manueller Bewertung):
„Die Ergebnisse waren sowohl in Bezug auf die Geschwindigkeit als auch auf die Qualität sehr gut. Die Diagnosedaten, die von den Chrome-Entwicklertools für KI-Agenten und Modern Web Guidance bereitgestellt wurden, gaben uns zuverlässige Referenzen für die Behebung komplexer Layoutprobleme. Nach jeder Fehlerbehebung führen wir eine strenge Überprüfung durch. Die aktuelle Erfolgsquote und Stabilität haben unser Vertrauen in die Releases deutlich verbessert.“
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
note inc.
note inc., eine der größten Creator- und Medienplattformen Japans mit über 90 Millionen monatlich aktiven Nutzern, nutzte Modern Web Guidance zusammen mit seinem internen Designsystem im Rahmen einer laufenden Initiative zur Modernisierung seines Next.js-Frontends. In einer Bewertung mit 180 Durchläufen in der Produktionscodebasis hat Modern Web Guidance die Erfolgsquote bei modernen Webprüfungen von 61 % auf 94 % erhöht. Dazu wurden die Agenten angewiesen, native HTML- und CSS-Funktionen anstelle von benutzerdefiniertem JavaScript für Scrollanimationen, Kurzinfos und Akkordeons zu verwenden. Außerdem wurde die korrekte Priorisierung von LCP-Bildern bei 431 zusammengeführten PRs um 28 % erhöht:
„Unsere Mission bei note ist es, Menschen dazu zu bringen, mit dem Erstellen von Inhalten zu beginnen und nicht damit aufzuhören. Deshalb muss unsere Plattform für alle Creator und Leser schnell und zugänglich bleiben. Da immer mehr Code von KI-Coding-Agents geschrieben wird, hilft Modern Web Guidance ihnen, moderne, standardbasierte Lösungen zu finden, anstatt auf ältere JavaScript-Muster zurückzugreifen. Außerdem werden Details hervorgehoben, die leicht übersehen werden können, z. B. die Priorität beim Laden von Bildern und die Barrierefreiheit von Formularen. In Kombination mit unserem Designsystem können wir die Notizenfunktion weiter verbessern und gleichzeitig die Benutzeroberfläche einheitlich halten.“
—Takehiko Itabashi, VP of Technology, note inc.
MetaMask
MetaMask, eine selbstverwaltete Finanzplattform mit mehr als 100 Millionen Downloads in rund 190 Ländern, führt Modern Web Guidance als automatisierten Prüfbot für jede Pull-Anfrage an seine Open-Source-Browsererweiterung aus. Die Konfiguration erfolgt mit einem Prompt, der nur drei Zeilen umfasst. In den ersten fünf Wochen hat der Bot etwa 480 Pull-Anfragen geprüft und 64 davon kommentiert. Das hat dazu geführt, dass die Entwickler 43 Probleme behoben haben (hauptsächlich Probleme mit der Barrierefreiheit, der HTML-Semantik und Formularen, die von Lintern nicht erkannt werden). Die durchschnittliche Zeit vom Kommentar bis zur Behebung betrug 15 Minuten:
„Die Rezensionen sind wirklich hilfreich. Sie haben uns geholfen, moderne APIs wie Interest Invokers und die Popover API zu finden und unsere Entwickler damit vertraut zu machen. Die PR-Überprüfungszeiten haben sich nicht erhöht, sondern eher verringert. Die von MWG erkannten Probleme hätten sonst von einem Prüfer erkannt werden müssen, der mit diesen modernen Webtechniken vertraut ist.“
—Francis Nepomuceno, UX Engineer, MetaMask
Unterstützung durch das Ökosystem und die Community
Modern Web Guidance begann als Initiative innerhalb von Chrome. Das Erreichen des Meilensteins 1.0 war jedoch eine gemeinsame Leistung zahlreicher Experten aus der Web-Community.
Wir danken den Tech Leads der Inhaltsbereiche, die die einzelnen Webplattformbereiche betreuen, unseren Browserpartnern bei Firefox und Edge, den unabhängigen Experten für Webstandards und Barrierefreiheit, die Leitfäden verfasst und getestet haben, sowie allen Open-Source-Mitwirkenden auf GitHub, die an dieser Version mitgewirkt haben.
Wenn Sie eine Lücke im Wissen von KI-Agenten über das Web finden oder einen bestehenden Leitfaden verbessern möchten, lesen Sie den Leitfaden für Beiträge, um sich zu beteiligen.
Erste Schritte mit Modern Web Guidance
Wenn Sie Modern Web Guidance zu Ihrem Projekt hinzufügen möchten, führen Sie das CLI-Installationsprogramm im Projektverzeichnis aus:
npx modern-web-guidance@latest install
Wenn Sie bereits eine frühere Version installiert haben, können Sie mit dem folgenden Befehl ein Update auf 1.0 durchführen:
npx modern-web-guidance@latest update
Zusätzlich zur Befehlszeile können Sie Modern Web Guidance direkt über die gängigsten Marktplätze für Coding-Agent-Plug-ins installieren und aktualisieren, darunter Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code und Grok Build.
Weitere Informationen finden Sie in den folgenden Ressourcen: