Odtwarzacz audio jest domyślnie ładowany leniwie. Nie wczytuje swojego kodu JavaScript ani CSS, dopóki odwiedzający nie przewinie strony blisko niego. Dzięki temu wskaźnik Largest Contentful Paint (LCP) Twojej strony pozostaje szybki.
Co robi leniwe ładowanie
- Przy wczytaniu strony w miejscu odtwarzacza renderowany jest mały element zastępczy
- JavaScript i CSS pełnego odtwarzacza NIE są jeszcze ładowane
- Gdy odwiedzający przewinie stronę na odległość 500px od odtwarzacza, pełny odtwarzacz wczytuje się i zastępuje element zastępczy
- Przejście jest wizualnie płynne (zazwyczaj poniżej 100 ms)
Dlaczego pomaga Core Web Vitals
Bez leniwego ładowania każda strona z odtwarzaczem ponosi koszt załadowania JS i CSS odtwarzacza przy początkowym wczytaniu. Z leniwym ładowaniem:
- LCP: bez wpływu - odtwarzacz nie znajduje się w treści widocznej bez przewijania
- INP: bez wpływu - żaden ciężki JS nie uruchamia się przy ładowaniu
- CLS: bez wpływu - element zastępczy ma taką samą wysokość jak finalny odtwarzacz
Kiedy wyłączyć leniwe ładowanie
Leniwe ładowanie jest domyślnie włączone. Wyłącz je, jeśli:
- Twój odtwarzacz jest zawsze widoczny bez przewijania (rzadkie)
- Używasz autoodtwarzania i chcesz, aby odtwarzacz był gotowy natychmiast (bardzo rzadkie)
- Chcesz przetestować stronę bez leniwego ładowania w celach diagnostycznych
Jak je wyłączyć
- Przejdź do Tekst na Mowę → Zaawansowane.
- Przełącz Leniwe ładowanie odtwarzacza na wyłączone.
- Zapisz.
Jak to działa technicznie
- Wtyczka używa
IntersectionObserver, aby wykryć, kiedy odtwarzacz pojawia się w widoku - Po wykryciu przecięcia dynamicznie ładuje wymagany JS i CSS
- Po załadowaniu skrypty pozostają w pamięci podręcznej przeglądarki przez resztę sesji
Przeglądarki bez obsługi IntersectionObserver (bardzo stare) wczytują skrypty przy ładowaniu strony.
Znane przypadki brzegowe
Odtwarzacz wewnątrz ukrytego elementu
Jeśli Twój odtwarzacz znajduje się wewnątrz sekcji display: none (np. zwiniętego akordeonu), leniwe ładowanie nie uruchamia się, dopóki sekcja nie stanie się widoczna. Zazwyczaj jest to pożądane - nie ma sensu ładować czegoś, co nie jest wyświetlane.
Autoodtwarzanie audio
Jeśli ustawisz autoodtwarzanie na odtwarzaczu z leniwym ładowaniem, nie zacznie on odtwarzać, dopóki odwiedzający nie przewinie do niego strony. Autoodtwarzanie startuje od razu po załadowaniu odtwarzacza.