Czym jest lazy loading?

Lazy loading to technika, która opóźnia ładowanie niekrytycznych zasobów, dopóki nie są faktycznie potrzebne. Zamiast pobierać każdy obraz, iframe i wideo na stronie w momencie parsowania HTML, przeglądarka czeka, aż te elementy mają być przewinięte do widoku. Oznacza to, że początkowe ładowanie strony jest szybsze i lżejsze, ponieważ przeglądarka kieruje swoją przepustowość na to, co odwiedzający widzi najpierw.

Jak lazy loading działa pod maską

Istnieją dwa główne podejścia do implementacji lazy loading. Pierwsze to natywne podejście przeglądarki, które polega na atrybucie HTML loading="lazy". Gdy przeglądarka napotka element z tym atrybutem, opóźnia pobieranie zasobu, dopóki element nie osiągnie obliczonej odległości od viewportu. Każda przeglądarka określa ten próg nieco inaczej, ale cel jest ten sam: rozpocznij pobieranie tuż przed tym, jak użytkownik do niego przewinie, aby treść pojawiła się bezproblemowo.

Drugie podejście używa JavaScript, zwykle przez Intersection Observer API. Mały skrypt obserwuje stronę i wykrywa, gdy elementy zastępcze wchodzą do viewportu. Gdy to się stanie, skrypt podmienia rzeczywiste źródło obrazu lub URL iframe i wyzwala pobieranie. Przed istnieniem Intersection Observer API deweloperzy polegali na listenerach zdarzeń scroll, które były mniej wydajne i mogły powodować jank na wolniejszych urządzeniach.

Co może być lazy loadowane

Lazy loading ma zastosowanie do kilku rodzajów zasobów:

• Obrazy: najczęstsze zastosowanie. Każdy tag <img> poniżej linii zgięcia jest dobrym kandydatem do lazy loadingu.
• Iframe: osadzone filmy YouTube, Google Maps i inne widgety zewnętrzne mogą być ciężkie. Lazy loading iframe zapobiega blokowaniu początkowego renderowania strony.
• Wideo: hostowane samodzielnie filmy z tagiem <video> mogą używać preload="none" lub lazy loadingu opartego na JavaScript, aby opóźnić pobieranie.
• Obrazy tła: obrazy tła CSS ładowane przez background-image nie mogą używać natywnego atrybutu loading, więc wymagają rozwiązań JavaScript lub starannego strukturowania CSS.

Natywny lazy loading przeglądarki vs. biblioteki JavaScript

Natywny lazy loading to najprostsza opcja. Dodajesz loading="lazy" do swojego tagu <img> lub <iframe>, a przeglądarka obsługuje wszystko. Bez potrzeby JavaScript, bez dodatkowego rozmiaru pliku, bez konfiguracji. Działa we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Safari i Edge.

<img src="foto.jpg" loading="lazy" width="800" height="600" alt="Opis" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

Biblioteki JavaScript, takie jak lazysizes, lozad.js lub vanilla-lazyload, oferują większą kontrolę. Wspierają obrazy tła, mogą dodawać animacje fade-in i pozwalają dostosować próg ładowania. Jednak dodają dodatkowy JavaScript do Twojej strony i wymagają odpowiedniej inicjalizacji. Dla większości witryn WordPress natywny lazy loading jest lepszym wyborem ze względu na prostotę i zerowy narzut wydajnościowy.

WordPress i natywny lazy loading od wersji 5.5

WordPress automatycznie dodaje loading="lazy" do obrazów od wersji 5.5, wydanej w sierpniu 2020 roku. Dotyczy to obrazów w treści wpisów, obrazów wyróżniających i innych obrazów wyświetlanych przez funkcje rdzeniowe. WordPress dodaje również loading="lazy" do iframe osadzonych w treści. Od WordPress 5.9 pierwszy obraz w treści (ten, który najprawdopodobniej jest powyżej linii zgięcia) jest automatycznie wykluczany z lazy loadingu, aby nie zaszkodzić wynikom LCP.

Wpływ na Core Web Vitals i rozważania dotyczące LCP

