Strony na komórki

wszystko o stronach na komórki

Polecamy

Jak wdrożyć lazy loading obrazów na stronie

stronynakomorki.pl10 mins

Optymalizacja ładowania obrazów to kluczowy element poprawy wydajność i user experience na stronach mobilnych. Wdrożenie lazy loading pozwala zredukować zużycie bandwidth, przyspieszyć prędkość ładowania oraz obniżyć koszty transferu danych. Poniższy przewodnik prezentuje różne metody implementacji nieinwazyjnego ładowania grafiki i omawia powiązane zagadnienia, takie jak obsługa starszych przeglądarek, responsywne obrazy czy wpływ SEO.

Wprowadzenie do lazy loading obrazów

Mechanizm lazy loading polega na odroczeniu pobierania zasobów (w tym wypadku obrazów) do momentu, gdy staną się widoczne w obszarze ekranu. Dzięki temu strona nie musi ładować wszystkich grafik na raz, co jest istotne szczególnie na urządzeniach mobilnych z ograniczonymi zasobami pamięci oraz wolniejszym łączem sieciowym. W praktyce oznacza to, że obrazy poza zakresem viewportu są pomijane przez przeglądarkę, aż do momentu przewinięcia strony.

Z punktu widzenia SEO oraz dostępności należy zadbać o poprawne znaczniki i alt-teksty, aby roboty wyszukiwarek i czytniki ekranu nadal mogły indeksować oraz prezentować zawartość. Warto również zwrócić uwagę na techniki preloading dla kluczowych grafik (logo, ikony) oraz korzystanie z responsive images (atrybuty srcset i sizes) w celu dostarczenia odpowiednich rozmiarów plików dla różnych ekranów.

Korzystanie z atrybutu loading=lazy

Prosta implementacja natywna

Od niedawna popularne przeglądarki, takie jak Chrome, Firefox czy Edge, wspierają natywny mechanizm lazy loading poprzez atrybut loading="lazy". Przy dodaniu go do znacznika <img> wystarczy zamienić:

  • <img src=”duzy-obraz.jpg” alt=”Opis grafiki”>
  • na <img src=”duzy-obraz.jpg” loading=”lazy” alt=”Opis grafiki”>.

Rozwiązanie to wymaga minimalnej ingerencji w kod i nie obciąża dodatkowo aplikacji żadną biblioteką. Przeglądarka decyduje, kiedy załadować daną grafikę, biorąc pod uwagę odległość elementu od widoku użytkownika (viewport).

Zalety i ograniczenia

  • Prostota: brak dodatkowego kodu JavaScript.
  • Zgodność: natywne wsparcie w nowoczesnych przeglądarkach.
  • Wydajność: minimalne narzuty CPU i pamięci.

Do wad można zaliczyć ograniczone możliwości konfiguracji (np. progowanie odległości od viewportu) oraz brak wsparcia w przeglądarkach starszych i niektórych mobilnych. W takich przypadkach konieczne jest zastosowanie alternatywnej metody opartej na JavaScript (Intersection Observer) lub dostarczenie polyfill.

Obsługa starszych przeglądarek i Intersection Observer

Intersection Observer API

Jeśli zależy nam na pełnej kontroli oraz wspieraniu przeglądarek bez natywnego loading=lazy, warto skorzystać z Intersection Observer API. Dzięki niemu możemy nasłuchiwać zdarzeń pojawienia się elementu w obrębie viewportu i dopiero wówczas zainicjować pobranie zasobu. Przykładowy kod:


const images = document.querySelectorAll('img[data-src]');
const options = { rootMargin: '0px 0px 200px 0px', threshold: 0.1 };

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      obs.unobserve(img);
    }
  });
}, options);

images.forEach(img => observer.observe(img));

W powyższym przykładzie:

  • data-src przechowuje oryginalny adres obrazu;
  • gdy element znajduje się w odległości 200px od widoku, zostaje pobrany (rootMargin);
  • po załadowaniu przerywamy dalsze nasłuchiwanie (unobserve).

Polyfill i fallback

