Lazy load (lazy loading) – co to?

Co to jest lazy loading? Jak działa w praktyce i jak wdrożyć lazy load (leniwe ładowanie) dla obrazków i innych elementów. Instrukcja.

Szybkość ładowania stron internetowych ma ogromne znaczenie, a lazy load odgrywa tu znaczącą rolę. Dla internetowych twórców na pewno nie jest niespodzianką fakt, że powolne witryny nie sprzyjają e-biznesowi. W walce o klienta pozostają daleko w tyle, zrażając do siebie wielu internautów. W XXI wieku użytkownicy bowiem chcą korzystać z serwisów, które są w stanie zapewnić im wygodę i komfort. Przez to natomiast rozumiane jest m.in. błyskawicznie ładowanie elementów widocznych na ekranie czy dobre wyniki podstawowych wskaźników internetowych (Core Web Vitals).

Zgodnie z danymi Google, strony ładujące się dłużej niż 5 sekund, mogą tracić nawet 40% konwersji. W skrócie więc po prostu swoim powolnym działaniem zrażają do siebie ogromną liczbę użytkowników. To natomiast przekłada się na rentowność internetowego biznesu i jego potencjalny rozwój. Skorzystanie z lazy loading w znacznej mierze jest w stanie natomiast Cię przed tymi problemami uchronić. Wystarczy jedynie, że wiesz, jak wykorzystać leniwe ładowanie na swoją korzyść.

Co to jest lazy loading?

Lazy loading znany jest pod kilkoma nazwami. Najczęściej do jego określenia stosowane są takie formy, jak:

• lazy load,
• opóźnione ładowanie,
• mechanizm odłożonego ładowania,
• leniwe ładowanie.

Jest to zapis (lub skrypt) umieszczany w kodzie serwisu internetowego. Odpowiada za:

• mniejsze obciążenie sieci,
• większą wydajność danego miejsca w sieci,
• szybszy czas wstępnego ładowania strony.

Dzięki niemu wszelkie obrazy i wideo nie ładują się od razu po uruchomieniu witryny przez użytkownika. Zamiast tego są wczytywane dopiero wtedy, gdy internauta znajdzie się w miejscu, w którym zostały one umieszczone lub do takiego miejsca się zbliża.

Łatwo to sobie zwizualizować. Strona, na której od razu ładowane są wszystkie zdjęcia, musi być cięższa. Wolniej działa, a użytkownik może nawet nie dotrzeć do miejsca, w którym znajduje się dana zawartość. Jest ona zatem uploadowana bez potrzeby.

Sytuacja zmienia się po wprowadzeniu lazy loading. W takim przypadku nie ma potrzeby „męczenia” systemu obrazami, których użytkownik nie może jeszcze zobaczyć. Jeśli na stronie znajduje się dużo grafik, takie podejście może znacznie przyśpieszyć jej działanie.

W praktyce zaimplementowany lazy load oszczędza zasoby Twojego miejsca w sieci. Dotyczyć to może strony internetowej czy aplikacji webowej. Użytkownik szybciej otrzymuje dostęp do zawartości, która go interesuje. To z kolei ma szansę przełożyć się na wzrost konwersji. To słowo określające podjęcia przez internautę określonego (i pożądanego przez Ciebie) działania. Opóźnione ładowanie przynosi Ci zatem bezpośrednie korzyści, a wprowadzenie go nic nie kosztuje.

Zobacz też: Jak przyspieszyć stronę WWW? Optymalizacja szybkości strony

Natywny lazy loading

Obecnie większość popularnych przeglądarek internetowych wspiera natywny lazy loading. Pozwala on na znaczne ograniczenie dodatkowych elementów na stronie, opartych np. na JavaScript. W jego przypadku wystarczy jedynie dodać odpowiedni atrybut do danego elementu. To sprawi, że dana witryna WWW, zawierająca wiele zdjęć, będzie ładowała się szybciej. Do wyboru masz dwa rozwiązania:

• wymusić opóźnienie ładowania danych elementów,
• pozwolić podejmować decyzję o opóźnieniu ładowania przeglądarce.

To rozwiązanie polecane i powszechnie stosowane przez twórców witryn internetowych. Warto tu podkreślić, że działa ono zarówno w przypadku obrazów i grafik, jak i iframe, takich jak np. filmiki z YouTube. Możesz z niego korzystać zupełnie za darmo. Jego uruchomienie z poziomu strony internetowej nie jest skomplikowane. Szczegółowo opisaliśmy to w dalszej części tekstu.

Alternatywnym rozwiązaniem do lazy loadingu jest dodatkowy lazy load. Wprowadzany jest on samodzielnie, bezpośrednio do kodu strony. Obecnie natomiast jest on używany jedynie w szczególnych przypadkach. Temat ten także rozwiniemy poniżej.

