Lazy loading – co to jest i jaki ma wpływ na SEO

Lazy loading – co to jest i jaki ma wpływ na SEO

Problem wolnego ładowania się strony jest zmorą dla tych, którzy chcą mieć dostęp do wszystkiego szybko. W dzisiejszym świecie, także w świecie mediów, liczy się szybkość – szybkie dostarczanie informacji, szybkie reakcje, a także szybkie ładowanie strony. W erze internetu popularne powiedzenie, że czas to pieniądz nabiera nowego znaczenia. Według danych Google strona, która ładuje się dłużej niż 5 sekund, jest narażona nawet na 40% spadek konwersji.

Ostatnio na naszym blogu: Infinite scroll - co to jest i jak wpływa na SEO

Czym jest lazy loading?

Lazy loading jest skryptem wprowadzanym do kodu strony, który powoduje, że obrazy i pliki wideo na stronie nie ładują się w momencie otwarcia strony przez użytkownika, lecz dopiero wtedy, gdy użytkownik znajdzie się w tej części strony, w której jest obraz czy wideo.
Lazy LoadingOznacza to, że dzięki niemu możesz zyskać na transferze oraz na wydajności swojej strony. Strona załaduje się o wiele szybciej, a to z kolei wpłynie na zadowolenie użytkownika i zwiększy prawdopodobieństwo, że zostanie on na Twojej stronie i dokona się konwersja, czyli na przykład odwiedzający stronę kupi przedmiot ze sklepu, zapisze się do newslettera lub wypełni formularz kontaktowy. Nazwa skryptu jest dosyć osobliwa i może być myląca. Można bowiem pomyśleć, że narzędzie ma na celu nie przyspieszenie, lecz spowolnienie strony. Jednak nic podobnego. Obrazy ładowane na żądanie, bo tak możemy określić ten system ładowania plików na stronie, znacznie przyspieszają początkowe ładowanie strony. Wielu użytkowników nie dociera do miejsca, w którym znajduje się obraz, więc nie warto, by ładował się od razu z całą stroną. Przeciwieństwem lazy loading jest eager loading. W tym przypadku całość strony, łącznie z obrazami innymi obiektami, jest ładowana w momencie, w którym użytkownik otwiera stronę.

Lazy Loading - jak wygląda?
żródło: https://searchengineland.com/google-makes-lazy-loading-seo-help-documents-available-307697

Aktualnie coraz większą wagę przykłada się do szybkości, z jaką ładuje się strona zarówno na komputerze jak i telefonie.Użytkownicy i fani social mediów, szczególnie w formie aplikacji na smartfony, mogli zetknąć się z lazy loading w przypadku aplikacji tumblr na system Android i iOS już ponad 2 lata temu.

CO to jest lazy loading
źródło: https://www.xda-developers.com/google-chrome-image-lazy-loading-speed-up-page-loading-mobile/

Wolniej znaczy szybciej

Google w oficjalnych wytycznych podaje, że prędkość wczytywania strony jest czynnikiem rankingowym, który wpływa na pozycjonowanie strony internetowej. Warto więc zająć się tym na poważnie i wpisać w priorytety pracy nad stroną, by osiągać zadowalające wyniki i piąć się w górę w wynikach wyszukiwania.
Istnieje kilka czynników, które wpływają na to, jak szybko ładuje się strona. Na niektóre z nich nie mamy wpływu, jako właściciele strony, na przykład na sprawność łącza internetowego użytkownika. Jedyne, co możemy mieć na uwadze, to to, że nie każdy użytkownik ma szybkie łącze i nie każda sieć komórkowa w nie każdej lokalizacji daje dobrą przepustowość. Na inne z kolei mamy wpływ. Jeśli strona ładuje się wolno, to w pierwszej kolejności obwiniamy serwer hostujący stronę. Musi mieć on odpowiednią wydajność, by spowolnienie strony nie było odczuwane przez użytkowników, szczególnie w momencie zwiększenia natężenia ruchu na stronie. Zaś ostatni z czynników leży już całkowicie po naszej stronie jako osób zarządzających stroną, bowiem nawet najszybszy serwer nie da rady przyspieszyć ciężkiej strony.

Prędkość ładowania strony

