Problem powolnego ładowania się stron jest utrapieniem wielu użytkowników internetu, którym zależy na szybkim dostępie do treści w sieci. W dzisiejszych czasach bardzo istotną rolę odgrywa szybkość, szybkie reakcje i sprawne ładowanie strony. Według danych Google strona ładująca się powyżej 5 sekund narażona jest na 40-procentowy spadek konwersji
Lazy loading co to jest?
Lazy loading jest to skrypt umieszczony w kodzie strony, którego celem jest spowodowanie, iż wszelkie obrazy i pliki wideo na witrynie nie ładują się w chwili otwarcia strony przez użytkownika, a dopiero kiedy on znajdzie się w danej części strony, w którym znajduje się dany obraz czy wideo. Dzięki niemu można zyskać na transferze oraz uzyskać o wiele wyższą wydajność witryny. Strona ładuje się w o wiele krótszym czasie, co wpływa na zadowolenie użytkownika. Osoba na stronie zostanie dłużej i dokona się konwersja. Odwiedzający stronę zakupi przedmiot ze sklepu, wypełni formularz kontaktowy czy zapisze się do newslettera. Nazwa tego skryptu może być trochę myląca, gdyż zadaniem narzędzie to nie służy do spowolnienia, a do przyspieszenia strony. Treści ładowane na żądanie o wiele bardziej przyspieszają ładowanie strony. Zdarza się w wielu przypadkach, iż użytkownik nie dociera w ogóle w miejsce, gdzie znajduje się obraz, zbyteczne jest więc ładowanie go z całą zawartością strony.
Znanym pojęciem zupełnie przeciwnym do lazy loading jest eager loading, w tym wypadku cała strona wraz z obrazami ładowana jest w tym samym czasie, kiedy strona została odwiedzona przez użytkownika. W dzisiejszych czasach bardzo ważna jest szybkość, z jaką ładuje się witryna, nie tylko na komputerze, ale także na urządzeniach mobilnych. W końcu z internetu nie korzysta się jedynie na komputerze, ale także na telefonie czy tablecie. Użytkownikom social mediów zapewne znają aplikację Tumblr na system Adroind oraz iOS, w której został zastosowany właśnie skrypt lazy loading.
Google w swoich wytycznych podaje, iż prędkość, z jaką wczytuje się dana strona internetowa, jest czynnikiem rankingowym, który ma wpływ na pozycjonowanie strony www. Z tego względu podczas tworzenia własnej witryny dobrze jest wziąć pod uwagę jej szybkość ładowania, aby uzyskać dobry rezultat i być wysoko w wynikach wyszukiwania. Znanych jest parę czynników, od których zależy szybkość ładowania witryny. Niestety na pewne z nich nie można mieć żadnego wpływu, takim czynnikiem jest sprawność łącza internetowego użytkownika. Warto pamiętać o tym, iż nie każda osoba posiada szybkie łącze i nie wszystkie sieci komórkowe w różnych lokalizacjach dają odpowiednią przepustowość.
Na wiele czynników mamy jednak wpływ. W przypadku kiedy strona ładuje się o wiele za wolno, wówczas powodem może być serwer hostujący stronę. Musi on zapewniać właściwą wydajność, aby użytkownicy nie odczuwali w zbyt dużym stopniu spowolnienia strony, zwłaszcza jeśli jest na niej w danej chwili duży ruch. Innym czynnikiem jest ciężkość strony. W tym wypadku należy zmniejszyć jej rozmiar, uciąć niepotrzebny od czy usunąć wykonywane skrypty. Aby zmniejszyć rozmiar strony, należy zoptymalizować rozmiar plików graficznych, obraz w czasie wywołania żądania, nie może się za długo pobierać. Należy również usunąć zbyteczne skrypty i pluginy, które nie są na stronie koniecznie. Innym sposobem na zmniejszenie ciężkości strony, jest przeniesienie skryptów Java Script na sam koniec kodu strony.
Lazy loading – jak działa
Aby wytłumaczyć, w jaki sposób działa w ogóle lazy loading, warto przyjrzeć się przykładu. Jeśli na blogu modowym, znajduje się zbyt wiele zdjęć ubrań, pomimo tego, iż są one zoptymalizowane i zapisane w odpowiednim formacie, mogą ładować się bardzo powoli. Zanim wszystkie zdjęcia zostaną ściągnięcie, witryna nie będzie interaktywna. Nie można zjechać w dół, linki nie będą działały i nie będzie, się dało, odczytać treści bloga. Taki problem może rozwiązać właśnie skrypt lazy loading. Jego działanie opiera się na tym, iż wchodząc na stronę, widzimy jedynie wstęp do artykułu oraz pierwsze jego zdjęcia. Reszta zdjęć ściąga się w tle, kiedy zjedziemy na dane zdjęcie. W ten sposób zdjęcia oglądane w późniejszej kolejności nie blokują już na samym początku wczytywania się najważniejszych elementów strony, które umiejscowione są na górze, czyli zdjęć i tekstu.
W jaki sposób lazy loading wpływa na SEO?
Szybkość witryny w dużym stopniu zwiększa efektywność działań SEO. Oprócz tego nie potrzebuje ona inwestycji pieniężnych, przyniesie korzyści pod postacią pozyskania użytkowników jednakowo tych płatnych oraz bezpłatnych wyników wyszukiwania. W momencie, gdy użytkownik pojawi się na stronie w miejscu, w którym została zamieszczona grafika, zostanie ona załadowania, po czym wyświetlona. Wiele osób zastanawia się jedynie, co na to boty Google? Boty wyszukiwarek wolę jednak strony o czystym kodzie HTML, gdyż łatwiej je poprawnie scrawlować.
Do czego tak właściwie przydaje się lazy loading?
Lazy loading przede wszystkim wpływa na obniżenie czasu potrzebnego do pierwszego załadowania się strony oraz momentu, w którym stanie się całkowicie interaktywna. A wszystko to dzięki temu, iż ogranicza ilość zapytań oraz danych, które są pobierane. Pozbycie się nawet paru sekund z pierwszej inicjalizacji strony ma widoczny wpływ na wzrost wskaźników konwersji użytkowników oraz na to, w jakim sposób przez nich witryna jest w ogóle spostrzegana. Według przeprowadzonych przez amerykańskich naukowców badań nawet jedno sekundowe opóźnienie w trakcie ładowania strony może spowodować aż 11 procent mniej jej wyświetleń oraz wzrost niezadowolenia wśród odwiedzających o 16 procent. Szybki czas ładowania i zmniejszenie ilości pobieranych danych są bardzo ważne także dla użytkowników mobilnych, których jest aktualnie bardzo dużo. Nawet połowa ruchu w sieci to osoby korzystające właśnie z urządzeń mobilnych. Rezygnacja z wyświetlania niepotrzebnych informacji oznacza korzyści materialne, w szczególności dla osób z limitowanymi planami dostępu do internetu. To także duża korzyści dla samych urządzeń mobilnych, gdyż mogą one ograniczyć zużycie baterii i moc obliczeniową procesora potrzebną do wyświetlenia strony.
W jaki sposób wprowadzić skrypt lazy loading?
Aby wdrążyć skrypt lazy loading, należy wprowadzić odpowiednie zmiany w kodzie danej strony. Do tego celu można zastosować pewne gotowe wtyczki do CMS albo pluginów JS. W skrypcie lazy loading nie należy zamieszczać grafik, które są umiejscowione na samej górze strony i logotypów „hero images„. W przypadku kiedy lazy loading zostanie wdrążane również dla grafik znajdujących się na górze strony, wówczas nie zostaną one ukazane od razu użytkownikowi, a skrypt będzie jeszcze analizował proces, co wpłynie na opóźnienia oraz zmniejszy jakość UX. Efekt ówże optymalizacji, nie będzie taki jaki miał być. Niewłaściwe wprowadzenie skryptu do kodu strony spowoduje to, iż na samym początku renderowania strony użytkownikowi nie pojawią się grafiki, a cała jej zawartość będzie wyświetlana w niewłaściwy sposób. Gotowe wtyczki do lazy loading ma WordPress.
Lazy loading a urządzenia mobilne
Według danych Google ponad 50 procent wyszukiwań pochodzi właśnie z urządzeń mobilnych. Każdy zdaje sobie sprawę, iż mobilność ma bardzo duży potencjał. Na stronach mobilnych niestety istnieje większe ryzyko ograniczenia przepustowości. Na takich witrynach obrazy nie muszą wyświetlać się od razu po wejściu w pełnej rozdzielczości, gdyż jest to całkowicie zbyteczne. Dobrze jest o tym pamiętać w trakcie optymalizowania strony również pod urządzenia mobilne.
Wady oraz zalety lazy loading
Zalety zastosowania skryptu lazy loading:
- zmniejsza czas w jakich uruchamia się aplikacja
- krótszy czas wczytywania strony – lepsze seo i konwersja
- aplikacja wykorzystuje mniej pamięci ponieważ dane są ładowane na dopiero na żądanie;
- rezygnacja z niepotrzebnego odpytywania bazy danych.
Wady zastosowania skryptu lazy loading:
Takie rozwiązanie ma jedną wadę i jest nią bardziej skomplikowany kod.
Co można zmienić w procesie ładowania witryny
Szybkość ładowania danej witryny jest niezmiernie ważne, to od niej zależy stopień zadowolenia klientów. Jest to czynnik rankingowy wpływający korzystnie na ocenę pozycjonowanej strony. Przed tym jak użytkownik zobaczy daną witrynę, przeglądarka musi przeprowadzić na niej parę czynności. Jeżeli na jakimś z etapów analizy stanie się coś nieprawidłowego wówczas użytkownik będzie zmuszony czekać dłuższy czas na pełne załadowanie się strony internetowej. Warto wiedzieć, że każda strona internetowa składa się z takich zasobów ja: kod CSS, kod JS, kod HTML. Kod JS jest odpowiedzialny właśnie za wszelkie elementy graficzne. Chcąc aby użytkownik otrzymał gotowy widok, przeglądarka musi odczytać wszystkie te elementy. Widok z dużą ilością treści niestety wymaga dłuższego czasu na załadowanie się witryny i scrollowania całej podstrony. Nie jest to dobre rozwiązanie, nie tylko dla właściciela strony, ale i również dla użytkownika internetu, który może być jej potencjalnym klientem. Użytkownik traci transfer na urządzeniu mobilnym czy też obciąża domowe łącze, ładującymi się zasobami, które są mu na chwilę obecną nie potrzebne. Właściciel strony również na tym trafi ponieważ używa serwera, które ma ograniczony transfer czy dzierżawi zasoby.
Co zrobić aby pozbyć się problemów z ładowaniem się strony internetowej?
- na samym początku warto zastosować kompresję Gzip, która polega na kompresji plików HTML oraz CSS po stronie witryny. Wykorzystanie tego sposobu pozwoli na zaoszczędzenie od 40 do 80 procent oryginalnego rozmiaru pliku.
- warto także na bieżąco weryfikować oraz aktualizować bazę danych, która cały czas się powiększa w trakcie wdrążeń i aktualizacji.
- dobrze jest również zadbać o buforowanie przeglądarek, serwer nie będzie zmuszony wówczas przesyłać wszelkich elementów witryny za każdym razem, kiedy użytkownik odwiedzi stronę, gdyż cześć z nich będzie już zapisana w tak zwanej pamięci podręcznej
- należy także zrezygnować ze wszelkich niepotrzebnych skryptów oraz pluginów
