---
title: "Durrani Website — Tech-Gates (Pre-Implementation-Contract)"
type: reference
tags: [durrani, website, performance, security, csp, seo, ci-gates, cache, isr]
date: 2026-05-24
status: aktiv
source: "[[DESIGN]]"
related: "[[DESIGN]], [[plan]], [[constitution]]"
---

# Durrani Website — Tech-Gates

> Vor dem ersten echten Code definiert (Kais-Vorgabe). CI-erzwungene Merge-Gates + technische Strategien. Ergänzt [[DESIGN]] §22 (Perf) / §14 (SEO/AI) / §15 (A11y) und [[plan]] (Security/ISR).

## 1. Performance-Gates (CI Merge-Gate, hart)
| Metrik | Gate (Mobile) | Tool |
|---|---|---|
| Lighthouse Performance | ≥ 95 | Lighthouse-CI |
| Lighthouse SEO | = 100 | Lighthouse-CI |
| Lighthouse A11y | ≥ 95 | Lighthouse-CI + axe |
| LCP | < 2.0s | Lighthouse-CI / CrUX |
| INP | < 200ms | Lighthouse-CI / RUM |
| CLS | < 0.05 | Lighthouse-CI |
| First-Load-JS (route-initial) | ≤ ~120KB gz | next build / size-limit |
| Fonts | 2 variable, subset, preload, swap | manuell + CI-check |
| Third-Party | lazy + consent/perf-gated, kein render-block | manuell |
PR rot wenn ein Gate reißt.

## 2. CSP-Strategie
Strict-ish, nonce-basiert wo möglich:
- `default-src 'self'`; `img-src 'self' data: <cdn>`; `font-src 'self'`;
- `script-src 'self' 'nonce-…'` + erlaubte Third-Parties (GloriaFood `fbgcdn.com`, Umami-Host) explizit gelistet — kein `unsafe-inline` für Scripts.
- `connect-src 'self' <kadi-bff-origin> <umami>`; `frame-src` nur falls GloriaFood iframe nutzt.
- `style-src 'self' 'unsafe-inline'` (Tailwind/Inline-Styles; sonst nonce).
- `frame-ancestors 'none'`, `base-uri 'self'`, `form-action 'self'`, `upgrade-insecure-requests`.
- Report-Only-Phase vor Enforce (CSP-Reports sammeln, dann hart schalten).

## 3. Security-Header (zusätzlich)
HSTS (`max-age=63072000; includeSubDomains; preload`), `X-Content-Type-Options: nosniff`, `Referrer-Policy: strict-origin-when-cross-origin`, `Permissions-Policy` (geolocation/camera/mic aus), `X-Frame-Options: DENY`. Cloudflare-WAF davor. CMS-Admin (Payload) nicht öffentlich + 2FA. Form-Endpoints: BFF-Rate-Limit + Turnstile (KADi hat keins, [[kadi-integration]]).

## 4. Bild-/CDN-Strategie
- Quelle: Payload-Media (Netcup/EU) → **Cloudflare als CDN/Image-Resizing** davor (AVIF/WebP, responsive `srcset`, korrekte `width/height` → CLS 0, `loading=lazy` außer LCP-Hero `priority`).
- Hero = LCP: preload + `fetchpriority=high`, AVIF, exakte Dimensionen.
- Galerie: lazy, Blur-Placeholder (LQIP), `content-visibility:auto` für off-screen.
- Max-Dimensionen pro Breakpoint definiert; keine Über-Auflösung ausliefern.

## 5. Cache- + ISR/Revalidation-Strategie
- **Statische Seiten (SSG):** Cloudflare-Edge-Cache lang, `Cache-Control: public, s-maxage, stale-while-revalidate`.
- **CMS-Content (Menu/Events/Hours):** ISR/On-Demand-Revalidate via signiertem Payload→Frontend-Webhook (`/api/revalidate`) bei Publish → frische Seite ohne Full-Rebuild. (Cloudflare-Pages: Deploy-Hook / Cache-Purge-API als ISR-Äquivalent.)
- **KADi-Verfügbarkeit (slots):** NICHT cachen (live), server-fetch zur Anfragezeit; Widget-Settings kurz cachebar.
- **Statische Assets:** immutable, `max-age=31536000`.

## 6. SEO-QA-Checklist (pre-launch)
- [ ] 1× h1/Seite, saubere Heading-Hierarchie, semantische Landmarks
- [ ] Title + Meta-Description je Seite (DE+EN), hreflang
- [ ] Canonicals, OG + Twitter-Cards je Seite
- [ ] Sitemap.xml + robots.txt aktuell
- [ ] Alle Schema-Typen (Restaurant/LocalBusiness/Menu/FAQ/Event/Review/Breadcrumb) valide (Rich-Results-Test 0 Fehler)
- [ ] 301-Redirects alte WP-URLs gemappt
- [ ] Interne Verlinkung + Breadcrumbs
- [ ] Google-Business-Profile NAP-Konsistenz

## 7. AI-Discoverability-Checklist
- [ ] SSG-HTML enthält vollständigen Content + Schema OHNE JS-Ausführung (curl-Test)
- [ ] Strukturierte Entitäten (Menu-Items, Hours, Location, Catering) maschinenlesbar als JSON-LD
- [ ] Klartext-Antworten auf Kern-Fragen im HTML (Öffnungszeiten, Halal, Reservierung, Standort) — AI-zitierfähig
- [ ] `llms.txt` evaluieren (optional, AI-Crawler-Hinweis)
- [ ] saubere, beschreibende URLs + Alt-Texte

## 8. Mobile-Performance-Gates
Alle Perf-Gates oben gelten Mobile-first (Drosselung 4G/Mid-Tier-Device im CI). Zusätzlich: Touch-Targets ≥44px (auch ein A11y- + Perf-Wahrnehmungs-Gate), kein CLS durch Late-Loading-Embeds (GloriaFood/KADi reservieren Platz).

## Verwandt
- [[DESIGN]] (§22 Perf, §14 SEO/AI, §15 A11y) · [[plan]] (AD-1/AD-4, Security) · [[kadi-integration]] · [[constitution]] (II/III/IV)