Obecnie wydajność i prędkość ładowania strony jest niezmiernie ważna. Każdy z nas chce mieć dostęp do wszystkiego natychmiast. W momencie gdy użytkownik musi zbyt długo czekać na załadowanie zawartości interesującej go strony, po prostu z niej wychodzi. I raczej na nią nie powraca, ponieważ udaje się do naszej konkurencji, która ma lepiej zoptymalizowany serwis niezmuszający użytkownika do długiego oczekiwania. W tym artykule dowiesz się dokładnie, na czym polega lazy loading oraz dlaczego warto go stosować.
Co to jest lazy loading
Lazy loading w dosłownym tłumaczeniu oznacza leniwe ładowanie. Polega na wdrożeniu odpowiedniego skryptu na stronę, który sprawia, że obrazy i wideo nie są ładowane w momencie otwierania strony przez użytkownika, a dopiero gdy użytkownik znajdzie się w miejscu, gdzie występuje obraz lub wideo.
Wielu użytkowników nie dociera do obrazu, więc nie ma sensu ładować całej strony na raz. Obrazy ładują się więc na żądanie. A dzięki odpowiedniej konfiguracji systemu ładowania plików na stronie, pierwsza strona ładuje się znacznie szybciej.
Lazy loading sprawia, że dzięki temu rozwiązaniu możesz czerpać większe korzyści z wydajności i działania strony internetowej. Strony będą się ładować znacznie szybciej, co wpłynie na satysfakcję użytkowników i zwiększy prawdopodobieństwo pozostania na Twojej stronie oraz na poprawę konwersji, tj. odwiedzający stronę dokonają zakupów produktu w Twoim sklepie, zapiszą się do newslettera lub wypełnią formularz kontaktowy.
Eager loading – przeciwieństwo lazy loading
Podczas gdy powolne ładowanie spowalnia inicjowanie zasobów, w przypadku szybkiego ładowania dzieje się odwrotnie. Celem tego końcowego procesu jest załadowanie wszystkich zasobów tak szybko, jak to możliwe, gdy tylko kod zostanie wykonany. Oczywiście „szybkie” ładowanie ma swoje zastosowanie. Jest przydatne, gdy strona internetowa musi załadować dużo zasobów w tle, aby działać poprawnie.
Praktyczne zastosowanie lazy loading
Pierwszym przykładem zastosowania lazy loadingu może być sama grafika Google. Załóżmy, że chcemy wyszukać sobie jakieś interesujące nas zdjęcie. Wpisujemy w tym momencie odpowiednią frazę i włączamy grafikę Google. Naszym oczom ukazują się grafiki związane z wpisaną frazą. Jak możesz zauważyć, na samym początku pojawiają się grafiki o mniejszym rozmiarze, a wraz z przewijaniem strony są doładowywane kolejne. To jest właśnie efekt użycia lazy loadingu, który odpowiednio doładowuje nam zdjęcia, dzięki czemu wszystko działa bardzo płynnie.
Innym zastosowaniem omawianego rozwiązania jest tzw. nieskończone przewijanie (infinite scroll). Jak sama nazwa wskazuje, dzięki tej funkcji strona stale ładuje zawartość, gdy użytkownik przewija w dół. W tym przypadku stopka jest zwykle wyświetlana jako nakładka pod przewijaną zawartością. Istnieją opinie, że przy nieskończonym przewijaniu ludzie mogą doświadczać więcej treści niż przy typowym rozwiązaniu polegającym na klikaniu przycisków wskazujących następną stronę. W tym miejscu należy wyjaśnić, że Google ma nieco inne podejście do swoich wyników wyszukiwania grafiki. Gdy użytkownik przewija stronę w dół, zdjęcia są zastępowane miniaturami. Po wyświetleniu określonej liczby z nich pojawi się przycisk „Pokaż więcej wyników” umożliwiający użytkownikowi załadowanie dodatkowych zdjęć. Tak więc Google łączy nieskończone przewijanie i leniwe ładowanie, aby stworzyć dynamicznie mieszane połączenie.
Wolniej znaczy lepiej
Tak, dobrze słyszysz, wolniej znaczy lepiej dla Ciebie. Ale pewnie teraz zastanawiasz się, jak to możliwe, skoro wydajność strony w dzisiejszych czasach jest naprawdę ważna. Nie będę się długo rozwodził na temat wydajności serwisów, przedstawię Ci tylko podstawy podstaw. Na szybkość ładowania strony internetowej wpływa kilka czynników. Jako właściciele stron internetowych nie mamy wpływu na niektóre z nich, np. wydajność połączenia internetowego użytkowników. Jedyne, co możemy zauważyć, to że nie wszyscy użytkownicy mają szybkie połączenia i nie wszystkie sieci komórkowe oferują dobrą przepustowość we wszystkich lokalizacjach.
Na inne czynniki wydajności możemy mieć jednak wpływ. Jeśli strona ładuje się powoli, najpierw obwiniamy o to serwer hostujący stronę. Powinien mieć on odpowiednią wydajność, aby użytkownicy nie odczuli spowolnienia działania serwisu, zwłaszcza gdy ruch na stronie wzrasta, a przecież o to pewnie w głównej mierze Ci chodzi. Inne czynniki leżą całkowicie po naszej stronie, ponieważ nawet najszybszy serwer nie może zwiększyć szybkości naszej strony bez odpowiednio przeprowadzonej optymalizacji. Dlatego należy zacząć przyspieszanie strony od jej redukowania, czyli zmniejszania rozmiaru, liczby skryptów czy niepotrzebnych kodów. Ten ostatni aspekt w kontekście leniwego ładowania jest nieco problematyczny, ale ten temat zostanie omówiony i rozszerzony później. Teraz skupmy się na tym, jak możesz zmniejszyć wagę strony.
Przede wszystkim należy zwrócić uwagę na rozmiar plików graficznych i ich optymalizację, aby wczytywanie obrazów podczas procesu żądania nie trwało zbyt długo. Usuń skrypty i wtyczki, które nie są niezbędne do normalnego funkcjonowania serwisu. Możesz także przenieść skrypty JavaScript na dół kodu strony. Jeżeli chcesz się dowiedzieć więcej na temat wydajności stron internetowych oraz jej optymalizacji, zachęcam do zapoznania się z artykułami:
Największe zalety lazy loading
Proces ten ma wiele zalet:
- krótszy czas wstępnego ładowania – wolne ładowanie zmniejsza początkowy rozmiar strony, którą należy załadować,
- zmniejszenie obciążenia sieci – dzięki wolnemu ładowaniu zawartość przesyłana jest zasadniczo na żądanie, dzięki czemu nie ma zbędnej transmisji danych,
- oszczędzanie zasobów – wolne ładowanie oszczędza zasoby zarówno po stronie serwera, jak i klienta, ponieważ tylko część zawartości jest ładowana, a nie wszystkie skrypty są wykonywane,
- lepsze wrażenia użytkownika – dobre czasy ładowania i funkcje, takie jak nieskończone przewijanie i leniwe ładowanie obrazów, sprawiają, że korzystanie z witryny jest znacznie bardziej wygodne.
Działanie lazy loading
Jak odbywa się leniwe ładowanie? W skrócie, odpowiedni kod JavaScript służy do sprawdzania pozycji użytkownika na stronie, a następnie wczytywania treści umieszczonych nad zakładką. Taki skrypt można zastosować za pomocą odpowiedniej wtyczki lub ręcznie.
Na rynku dostępnych jest wiele bibliotek typu open source, które mogą zapewnić żądaną funkcjonalność:
- bLazy.js — lekka biblioteka JavaScript przydatna podczas ładowania wielu obrazów lub elementów iframe (potrzebnych do osadzenia zagnieżdżonych treści),
- LazyLoad – skrypt, który automatycznie ładuje obrazy, gdy znajdują się w polu widzenia użytkownika,
- lazysizes – biblioteka, która ma dobry wpływ na pozycjonowanie, a także udostępnia dodatkowe wtyczki o innej funkcjonalności,
- yall.js – lekka biblioteka o rozmiarze zaledwie 1,6 KB i kompatybilna ze wszystkimi nowoczesnymi przeglądarkami.
SEO a lazy loading
Szybkość strony zdecydowanie pozwala na zwiększenie efektywności działań SEO. Co więcej, nie wymaga żadnych nakładów finansowych i wpłynie na konwersję użytkownika zarówno z płatnych, jak i organicznych wyników wyszukiwania. Poniżej znajdziesz przykładowy skrypt implementujący lazy loading na stronę, na której nie można użyć wtyczek:
- Skrypt JavaScript
document.addEventListener(„DOMContentLoaded”, function() {
var lazyloadImages;
if („IntersectionObserver” in window) {
lazyloadImages = document.querySelectorAll(„.lazy”);
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove(„lazy”);
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(„.lazy”);
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove(’lazy’);
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener(„scroll”, lazyload);
window.removeEventListener(„resize”, lazyload);
window.removeEventListener(„orientationChange”, lazyload);
}
}, 20);
}
document.addEventListener(„scroll”, lazyload);
window.addEventListener(„resize”, lazyload);
window.addEventListener(„orientationChange”, lazyload);
}
})
- Dodanie odpowiedniej klasy
<img class=”lazy” data-src=”/adres-obrazka” alt=”alt” />
Źródło: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
Gdy użytkownik odwiedza stronę z obrazem, jest on ładowany i wyświetlany. A co na ten temat „sądzą” boty Google? Niestety, roboty wyszukiwarek wolą strony z czystym kodem HTML, który potrafi dobrze przewijać. Tak, Googlebot może teraz ponownie indeksować i renderować pliki JS oparte na Chrome, ale często trudno jest je poprawnie zindeksować. To nie będzie miało negatywnego wpływu na odbiór przez użytkownika, ponieważ grafika będzie renderowana w dokładnym, oryginalnym rozmiarze i zgodnie z potrzebami, ale dla botów może to być problem i mogą tego skryptu nie zauważyć. Istnieje jednak sposób rozwiązanie tego problemu.
Lazy loading na WordPress
LazyLoad to najlepsza darmowa wtyczka do lazy loadingu na WordPress. Służy ona do leniwego ładowania obrazów, filmów i ramek iframe. Krótko mówiąc, renderuje je na stronie tylko tak, jak są one widoczne dla użytkownika – to jeden z głównych sposobów na przyspieszenie witryny WordPress i zoptymalizowanie obrazów pod kątem Google PageSpeed.
Podsumowanie
Optymalizacja zawartości strony internetowej jest istotną częścią poprawy doświadczenia użytkownika. Dzięki dynamicznemu ładowaniu zasobów użytkownicy mogą przeglądać więcej treści bez konieczności przełączania się między stronami lub długiego oczekiwania na odświeżenie przeglądarki. Dobrze zaimplementowane opóźnienie pozwoli Ci zobaczyć więcej treści bez negatywnego wpływu na ich odbiór.
Średnio prawie połowa użytkowników odwiedzających daną witrynę odwołuje się tylko do jednej strony. Jednak dzięki rozwiązaniom takim, jak nieskończony scroll nawet takie pojedyncze trafienie miałoby sens. Jak widzisz, leniwe ładowanie ma wiele zalet – pamiętaj o zaimplementowaniu tego rozwiązania na swojej stronie.
