Barrierefreiheit

Passe an, wie diese Website aussieht und sich bewegt. Die Einstellungen gelten, solange du auf dieser Website unterwegs bist, und werden nicht gespeichert: Ein Neuladen der Seite setzt sie zurück.

Voreinstellungen

Text

Textgröße
Zeilenhöhe

Darstellung

Farbe

Bewegung

Navigieren und vorlesen

Seitenstruktur

Vorlesen

Vorlesen ist in diesem Browser nicht verfügbar.

CG Web Skills

Web-Performance-Engineer

cg-web-lighthouse-optimizer

Du gibst ihm Lighthouse-Reports als JSON; er verfolgt jeden echten Engpass bis zu seiner Ursache im Repository und behebt ihn dort. Der Score ist ein Messinstrument, nicht das Ziel.

5.424 Wörter Methode · Dokumentiert für Version 1.3.0 · geprüft

Vollständige SKILL.md lesen

1

Kein Score-Gaming

Inhalte vor dem Audit verstecken, das LCP-Bild lazy laden, alles preloaden, interaktive Elemente für den Accessibility-Score entfernen, Keyword-Stuffing für SEO — der Skill zählt diese Tricks auf und verbietet sie. Mobile und Desktop gelten als getrennte Testbedingungen, und ein Laborwert wird nie mit dem verwechselt, was echte Nutzer erleben.

Keine Änderung darf ausschließlich deshalb vorgenommen werden, weil sie einen Lighthouse-Score erhöht.

cg-web-lighthouse-optimizer · SKILL.md

3

Jedes Lighthouse-JSON, zuerst normalisiert

Ein einzelner Report, ein Paar aus Mobile und Desktop, ein Array, ein PageSpeed-Insights-Wrapper oder als Text eingefügtes JSON: Claude normalisiert es, prüft auf Laufzeitfehler, Warnungen, abweichende Versionen oder URLs und entscheidet erst dann, was optimiert wird.

Keine Geräteklasse erraten, wenn die JSON-Struktur widersprüchlich ist.

cg-web-lighthouse-optimizer · SKILL.md

25

Von den Audit-Details zur verursachenden Datei

Der Audit-Titel ist nur ein Hinweis. Claude liest die Details — Einsparungen, betroffene URLs, Nodes, Timings — und folgt ihnen in die Codebasis: das tatsächliche LCP-Element, die Abhängigkeit hinter den Long Tasks, das Bild ohne Maße hinter dem Layout Shift, der Font, das Drittanbieter-Script, der Cache-Header.

Daraus nicht nur „JavaScript reduzieren“ ableiten, sondern im Repository die konkrete Abhängigkeit bzw. den Bundle-Verursacher finden.

cg-web-lighthouse-optimizer · SKILL.md

26

Versionsbewusst, bis Lighthouse 13

Audit-IDs ändern sich zwischen Major-Releases, und Lighthouse 13 hat viele ältere Performance-Audits in gemeinsame Insights überführt. Claude liest Version und Gewichte aus dem Report selbst und ordnet alte und neue Audit-IDs demselben Problembereich zu, statt Audits zu „reparieren“, die es im Report gar nicht gibt.

Der Skill muss semantisch mappen, nicht blind nach String-Matches arbeiten.

cg-web-lighthouse-optimizer · SKILL.md

Was er nie behauptet

Eine Änderung, die wahrscheinlich hilft, ist keine gemessene Verbesserung. Lässt sich Lighthouse nicht erneut ausführen, berichtet der Skill, was er geändert hat und warum — und nicht mehr:

Wenn kein neuer Lighthouse-Lauf möglich ist, darf der Skill nicht behaupten, die Scores seien verbessert worden.

cg-web-lighthouse-optimizer · SKILL.md

Die Schleife, in der er arbeitet

Nicht Score → Hack → Score. Eine Ursachengruppe nach der anderen, geprüft mit Lint, Build und Tests, dann auf Mobile und Desktop erneut gemessen, bevor die nächste Änderung kommt.

  1. measure
  2. identify
  3. hypothesize
  4. change
  5. validate
  6. measure again

Frag Claude zum Beispiel

  • Here are the Lighthouse reports for mobile and desktop. Fix what's slowing the site down.
  • Our mobile LCP is 4.8 s. Find out why and fix it.
  • Analyze this PageSpeed Insights JSON and improve the site in the repo.
  • The new Lighthouse run is worse than last week. Compare the reports and fix the regression.
Terminal-Sitzung
$ npx cg-web-skills@latest install cg-web-lighthouse-optimizer