Lazy Load WordPress - opóźnione ładowanie obrazków
Lazy loading to technika ładowania obrazków dopiero gdy są potrzebne (widoczne w viewport). Strona ładuje się szybciej, oszczędzasz transfer użytkowników. WordPress ma natywne lazy loading od wersji 5.5.
Krótka odpowiedź
Natywne lazy loading WordPress
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:
```php
add_filter('wp_lazy_loading_enabled', '__return_false');
```
Problem z LCP i above the fold
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:
```php
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
Wtyczki lazy loading
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.)
Background images i CSS
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:
```css
.hero {
position: relative;
}
.hero img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
}
```