Lazy-Loading und UX-Beschleunigung

1) Ziele und Grundsätze

• TTI/LCP auf Kosten des kritischen Pfades reduzieren.
• Stabilisieren Sie das Layout (niedrige CLS) mit vorhersehbaren Größen.
• Speichern Sie die Batterie und den Verkehr auf dem Handy.
• Erhöhen Sie die Conversion: Der Benutzer sieht die Aktion früher.

Grundsätze: Priorität → Fortschritt → Vorhersehbarkeit. Erst kritische Inhalte, dann progressives Befüllen und Nachladen von Verbesserungen.

2) Kritischer Renderpfad

Kritisches HTML: Geben Sie "above-the-fold' Markup sofort aus.
Kritisches CSS: Inline ≤ 10-15 KB; der Rest ist 'media =' print''+ swap/dozload.
JS als Blocker: 'defer '/' async', Chunking, Logik auf Routen laden.
Schriftarten: 'font-display: swap' optional', WOFF2 preload, System fallback 'und.

3) Priorisierung von Netzwerkressourcen

Preconnect auf CDN/Schriftarten/Bilder (TCP + TLS im Voraus).
DNS-Prefetch für dritte Domains.
Preload kritische Bilder/Schriften/Skripte.
Priority Hints ('importance =' high 'low', 'fetchpriority =' high''für das Hero-Bild).
HTTP/3/QUIC: weniger Latenz; Der CDN-Rand ist näher am Benutzer.
Cache-Richtlinien: „immutable“ für versionierte Assets; korrekte ETag/Last-Modified.

4) Progressive Rendering und Download-Status

Skeletons/Schimmer statt Spinner: visueller Fortschritt ohne „Sprünge“.
Platzhalter mit fester Größe (Karten, Miniaturen) - Null CLS.
Streaming/Chunked HTML: schnell den Rahmen geben, dann mit Inhalten ergänzen.
Optimistic UI (vorsichtig): sofortige Aktion mit anschließender Validierung.

5) Lazy-Loading von Medieninhalten

Bilder: 'loading =' lazy', 'decoding =' async', AVIF/WebP-Formate (JPEG/PNG-Follback).
Responsive: „srcset “/„ sizes“ unter verschiedenen DPR/Breiten; Versenden Sie nicht 3 ×, wo 1 × ausreicht.
Vorhersehbare Höhe: „Breite/Höhe“ oder CSS „aspect-ratio“.
Video: 'preload =' metadata'', Post-Loading von Postern, Autopause außerhalb von viewport.
Icons: sprite/inline SVG; Vermeiden Sie unnötige HTTP-Anfragen.

6) Faule Komponenten und Routen

Code-Splitting: Dynamischer Import über Routen/Widgets.
Komponenten-Inseln/Teilhydrierung: Beleben Sie nur interaktive Bereiche.
SSR/SSG + ISR: HTML auf dem Server rendern, inkrementell auffrischen.
Suspense/Defer (im verwendeten Framework): Zerlegung von Daten und UI.

7) Riesige Listen und Tabellen

Virtualisierung (windowing): Rendert nur den sichtbaren Bereich + Puffer.
Ankerdosierung: Halten Sie die Position beim Laden von Packungen.
Batch-Updates: Minimieren Sie Überzeichnungen beim Scrollen.
Fixed-row Höhe oder 'contain-intrinsic-size' für vorhersagbare Größen.

8) CSS und Browser-Beschleuniger

'content-visibility: auto': Der Browser überspringt das Unsichtbare (minimale Berechnungen).
'contain '/' will-change': Begrenzt den Einflussbereich von Stilen/Layouts.
Animationen: nur transform/opacity; Vermeiden Sie Layout/Paint-schwere Effekte.
Shadow und Blur - sparsam, vor allem auf den Listen.

9) Ereignis- und JS-Lastmanagement

Passive Scroll/Tacha-Zuhörer ('{passive: true}').
Debounce/throttle auf resize/scroll/handlers.
Verzögerte Initialisierung von Widgets außerhalb des Viewports (IntersectionObserver).
Übertragen Sie schwere Berechnungen auf Web Workers.

10) Mobiler Kontext

Netzwerk: Langsames 3G/hohes RTT - aggressiver fauler Download.
Batterie und Wärme: Begrenzen Sie die Frequenz der Timer, reduzieren Sie den FPS der Hintergrundanimationen.
Komprimierung: Brotli für Text, korrekt 'Accept-Encoding'.
Prefetch über Wi-Fi nur für wahrscheinliche Übergänge (Klickhistorie).

