Niezależnie od tego, jaki jest cel witryny, jej długie ładowanie skutecznie odstraszy odwiedzających. Szybkie ładowanie strony i jej wydajność (site performance) są kluczowe w budowaniu pozytywnego doświadczenia użytkownika sieci. Jednym z możliwych powodów, dlaczego witryna wolno się ładuje, jest rozmiar strony. A dokładniej — rozmiary wszystkich umieszczonych na niej elementów i ilość contentu. Wiele obrazów, filmów i innych mediów może spowalniać witrynę i przyczyniać się do tego, że sfrustrowani odwiedzający ją opuszczą na rzecz konkurencji. Na szczęście istnieje rozwiązanie, które nie wymaga pozbywania się treści. Jest nim lazy loading. Poprawia wydajność witryny, a nawet korzystnie wpływa na SEO! Dowiedzcie się więcej na jego temat.
Co to lazy loading?
Lazy loading, czyli leniwe ładowanie lub on-demand loading, to technika optymalizująca, której celem jest ładowanie kluczowych w danym momencie zasobów. Przeglądarka nie pobiera z serwera od razu wszystkich, a jedynie te priorytetowe, które mają być widoczne dla użytkownika. Technikę lazy loading stosuje się głównie w przypadku grafik i zdjęć na stronie. To one mają najczęściej największy rozmiar. Strona internetowa z zaimplementowanym lazy loadingiem ładuje tylko wymaganą treść na początku i nie ładuje pozostałej, dopóki użytkownik jej nie potrzebuje.
Proces ten określa się jako „leniwy”, ponieważ polega na opóźnianiu ładowania do czasu, gdy jest to konieczne. Tak samo, jak niektórzy odkładają zadania do momentu, kiedy od działania nie ma już ucieczki. Jednak w tym przypadku lenistwo to świetna sprawa!
Skąd znasz tę technikę?
Być może po raz pierwszy słyszycie określenie „lazy loading". Mogę Was jednak zapewnić, że z techniką tą spotkaliście się wielokrotnie. Najpowszechniejszym przykładem jest Google Grafika. Jeżeli szukam manuli, Google zaprezentuje mi kilkanaście zdjęć na jednej stronie wyników. Ładowanie wszystkich tych obrazów na stronie naraz nie ma sensu. Dlaczego? Ponieważ prawdopodobnie nie przewinę zbyt daleko, zanim znajdę obraz, który mi się podoba i wyjdę. Właśnie dlatego w Google Grafika jest zaimplementowane leniwe ładowanie. Dla ukrytej zawartości Google ładuje obrazy zastępcze zamiast rzeczywistych. Ładują się one znacznie krócej, a rzeczywiste obrazy szybko załadują się, dopiero gdy przewinę w dół.
Jakie zalety ma leniwe ładowanie?
Technika lazy loading daje wiele korzyści. Główne to:
- przyspieszenie czasu ładowania wstępnego stron internetowych dzięki zmniejszeniu ich początkowego rozmiaru koniecznego do załadowania
- poprawa user experience. Jest to bezpośrednio związane ze skróceniem czasu oczekiwania na załadowanie zasobów)
- mniejsze obciążenie sieci poprzez unikanie przesyłania zbędnych danych
Lazy loading a SEO
Szybkość ładowania witryny to jeden z ważniejszych czynników rankingowych. Sprawa wydaje się więc prosta. Lazy loading ma pozytywny wpływ na SEO, ponieważ dzięki tej technice, odwiedzający stronę nie muszą długo czekać na to, żeby zobaczyć interesujące ich zasoby. Swego czasu krążyły jednak pogłoski, że roboty wyszukiwarek preferują strony, których czysty kod HTML są w stanie poprawnie scrawlować, a lazy loading to dodatkowy skrypt, powodujący problemy z indeksacją. Na szczęście boty są na tyle wyspecjalizowanymi mechanizmami, a leniwe ładowanie jest już tak powszechną techniką, że jej poprawne wdrożenie nie ma negatywnego wpływu na pozycjonowanie.
Implementacja leniwego ładowania
Na pewno interesuje Was, jak od strony technicznej wygląda wdrażanie lazy loading. W ogromnym skrócie polega ono na implementacji odpowiedniego kodu JavaScript, który śledzi, w którym miejscu na stronie znajduje się odwiedzający stronę. Dzięki takiej informacji można wyświetlać użytkownikowi tzw. treści above the fold. To te, które widać bez konieczności przewijania witryny w dół.
Jeżeli zdecydujecie się na lazy loading i znacie podstawy pracy z kodem, zapoznajcie się z oficjalnymi wskazówkami Google, jak je wdrożyć. Trzy metody proponowane przez giganta z Mountain View to:
IntersectionObserver API i polyfill
natywne leniwe ładowanie obrazów i elementów iframe
open source'owe biblioteki obsługujące wczytywanie danych
Jeżeli Wasze strony oparte są na WordPressie, możecie też skorzystać z odpowiedniej wtyczki takiej jak Lazy Loader.
Lazy loading a eager loading — na czym polega różnica?
Pobieranie danych do wyświetlenia może zachodzić nie tylko na zasadzie lazy loadingu. Procesem odwrotnym do leniwego ładowania jest eager loading. To pobieranie wszystkich danych od razu w momencie wyświetlania strony czy ekranu aplikacji. Kiedy ma zastosowanie ta technika? Wtedy, gdy wiele zasobów musi załadować się w tle, żeby witryna mogła prawidłowo działać.
Warto w tym momencie zwrócić uwagę na to, że lazy loading jest przydatną funkcją, jednak nie należy używać jej, gdy nie jest potrzebna. Jeśli strona jest krótka i/lub zawiera głównie „lekką” treść (tj. zdominowaną przez tekst z minimalną ilością obrazów/filmów), najlepiej unikać nadmiernego kombinowania i wdrażania dodatkowego skryptu. Takie działania mogą przynieść skutek odwrotny do zamierzonego.
Leniwie nie zawsze znaczy źle
Lazy loading to rozwiązanie powszechnie stosowane podczas tworzenia i optymalizacji stron. Dzięki niemu można skrócić czas ładowania witryny, a tym samym sprawić, że będzie ona bardziej przyjazna dla użytkownika. Jeśli wybierzecie leniwe ładowanie, przetestujcie swoją witrynę z nową funkcją przed jej uruchomieniem. Wszelkie błędy mogą w ogóle uniemożliwić wyświetlanie ukrytych treści, a żadna treść nie jest jeszcze gorsza niż wolno ładująca się zawartość. Pamiętajcie też, że lazy loading nie jest koniecznym działaniem optymalizacyjnym. Jeżeli Wasze strony nie są bogate w dużych rozmiarów zasoby, możecie pominąć ten krok.
