Lazy loading w WordPressie – obrazy, iframe, video, sekcje

Lazy loading = ładowanie zasobów dopiero, gdy są potrzebne. Zamiast pobierać 30 obrazów z całej strony, ładujesz tylko 3 pierwsze (które widzi użytkownik), a resztę dopiero gdy do nich dojdzie scrollem. Mniej danych, szybszy LCP, lepszy CWV. Pokażę Ci, jak to zrobić dobrze w WordPressie.

W skrócie

• WordPress 5.5+ ma natywny lazy loading dla obrazów (atrybut loading="lazy").
• Iframe w wersji 5.7+, ale działa tylko częściowo.
• Video, mapy, embedy social wymagają wtyczek (a3 Lazy Load, WP Rocket).
• Częsty błąd: lazy load LCP image — to psuje LCP zamiast go poprawić.

Co lazy loading w ogóle robi

Bez lazy load przeglądarka pobiera wszystkie zasoby strony od razu — nawet te, których nie widzisz na ekranie.

Strona ze 30 obrazami:
– Bez lazy load: 30 × 200 KB = 6 MB pobierane, LCP 4 s
– Z lazy load: 3 × 200 KB = 600 KB pobierane, LCP 1,2 s

Reszta obrazów ładuje się gdy użytkownik scrolluje w ich kierunku.

Natywny lazy loading w WordPress

Od wersji 5.5 (sierpień 2020) WordPress automatycznie dodaje atrybut loading="lazy" do każdego obrazu w treści posta:

<img src="zdjecie.jpg" loading="lazy" alt="...">

Przeglądarki obsługujące: Chrome, Firefox, Edge, Safari (od 15.4) — 95%+ użytkowników.

Zalety natywnego

• ✅ Działa bez wtyczki
• ✅ Brak narzutu JavaScript (czysta funkcja przeglądarki)
• ✅ Nie psuje SEO (Google rozumie i indeksuje)
• ✅ Działa również dla iframe (od WP 5.7)

Ograniczenia natywnego

• ❌ Nie działa dla obrazów wstawianych przez CSS (background-image)
• ❌ Nie działa dla video, audio, embed (np. YouTube iframe lazy działa, ale skrypt YouTube ładuje się od razu)
• ❌ Nie ma kontroli nad threshold (kiedy obraz zacznie się ładować)
• ❌ Stosuje się do KAŻDEGO obrazu — w tym LCP image, który tego NIE chce

Pułapka #1: Lazy load LCP image

Obraz „powyżej fold-a” (pierwszy widoczny na home page) jest zwykle Twoim LCP elementem. Jeśli ma loading="lazy", przeglądarka opóźni jego pobranie do końca parsowania HTML — LCP rośnie z 1,2 s do 2,8 s.

Rozwiązanie

Atrybut loading="eager" + fetchpriority="high" dla LCP image:

<img src="hero.webp" loading="eager" fetchpriority="high" alt="...">

W WordPressie wtyczka WP Rocket robi to automatycznie („Exclude from lazy load” dla pierwszych 1–2 obrazów).

Bez wtyczki — filtr w functions.php:

add_filter('wp_lazy_loading_enabled', function($enabled, $tag, $context) {
    if ($context === 'the_post_thumbnail') {
        return false; // wyłącz lazy dla featured image
    }
    return $enabled;
}, 10, 3);

Lazy loading dla iframe

WordPress 5.7 dodał lazy iframe, ale tylko dla iframe wstawianych przez edytor — nie dla embed kodów wstawianych przez wtyczki / Elementor.

YouTube iframe

Domyślny YouTube embed ładuje 300 KB JavaScript + thumbnail + player API — nawet jeśli użytkownik nigdy nie odtworzy filmu.

Rozwiązanie: zastąp iframe statycznym thumbnailem + przyciskiem play. Po kliknięciu dopiero wtedy ładuje się prawdziwy iframe.