Aby uzyskać zgodność ze starszymi przeglądarkami, można załączyć Intersection Observer polyfill. Wersję skompilowaną umieszcza się w nagłówku lub przed zamknięciem ciała dokumentu:

  • <script src=”intersection-observer-polyfill.js”></script>

W przypadku braku wsparcia warto także dodać fallback do natywnego załadowania obrazów (po prostu ustawić src z dataset zaraz przy inicjalizacji skryptu), aby grafika zawsze była widoczna.

Optymalizacja i najlepsze praktyki dla urządzeń mobilnych

Responsywne obrazy i WebP

Kluczowym krokiem jest dostarczanie obrazów w odpowiednich formatach i rozmiarach. Użyj:

  • <picture> z różnymi <source> dla WebP i JPEG.
  • atrybutu srcset z listą rozdzielczości oraz sizes definiującym szerokość kontenera.

Przykład:



  <source type="image/webp"
          srcset="obraz-400.webp 400w, obraz-800.webp 800w"
          sizes="(max-width: 600px) 100vw, 800px">
  <img data-src="obraz-800.jpg" loading="lazy"
       alt="Opis obrazu"
       src="placeholder.jpg">

Taki zabieg pozwala przeglądarce wybrać najbardziej optymalny format, co wpływa na niższy rozmiar pliku oraz szybsze wyświetlanie.

Cache i prefetch/preload

Aby zminimalizować opóźnienia przy przewijaniu, warto zastosować:

  • <link rel="prefetch"> dla zasobów przewidywanych do pobrania w dalszej części strony.
  • <link rel="preload"> dla kluczowych grafik (np. widoczne od razu w nagłówku).

Pamiętaj, że nadmierne użycie prefetch może obciążyć łącze użytkownika, dlatego warto ograniczyć się do najważniejszych plików.

Analiza i monitorowanie wydajności

Mierzenie wpływu lazy loading na mobilne środowisko to podstawa. Skorzystaj z narzędzi:

  • Google Lighthouse – generuje raporty Core Web Vitals.
  • WebPageTest – pozwala analizować czasy TTFB, First Contentful Paint czy Largest Contentful Paint.
  • Narzędzi deweloperskich w Chrome – zakładka Performance i Network.

Dzięki regularnemu monitorowaniu łatwiej wychwycisz regresje oraz zoptymalizujesz strategie preloading, caching i lazy loading dokładnie dla potrzeb użytkowników mobilnych.

Zaawansowane podejścia i integracja z frameworkami

Lazy loading w React i Vue

W popularnych bibliotekach i frameworkach można korzystać z komponentów lub wtyczek:

  • React – biblioteki takie jak react-lazyload lub hooki z Intersection Observer.
  • Vue – wtyczki vue-lazyload lub własny composable z Composition API.

Implementacja zwykle sprowadza się do zamiany tradycyjnego znacznika <img> na dedykowany komponent, który automatycznie obsługuje obserwację widoczności oraz ładowanie grafik.

Server-Side Rendering i Lazy Hydration

W środowiskach SSR warto łączyć lazy loading obrazów z techniką lazy hydration komponentów JavaScript. Dzięki temu już wygenerowany HTML i CSS są wyświetlane natychmiast, a skrypty i interakcje ładowane dopiero, gdy użytkownik przechodzi do konkretnej sekcji strony.

W Next.js można wykorzystać wbudowany komponent next/image z automatycznym lazy loading, a w Nuxt.js – moduł nuxt-image.

Bezpieczeństwo i kontrola jakości

Przy dynamicznym ładowaniu zasobów pamiętaj o:

  • walidacji adresów URL obrazów (unikanie narażenia na ataki typu XSS);
  • dostosowaniu polityki CORS, jeśli obrazy pochodzą z zewnętrznych źródeł;
  • testach regresyjnych na różnych urządzeniach i przeglądarkach;
  • monitorowaniu błędów ładowania i dostarczaniu placeholderów lub komunikatów użytkownikom.

Odpowiednie przygotowanie procesu CI/CD umożliwi automatyczne testy wydajnościowe i kontrolę jakości strategii lazy loading w kolejnych iteracjach serwisu.

Powiązane treści