Szybkość działania strony internetowej to jeden z najważniejszych czynników SEO. Internauci chcą być w stanie jak najszybciej dotrzeć do treści, która ich interesuje – w przeciwnym razie opuszczą Twoją witrynę. Jak zatem usprawnić ten ważny aspekt? W tym artykule dowiesz się, co to jest lazy loading i eager loading oraz jak to pierwsze rozwiązanie może Ci pomóc.
Co to jest lazy loading i eager loading?
Lazy loading
Lazy loading (leniwe ładowanie lub on-demand loading) to technika optymalizująca ładowanie internetowego contentu dostępnego z poziomu strony internetowej lub aplikacji webowej. Celem lazy loadingu jest ładowanie w danym momencie jedynie kluczowych zasobów, które w wybranej chwili mają być widoczne dla użytkownika, a nie od razu całej strony internetowej.
Rozważmy to na przykładzie. Załóżmy, że chcesz wyszukać w Google Grafika zdjęcia Białego Domu. Po wpisaniu frazy pokazują Ci się najwyżej położone wyniki wyszukiwania:
Oczywiście, jeśli zejdziesz niżej, znajdziesz kolejne zdjęcia i odnośniki do filmów. Łącznie ich rozmiar jest znacznie większy niż tych, które pojawiły się na samym początku, dlatego ich załadowanie jest bardziej czasochłonne.
Załóżmy też, że spodobała Ci się już pierwsza fotografia i chcesz do niej przejść, a więc i zamknąć obecną stronę. W takiej sytuacji nie zobaczyłeś tak naprawdę większości zdjęć zawartych w tych wynikach wyszukiwania. Jeśli wszystkie one zostały załadowane, doszło do zwykłego zmarnowania zasobów, a Ty niepotrzebnie musiałeś dłużej czekać. Właśnie tutaj w grę wchodzi leniwe ładowanie. Jeśli będzie ono wykorzystane, w danym momencie załadują się jedynie te zdjęcia, które są najwyżej widoczne w wynikach wyszukiwania. Pozostałe zaczną się ładować wtedy, gdy przewiniesz niżej.
Eager loading
Podczas gdy leniwe ładowanie opóźnia inicjalizację zasobów, w eager loadingu dochodzi do odwrotnej sytuacji. Celem tego drugiego procesu jest jak najszybsze załadowanie wszystkich zasobów tuż po wykonaniu kodu. Eager loading ma oczywiście swoje zastosowania. Przydaje się wtedy, kiedy strona faktycznie musi załadować w tle wiele zasobów, aby sprawnie funkcjonować. W tym artykule skupimy się jednak na zaletach lazy loadingu.
Lazy loading – zastosowanie
Opisany wcześniej przykład z wyszukiwaniem zdjęć w Google to leniwe ładowanie obrazów. Inne zastosowanie omawianego rozwiązanie to tzw. infinite scroll (nieskończone przewijanie). Jak sama nazwa wskazuje, w przypadku tej funkcji strona stale załadowuje content wraz z tym, jak użytkownik przewija w dół. Stopka strony jest zwykle w takim przypadku wyświetlana jako nakładka pod przewijaną zawartością. WordPress twierdzi, że dzięki infinite scrollingowi internauci zapoznają się z większą ilością contentu w porównaniu do typowego rozwiązania, które polega na klikaniu przycisków kierujących na kolejną stronę.
Warto w tym momencie doprecyzować, że Google przyjmuje nieco inne podejście do swoich wyników wyszukiwania obrazów. Gdy użytkownik przewija stronę w dół, zdjęcia zastępowane są miniaturkami. Po wyświetleniu ich określonej liczby pojawia się przycisk Pokaż więcej wyników, który pozwala użytkownikowi na załadowanie dodatkowych zdjęć. W ten sposób Google łączy nieskończone przewijanie i leniwe ładowanie, tworząc dynamiczne, hybrydowe połączenie.
Leniwe ładowanie – najważniejsze zalety
Choć omawiane ładowanie jest leniwe, to wcale nie znaczy, że źle wpływa na funkcjonowanie strony. Proces ten niesie ze sobą wiele korzyści, o których już po części wspomnieliśmy:
- szybszy czas wstępnego ładowania – lazy loading zmniejsza początkowy rozmiar strony potrzebny do załadowania.
- mniejsze obciążenie sieci – dzięki leniwemu ładowaniu content jest przesyłany w zasadzie na żądanie, dzięki czemu nie dochodzi do transferu niepotrzebnych danych.
- oszczędzanie zasobów – lazy loading oszczędza zasoby zarówno po stronie serwera, jak i klienta, gdyż ładowana jest jedynie część contentu i nie wszystkie skrypty są wykonywane.
- lepsze user experience – dobry czas ładowania i takie funkcje jak infinite scroll oraz leniwe ładowanie obrazów sprawiają, że korzystanie ze strony jest znacznie przystępniejsze.
Lazy loading a SEO
Czy leniwe ładowanie może źle wpłynąć na SEO? Przez jakiś czas pojawiały się takie opinie. Powodem problemów miało być to, że boty Google potrzebują kompletnego i czystego kodu HTML, aby swobodnie go scrawlować. Oczywiście są w stanie zrobić to ponownie, jednak może to prowadzić do pewnych problemów. Z tych powodów po stronie użytkownika (a więc i user experience) nie dochodziłoby do problemów, jednak w kwestii pozycjonowania miałyby miejsce pewne komplikacje.
Istnieją na szczęście sposoby, dzięki którym zachowasz korzyści wynikające z lazy loadingu, a SEO strony na tym nie ucierpi. Warto zapoznać się z kilkoma wskazówkami zawartymi w tym filmie. Zajrzyj także do tych porad od Google dotyczących leniwego ładowania obrazów i video.
Leniwe ładowanie – jak to wygląda w praktyce?
Jak zatem od strony technicznej implementuje się lazy loading? W skrócie stosuje się odpowiedni kod JavaScript, który sprawdza, w jakim miejscu na stronie znajduje się użytkownik, aby następnie ładować treści, które umieszczone są above the fold. Taki skrypt można zastosować za pomocą odpowiedniego pluginu lub ręcznie.
Na rynku dostępnych jest wiele open source'owych bibliotek, które są w stanie zapewnić pożądaną funkcję:
- blazy.js – lekka biblioteka JavaScript przydatna podczas ładowania wielu obrazów czy elementów ramki iframe (potrzebnych do zamieszczania zagnieżdżonego contentu).
- LazyLoad – skrypt, który automatycznie ładuje obrazy w momencie, gdy znajdują się one w polu widzenia użytkownika.
- lazysizes – biblioteka, która dobrze wpływa na pozycjonowanie, a oprócz tego dostarcza kilka dodatkowych pluginów z innymi funkcjonalnościami.
- yall.js – lekka biblioteka, której rozmiar wynosi zaledwie 1,64 KB i jest kompatybilna ze wszystkimi nowoczesnymi przeglądarkami.
Lazy loading – podsumowanie
Optymalizowanie contentu stron internetowych jest istotną częścią ulepszania user experience. Dzięki dynamicznemu ładowaniu zasobów użytkownik może eksplorować więcej treści i nie musi przy tym przeskakiwać między wieloma podstronami lub czekać długo na odświeżenie się przeglądarki. Dobrze zaimplementowany lazy load pozwoli zapoznać się z większą ilością treści, nie wpływając przy tym negatywnie na sam odbiór contentu.
Średnio prawie połowa użytkowników, którzy odwiedzają daną witrynę, przegląda na niej tylko jedną stronę. Jednak dzięki takim rozwiązaniom jak infinite scrolling nawet i taka pojedyncza wizyta będzie mieć duże znaczenie. Jak zatem widać lazy loading daje wiele korzyści – zadbaj o to, aby to rozwiązanie zaimplementować również na swojej stronie internetowej.
