Der Audio-Player wird standardmäßig lazy-geladen. Er lädt sein JavaScript oder CSS erst, wenn der Besucher nah genug heranscrollt. Das hält den Largest Contentful Paint (LCP) deiner Seite schnell.
Was Lazy Load bewirkt
- Beim Seitenaufruf wird ein kleiner Platzhalter an der Player-Position gerendert
- JavaScript und CSS für den vollständigen Player werden noch NICHT geladen
- Sobald der Besucher auf 500 px an den Player heranscrollt, wird der vollständige Player geladen und ersetzt den Platzhalter
- Der Übergang ist visuell gleichmäßig (in der Regel unter 100 ms)
Warum es Core Web Vitals verbessert
Ohne Lazy Load zahlt jede Seite mit einem Player die Kosten für Player-JS und CSS beim initialen Laden. Mit Lazy Load:
- LCP: nicht betroffen - der Player befindet sich nicht im Above-the-fold-Bereich
- INP: nicht betroffen - beim Laden läuft kein schweres JS
- CLS: nicht betroffen - der Platzhalter hat dieselbe Höhe wie der finale Player
Wann du es deaktivieren solltest
Lazy Load ist standardmäßig aktiv. Deaktiviere es, wenn:
- Dein Player immer above the fold ist (selten)
- Du Autoplay nutzt und möchtest, dass der Player sofort bereit ist (sehr selten)
- Du ohne Lazy Load debuggen möchtest
So deaktivierst du es
- Gehe zu Text-zu-Sprache → Erweitert.
- Schalte Lazy-Load-Player auf aus.
- Speichern.
Technische Funktionsweise
- Das Plugin verwendet
IntersectionObserver, um zu erkennen, wann der Player in den Sichtbereich scrollt - Bei Schnittmenge werden das erforderliche JS und CSS dynamisch geladen
- Nach dem Laden bleiben die Skripte für den Rest der Sitzung im Browser-Cache
Browser ohne IntersectionObserver (sehr alte) laden die Skripte beim Seitenaufruf als Fallback.
Bekannte Sonderfälle
Player in einem versteckten Element
Befindet sich dein Player in einem display: none-Bereich (z. B. einem zugeklappten Akkordeon), wird Lazy Load erst ausgelöst, wenn der Bereich sichtbar wird. Das ist meistens gewünscht - es macht keinen Sinn, etwas zu laden, das nicht angezeigt wird.
Audio-Autoplay
Wenn du Autoplay am Player aktivierst und er lazy-geladen wird, spielt er erst ab, wenn der Besucher dazu scrollt. Autoplay startet, sobald der Player geladen ist.