11) Verfügbarkeit und SEO

Skelett ≠ Inhalt: stört die Bildschirmleser nicht; logische Reihenfolge des Fokus.
Server-HTML-Schlüsseltext - Verstecken Sie nicht alles hinter JS.
Alt-Texte und Titel bleiben bis zur Beladung verfügbar.
Lazy-Inhalte sollten Routen nicht über die Tastatur blockieren.

12) Metriken und Zielwerte

LCP (Hero Image/Header): ≤ 2,5 s (Mobile).
INP (Input Response): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms TTI: ≤ 3 s.
Bytes over the wire (first view): Striktes Budget (z.B. ≤ 200-300 KB Kreta). Ressourcen).
Scroll-jank: <1% der Frames> 16,7 ms.

• „lazy _ enqueued “/„ lazy _ loaded“ (Ausweis, Art, Größe, Latenz),
• „component _ hydrated“ (Zeit, Gewicht JS),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• Fehler ('img _ error', 'decode _ timeout').

13) Muster für typische Zonen

Startseite/Katalog: SSR + Skelett Karten, lazy Bilder, progressive Filter.
Produkt/Spiel-Karte: Held-Bild preload + hohe Priorität; Galerie - lazy; Bewertungen - per Klick.
Lange Artikel/Wiki: TOC, Lesefortschritt, lazy für Medien/Codeblöcke, verzögerte Inhaltsverzeichnisse.
Live-Feeds: String-Virtualisierung, „Auto-Scrolling-Pause“, Pufferlimit.

14) Antipatterns

Vollbild Spinner> 1-2 s ohne Fortschritt.
Lazy ohne Platzhalter → Layoutsprünge (CLS ↑).
Download von „nur JS auf einmal“ für seltene Szenarien.
Schwere Schriften/Bilder werden in den kritischen Teil inlayed.
Unvorhersehbare Kartengrößen → „wandernde“ Inhalte.
Lazy Loading Critical (Logo, Hero-Text) - bricht LCP.
Keine Positionsrückgabe nach „zurück“.

15) Checkliste Umsetzung (Schritt für Schritt)

Sprint 1 - Diagnose: LCP/INP/CLS/TTFB messen; Erstellen Sie eine Karte der Ressourcen und des kritischen Pfades.
Sprint 2 - Kritik/Priorität: kritisches CSS/HTML, 'preconnect '/' preload', JS-Chunks reduzieren.
Sprint 3 - Medien: AVIF/WebP, 'srcset/sizes', feste Größen, lazy für non-hero.
Sprint 4 - Listen: Virtualisierung, Ankerdosierung, Skeletons/Shimmer.
Sprint 5 - Architektur: Teilhydrierung/Inseln, SSR/SSG/ISR, Streaming.
Sprint 6 - Feinabstimmung: 'content-visibility', priority hints, debounce, Web Workers.
Sprint 7 - A/B und Telemetrie: Vergleichen Sie Skeleton-Optionen, Lazy-Level, Budgets.
Sprint 8 - Release-Hygiene: Asset-Versionen, Cash-Basting, Rollback-Strategien.

16) Glossar (kurz)

Lazy-Loading - Verzögertes Laden von unsichtbaren Inhalten.
LCP/INP/CLS/TTFB/TTI/TBT sind die wichtigsten UX-Geschwindigkeitsmetriken.
Code-splitting/Hydration/Inseln - Techniken zur Zerkleinerung und Revitalisierung von UI.
Virtualisierung - Rendert das sichtbare Listenfeld.
Priority Hints/Preconnect/Preload - Zeigen Sie Ihrem Browser, was früher geladen werden soll.
Content-visibility - Überspringen Sie Berechnungen für unsichtbare Inhalte.

17) Das Ergebnis

Lazy-loading ist nicht „setzen“ loading = „lazy“ „und fertig“. Es ist ein System: kritischer Pfad, richtige Medienformate, Insel-Interaktivität, Virtualisierung und Telemetrie. Machen Sie das Wichtige sofort, das Sekundäre unauffällig und billig und das Layout vorhersehbar. Dann wird sich das Produkt auf jedem Gerät und in jedem Netzwerk schnell anfühlen.