---
name: core-web-vitals-perfection
description: Optimiert den generierten Code auf maximale Ladegeschwindigkeit und erzwingt Werte von >95% in Google Lighthouse / Core Web Vitals.
---

# Core Web Vitals Perfection Guidelines

*   **LCP (Largest Contentful Paint):** Hero-Bilder müssen immer das Attribut `loading="eager"` und `fetchpriority="high"` erhalten. Niemals Lazy-Loading im sichtbaren Bereich über dem Falz.
*   **CLS (Cumulative Layout Shift) verhindern:** Jedes Bild und jedes interaktive Element (wie Slider oder Akkordeons) MUSS feste Breiten- und Höhenangaben (`width`, `height` oder `aspect-ratio`) besitzen, damit das Layout beim Laden nicht springt.
*   **Semantisches HTML & CSS-First:** JavaScript-freie Alternativen bevorzugen. Animationen und interaktive States (wie Dropdowns oder Modals) wenn möglich über reines CSS (:hover, :focus-within, Details/Summary-Tags) lösen.