Lazy loading a eager loading

Lazy loading ma swoje przeciwieństwo – eager loading. Tych dwóch rozwiązań nie można mylić, bo skutki mogą być katastrofalne dla strony internetowej. Wiesz już, na czym polega leniwe ładowanie. Druga opcja działa natomiast dokładnie odwrotnie. Jej głównym zadaniem jest zatem jak najszybsze załadowanie od razu wszystkich zasobów witryny.

Pozornie może brzmieć to kontrowersyjnie. Po co jak najszybciej uploadować wszystko, skoro wyżej tłumaczyliśmy, że to prowadzi do powolniejszego działania witryny? Eager loading ma jednak swoje zastosowania. Wykorzystywany jest głównie w przypadku stron, które do prawidłowego działania potrzebują załadowania w tle wszystkich zasobów lub dla elementów tzw. above the fold, czyli widocznych w oknie przeglądarki zaraz po załadowaniu się strony.

Lazy load – zastosowanie

Wiesz już, jak działa i na czym polega lazy load. Dzięki niemu procesy po stronie serwera są w znacznym stopniu oszczędzane. W jakich praktycznych sytuacjach jednak funkcja ta znajduje swoje zastosowanie?

Jeśli masz na stronie jedną czy dwie grafiki, jej działanie nie będzie dla Ciebie aż tak zauważalne. Oczywiście warto je wprowadzić, by Twoje miejsce w sieci było doskonałe pod każdym względem. Realnie jednak w takim przypadku różnica w działaniu witryny nie będzie spektakularna.

Ta opcja natomiast kapitalnie sprawdza się w przypadku stron opartych na tzw. infinite scroll. To „nieskończone przewijanie”, czyli funkcja odpowiedzialna za ciągłe przewijanie ogromnej liczby miniatur grafik. Dzięki lazy loading ładowane wśród nich są tylko te, które aktualnie użytkownik widzi na swoim monitorze. Wszystkie powyżej i poniżej pozostają ukryte do czasu „dotarcia” do ich. W praktyce więc technologia ta kapitalnie sprawdzi się w przypadku choćby galerii.

Jak wprowadzenie lazy load wygląda z perspektywy użytkownika? Najczęściej jego stosowanie na stronach internetowych nie rzuca się w oczy. Przy naturalnym scrollowaniu elementy ładują się na bieżąco, a witryna wygląda tak, jak zakłada twórca. Problemem bywa natomiast szybkie przewijanie. W takim przypadku grafiki czy inne elementy mogą nie ładować się wystarczająco szybko. Zwykle więc pokazują się w odpowiednim rozmiarze i jakości po krótkiej chwili.

Lazy loading a SEO i renoma strony

Prędkość wczytywania strony jest jednym z istotnych czynników rankingowych. Oznacza to, że ma ona bezpośredni wpływ na pozycję strony w wynikach wyszukiwania. Oczywiście składa się na to o wiele więcej elementów. Lazy loading natomiast jest jedną z tych rzeczy, o które warto zadbać. Im szybszy czas wstępnego ładowania, tym wyższe miejsce. To z kolei przekłada się na lepsze wyniki witryny, większą liczbę odwiedzin i – potencjalnie – większe zyski.

Redukcja rozmiaru i ilości wykonywanych skryptów jest niezwykle istotna. Ich ciężar może sprawić, że Twoja strona będzie działać wolniej niż te konkurencji. Wskazane jest zatem pozostawienie wyłącznie zawartości niezbędnej do poprawnego działania witryny. Natywny lazy load sprawdzi się w tej kwestii zatem doskonale.

Opisywane rozwiązanie ma też ogromne znaczenie pod względem wizerunkowym. Jak wspominaliśmy, w XXI wieku liczy się prędkość działania. Internauci są przyzwyczajeni już do tego, że wszystkie zasoby otrzymują błyskawicznie. Jeśli więc Twoja strona będzie działała zbyt wolno, możesz spodziewać się kłopotów.

Użytkownicy szybko znajdą alternatywne rozwiązania, bo konkurencja online jest ogromna. Ich ponowne przyciągnięcie do siebie natomiast może okazać się zbyt dużym i kosztownym wyzwaniem. Właśnie dlatego lepiej od razu zadbać o odpowiednią prędkość ładowania elementów w witrynie. W dłuższej perspektywie będzie to inwestycja (darmowa!) w lepsze wyniki finansowe e-biznesu.

Wdrażanie natywnego lazy load w praktyce

Aby natywny lazy load zaczął działać, wystarczy dodać do danego elementu odpowiedni atrybut. Jak wspominaliśmy, do wyboru masz dwa rozwiązania:

