Lazy Loading

Lazy Loading ist eine Performance-Optimierungstechnik, die das Laden nicht sichtbarer Inhalte aufschiebt, bis der Nutzer sie tatsächlich benötigt. Anstatt jedes Bild, jede Seite und jedes Asset beim ersten Öffnen einer Publikation herunterzuladen, ruft Lazy Loading Ressourcen bei Bedarf ab — typischerweise wenn der Nutzer scrollt oder dorthin navigiert. Der Browser oder die Viewer-Anwendung lädt nur das, was sofort sichtbar ist, und ruft dann schrittweise zusätzliche Inhalte im Hintergrund ab. Dies reduziert die initiale Payload-Größe, verkürzt die Zeit bis zur ersten sinnvollen Interaktion und spart Bandbreite für Nutzer, die möglicherweise nie bis zum Ende eines langen Dokuments scrollen.

Jede zusätzliche Sekunde Ladezeit erhöht die Wahrscheinlichkeit, dass ein Leser eine Publikation verlässt, bevor sie fertig gerendert ist. Für digitale Flipbooks und Dokumente, die Dutzende oder Hunderte von Seiten mit hochauflösenden Bildern enthalten können, erzeugt das Vorladen aller Inhalte eine inakzeptable Verzögerung — besonders auf mobilen Geräten mit begrenzter Bandbreite. Lazy Loading löst dieses Problem, indem es dem Inhalt Priorität gibt, den der Leser zuerst sieht, und alles andere aufschiebt. Das Ergebnis ist eine schnellere wahrgenommene Ladezeit, niedrigere Absprungraten und verbesserte Core-Web-Vitals-Werte (insbesondere Largest Contentful Paint), die direkt das Suchmaschinenranking für Seiten beeinflussen, die deine Publikationen einbetten.

FlipLink wendet Lazy Loading automatisch sowohl auf Flipbooks als auch auf Dokumenten-Viewer an — keine Konfiguration erforderlich. Wenn ein Leser ein [Flipbook](/glossary/flipbook) öffnet, werden nur die aktuelle Doppelseite und die unmittelbar angrenzenden Seiten geladen. Während der Leser weiterblättert, laden die kommenden Seiten im Hintergrund, bevor sie benötigt werden, was reibungslose Übergänge ohne sichtbare Ladeverzögerungen gewährleistet. Dies wird von der [Seitenerlebnis und Layout](/features/page-experience-and-layout)-Engine gesteuert, die das Rendering sowohl für den [Three.js](/glossary/three-js)-Flipbook-Viewer als auch für den [PDF.js](/glossary/pdf-js)-Dokumentenleser koordiniert. Die Funktion [benutzerdefinierter Ladebildschirm](/features/custom-loading-screen) zeigt deinen gebrandeten Splash, während die ersten Assets geladen werden, damit Leser ein poliertes Erlebnis statt eines leeren Bildschirms sehen. Für auf externen Websites eingebettete Flipbooks über [Einbettungscode](/features/sharing-and-distribution) wird auch das iframe selbst lazy geladen, was bedeutet, dass es keine Daten abruft, bis der Besucher zu diesem Abschnitt der Hostseite scrollt.

