Zatrzymać użytkownika na stronie internetowej jak najdłużej i przekonać go do wykonania konkretnej interakcji. Właśnie taki cel mają właściciele serwisów, portali, stron usługowych i e-sklepów. Co może stanąć na przeszkodzie? Zbyt wolna strona internetowa. Pierwsze wrażenie robisz tylko raz. Gdy zaczynasz od tego, że użytkownicy muszą czekać kilka sekund na zapoznanie się z Twoją ofertą, to nie jest to dobry początek. Powinieneś dołożyć wszelkich starań, aby przyspieszyć ładowanie strony. Przyda się specjalna funkcjonalność – lazy loading. Zostań i dowiedz się, co to takiego, jak ją wdrożyć i jaki ma wpływ na SEO.
Lazy loading – co to jest?
Lazy loading, czyli opóźnione ładowanie najczęściej jest powiązanie z plikami, obrazami i multimediami znajdującymi się na stronie. Może zostać zaimplementowane z pomocą biblioteki JS, natywnego ładowania lub przy użyciu IntersectionObserver API. Powoduje ono, że pliki i obrazy nie ładują się od razu po wejściu użytkownika na stronę, ale dopiero wtedy, gdy zechce on przescrollować stronę i dotrze do sekcji, w której zostały umieszczone. W ten sposób wstępne ładowanie strony zostaje znacznie przyspieszone.
Nie dochodzi także do transferu niepotrzebnych danych i oszczędzane są zasoby zarówno po stronie serwera, jak i klienta. Strona staje się bardziej wydajna i przyjazna użytkownikom. Pierwszy widok strony otrzymują oni natychmiast (above the fold), a grafiki załadują się wówczas, gdy zechcą zapoznać się z kolejnymi częściami strony (below the fold). Lazy loading ma też swoje przeciwieństwo. Eager loading polega na tym, że w momencie otwarcia strony dany zasób ładowany jest natychmiastowo, bez względu na to, w którym miejscu strony się znajduje.
Jak dodać lazy loading do swojej strony?
Przed wdrożeniem lazy loading należy zastanowić się, jakie pliki chcesz objąć tym działaniem. Grafiki, które jako pierwsze znajdują się w obszarze widocznym na ekranie (należy do nich również logo) nie powinny być brane pod uwagę przy „leniwym ładowaniu”. Wstrzymywanie ich ładowania to nie jest dobry pomysł, ponieważ są to pierwsze grafiki, które użytkownik widzi zaraz po wejściu na stronę. Idealne do lazy loading będą te obrazy, audio i wideo, które znajdują się na dole strony. Użytkownicy nie zawsze do nich docierają, dlatego nie ma potrzeby ładowania ich od razu.
Pozostaje wciąż kwestia, jak wdrożyć ten „leniwy” mechanizm na swojej stronie. W swojej dokumentacji Google podaje trzy metody na leniwie ładujące się zawartości:
- natywne leniwe ładowanie obrazów i elementów iframe
- IntersectionObserver API i polyfill
- biblioteka JavaScript obsługująca wczytywanie danych – w sieci znajdziesz wiele darmowych bibliotek stworzonych przez programistów
W przypadku WordPressa od wersji 5.5 lazy loading jest używane domyślnie przy pomocy rozwiązania natywnego. CMS-y wykorzystywane w e-commerce, takie jak Joomla, Drupal, Magento czy Presta mają swoje specjalne wtyczki, które odpowiadają za ładowanie obrazów.
Jak sprawdzić, czy „leniwe ładowanie” działa?
Wdrożyłeś na swojej stronie powolne ładowanie plików, ale nie jesteś pewien, że wszystko działa tak, jak należy? Trzeba to sprawdzić. Możesz liczyć na Google, który dzieli się instrukcjami i narzędziami, dzięki którym sprawdzisz poprawność implementacji. Znów zajrzyj do dokumentacji wyszukiwarki i przetestuj stronę za pomocą skryptu Puppeteer. Jest to biblioteka środowiska Node.js do kontrolowania Chrome bez interfejsu graficznego. Jeżeli Twoja wiedza nie jest wystarczająca, skorzystaj ze wsparcia programisty. Lazy loading można też sprawdzić z poziomu przeglądarki w narzędziach dla developerów.
Lazy loading – co na to użytkownicy?
O lazy loading można powiedzieć, że jest user-friendly, choć zapewne wielu użytkowników nawet nie wie, że styka się z nim na stronach internetowych. Przy rozbudowanych stronach użytkownicy nie muszą czekać zbyt długo na otwarcie strony, ponieważ dzieje się to niemal natychmiastowo. Ma to wpływ na komfort korzystania ze strony. Dodatkowo nie tracą swojego transferu w telefonach i nie obciążają łącza internetowego dodatkowymi zasobami. Podsumowując, lazy loading jest po stronie użytkowników i poprawia pozytywny odbiór strony.
Lazy loading – co na to roboty Google?
Od 2018 r. prędkość ładowania strony jest czynnikiem rankingowych Google. To oznacza, że amerykańska wyszukiwarka przy określaniu pozycji strony w wynikach wyszukiwania bierze pod uwagę jej szybkość. Dlatego, jeżeli zależy Ci na skutecznym pozycjonowaniu swojej witryny, a wciąż nie jest ona zoptymalizowana, to czas przystąpić do działania. Lazy loading przyspiesza prędkość ładowania, co jest dobrą wiadomością, ale też może powodować pewne problemy przy crawlowaniu w przypadku niepoprawnej implementacji za pomocą JS.
Roboty Google preferują strony w kodzie HTML. Wówczas mają dostęp do całej witryny. Natomiast renderowanie JS nie zawsze przebiega prawidłowo, ponieważ roboty nie wykonują działań i interakcji na stronie. W przypadku lazy loading oznacza to, że mogą nie zauważyć obrazów, plików audio i wideo, których ładowanie zostało wstrzymane. Dlatego należy zadbać o to, aby działały alternatywne rozwiązania, które pozwalają na wyświetlanie wszystkich treści i zasobów również w sytuacjach, kiedy JS nie zadziała lub jest zablokowany. Swoje rozwiązania oferuje również Chrome, który wspiera natywne lazy loading i jako przeglądarka wprowadza ułatwienia dla rozbudowanych stron z grafikami.
Co jeszcze ma wpływ na szybkość ładowania się strony?
Korzystając z lazy loading poprawisz wydajność i szybkość swojej strony, ale to tylko jeden z czynników odpowiadających za prędkość strony. Co jeszcze możesz zrobić, aby przyspieszyć swój serwis?
- skorzystaj z darmowego narzędzia Google PageSpeed Insights – sprawdzisz aktualną prędkość swojej strony internetowej i otrzymasz wskazówki, co należy poprawić
- sprawdź swój serwer – czy jest wydajny i nie powoduje spowolnień w działaniu strony oraz, czy jest przygotowany na zwiększony ruch użytkowników
- porządki w kodzie strony – być może w kodzie Twojej strony nagromadziło się wiele skryptów i pluginów, które już nie są potrzebne. Przejrzenie ich i usunięcie będzie korzystne dla szybkości ładowania strony
- zmniejsz rozmiary plików graficznych i zadbaj o optymalizację – zbyt duże obrazy zdjęcia i grafiki spowalniają stronę, dlatego dbaj o to, aby publikować na stronie materiały w odpowiednich rozmiarach.
Podsumowanie
Zawsze warto sięgać po rozwiązania, które przyspieszają działanie witryny. Lazy loading to jeden ze sposobów, który jest korzystny dla użytkowników i SEO. Google docenia strony o dobrych parametrach szybkościowych. Także użytkownicy będą skłonni zostać dłużej na stronie, na której nie ma problemów technicznych związanych ze zbyt długim ładowaniem. Korzyści jest wiele, dlatego warto przemyśleć dodanie skryptu lazy loading do serwisu.
Źródło fotografii: https://unsplash.com/@nordwood
Komentarze (0)