{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "sofort-navigation-vorladen",
 "name": "Sofortige Seitenwechsel durch Vorladen",
 "name_en": "Instant navigation with Speculation Rules (prefetch and prerender)",
 "kurz": "Eine Architekturseite mit echten Speculation Rules: prefetch und prerender nach 200 ms Hover, klare Ausschlüsse, Statistik erst bei prerenderingchange; ein Monitor zeigt Slots, Ausschlussgrund und Wechselzeit.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "robust",
  "präzise",
  "ruhig"
 ],
 "technik": [
  "speculation-rules",
  "view-transitions",
  "vanilla-js",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Speculation Rules für Seiten mit mehreren Dokumenten. Ein <script type=\"speculationrules\"> lädt interne Links per prefetch mit eagerness moderate vor, sobald der Zeiger kurz auf dem Link ruht. Ein bis drei Hauptwege (zum Beispiel Projekte und Kontakt) werden per prerender komplett im Hintergrund aufgebaut. Ausgeschlossen sind Warenkorb, Abmelden, Formular-Ergebnisse, Login-Bereiche, Links mit Parametern und alles, was eine Einwilligung auslöst. Zusammen mit Cross-Document View Transitions wirkt der Seitenwechsel sofort. Die Statistik zählt einen Aufruf erst, wenn die vorgerenderte Seite wirklich angezeigt wird.",
  "warum_es_wirkt": "Die Wartezeit zwischen Klick und neuer Seite ist der Moment, in dem eine Seite träge wirkt. Eine vorgerenderte Seite erscheint ohne Ladezeit, auch ohne Single-Page-Framework. Der Aufwand ist ein JSON-Block im Kopf. Browser ohne Unterstützung ignorieren ihn folgenlos, die Seite funktioniert dort wie bisher. WordPress lädt seit 6.8 standardmäßig vor, das Muster ist damit bei vielen KMU-Seiten schon halb da und wird hier bewusst eingestellt.",
  "wann_einsetzen": "Bei jeder Seite mit mehreren echten Seiten: Praxis, Kanzlei, Architektur, Handwerk, Immobilien, Kultur. Besonders bei klaren Hauptwegen (Termin, Projekte, Kontakt) und bei Seiten mit Cross-Document View Transitions.",
  "wann_nicht": "Nicht bei Onepagern oder Single-Page-Apps mit eigenem Router. Kein prerender für Seiten mit Nebenwirkungen beim Laden (Abmelden, Warenkorb ändern, Formular absenden, Zähler, Consent-Dialoge, Bezahlseiten) und nicht für sehr schwere Seiten. Kein immediate für alle Links: das kostet Datenvolumen und Server-Last. Nicht als Ersatz für eine schnelle Seite; LCP, INP und CLS bleiben die Prüfstufe.",
  "varianten": [
   "Empfehlung: prefetch moderate für alle internen Links, prerender moderate für 1 bis 3 Hauptwege, klare Ausschlüsse",
   "WordPress-Standard seit 6.8: nur prefetch mit conservative (beim Drücken)",
   "Mit Cross-Document View Transitions (@view-transition { navigation: auto })",
   "Regeln per HTTP-Kopfzeile Speculation-Rules statt Inline-Skript (strenge CSP)"
  ],
  "umsetzung": "Im Kopf jeder Seite ein <script type=\"speculationrules\"> mit zwei Document Rules (siehe werte.regeln). prerender nur für 1 bis 3 Hauptwege, prefetch für alle übrigen internen Links, beide mit eagerness moderate. Ausschlüsse über not: Login-Bereich, Abmelden, Danke-Seiten nach Formularen, PDFs, Links mit Parametern (selector a[href*='?']), nofollow, Consent-Links (data-consent) und eine Klasse .kein-vorladen für Einzelfälle. Chrome hält bei moderate je 2 prefetch und 2 prerender und verwirft das älteste. Statistik, Autoplay und Chat-Widgets erst nach prerenderingchange starten (document.prerendering prüfen). Für den Übergang @view-transition { navigation: auto } in @media (prefers-reduced-motion: no-preference). Bei strenger CSP die Regeln als JSON-Datei über die Kopfzeile Speculation-Rules (application/speculationrules+json). Die Demo simuliert die Seitenwechsel in einer Datei; ihr echter Regelblock steht im Kopf, wird von der Simulation ausgewertet und greift auf der Demo-Seite selbst nicht, weil alle Demo-Links Parameter tragen. Prüfen in den DevTools unter Application → Speculative loads; LCP, INP und CLS messen.",
  "mobil": "Ohne Hover lädt moderate in Chrome mobil nach einer Viewport-Heuristik vor (500 ms nach Scroll-Ende, für große Links in der Nähe), sonst beim Antippen. Datensparmodus und Energiesparmodus schalten das Vorladen ab, ohne dass die Seite etwas tun muss.",
  "reduzierte_bewegung": "Vorladen bleibt aktiv, denn es spart nur Zeit. Die View Transition steht in @media (prefers-reduced-motion: no-preference); bei reduzierter Bewegung wechselt die Seite hart, aber genauso schnell.",
  "barrierefreiheit": "Schnelle Seitenwechsel helfen allen, besonders bei langsamen Geräten. 2.4.3 Fokusreihenfolge (A) und 2.4.1 Bereiche überspringen (A): nach dem Wechsel startet der Fokus wie bei jeder neuen Seite oben, Sprunglink und Seitentitel bleiben. Vorgerenderte Seiten dürfen beim Anzeigen nichts automatisch vorlesen oder abspielen, was beim Vorladen schon gestartet wäre (Autoplay erst nach prerenderingchange). 2.3.3 Animation durch Interaktion (AAA) und prefers-reduced-motion: Übergang abschaltbar. Links bleiben echte <a href>, ohne JS-Router. Die Chrome-Doku nennt für moderate Hover und pointerdown als Auslöser, Tastaturfokus nicht; wer per Tastatur navigiert, bekommt dann einen normal schnellen Wechsel, nie einen schlechteren."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.1, 0.6, 0.4, 1)",
  "dauer_ms": "250",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Hover-Schwelle moderate 200 ms (Desktop), mobil 500 ms nach Scroll-Ende, Grenzen 2 prefetch und 2 prerender je eagerness außer immediate (Chrome for Developers, Stand 23.01.2026); Kurve und Dauer aus dem Rezept architektur-ruhiges-raster",
  "herkunft": "beobachtet",
  "quelle": "https://developer.chrome.com/blog/prerender-pages"
 },
 "kurve": {
  "bezier": [
   0.1,
   0.6,
   0.4,
   1.0
  ],
  "css": "cubic-bezier(0.1, 0.6, 0.4, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Chrome for Developers: Prerender pages in Chrome for instant page navigations",
   "url": "https://developer.chrome.com/blog/prerender-pages",
   "auszeichnung": "",
   "beobachtung": "Am 02.11.2026 geprüft (Stand 23.01.2026): Prerender seit Chrome 109, eagerness und Kopfzeile seit 121. moderate: auf dem Desktop nach 200 ms Hover oder bei pointerdown, mobil seit August 2025 Viewport-Heuristik 500 ms nach Scroll-Ende. Grenzen für eager, moderate und conservative je 2 prefetch und 2 prerender (FIFO), immediate 50 und 10. Kein Vorladen bei Datensparmodus, Energiesparmodus mit wenig Akku, wenig Speicher, im Hintergrund-Tab oder wenn „Seiten vorab laden“ aus ist. Statistik: document.prerendering und Ereignis prerenderingchange. Firefox ohne Unterstützung, Safari nur hinter Flag.",
   "art": "artikel"
  },
  {
   "seite": "Chrome 151 Release Notes",
   "url": "https://developer.chrome.com/release-notes/151",
   "auszeichnung": "",
   "beobachtung": "Chrome 151 (28.07.2026) ergänzt das Feld form_submission für prerender, damit vorgerenderte GET-Suchformulare beim echten Absenden übernommen werden.",
   "art": "artikel"
  },
  {
   "seite": "Chrome 152 Release Notes",
   "url": "https://developer.chrome.com/release-notes/152",
   "auszeichnung": "",
   "beobachtung": "Chrome 152 (25.08.2026) führt unter Origin Trials Steuerungen für die Viewport-Heuristik von moderate.",
   "art": "artikel"
  },
  {
   "seite": "Themeisle: WordPress Speculative Loading",
   "url": "https://themeisle.com/blog/wordpress-speculative-loading/",
   "auszeichnung": "",
   "beobachtung": "16.09.2026: WordPress 6.8 lädt im Frontend für abgemeldete Besucher per prefetch mit conservative vor; ausgenommen sind Admin, Login, Links mit _wpnonce und nofollow. Eigene Statistik ohne Prüfung von document.prerendering kann Aufrufe doppelt zählen.",
   "art": "artikel"
  },
  {
   "seite": "MDN: <script type=\"speculationrules\">",
   "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/speculationrules",
   "auszeichnung": "",
   "beobachtung": "Stand 12.10.2026: experimentell, Limited availability (nicht Baseline). Document Rules mit where, and, or, not, href_matches und selector_matches; urls und where nicht in derselben Regel.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome for Developers: Prerender pages in Chrome for instant page navigations",
   "url": "https://developer.chrome.com/blog/prerender-pages"
  },
  {
   "titel": "MDN: <script type=\"speculationrules\">",
   "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/speculationrules"
  },
  {
   "titel": "Themeisle: WordPress Speculative Loading",
   "url": "https://themeisle.com/blog/wordpress-speculative-loading/"
  }
 ],
 "kombinierbar_mit": [
  "vt-cross-document-mpa",
  "vt-shared-element-morph",
  "sprunglinks-landmarken",
  "hover-absicht-timing",
  "projektindex-hover-vorschau",
  "consent-banner-gestaltet"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Lücken-Recherche 02.11.2026 (N6, K7)"
  ],
  "pruefnotizen": [
   "Chrome-Doku am 02.11.2026 per WebFetch geprüft (prerender-pages Stand 23.01.2026, Release Notes 151 und 152); MDN Stand 12.10.2026; Themeisle 16.09.2026.",
   "Firefox unterstützt Speculation Rules nicht (Chrome-Doku), Safari nur hinter Flag. Fällt folgenlos weg.",
   "Tastaturfokus als Auslöser nennt die Chrome-Doku nicht; nicht separat getestet.",
   "Die Demo simuliert Vorladen und Ladezeiten in einer Datei; die Millisekunden in der Demo sind Beispielwerte, keine Messung.",
   "Kennzahlen unverändert: LCP 2,5 s, INP 200 ms, CLS 0,1. Behauptungen über „INP 150 ms ab April 2026“ ohne Google-Quelle nicht übernehmen (Lücken-Recherche K7)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Architekturseite mit echten Speculation Rules: prefetch und prerender nach 200 ms Hover, klare Ausschlüsse, Statistik erst bei prerenderingchange; ein Monitor zeigt Slots, Ausschlussgrund und Wechselzeit.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "regeln": "prerender: document, href_matches [\"/projekte/\", \"/kontakt/\"], not selector_matches [\"a[href*='?']\", \"[data-consent]\", \".kein-vorladen\"], eagerness moderate · prefetch: document, href_matches \"/*\", not href_matches [\"/projektraum/*\", \"/kontakt/danke/\", \"/*.pdf\"], not selector_matches [\"a[href*='?']\", \"[rel~='nofollow']\", \"[data-consent]\", \".kein-vorladen\"], eagerness moderate",
   "hover_schwelle_ms": 200,
   "mobil": "moderate ohne Hover: 500 ms nach Scroll-Ende die 2 größten Links nahe der Mitte des sichtbaren Bereichs (Fläche > 600 px²), sonst pointerdown",
   "grenzen": "je 2 prefetch und 2 prerender, FIFO (ältestes wird verworfen); nach jedem Seitenwechsel leer",
   "simulierte_zeiten_ms": "prefetch bis bereit 300, prerender bis bereit 600; Wechsel: vorgerendert 0 (bzw. Rest), prefetch 120 (+ Rest), ohne Vorladen 900 (Beispielwerte, keine Messung)",
   "statistik": "if (document.prerendering) addEventListener('prerenderingchange', zaehle, { once: true }) else zaehle(); naiver Zähler zählt zusätzlich jeden Prerender-Start",
   "uebergang": "@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }; in der Demo document.startViewTransition mit view-transition-name seite, 250 ms, cubic-bezier(0.1, 0.6, 0.4, 1)",
   "easing": "cubic-bezier(0.1, 0.6, 0.4, 1) (Default, Rezept architektur-ruhiges-raster), Zeiger der Vorführung 700 ms",
   "dauer_ms": 250,
   "absicht_linie": "1.5 px #0022ff wächst in 200 ms linear (Hover-Schwelle); gestrichelt = prefetch, voll = prerender, rot gepunktet = ausgeschlossen",
   "farben": "Weiß, Fläche #e1e3e3, Text #231f20, leise #6b6b70, Monitor #1f2323, Interaktion #0022ff / #8fa0ff, Warnung #ffb648",
   "schriften": "Hanken Grotesk 450 (eine Familie, Kursiv statt Fett), Geist Mono für Monitor und Code"
  },
  "ausloeser": "hover",
  "touch": "Ohne Hover startet das Vorladen beim Antippen (pointerdown) und nach einer Scroll-Pause von 500 ms für die zwei größten Links in der Mitte des Rahmens, wie die Viewport-Heuristik von moderate in Chrome mobil. Der Rahmen ist auf 72svh begrenzt, der Monitor steht darunter.",
  "reduziert": "Kein View-Transition-Übergang, kein wachsender Strich (Linie erscheint sofort), Ladebalken springt; Vorladen und Zeiten bleiben gleich.",
  "korrekturen": {
   "umsetzung": "Im Kopf jeder Seite ein <script type=\"speculationrules\"> mit zwei Document Rules (siehe werte.regeln). prerender nur für 1 bis 3 Hauptwege, prefetch für alle übrigen internen Links, beide mit eagerness moderate. Ausschlüsse über not: Login-Bereich, Abmelden, Danke-Seiten nach Formularen, PDFs, Links mit Parametern (selector a[href*='?']), nofollow, Consent-Links (data-consent) und eine Klasse .kein-vorladen für Einzelfälle. Chrome hält bei moderate je 2 prefetch und 2 prerender und verwirft das älteste. Statistik, Autoplay und Chat-Widgets erst nach prerenderingchange starten (document.prerendering prüfen). Für den Übergang @view-transition { navigation: auto } in @media (prefers-reduced-motion: no-preference). Bei strenger CSP die Regeln als JSON-Datei über die Kopfzeile Speculation-Rules (application/speculationrules+json). Die Demo simuliert die Seitenwechsel in einer Datei; ihr echter Regelblock steht im Kopf, wird von der Simulation ausgewertet und greift auf der Demo-Seite selbst nicht, weil alle Demo-Links Parameter tragen. Prüfen in den DevTools unter Application → Speculative loads; LCP, INP und CLS messen."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept architektur-ruhiges-raster, erfundenes Büro Lenhard Saur Architekten aus Neuss mit fünf Projekten (Strichzeichnungen als SVG). Links: simulierte Seite im Browser-Rahmen mit wachsendem Absichts-Strich; rechts Vorlade-Monitor mit Slots (FIFO), Bewertung jedes Links samt Ausschlussgrund aus dem echten Regelblock, Wechselzeit im Vergleich und zwei Zählern (richtig bei prerenderingchange, naiv). Vorführung: Zeiger fährt Kontakt und Projekte an, klickt (0 ms), öffnet ein Projekt (prefetch, 120 ms), zeigt Projektraum und Cookie-Link als ausgeschlossen. Browser-Stand am 02.11.2026 per WebFetch geprüft: developer.chrome.com (blog/prerender-pages Stand 23.01.2026, release-notes 151 und 152, cross-document View Transitions), developer.mozilla.org, themeisle.com. Die WordPress-Regeln sind vereinfacht (nur die im Artikel genannten Ausschlüsse). Millisekunden sind Beispielwerte. AD-Review 02.11.2026: Note 4 → 4. Nachgebessert: Monitor-Hinweis auf Touch „Tippen Sie einen Link an …“, Domain lenhard-saur.example statt .de.",
  "varianten": [
   {
    "id": "empfehlung",
    "name": "Empfehlung: prefetch und prerender moderate",
    "wann": "Jede Seite mit mehreren Dokumenten und klaren Hauptwegen (Projekte, Termin, Kontakt), eigene Ausschlüsse gepflegt.",
    "werte": {
     "prerender": "moderate für /projekte/ und /kontakt/",
     "prefetch": "moderate für /*"
    }
   },
   {
    "id": "wordpress",
    "name": "WordPress-Standard (vereinfacht)",
    "wann": "WordPress ab 6.8 ohne Anpassung: zeigt, dass conservative nur wenig Vorsprung bringt und eigene Pfade wie Abmelden nicht kennt.",
    "werte": {
     "prerender": "keins",
     "prefetch": "conservative (pointerdown) für /*, ohne /wp-*.php, /wp-admin/*, nofollow"
    }
   }
  ]
 }
}