Lazy Load WordPress - opóźnione ładowanie obrazków

Od WordPress 5.5:
- Automatyczne loading="lazy" na obrazkach
- Również dla iframe (embed)
- Bez wtyczek, bez konfiguracji

Jak działa:
- Przeglądarka ładuje obrazki gdy zbliżają się do viewport
- Oszczędność transferu
- Szybszy initial load

Sprawdzenie:
- View Source strony
- Szukaj: loading="lazy"

Wyłączenie jeśli potrzebne:

add_filter('wp_lazy_loading_enabled', '__return_false');

Problem:
- Lazy loading opóźnia ładowanie obrazków
- Hero image / LCP element nie powinien być lazy
- Pogarsza Core Web Vitals

Rozwiązanie - wyłącz dla hero:

add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    // Wyłącz dla pierwszego obrazka w content
    if (strpos($context, 'the_content') !== false) {
        static $count = 0;
        $count++;
        if ($count === 1) {
            return false;
        }
    }
    return $value;
}, 10, 3);

WP Rocket:
- Settings → Media → Exclude first images
- Automatyczne pomijanie above the fold

WP Rocket:
- Media → LazyLoad
- Obrazki, iframes, videos
- YouTube preview image
- Exclude images opcja

Perfmatters:
- Lazy Load → Images, iframes
- Exclude by class/ID
- Fade in effect

a3 Lazy Load:
- Darmowa, dedykowana
- Dużo opcji
- Skip images by class

Lazy Load by WP Rocket (darmowa):
- Tylko lazy load z WP Rocket
- Bez reszty funkcji (cache etc.)

Problem:
- loading="lazy" działa tylko dla
- Background-image w CSS nie jest lazy

Rozwiązania:

1. JavaScript lazy load:
- Intersection Observer API
- Dodaj background-image gdy element w viewport

2. WP Rocket:
- Lazy Load CSS Background Images (Pro)
- Automatyczne dla inline styles

3. Konwersja na :
- Zamiast background-image użyj object-fit: cover
- Masz natywne lazy loading

Przykład CSS trick:

.hero {
  position: relative;
}
.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}