• loading="lazy" – wymuszający leniwe ładowanie w każdej sytuacji,
• loading="auto" – sprawiające, że funkcję lazy load „kontroluje” sama przeglądarka.

W obu przypadkach mechanizm działa od razu. Oznacza to, że nie ma potrzeby dodawania własnoręcznie żadnych dodatkowych kodów w JavaScript. Dotyczy to oczywiście różnych wersji przeglądarek – zarówno tradycyjnych, jak i mobilnych.

Zastosowanie kodu HTML w praktyce, w przypadku zdjęcia czy obrazka, będzie wyglądało tak:

<img loading="lazy" src="https://przykladowa-strona.pl/images/przykladowy-obrazek.jpg">

Natywny lazy load pozwala nam też na usprawnienie wyświetlania elementów iframe. W ich przypadku kod to:

<iframe src="https://przykladowa-strona.pl" loading="lazy"></iframe>

Dodatkowy lazy load z wykorzystaniem JavaScript

Zdarzają się sytuacje, w których wspierany przez przeglądarki natywny lazy load może nie wystarczyć. W takich przypadkach można skorzystać z ręcznie wprowadzanego, dodatkowego lazy loadingu. Wspominaliśmy już o nim powyżej. Kiedy natomiast bywa on przydatny?

Warto dodawać go tylko wtedy, gdy jest niezbędny. Unikniesz wtedy niepotrzebnego obciążania witryny. Sprawdza się m.in. w przypadku ładowania zewnętrznych skryptów. Przydaje się, gdy chcesz usprawnić wyświetlanie elementów JS bardziej zaawansowanych niż zwykłe grafiki. Jak wygląda jego implementacja?

HTML

W HTML-u zwyczajny kod na umieszczenie zdjęcia to:

<img src=”przykladowe-zdjecie.jpg” alt=”przykladowy opis zdjecia”>

Aby zablokować wczytywanie zdjęcia, wystarczy usunąć wartość atrybutu src. Następnie możemy wprowadzić atrybut data (zdefiniowany jako data-src). Zawrzemy w nim informacje dotyczące wczytywania zdjęcia. Dalej dodajemy klasę (np. lazy-load), aby łatwo wybrać zdjęcia. Ostatni krok to określenie obrazka „zajmującego” miejsce naszego zdjęcia przed wczytaniem. Może to być choćby jeden biały piksel. Cały znacznik przybierze więc formę:

<img class="lazy-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="przykladowy-obrazek.jpg" alt="przykladowy opis obrazka">

Fragment "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" będzie tu oznaczeniem wspomnianego wcześniej piksela.

JavaScript

Aby zaimplementować lazy loading dla tego obrazka, możemy użyć JavaScript w połączeniu z Intersection Observer API. Oto kod JS, który będzie działał dla tego obrazka, wraz z wytłumaczeniem:

// 1. Pobierz wszystkie elementy obrazka o klasie 'lazy-img'.
const lazyImages = document.querySelectorAll('.lazy-img');

// 2. Stwórz funkcję do obsługi wczytywania obrazka.
const loadImage = (image) => {
  // Ustaw atrybut 'src' na wartość atrybutu 'data-src' dla danego obrazka.
  image.src = image.dataset.src;

  // Usuń atrybut 'data-src', ponieważ nie jest już potrzebny.
  image.removeAttribute('data-src');
};

// 3. Stwórz instancję Intersection Observer API.
const lazyLoadObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    // Sprawdź, czy obrazek jest widoczny w oknie przeglądarki.
    if (entry.isIntersecting) {
      // Jeśli tak, wczytaj obrazek.
      loadImage(entry.target);

      // Po wczytaniu obrazka, przestań go obserwować.
      observer.unobserve(entry.target);
    }
  });
});

// 4. Obserwuj każdy obrazek z listy 'lazyImages'.
lazyImages.forEach((image) => {
  lazyLoadObserver.observe(image);
});

Wytłumaczenie:

1. Najpierw pobieramy wszystkie elementy obrazka z klasą 'lazy-img’.
2. Następnie tworzymy funkcję loadImage, która ustawia atrybut 'src’ obrazka na wartość atrybutu 'data-src’ i usuwa atrybut 'data-src’.
3. Tworzymy instancję Intersection Observer API, która będzie obserwować, czy obrazki są widoczne w oknie przeglądarki.
4. Dla każdego obrazka z listy lazyImages, obserwujemy go za pomocą lazyLoadObserver. Gdy obrazek stanie się widoczny, funkcja loadImage zostanie wywołana, wczytując obrazek i przestając go obserwować.

Lazy loading tła

Lazy load możesz wykorzystać nie tylko do pojedynczych zdjęć czy grafik. Z powodzeniem użyjesz tego sposobu nawet dla tła. Co więcej, opiera się to na identycznym podejściu:

