W dzisiejszych czasach, gdzie użytkownicy oczekują błyskawicznego dostępu do informacji, optymalizacja stron internetowych staje się kluczowym elementem. Lazy loading to jedna ze skuteczniejszych technik, która znacząco poprawia metryki stron pod kątem optymalizacji. W tym artykule przyjrzymy się bliżej temu, czym jest lazy loading, jakie są jego główne korzyści oraz w jaki sposób można zastosować tę technikę w praktyce.
1. Lazy loading – co to jest?
Lazy loading, to technika optymalizacji stron internetowych, która polega na dynamicznym ładowaniu zasobów, takich jak:
- obrazy,
- skrypty JavaScript
- czy multimedia,
tylko wtedy gdy są one potrzebne. Innymi słowy, zamiast ładować wszystkie zasoby podczas wczytywania strony, lazy loading pozwala na ładowanie ich stopniowo, w miarę przewijania lub interakcji użytkownika z daną stroną.
Jako ciekawostkę dodam, że kilka lat temu używało się dedykowanych skryptów JavaScript by móc ładować obrazki na żądanie. Dzisiaj jest to wspierane natywnie z poziomu wszystkich najnowszych przeglądarek internetowych.
2. Najważniejsze korzyści lazy loading
Szybszy czas ładowania strony
Jedną z największych zalet lazy loading jest skrócenie czasu potrzebnego na wczytanie strony, co przekłada się na lepsze doświadczenie użytkownika. Poprzez ładowanie tylko tych zasobów, które są aktualnie widoczne lub potrzebne, strona może wyświetlić się szybciej. Jest to szczególnie istotne dla użytkowników z wolniejszym łączem internetowym.
Oszczędność przepustowości sieciowej
Lazy loading zmniejsza ilość danych, jakie muszą być pobrane przez przeglądarkę podczas wczytywania strony. Dzięki temu zmniejsza się zużycie przepustowości sieciowej. Pamiętamy tutaj o użytkownikach mobilnych (mobile first!) oraz tych z wolniejszym internetem.
Optymalizacja dla SEO
Od ładnych kilku lat jest adwokatem szybkich stron. Firma Google zdaje sobie sprawę z tego, że strony są coraz bardziej obładowane różnymi zasobami. Dlatego jednym z elementów, który może wpływać na pozycję są poprawne metryki Core Web Vitals. Stąd krótki czas ładowania stron może mieć korzystny wpływ na pozycje w wynikach wyszukiwania, zwłaszcza w przypadku urządzeń mobilnych.
3. Lazy loading – zastosowanie w praktyce
-
Obrazy: Lazy loading obrazów to jedno z najczęstszych zastosowań tej techniki. Wiele stron internetowych wykorzystuje lazy loading, aby obrazy były ładowane dopiero w momencie, gdy użytkownik zbliży się do nich lub przewinie stronę w dół.
-
Multimedia: Wideo i audio również mogą być ładowane przy użyciu lazy loading. Dzięki temu strona może wczytać tylko te multimedia, które są odtwarzane lub są blisko obszaru widzialności użytkownika.
-
Skrypty JavaScript: Lazy loading może być również stosowane do ładowania skryptów JavaScript, zwłaszcza tych, które nie są niezbędne do renderowania treści strony na początku.
Przykładowy kod HTML z użyciem lazy loading
Atrubyt loading
Opóźnione ładowanie obrazka
W praktyce wygląda to następująco. Dodajemy atrybut loading="lazy" do każdego obrazka, który chcemy by załadował się później. W kodzie HTML wygląda to następująco:
<img src="obrazek.png" loading="lazy" alt="…" width="200" height="200">
Atrybut loading="lazy" mówi przeglądarce, żeby obraz obrazek.png był ładowany leniwie, tylko gdy zbliża się do obszaru widzialności.
Opóźnione ładowanie iframe
Podobnie można zrobić gdy chcemy załadować iframe.
<iframe src="ramka.html" loading="lazy" title="Ramka z opóźnieniem"></iframe>
A co z JavaScriptem?
W przypadku plików JavaScript i tagu script nie można podać tego atrybutu. Jednakże można powiedzieć przeglądarce by opóźniła ładowanie takiego pliku. Tutaj z pomocą przychodzi atrybut defer.
<script src="lazy-load.js" defer></script>
Atrybut defer informuje przeglądarkę, aby opóźniła ładowanie skryptu do momentu, gdy strona zostanie w pełni załadowana. To nie jest dokładnie leniwe ładowanie, ale w niektórych przypadkach może być użyteczne do optymalizacji czasu ładowania strony.
Podsumowanie, czyli co już wiemy o lazy loading?
Lazy loading to nie tylko popularny termin, ale skuteczna sposób, który może znacząco poprawić wydajność i doświadczenie użytkownika na stronie internetowej. Zastosowanie tej techniki nie tylko przyspieszy czas ładowania stron, ale poprawi ogólny odbiór strony przez odwiedzających (załaduje się szybciej). Użytkownicy mobilni, szczególnie ze słabszym internetem będą nam szczególnie wdzięczni.
