Ein Hero-Bild mit loading="lazy" neben einem Preload derselben Datei, ein Font-Preload ohne crossorigin, durch den die Schrift zweimal heruntergeladen wird, ein link rel="preload" ohne as-Wert, den der Browser ignoriert: Jeder dieser Fehler kostet Ihre Seite unbemerkt ihren Largest Contentful Paint. Ebenso Bilder ohne width und height, die den Text springen lassen, ein Chat-Widget, das synchron im Head geladen wird, und eine 600-KB-Illustration, die niemand verkleinert hat. Dieser Skill findet diese und die weiteren unten aufgeführten Ladefehler, bevor die Seite live geht, und sagt Ihnen, wie Sie jeden einzelnen beheben.

Ihr Agent lässt einen Scanner über Ihre HTML-Seiten und Templates (Liquid, Nunjucks, Handlebars, EJS, ERB, Twig), Vue-, Svelte- und Astro-Komponenten, JSX/TSX, JavaScript, das Markup erzeugt, und CSS laufen. Er liest Tags so, wie Frameworks sie schreiben (JSX-Ausdrücke und Spreads, gebundene Vue-Attribute, Template-Blöcke), weiß, dass next/image, Image von Astro und NgOptimizedImage von Angular lazy laden, sofern sie nicht als priority markiert sind, überspringt Kommentare, noscript-Fallbacks und Werte, die Templates zur Laufzeit einsetzen, und lässt die Standard-Snippets von Google Tag Manager, gtag, Google Fonts (mit display=swap) und Cookiebot in Ruhe. Bei Bilddateien, die Ihre Seiten verwenden, liest er nur die Dateigröße. Er führt Ihre Website nie aus, baut sie nicht und lädt sie nicht. Er liefert BLOCK, REVIEW oder NOT FLAGGED mit Datei, Zeile, Grund und einem sichereren Vorgehen, und jede Regel verlinkt auf die Dokumentation von web.dev, den HTML-Standard oder die Chrome-Dokumentation, auf der sie beruht. Geheimnisse werden nie ausgegeben.

Was geprüft wird

BLOCK (vor der Auslieferung beheben)

• P01: ein Bild, das per Preload vorgeladen wird (link rel="preload" oder priority/preload in next/image, Astro oder Angular) und zugleich loading="lazy" hat, ohne dass es auf der Seite eine sofort geladene Kopie davon gibt
• P02: link rel="preload" ohne gültigen as-Wert (der Browser lädt nichts)
• P03: Font- oder Fetch-Preloads ohne crossorigin (werden zweimal heruntergeladen)
• P04: document.write direkt auf der Seite für ein Skript von einem anderen Host ohne async oder defer

REVIEW (vor dem Release prüfen)

• P11: lazy geladene Bilder, die nach dem ersten Bildschirm aussehen (fetchpriority="high", erstes Bild im Body oder Namen wie hero, banner und ähnliche)
• P12: img-Elemente ohne width und height (Größen im eigenen oder verlinkten CSS der Seite zählen)
• P13: Skripte im Head ohne async, defer oder type="module"
• P14: @font-face ohne font-display und Google-Fonts-URLs ohne display=
• P15: CSS-@import-Ketten, denen der Browser nacheinander folgen muss
• P16: data:-URIs mit mehr als 10.000 Zeichen, eingebettet in HTML, CSS oder JavaScript
• P17: iframes (Videos, Karten, Widgets) ohne loading-Attribut
• P18: Bilddateien über 500 KB, die von einer Seite, einer Komponente oder einem Stylesheet verwendet werden
• P19: srcset mit Breitendeskriptoren und ohne sizes

Lieferumfang

• Der Scanner (Python 3.9+, nur Standardbibliothek)
• Ein Regelleitfaden mit Grund, sichererem Vorgehen und Link zur offiziellen Quelle für jede Regel
• Ein riskantes und ein sicheres Beispielprojekt (eine statische Website und eine Next.js-Seite) sowie der echte Bericht, den der Scanner für das riskante erzeugt

Grenzen

Er liest jede Datei für sich und kennt keine Bildschirmgrößen, daher kann er nicht sagen, welches Bild wirklich das LCP-Element ist: Die Regel zum ersten Bildschirm ist ein Hinweis, den Sie bestätigen sollten. CSS, das die Seite nicht selbst verlinkt oder importiert (das globale Stylesheet eines Layouts, CSS-Module, CSS-in-JS), Preloads in einer Layoutdatei oder in HTTP-Headern und zur Laufzeit erzeugtes Markup werden nicht erfasst. Er misst weder INP noch die Serverantwortzeit oder die Kosten von Skripten Dritter; bestätigen Sie das Ergebnis mit Lighthouse oder PageSpeed Insights. NOT FLAGGED ist keine Garantie.

Inhalt

Eine ZIP-Datei mit 25 Dateien: SKILL.md, der Scanner in scripts/ (5 Python-Dateien), references/rules.md (jede Regel mit Grund und sichererem Vorgehen) und examples/ (17 Beispieldateien plus report.md, die echte Scannerausgabe für das riskante Beispiel).

Verwendung: Dies ist ein Agent-Skill: ein Ordner mit einer SKILL.md-Datei und Python-Skripten, die ein KI-Coding-Agent wie Claude Code, Cursor oder Codex CLI ausführen kann. Entpacken Sie ihn in den Skills-Ordner Ihres Agenten (für Claude Code: ~/.claude/skills/) und bitten Sie Ihren Agenten dann, Ihr Projekt zu prüfen. Die Skripte laufen auch eigenständig mit Python 3.9 oder neuer, ohne dass etwas installiert werden muss. Sie lesen nur Ihre Dateien: kein Netzwerkzugriff, und nichts wird irgendwohin gesendet.