web-perf

Überblick über die web-perf-Skill

Was web-perf macht

Die web-perf-Skill hilft dir, die Seitengeschwindigkeit mit Chrome DevTools MCP zu prüfen und zu verbessern, statt nur anhand eines Screenshots oder eines Lighthouse-Werts zu raten. Der Fokus liegt auf Core Web Vitals, trace-basierter Diagnose, Network-Waterfalls, render-blocking Ressourcen, Layout Shifts, Caching sowie verwandten Performance- und Accessibility-Problemen.

Für wen die Skill gedacht ist

Nutze die web-perf-Skill, wenn du eine praxisnahe Performance-Analyse für eine echte Website brauchst, vor allem dann, wenn du erklären willst, warum sich eine Seite langsam anfühlt, warum sich eine Metrik verschlechtert hat oder welche Ressource den Ladevorgang ausbremst. Sie passt besonders gut zu Performance-Optimization-Aufgaben, bei denen belastbare Evidenz wichtiger ist als allgemeiner Rat.

Was sie unterscheidet

Der Hauptnutzen von web-perf liegt in der Ausrichtung auf Live-Recherche aus aktuellen Docs und DevTools-Daten statt auf veralteten mentalen Modellen. Dadurch eignet sich die Skill besser für Entscheidungen, die exakte Metrikdefinitionen, Trace-Interpretation oder aktuelles Tool-Verhalten erfordern. Weniger nützlich ist sie für breite SEO-Audits oder Designkritik, bei denen kein Performance-Trace nötig ist.

So verwendest du die web-perf-Skill

Umgebung installieren und verifizieren

Starte den web-perf install-Ablauf über deinen Skills-Manager und prüfe dann, ob der Chrome DevTools MCP Server tatsächlich verfügbar ist, bevor du die Analyse anforderst. Die Skill setzt DevTools-Zugriff voraus; wenn die MCP-Tools fehlen, sollte der Workflow früh abbrechen, statt Ergebnisse zu erfinden.

Eine Performance-gerechte Anfrage stellen

Ein guter web-perf usage-Prompt nennt die Seite, das Symptom und den Kontext, den der Agent zum Nachstellen oder Prüfen braucht. Zum Beispiel: „Prüfe die Startseite auf Mobile auf eine LCP-Verschlechterung nach dem letzten Release. Konzentriere dich auf blockierende CSS-Dateien, die Auslieferung des Hero-Images und Trace-Belege.“ Das ist besser als „mach die Seite schneller“, weil die Skill so weiß, was sie messen und wo sie suchen soll.

Zuerst die richtigen Dateien lesen

Beginne mit SKILL.md und folge dann allen repo-verlinkten Dokus, die Retrieval-Quellen, Tool-Checks oder Analyseschritte erklären. In diesem Repo gibt es keine zusätzlichen Helper-Ordner, daher liegen die wichtigsten Entscheidungspunkte direkt in der Skill-Datei selbst. Achte besonders auf die Abschnitte, die den Agenten anweisen, MCP-Tools zu prüfen, Retrieval zu bevorzugen und Trace-Belege statt Annahmen zu verwenden.

Einen Workflow wählen, der zur Frage passt

Für eine Diagnose solltest du nach einer Trace-gestützten Root-Cause-Analyse und einer kurzen Liste konkreter Fixes fragen. Für Optimierung solltest du die größten wahrscheinlichen Hebel zuerst anfordern, nicht eine vollständige Checkliste. Beim Aufspüren von Regressionen solltest du die Änderung davor/danach, die URL, die Geräteklasse und die Priorität von LCP, INP oder CLS angeben. Je konkreter die Eingabe, desto weniger muss das Modell raten, welchen web-perf guide-Pfad es nehmen soll.

FAQ zur web-perf-Skill

Ist web-perf nur für Lighthouse-Audits gedacht?

Nein. Sie ist zwar auch für Lighthouse-bezogene Arbeit nützlich, der stärkere Anwendungsfall ist aber das Debugging auf Basis von Traces mit DevTools MCP. Damit hilft sie dir zu verstehen, warum sich eine Metrik verändert hat, nicht nur, dass sie sich verändert hat.

Muss ich Chrome DevTools gut kennen?

Nicht unbedingt. Die Skill ist auch für Einsteiger hilfreich, wenn sie das Problem klar beschreiben können. Du musst kein Trace-Experte sein, aber genug Kontext liefern, damit der Agent weiß, welche Seite, welches Gerät und welches Symptom wichtig sind.

Wann sollte ich web-perf nicht verwenden?

Verwende sie nicht, wenn du einen generischen Frontend-Refactor, ein visuelles Design-Review oder eine Antwort willst, die nicht von Laufzeit-Evidenz abhängt. Wenn du keine Seite zum Prüfen angeben kannst oder kein DevTools MCP verfügbar ist, wird die Skill blockiert.

Worin ist sie besser als ein normaler Prompt?

Ein normaler Prompt bleibt meist auf einer hohen Ebene. Die web-perf-Skill ist handlungsorientierter, weil sie auf aktuelle Dokumentation, explizite Tool-Checks und messbare Ursachen wie render-blocking, Abhängigkeitsketten, Quellen von Layout Shifts und Caching-Verhalten drängt. Dadurch ist sie für Performance Optimization deutlich stärker als eine einmalige Chat-Anweisung.

So verbesserst du die web-perf-Skill

Liefere nachvollziehbare Eingaben statt vager Ziele

Der beste Weg, web-perf-Ergebnisse zu verbessern, ist eine URL, das Zielgerät, die Testbedingungen und die Metrik zu nennen, die dir am wichtigsten ist. „Checkout schneller machen“ ist zu schwach. „Checkout auf einem Mittelklasse-Android über schnelles 4G auf LCP und CLS prüfen, nachdem das neue Hero-Banner live gegangen ist“ ist deutlich besser.

Nenne das Änderungsfenster und die vermutete Ursache

Wenn du weißt, was sich geändert hat, sag es. Release Notes, ein aktuelles CMS-Update, ein neues Third-Party-Skript oder ein neu gestalteter Hero weisen die Untersuchung oft in die richtige Richtung. So kann die Skill wahrscheinliche Ursachen gezielt testen, statt blind die ganze Seite zu durchsuchen.

Fordere Belege und einen priorisierten Fix-Pfad an

Ein nützliches web-perf-Ergebnis sollte bestätigte Ursachen von wahrscheinlichen trennen und Fixes dann nach Nutzerwirkung und Umsetzungsaufwand sortieren. Wenn die erste Antwort zu breit ist, bitte um die zwei größten Bottlenecks, den jeweiligen Trace-Beleg und die kleinste sichere Änderung, mit der sich die Verbesserung überprüfen lässt.

Mit Vorher/Nachher-Messungen iterieren

Betrachte den ersten Durchlauf als Diagnose, nicht als Abschluss. Nachdem du einen Fix umgesetzt hast, führe denselben web-perf-Workflow mit derselben Seite und denselben Bedingungen erneut aus, damit die Ausgabe Trace-Belege und Metriken konsistent vergleichen kann. Das ist der schnellste Weg, aus einem web-perf-Guide einen wiederholbaren Optimierungszyklus zu machen.