Mit Lighthouse in Chrome-Entwicklertools für Agents kann Ihr Coding-Agent die Qualität von Websites bewerten, indem er Live-Systemdiagnosen für Barrierefreiheit, SEO, Best Practices und agentisches Browsing durchführt.
In einem agentischen Workflow verwendet Ihr Coding-Agent Lighthouse-Audits, um spezifische, messbare Laufzeitprobleme zu identifizieren, anstatt Ihre Codebasis zufällig nach allgemeinen Verbesserungen zu durchsuchen.
Dieser gezielte Ansatz bietet direkt im Kontext Ihres KI-Agents umsetzbare Ratschläge. So kann Ihr Coding-Agent Fehler genauer finden und beheben als bei umfassenden, statischen Suchvorgängen in Ihrer Codebasis.
Lighthouse-Prüfungen konzentrieren sich auf diese Hauptkategorien:
- Barrierefreiheit (A11y): Sorgt dafür, dass Ihre Website für alle zugänglich ist, auch für Nutzer, die Screenreader verwenden.
- SEO: Führt technische Prüfungen durch, um sicherzustellen, dass Suchmaschinen Ihre Inhalte finden und verstehen können.
- Best Practices: Prüfen Sie, ob Ihre Website den Standards für moderne Webentwicklung entspricht.
- Agentic Browsing: Messen Sie, inwieweit KI-Assistenten Ihre Website verstehen und mit ihr interagieren können.
Beachten Sie bei der Verwendung von Lighthouse Folgendes:
- Unterstützung für lokale und Staging-Umgebungen: Ihr Agent kann jede in Chrome sichtbare Seite prüfen, einschließlich lokaler Entwicklungsserver und lokaler HTML-Dateien, auf die über das
file://-Protokoll zugegriffen wird. - Browserverhalten: Prüfungen können die Ansicht kurzzeitig unterbrechen. Möglicherweise wird die Seite neu geladen oder ihre Größe wird angepasst, während das Tool verschiedene Geräte simuliert.
Webqualität prüfen
Mit den folgenden Workflows und Beispielen können Sie Lighthouse in Ihren Entwicklungsprozess einbinden.
Barrierefreiheit überprüfen
Wenn Sie eine Benutzeroberfläche ändern, weisen Sie Ihren Agenten an, zu prüfen, ob die Seite weiterhin zugänglich ist.
Beispiel für einen Prompt:
How can I improve accessibility on this page as measured by Lighthouse?
Beispiel für die Ausführung eines Agents:Ihr Agent löst einen Lighthouse-Audit mit formFactor auf mobile aus. Es analysiert die Ergebnisse, z. B. unzureichenden Farbkontrast oder fehlende ARIA-Labels, und schlägt spezifische Codekorrekturen vor.
SEO-Audit für die Sichtbarkeit in der Suche
Technische SEO-Anforderungen werden oft zu spät im Entwicklungszyklus erkannt. Sie können Ihren Agent bitten, während des Erstellens technische Blockaden zu finden und zu beheben.
Beispiel für einen Prompt:
According to Lighthouse audit, how can I improve this page for better discoverability in search?
Beispiel für die Ausführung eines Agents:Ihr Agent führt das SEO-Audit aus und identifiziert fehlende Meta-Tags, kanonische Links oder beschreibenden Text. Es kann dann anbieten, den Quellcode zu aktualisieren, um den Prüffehler zu beheben.
Best Practices validieren
Achten Sie darauf, dass Ihr lokaler Server oder Ihre Staging-Website den Best Practices für Sicherheit und Technik entspricht.
Beispiel für einen Prompt:
Does my site follow best practices as measured by Lighthouse?
Beispiel für die Agentausführung:Ihr Agent überprüft technische Aspekte wie die HTTPS-Nutzung, Konsolenfehler und veraltete API-Aufrufe, die von Lighthouse gemeldet werden.
Allgemeine Website-Optimierung
Sie können vollständige Lighthouse-Prüfungen Ihrer Website durchführen und so schon in der frühen Entwicklungsphase Bereiche mit Verbesserungspotenzial ermitteln.
Beispiel für einen Prompt:
Run a full Lighthouse audit of my site, in mobile and desktop, and suggest improvement areas and possible fixes for any problems you find.
Beispiel für die Ausführung eines Agents:Ihr Agent führt eine vollständige Lighthouse-Prüfung Ihrer Website auf Mobilgeräten und Computern durch und schlägt Änderungen vor, mit denen sich die Ergebnisse der verschiedenen Prüfungen verbessern lassen. Wenn Ihr Agent vollen Kontextbezug zum Quellcode hat, kann er direkt Korrekturen vorschlagen. Wenn es Zugriff auf den richtigen Kontext hat, kann es auch Vorschläge zur Verbesserung der Serverkonfiguration oder anderer Backend-Konfigurationen machen.