# PageSpeed-Referenz

Beim Erstellen oder Bearbeiten einer Website: Geh diese Checkliste vollstandig durch.
Prufe jede Regel gegen die aktuelle Implementierung und optimiere, bis alle
Anforderungen erfullt sind. Ziel ist 100/100 in allen vier Kategorien.

Zielwerte (gemessen via PageSpeed Insights, mobil und desktop):
- Performance: 100
- Accessibility: 100
- Best Practices: 100
- SEO: 100

---

## 1. PERFORMANCE

### LCP (Largest Contentful Paint)
- Jede Seite muss ein klar identifizierbares LCP-Element haben.
- Der Hero-Bereich muss entweder ein sichtbares `<h1>`-Tag oder ein `<img>` mit
  `fetchpriority="high"` als dominantes above-the-fold-Element enthalten.
- Kein LCP-Element, das nach dem initialen Render per JavaScript geladen wird.
- Hero-Hintergrundvideos zahlen nicht als LCP-Elemente. Immer mit einem
  sichtbaren `<h1>` oder `<img>` kombinieren.

### FCP (First Contentful Paint)
- Ziel: unter 1,8 s auf Mobil, unter 0,8 s auf Desktop.
- Kein render-blockendes CSS oder JS im `<head>`, außer es ist zwingend nötig.
- Alles nicht-kritische CSS mit `media="print" onload="this.media='all'"` laden
  oder verzögern.
- Alles nicht-kritische JS mit `defer` oder `async` laden.

### Total Blocking Time
- Kein synchrones JavaScript im kritischen Rendering-Pfad.
- jQuery oder andere große Bibliotheken nie synchron im `<head>` laden.
- Nur kritisches CSS (above-the-fold) inline einbinden. Alles andere verzögern.

### CLS (Cumulative Layout Shift)
- Jedes `<img>`- und `<video>`-Element muss explizite `width`- und `height`-Attribute haben.
- Kein CSS, das nach dem initialen Render Layout-Verschiebungen verursacht.
- Schriften mussen `font-display: swap` oder `font-display: optional` verwenden.

### Speed Index
- Gesamtes Seitengewicht unter 1 MB fur den initialen Load.
- Alle Bilder im WebP-Format mit JPEG/PNG-Fallback.
- Bilder immer passend zur Displaygröße — nie ein 2000px-Bild in einem 400px-Container.
- `loading="lazy"` auf allen Bildern unterhalb des sichtbaren Bereichs.
- Kein `.gif` fur Animationen — WebP oder CSS-Animationen verwenden.
- Videos nie im `.mov`-Format. Nur `.mp4` (H.264) fur Web-Video.
  Bei Hintergrundvideos auch ein WebP-Poster-Bild bereitstellen.

### Fonts
- Keine Schriften von externen Subdomains oder Staging-Domains laden.
- Alle Schriften self-hosted auf derselben Origin wie die Website.
- Alle `@font-face`-Deklarationen mussen `font-display: swap` enthalten.
- Schriftdateien im `.woff2`-Format.
- Keine Schriftpfade von externen Origins referenzieren.

### Caching
- Alle statischen Assets (Bilder, Schriften, CSS, JS) mussen einen `Cache-Control`-Header
  mit `max-age` von mindestens 31536000 (1 Jahr) haben, wenn versionierte Dateinamen
  verwendet werden.

### Compression
- Alle CSS- und JS-Dateien mussen minifiziert sein.
- Gzip- oder Brotli-Kompression fur alle textbasierten Assets aktivieren.
- Ungenutztes CSS und ungenutztes JavaScript aus dem Production-Build entfernen.

---

## 2. ACCESSIBILITY

### Farbkontrast
- Alle Texte mussen WCAG-AA-Kontrastverhaltnisse erfullen:
  - Normaler Text: mindestens 4,5:1
  - Großer Text (18px+ fett oder 24px+ regular): mindestens 3:1