W związku z tym pracę nad przyspieszeniem strony warto zacząć od jej zmniejszenia, czyli od zredukowania rozmiaru, ilości wykonywanych skryptów czy niepotrzebnego kodu. Ta ostatnia kwestia w kontekście lazy loading jest nieco problematyczna, ale ten wątek zostanie poruszony i rozwinięty nieco później. Teraz skoncentrujmy się na tym, w jaki sposób można zmniejszyć wagę strony. Po pierwsze warto zadbać o rozmiar plików graficznych oraz ich optymalizacji, by w momencie wywołania żądania obraz nie pobierał się zbyt długo. Kolejno pozbyć się tych skryptów i pluginów, które nie są potrzebne i niezbędne do prawidłowego działania strony. Można też przenieść skrypty Java Script na koniec kodu strony. Więcej informacji znajdziesz we wskazówkach dla webmasterów: Render-Blocking Resources.

Technikę lazy loading zastosowało NY Studio+107, dzięki czemu zwiększyło prędkość ładowania strony ze 107,8 s do 2,8 s. Imponujące, prawda?

Więcej o przyspieszeniu ładowania strony we wpisie na naszym blogu: Jak skrócić czas ładowania strony – 10 trików.

Jak ma się lazy loading do SEO?

Szybkość witryny zdecydowanie pozwala zwiększyć efektywność działań SEO. Dodatkowo nie wymaga ona inwestycji pieniężnych, a odbije się zarówno na pozyskaniu użytkowników z płatnych, jak i bezpłatnych wyników wyszukiwania.

Tak wygląda przykładowy kod z użyciem lazy loading:

Kod lazy loading
źródło: https://zahidaramai.com/blog/seo-lazy-loading-images

Kiedy użytkownik pojawi się na stronie w miejscu, w którym znajduje się grafika, zostanie ona załadowana i wyświetlona. Wszystko wydaje się piękne, ale pozostaje nam jedno z podstawowych pytań – co na to boty Google?

Niestety boty wyszukiwarek preferują strony, których czysty kod HTML są w stanie poprawnie scrawlować. Owszem, obecnie Googlebot jest w stanie wykonać ponowny crawl  i zrenderować JS bazując na Chrome41 – ale często dostarcza wyzwań w poprawnej indeksacji. Więc o ile dla użytkownika nie będzie negatywnych skutków w odbiorze, ponieważ grafika i tak wyświetli się w oryginalnym rozmiarze dokładnie wtedy, gdy będzie ona potrzebna, o tyle dla botów może to być już nieco problematyczne i mogą jej nie zauważyć. Jest jednak sposób na to, by wilk był syty i owca cała.

Polecamy wideo, które zostało przygotowane dla webmasterów przez Google: Deliver search-friendly JavaScript-powered websites.

Jak wdrożyć skrypt lazy loading?

Jak już wcześniej zostało wspomniane, lazy loading wdraża się poprzez wprowadzenie zmian w kodzie strony. Może to zostać napisane przez programistę. Łatwiejszym sposobem jest skorzystanie z gotowych wtyczek do CMS typu WordPress lub pluginów JS.

Lazy loading mobilnie

Google podaje w danych z sierpnia zeszłego roku, że ponad 50% wyszukiwań pochodzi z urządzeń mobilnych. Widać więc, jak duży potencjał kryje się w mobilności. Na stronach mobilnych występuje jednak największe ryzyko ograniczonej przepustowości. Na nich również nie ma potrzeby, by obrazy wyświetlały się w pełnej rozdzielczości i to od razu po wejściu. Warto więc wziąć to pod uwagę przy optymalizowaniu strony także pod urządzenia mobilne.

  5,00 / 5 ( 3 )
Autor
Junior SEO Specialist - Ola

Junior SEO Specialist

Absolwentka filologii, która kocha polszczyznę i pisze teksty tak, by nie tylko roboty Google dobrze się bawiły, czytając je. W Delante od maja 2018 roku, w branży SEO od niespełna roku. Żongluje słowami i ściga się z konkurencją na coraz to wyższe pozycje w wynikach wyszukiwania. Miłośniczka memów, gier słownych, muzyki na żywo (od Bacha do Beyonce), kuchni wege, wtrąceń w nawiasach i szopów praczy.

Ostatnio na naszym blogu

Jesteś ciekawy, jak wygląda pozycjonowanie sklepów internetowych, a może chcesz wejść na rynek szwajcarski i ciekawi Cię, jak wygląda pozycjonowanie zagraniczne? Na naszym blogu znajdziesz odpowiedzi na te pytania i wiele innych porad ważnych dla rozwoju Twojego biznesu.