Lazy Loading in FlipLink arbeitet auf zwei verschiedenen Ebenen: - **Lazy Loading auf Seitenebene** — Innerhalb eines Flipbooks werden Seiten in einer Prioritätswarteschlange geladen. Die aktuelle Seite und die nächsten zwei Seiten in jede Richtung werden sofort geladen. Weiter entfernte Seiten werden eingereiht und progressiv geladen, wobei sich die Priorität verschiebt, wenn der Leser navigiert. Dies stellt sicher, dass egal wie schnell jemand durch einen 200-Seiten-Katalog blättert, die nächste Seite immer bereit ist. - **Lazy Loading auf Einbettungsebene** — Wenn ein Flipbook auf einer Website eingebettet ist, nutzt FlipLink das native Browser-Attribut `loading="lazy"` am iframe-Element zusammen mit einem Intersection-Observer-Fallback für ältere Browser. Der gesamte Flipbook-Viewer bleibt ungeladen, bis er in den [Viewport](/glossary/viewport) eintritt, was verhindert, dass eingebettete Flipbooks die Ladezeit der Hostseite verlangsamen. - **Bildoptimierung** — Einzelne Bilder innerhalb jeder Seite werden in modernen Formaten (WebP wo unterstützt) und in Auflösungen bereitgestellt, die an die Bildschirmgröße des Betrachters angepasst sind. Dies arbeitet Hand in Hand mit Lazy Loading, um den Bandbreitenverbrauch auch nach dem Abruf von Inhalten zu minimieren. Diese Ebenen kombinieren sich, um sicherzustellen, dass eine 300-seitige Publikation ihren ersten sichtbaren Inhalt in unter zwei Sekunden auf einer Standardverbindung lädt, unabhängig von der Gesamtdateigröße.

- **Halte die Assets der ersten Seite schlank.** Lazy Loading schiebt Inhalte auf, aber die erste sichtbare Doppelseite wird trotzdem sofort geladen. Die Optimierung des Covers und der ersten Seiten mit komprimierten Bildern gewährleistet den schnellstmöglichen ersten Eindruck. - **Teste auf gedrosselten Verbindungen.** Eine Publikation, die bei schnellem WLAN reibungslos lädt, kann bei einer mobilen 3G-Verbindung Lazy-Loading-Lücken offenbaren. Nutze Browser-Entwicklungswerkzeuge, um langsamere Netzwerke beim Testen zu simulieren. - **Vermeide das Vorladen zu vieler Seiten.** Das Vorladen von 10 Seiten verschwendet Bandbreite für Leser, die nach der zweiten Seite gehen könnten. FlipLinks Standard von zwei vorausgeladenen Seiten trifft die richtige Balance zwischen Reaktionsfähigkeit und Effizienz. - **Überwache die [Core Web Vitals](/glossary/core-web-vitals).** Überprüfe nach dem Einbetten eines Flipbooks die LCP- und CLS-Werte deiner Hostseite, um sicherzustellen, dass der eingebettete Viewer keine Layout-Verschiebungen einführt oder den Hauptinhalt verzögert. - **Kombiniere mit einem Ladebildschirm.** Ein gebrandeter [benutzerdefinierter Ladebildschirm](/features/custom-loading-screen) gibt Lesern etwas zu sehen während der kurzen initialen Ladezeit, reduziert die wahrgenommene Wartezeit und stärkt deine Marke.

**„Lazy Loading bedeutet, dass Inhalte langsam laden."** Das Gegenteil ist richtig. Lazy Loading macht das initiale Erlebnis schneller, indem es Inhalte nicht lädt, die der Leser noch nicht erreicht hat. Benötigter Inhalt lädt mit normaler Geschwindigkeit — oft schneller, weil der Browser nicht mit Dutzenden anderer gleichzeitiger Anfragen konkurriert. **„Lazy Loading schadet der SEO."** Für Publikationen, die im FlipLink-Viewer angesehen werden, wird der Inhalt bei Bedarf für Leser gerendert, nicht für Crawler. Die SEO der Hostseite wird tatsächlich verbessert, weil lazy geladene eingebettete iframes die Largest-Contentful-Paint-Metrik der Seite nicht blockieren. **„Man muss Lazy Loading manuell konfigurieren."** In FlipLink wird Lazy Loading automatisch auf jede Publikation angewandt. Es gibt keine Einstellungen zum Umschalten oder Schwellenwerte zum Konfigurieren — es funktioniert sofort für sowohl Flipbook- als auch Dokumenten-Viewer-Formate.

Lazy Loading stellt sicher, dass Leser die erste Seite einer Publikation nahezu sofort sehen, unabhängig davon, ob das vollständige Dokument 10 oder 500 Seiten umfasst, indem nur das geladen wird, was gerade benötigt wird, und alles andere aufgeschoben wird.