<section class="jumbotron text-center lazy-bg" data-background="przykladowe-tlo.jpg">

Możemy zmodyfikować nasz kod JS, aby obsłużyć również tła. Oto dodatkowy kod, który musisz dodać:

// Pobierz wszystkie elementy z klasą 'lazy-bg'.
const lazyBackgrounds = document.querySelectorAll('.lazy-bg');

// Stwórz funkcję do wczytywania tła.
const loadBackground = (element) => {
  element.style.backgroundImage = `url(${element.dataset.background})`;
  element.removeAttribute('data-background');
};

// Obserwuj każdy element z listy 'lazyBackgrounds'.
lazyBackgrounds.forEach((element) => {
  lazyLoadObserver.observe(element);
});

// Modyfikuj instancję Intersection Observer API.
const lazyLoadObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      if (entry.target.classList.contains('lazy-img')) {
        loadImage(entry.target);
      } else if (entry.target.classList.contains('lazy-bg')) {
        loadBackground(entry.target);
      }
      observer.unobserve(entry.target);
    }
  });
});

Ten dodatkowy kod robi następujące rzeczy:

1. Pobiera wszystkie elementy z klasą 'lazy-bg’.
2. Tworzy funkcję loadBackground, która ustawia właściwość backgroundImage elementu na wartość atrybutu 'data-background’ i usuwa atrybut 'data-background’.
3. Obserwuje każdy element z listy lazyBackgrounds, używając lazyLoadObserver.
4. Modyfikuje instancję Intersection Observer API, aby wywołać odpowiednią funkcję (loadImage dla obrazków lub loadBackground dla tła) w zależności od klasy celu (target).

Lazy load w CMS – gotowe wtyczki i moduły

Wielu właścicieli stron chce wprowadzać zmiany w witrynach samodzielnie. Nie każdy jednak dysponuje wystarczającą wiedzę czy doświadczeniem. Jeśli nie wiesz nic o kodowaniu, a chcesz skorzystać z lazy load, przemyśl sięgnięcie po gotowe wtyczki. Są one dostępne w wielu popularnych CMS-ach. Poniżej opisaliśmy ich działanie dla dwóch najpopularniejszych:

• WordPressa – w przypadku standardowych stron WWW,
• PrestaShop – w serwisach z sektora e-commerce (oprogramowaniu e-sklepu).

To rozwiązanie nie wymaga od Ciebie żadnych specjalnych umiejętności. Dodawane jest jak każda inna wtyczka z poziomu panelu użytkownika.

WordPress

Po zalogowaniu do serwisu WordPress, odpowiadającego za Twoją stronę, przejdź do zakładki „Wtyczki„. Skorzystaj z wyszukiwarki i wpisz nazwę jednego z popularnych pluginów, wdrażających lazy load. Znajdziesz zapewne zarówno rozwiązania płatne, jak i darmowe. Wśród bezpłatnych mogą to być np.:

• Lazy Loader,
• Speed Up – Lazy Load.

Po wyświetleniu się odpowiedniego elementu naciśnij przycisk „Zainstaluj” i gotowe.

PrestaShop

W PrestaShop korzystanie z wtyczek umożliwiających lazy load działa praktycznie tak samo, jak w WP. Zaloguj się do swojego konta, a następnie przejdź do zakładki umożliwiającej wdrażanie pluginów. Niestety w tym przypadku najczęściej są one płatne, ale cieszą się wysoką skutecznością i łatwością obsługi. Wymienić tu można takie oprogramowanie jak np.:

• Lazy Load Produktów – dynamiczne ładowanie zdjęć,
• Imagine Optimizer – PrestaShop WebP & Lazy Load,
• moduł Lazy loading / Load your images on demand.

Po wykupieniu dostępu następuje instalacja modułu. Po niej i odpowiedniej konfiguracji wydajność Twojej strony powinna wzrosnąć. Grafiki zaczną ładować się zgodnie z zamysłem lazy loading.

Zalety i wady lazy load

Zalety lazy loading

• krótszy czas wstępnego ładowania strony,
• oszczędzanie zasobów,
• mniejsze obciążenie sieci,
• wyższa funkcjonalność strony,
• wygodniejsza obsługa strony przez użytkowników,
• szansa na przekonanie do siebie internautów sprawnością działania witryny,
• łatwość implementacji rozwiązania na stronie,
• różne metody wdrożenia rozwiązania (natywny, dodatkowy i oferowany przez gotowe wtyczki).

Wady lazy loading

• wdrożenie może wymagać ingerowania w kod strony, co może być problemem dla osób niedoświadczonych w kodowaniu,
• w przypadku nieprawidłowego wdrożenia mogą wystąpić problemy z działaniem strony,
• kod strony stanie się nieco bardziej skomplikowany.