Lazy loading ma bezpośredni związek z Core Web Vitals, szczególnie Largest Contentful Paint (LCP). Wykonane poprawnie, lazy loading poprawia LCP, ponieważ przeglądarka może priorytetyzować pobieranie największego widocznego elementu bez konkurowania o przepustowość z obrazami poniżej linii zgięcia. Jednak jeśli przypadkowo lazy loadujesz sam element LCP (często obraz hero lub duży baner powyżej linii zgięcia), pogarszasz LCP. Przeglądarka czeka z pobieraniem tego obrazu, aż obliczy bliskość viewportu, co dodaje niepotrzebne opóźnienie.

Dla obrazów, które nie są lazy loadowane, ale są krytyczne, rozważ dodanie fetchpriority="high", aby powiedzieć przeglądarce, aby priorytetyzowała to pobieranie:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Baner hero" />

Kiedy NIE używać lazy loading

Nie każdy obraz powinien być lazy loadowany. Są wyraźne wyjątki:

• Obrazy hero: główny baner lub obraz wyróżniający, który pojawia się natychmiast po załadowaniu strony, nigdy nie powinien być lazy loadowany.
• Obrazy logo i tożsamości witryny: zwykle znajdują się w nagłówku i są widoczne bez przewijania.
• Pierwszy widoczny obraz treści: każdy obraz pojawiający się w początkowym viewporcie powinien być ładowany eagerly.
• Kandydaci na LCP: jeśli obraz jest największym widocznym elementem przy pierwszym renderowaniu strony, lazy loading bezpośrednio zaszkodzi Twojemu wynikowi LCP.

Dla tych obrazów użyj loading="eager" (zachowanie domyślne) lub jawnie dodaj fetchpriority="high", aby przeglądarka pobierała je tak szybko, jak to możliwe.

Wtyczki WordPress do lazy loading

Choć WordPress obsługuje podstawowy lazy loading natywnie, kilka wtyczek oferuje rozszerzoną funkcjonalność:

• WP Rocket: zawiera lazy loading dla obrazów, iframe i wideo jako część swojego szerszego pakietu optymalizacji wydajności. Może również zastępować osadzenia wideo YouTube lekką miniaturą, która ładuje rzeczywisty odtwarzacz tylko po kliknięciu.
• Autoptimize: głównie wtyczka do optymalizacji CSS/JS, ale zawiera lazy loading dla obrazów przy użyciu natywnego atrybutu lub fallbacku JavaScript.
• a3 Lazy Load: dedykowana wtyczka lazy loading z granularną kontrolą nad tym, które elementy są lazy loadowane, w tym wsparcie dla obrazów tła i niestandardowych selektorów.
• Perfmatters: lekka wtyczka wydajnościowa, która zawiera lazy loading wraz z innymi optymalizacjami, takimi jak zarządzanie skryptami i czyszczenie bazy danych.

Lazy loading i SEO

Crawler Google (Googlebot) renderuje JavaScript, więc może widzieć lazy loadowane obrazy, dopóki są one ostatecznie ładowane podczas renderowania. Jednak poleganie na lazy loadingu opartym na JavaScript oznacza, że Googlebot musi wykonać Twoje skrypty, aby odkryć te obrazy. Natywny lazy loading z loading="lazy" jest bezpieczniejszy dla SEO, ponieważ rzeczywisty atrybut src jest obecny w HTML od początku. Wyszukiwarki mogą znaleźć URL obrazu bez wykonywania JavaScript. Zawsze upewnij się, że Twoje obrazy mają odpowiednie atrybuty alt, niezależnie od wybranej metody lazy loading.

Co sprawdza InspectWP

InspectWP analizuje obrazy na Twojej stronie i raportuje, czy atrybut loading="lazy" jest obecny na każdym obrazie. Pomaga to zweryfikować, że lazy loading jest poprawnie wdrożony na Twojej witrynie WordPress i zidentyfikować obrazy, którym brakuje tego atrybutu lub które są błędnie lazy loadowane, gdy powinny być ładowane eagerly.