Ostatnia aktualizacja 14 kwietnia, 2023
Szybkość ładowania się witryny w przeglądarce jest kluczowa nie tylko ze względu na oczekiwania użytkowników, ale też z punktu widzenia SEO. Im krótszy czas ładowania się zasobów, tym sprawniej można poruszać się po stronie. Szczególnie, jeśli bierzemy pod uwagę sklepy internetowe, które cechują się dużą liczba zdjęć, a nierzadko już także plikami wideo z prezentacją produktu. Z pomocą w optymalizacji działania strony przychodzi lazy loading. Na czym polega, jakie ma zalety i jak go wdrożyć?
Sprawdź: HTML – jak wstawić zdjęcie za jego pomocą?
Czym jest lazy loading?
Lazy loading (on-demand loading), czyli leniwe ładowanie, to technika optymalizacji wydajności strony internetowej. Polega na opóźnieniu ładowania zawartości, która nie jest od razu widoczna dla użytkownika. W praktyce oznacza to, że elementy takie jak obrazy, filmy czy skrypty są ładowane dopiero wtedy, gdy są potrzebne, czyli kiedy użytkownik przewija stronę w dół lub w górę.
Przykłady zastosowania leniwego ładowania
Lazy loading ma szerokie zastosowanie w projektowaniu stron internetowych oraz aplikacji. Zwłaszcza w przypadkach, gdy istnieje duża ilość danych do przetworzenia, czego przykładem mogą być sklepy internetowe. Technikę leniwego ładowania stosować dla:
- Obrazów
Lazy loading można zastosować do optymalizacji wydajności stron z dużą liczbą obrazów.
- Filmów
Podobnie jak w przypadku obrazów, lazy loading może opóźnić ładowanie filmów, aż do momentu, gdy użytkownik będzie chciał je obejrzeć.
- Skryptów i innych zasobów
Techniki lazy loading można również użyć do opóźniania ładowania skryptów czy arkuszy stylów, które nie są potrzebne od razu podczas inicjalizacji strony.
Zalety leniwego ładowania
Stosowanie leniwego ładowania przynosi wiele korzyści, zarówno dla użytkowników, jak i dla twórców stron. Zapewnia ono:
- Szybsze ładowanie strony: Opóźnienie ładowania zasobów, które nie są od razu potrzebne, pozwala na szybsze wczytanie widocznej części strony. Dzięki temu użytkownik może zacząć korzystać ze strony wcześniej, co zwiększa komfort przeglądania.
- Oszczędność transferu danych: Leniwe ładowanie zmniejsza liczbę danych, które muszą być przesłane przez sieć. To szczególnie ważne dla użytkowników korzystających z ograniczonego transferu danych lub wolniejszych połączeń internetowych.
- Redukcję obciążenia serwera: Opóźnienie ładowania zasobów zmniejsza ilość jednocześnie żądanych zasobów, co pozwala na zmniejszenie obciążenia serwera i zwiększenie jego wydajności.
Jak zaimplementować lazy loading?
W celu wdrożenia leniwego ładowania, można skorzystać z różnych technik i narzędzi. Opóźnienie ładowania zasobów można ustalić za pomocą atrybutów HTML-a, a także korzystając z JavaScriptu i bibliotek zewnętrznych.
Atrybut loading dla obrazów i filmów
W HTML5 można użyć atrybutu loading z wartością lazy, aby wskazać, że dany element ma być ładowany w sposób leniwy.
Przykład:
<img src="obraz.jpg" loading="lazy" alt="Przykładowy obraz">JavaScript i Intersection Observer API
Intersection Observer API pozwala na monitorowanie widoczności elementów na stronie. Dzięki temu można wykryć, kiedy dany element staje się widoczny dla użytkownika i dopiero wtedy załadować jego zawartość.
Przykład użycia:
function lazyLoadImages() {
const images = document.querySelectorAll("img[data-src]");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute("data-src");
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
}
document.addEventListener("DOMContentLoaded", lazyLoadImages);W powyższym kodzie najpierw pobieramy wszystkie obrazy ze strony, które mają atrybut data-src zamiast src. Następnie tworzymy obiekt Intersection Observer, który monitoruje widoczność tych obrazów. Gdy obraz staje się widoczny, zmieniamy jego atrybut src na wartość z data-src, co powoduje załadowanie obrazu. Na koniec usuwamy atrybut data-src i przestajemy obserwować dany obraz.
Biblioteki zewnętrzne
Istnieje wiele bibliotek JavaScript, które ułatwiają implementację leniwego ładowania. Przykłady to lozad.js, lazysizes czy vanilla-lazyload. Biblioteki te oferują różne opcje konfiguracyjne i mogą być używane w zależności od potrzeb projektu.
Zobacz: Błędy w UX – 7 najczęściej popełnianych
Lazy loading – podsumowanie
Leniwe ładowanie to efektywna technika optymalizacji wydajności stron internetowych, która pozwala na szybsze wczytywanie strony, oszczędność transferu danych i redukcję obciążenia serwera. Warto rozważyć jej zastosowanie w projektach, zwłaszcza tych z dużą ilością obrazów, filmów czy skryptów. Implementacja leniwego ładowania może być realizowana na różne sposoby, w zależności od potrzeb i kompatybilności przeglądarki.
