(ilość głosów: 8, średnia: 4,00 na 5)
Ładowanie...Lazy loading: co to jest?
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.
Oznacza 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ę.
[caption id="attachment_8481" align="aligncenter" width="750"]
żródło: https://searchengineland.com/google-makes-lazy-loading-seo-help-documents-available-307697[/caption]
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.
[caption id="attachment_8482" align="aligncenter" width="750"]
źródło: https://www.xda-developers.com/google-chrome-image-lazy-loading-speed-up-page-loading-mobile/[/caption]
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. Więcej o czynnikach rankingowych znajdziecie w tym wpisie: Czynniki rankingowe Google. Sprawdź, jak możesz wpłynąć na wyszukiwarkę. 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.
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 optymalizację, 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.
Lazy loading a 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:
[caption id="attachment_8484" align="aligncenter" width="731"]
źródło: https://zahidaramai.com/blog/seo-lazy-loading-images[/caption]
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ą wtyczkę do WordPressa polecasz?
Ja używam tej https://uploads.disquscdn.com/images/c6b38a560e1dc0ea524b3e52fbfb5bfdd9292f3532e9f2d6c8708d216f4fc768.png
Jest to o świetny sposób na zminimalizowanie użycia zasobów przez wstrzymanie ładowania obrazów, aż do momentu gdy będą one faktycznie wymagały wgrania. W normalnym przypadku strona ładuje się od początku do końca bez względu na to, co obecnie przegląda użytkownik. Natomiast przy „leniwym ładowaniu” najpierw wczytywane są obrazy u samej góry. Mają one priorytet, obrazy niżej ładują się dopiero gdy użytkownik przewinie stronę w dół.
Jeśli chodzi o plugin realizujący tylko lazy loading, możemy polecić: https://pl.wordpress.org/plugins/rocket-lazy-load/. Natomiast dla zadbania o jeszcze większą wydajność strony, polecamy bardziej zaawansowany plugin, który również zawiera moduł lazy loading’u: https://pl.wordpress.org/plugins/litespeed-cache/
Dzięki!
Jeśli chodzi o WordPressa to polecam także Autoptimize: https://pl.wordpress.org/plugins/autoptimize/ oprócz lazy loading agreguje też skrypty js i css.