Od WordPressa 5.7 lazy load dla iframe działa natywnie, więc w większości przypadków nie musisz instalować dodatkowej wtyczki ani pisać JavaScriptu. Wystarczy zadbać o poprawny kod osadzenia, wymiary ramki i wyłączenie opóźnionego ładowania dla elementów widocznych od razu po otwarciu strony.
Jak sprawdzić, czy lazy load dla iframe działa?
Najpierw sprawdź obecną konfigurację. Dzięki temu nie włączysz kolejnego mechanizmu bez potrzeby i łatwiej wykryjesz konflikt z wtyczką optymalizacyjną.
Do podstawowej kontroli użyj narzędzi deweloperskich w Chrome, Firefoxie lub innej nowoczesnej przeglądarce:
- Otwórz stronę zawierającą osadzoną mapę, film albo widżet.
- Kliknij stronę prawym przyciskiem myszy i wybierz „Zbadaj”, a następnie przejdź do zakładki „Network”.
- Wyczyść listę żądań, włącz nagrywanie i przeładuj stronę.
- Przewiń stronę do miejsca, w którym znajduje się iframe, i sprawdź, czy żądanie zasobu pojawia się dopiero wtedy.
Jeżeli iframe znajduje się daleko poniżej pierwszego widoku, jego zasoby nie powinny być pobierane natychmiast po otwarciu strony. Przeglądarka może rozpocząć ładowanie nieco wcześniej, zanim ramka faktycznie pojawi się na ekranie, dlatego nie traktuj dokładnego momentu żądania jako sztywnej reguły.
Metody wdrożenia lazy load w WordPressie
Wybór metody zależy głównie od wersji WordPressa, używanych wtyczek oraz tego, czy potrzebujesz niestandardowej kontroli nad ładowaniem iframe.
| Metoda | Poziom trudności | Zalety | Wady |
|---|---|---|---|
| Natywna obsługa WordPressa | Bardzo łatwa | Nie wymaga dodatkowego kodu ani obciążającej wtyczki | Mniejsza liczba opcji konfiguracji |
| Wtyczka optymalizacyjna | Łatwa | Może obsługiwać wiele typów zasobów i oferować dodatkowe ustawienia | Ryzyko konfliktu i podwójnego lazy load |
| Ręczny kod HTML | Średnia | Pełna kontrola nad konkretnym iframe | Wymaga znajomości HTML i ostrożnego testowania |
W aktualnej instalacji WordPressa zacznij od rozwiązania natywnego. Wtyczka ma sens wtedy, gdy potrzebujesz reguł dla konkretnych osadzeń albo korzystasz z większego systemu optymalizacji. Nie uruchamiaj kilku narzędzi, które niezależnie modyfikują te same iframe.
Jak ręcznie dodać loading=”lazy” do iframe?
Jeśli iframe wstawiasz w bloku HTML, możesz dodać atrybut bezpośrednio do znacznika:
<iframe
src="https://example.com/embed"
width="600"
height="400"
loading="lazy"
title="Osadzona treść">
</iframe>Atrybut loading=”lazy” informuje przeglądarkę, że ramka nie musi być pobierana natychmiast. Podaj także opisowy atrybut title, szczególnie gdy iframe zawiera film, mapę lub zewnętrzny formularz.
Ręczna zmiana kodu jest przydatna przy pojedynczych osadzeniach. Nie ma potrzeby dodawać własnego skryptu opartego na Intersection Observer API, jeżeli zwykły atrybut HTML rozwiązuje problem.
Wymiary iframe a CLS
Lazy load nie powinien powodować przesuwania treści. Dlatego określ w kodzie width i height, a w razie potrzeby dopasuj proporcje ramki za pomocą CSS.
- Atrybut width rezerwuje miejsce na szerokość iframe.
- Atrybut height określa przestrzeń potrzebną przed załadowaniem zawartości.
- Stałe proporcje ograniczają skakanie układu na telefonach i komputerach.
- Rezerwowanie przestrzeni pomaga utrzymać niższy wynik CLS, czyli Cumulative Layout Shift.
Bez wymiarów przeglądarka może początkowo nie wiedzieć, ile miejsca przeznaczyć na ramkę. Po jej załadowaniu treść poniżej zostaje wtedy przesunięta. To właśnie typowy przykład problemu z CLS.
Nie stosuj lazy load do iframe widocznego w pierwszym widoku, na przykład filmu lub formularza, który użytkownik ma zobaczyć natychmiast. Opóźnienie może pogorszyć odbiór strony, a w niektórych przypadkach także opóźnić element wpływający na LCP.
Najczęstsze błędy przy wdrażaniu
Przed publikacją strony sprawdź poniższe punkty:
- Nie opóźniasz iframe znajdującego się above the fold.
- W kodzie znajdują się wartości width i height.
- Nie używasz jednocześnie natywnego mechanizmu i kilku wtyczek do lazy load.
- Po zmianie sprawdziłeś działanie ramki na komputerze i urządzeniu mobilnym.
- Osadzona treść nadal ładuje się poprawnie po przewinięciu strony.
Najbezpieczniejszy schemat dla większości stron jest prosty: aktualny WordPress, jedno źródło optymalizacji, poprawne wymiary iframe i test w zakładce „Network”. Jeżeli po wdrożeniu strona zaczyna ładować ważną treść z opóźnieniem, wyłącz lazy load dla tego konkretnego osadzenia zamiast dodawać kolejną wtyczkę.