Wtyczki:
– WP YouTube Lyte (darmowa) — najlepsza
– Lazy Load for Videos (darmowa)
– W WP Rocket: opcja „LazyLoad for YouTube”

Realny zysk: -800 ms LCP, jeśli miałeś 3 video na home.

Google Maps iframe

Google Maps to gigantyczny skrypt + tile-server. Każda mapa to 400–800 KB i 20+ requestów.

Rozwiązanie 1: Statyczny obraz mapy + link „Otwórz w Google Maps”.

<a href="https://maps.google.com/?q=Ul.Sadowa,Poznan">
  <img src="static-map.jpg" alt="Mapa">
</a>

Rozwiązanie 2: Iframe Google Maps z loading="lazy":

<iframe src="..." loading="lazy" width="600" height="400"></iframe>

Lazy działa, ale skrypt Google nadal ładuje się ciężko, gdy iframe wejdzie do viewport.

Rozwiązanie 3: Open-source mapa (Leaflet + OpenStreetMap) — 90% mniej kodu, brak Google.

Lazy loading dla video

<video> HTML5 nie obsługuje natywnego lazy loadingu, ale można:

1. preload="none" — nie pobiera nawet metadanych
2. poster="thumbnail.jpg" — pokaż obraz, video pobiera się po kliknięciu

<video preload="none" poster="cover.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Lazy loading dla embed social

Twitter, Instagram, Facebook embed ładują pełne SDK biblioteki (200–500 KB każda).

Rozwiązanie:
– Wtyczki „lazy embed” — np. Disable Comments + manual embed
– Statyczny screenshot + link „Zobacz na Twitterze”
– Build-time prerendering — dla zaawansowanych, generujesz HTML embed raz, nie ładujesz live

Lazy loading dla CSS background-image

WordPress nie ogarnia background-image w CSS. Obrazy tła ładują się od razu.

Rozwiązanie 1: Konwertuj tła na <img> z absolute positioning. Brzmi krzywo, ale działa.

Rozwiązanie 2: Wtyczka a3 Lazy Load (darmowa) — obsługuje również background-image.

Rozwiązanie 3: Custom intersection observer w JavaScript (zaawansowane).

Wtyczki lazy load — które wybrać

a3 Lazy Load (darmowa)

Najlepsza darmowa. Działa dla:
– Obrazów (rozszerzenie natywnej funkcji WP)
– iframe
– Video
– Background-image w CSS

Niewielki narzut JS (3 KB).

WP Rocket (płatna, 59 USD/rok)

Lazy loading + cache + minify w jednym. Najczystsza opcja „wszystko w jednym”.

Smush (darmowa, freemium)

Optymalizacja obrazów + lazy load. Solidna, ale Smush jest „ciężki” — ładuje sporo własnego JS.

Optimole (freemium)

Lazy load + automatyczna konwersja WebP/AVIF + serwowanie z CDN. Świetne, ale płatne dla wyższego ruchu.

Lazy load + Core Web Vitals — jak to działa

Najczęstsze błędy

❌ Lazy load na LCP image — psuje to, co miało poprawić.

❌ Brak width/height na obrazach — lazy load + brak wymiarów = layout skacze, CLS rośnie.

❌ Wtyczka lazy load + WP natywny — duplikat funkcjonalności, czasem konflikt.

❌ Lazy load dla bardzo małych obrazów (<5 KB ikony) — narzut > zysk. Ładuj eagerly.

❌ Lazy load dla print stylesheet — drukowanie strony zaczyna się z brakami obrazów.

Co dalej

W tym tygodniu:

1. Otwórz home page w PageSpeed Insights → mobile
2. Zobacz, ile zasobów się ładuje (zakładka „Network” w DevTools)
3. Włącz natywny lazy + wyłącz dla LCP
4. Po tygodniu sprawdź pomiar — różnica będzie widoczna

Optymalizacja lazy loadingu w pakiecie audytu prędkości — sprawdzamy każdy obraz, iframe, embed i konfigurujemy lazy load tam, gdzie ma sens. Zobacz pakiet.