Jak skonfigurować lazy loading obrazów i filmów Drukuj

Lazy Loading — ładuj tylko to co widać

Lazy loading odkłada ładowanie obrazów i filmów do momentu gdy użytkownik przewinie stronę w ich kierunku. Dramatically poprawia czas pierwszego ładowania strony.

Natywny lazy loading HTML (WordPress 5.5+)

WordPress automatycznie dodaje loading="lazy" do wszystkich obrazów. Możesz sprawdzić w kodzie źródłowym strony.

Lazy loading dla filmów YouTube

<!-- Zamiast embed, użyj kliknięcia do załadowania -->
<div class="youtube-placeholder"
     data-videoid="ID_FILMU"
     style="background: url(https://img.youtube.com/vi/ID_FILMU/maxresdefault.jpg)">
  <button>? Odtwórz</button>
</div>

Wtyczka do lazy loading

• a3 Lazy Load — lekka, darmowa
• WP Rocket — wbudowany lazy load dla obrazów, video i iframes
• LiteSpeed Cache — lazy load + LQIP (Low Quality Image Placeholder)

Wyłączenie lazy loading dla LCP

Główny obraz strony (banner/hero) NIE powinien mieć lazy loading — powinien ładować się jak najszybciej:

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