- Kein helles Grau auf weißem oder fast weißem Hintergrund.
- Kein dunkler Text auf dunklem Hintergrund ohne Kontrastprufung.
- Footer-Text muss besonders auf Kontrast gepruft werden.

### Heading-Hierarchie
- Jede Seite muss eine strikte Heading-Reihenfolge einhalten: h1 → h2 → h3 → h4.
- Keine Heading-Level uberspringen (z.B. direkt von h1 zu h4).
- Jede Seite muss genau ein `<h1>` haben.

### Bilder
- Jedes `<img>`, das Informationen vermittelt, muss ein beschreibendes `alt`-Attribut haben.
- Rein dekorative Bilder mussen `alt=""` haben.
- Das `alt`-Attribut nie komplett weglassen.

### Video & Audio
- Hintergrundvideos, die rein dekorativ sind, mussen `role="presentation"`
  und `aria-hidden="true"` haben.
- `role="presentation"` nicht auf `<video>`-Elemente mit echtem Inhalt anwenden —
  das ist eine ungultige ARIA-Rollenkombination.
- Jedes Video mit informativem Audio muss `<track kind="captions">` enthalten.

### ARIA
- Nur ARIA-Rollen verwenden, die fur das jeweilige HTML-Element gultig sind.
- Nie `role="presentation"` auf ein `<video>`-Element anwenden.

### Navigation & Tastatur
- Alle interaktiven Elemente mussen per Tastatur navigierbar sein.
- Fokuszustande mussen sichtbar sein.

---

## 3. BEST PRACTICES

### Security Headers
Jede Website muss folgende HTTP-Response-Header enthalten:
```
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Content-Security-Policy: default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  font-src 'self';
```

### CORS
- Keine Schriften, Skripte oder Stylesheets von einer anderen Origin laden, ohne
  sicherzustellen, dass diese Origin den korrekten `Access-Control-Allow-Origin`-Header sendet.
- Schriften mussen von derselben Origin kommen. Alle Schriften self-hosten.

### HTTPS
- Die Website muss allen HTTP-Traffic auf HTTPS umleiten.
- Kein Mixed Content (HTTP-Ressourcen auf einer HTTPS-Seite).

### Console Errors
- Null Browser-Console-Errors in der Produktion.
- Keine fehlgeschlagenen Netzwerkanfragen.
- Keine ungultigen Ressourcenpfade.

### JavaScript-Bibliotheken
- jQuery nicht einbinden, außer es ist unbedingt notwendig.
- Falls jQuery verwendet wird, mit `defer` laden.
- Alle ungenutzten JavaScript-Bibliotheken aus dem Build entfernen.

### Source Maps
- Keine kaputten Source-Map-Referenzen in der Produktion ausliefern.
- Entweder gultige Source Maps einbinden oder `sourceMappingURL`-Referenzen entfernen.

---

## 4. SEO

### Meta-Tags
- Jede Seite muss ein eindeutiges `<meta name="description">`-Tag mit 120–160 Zeichen haben.
- Jede Seite muss ein eindeutiges `<title>`-Tag mit 50–60 Zeichen haben.

### Strukturierte Daten
- Passende Schema.org-strukturierte Daten (z.B. `WebPage`, `FAQPage`, `Article`)
  als JSON-LD im `<head>` einbinden.
- Regeln dazu in `reference/rich-results-checkliste/rich-results-checkliste.md`.

### Canonical & hreflang
- Jede Seite muss ein `<link rel="canonical">`-Tag haben.
- Bei mehrsprachigen Seiten: korrekte `hreflang`-Attribute verwenden.

### Robots & Crawlability
- `robots.txt` muss vorhanden und gultig sein.
- Keine fur Indexierung vorgesehenen Seiten mit `noindex` blockieren.
- Alle internen Links mussen beschreibenden Ankertext verwenden.

### Bilder fur SEO
- Alle Bilder mussen beschreibenden `alt`-Text haben, der relevante Keywords
  enthalt, wo sinnvoll.