Spis tre艣ci

Czym w艂a艣ciwie jest Lazy Loading (lub jak m贸wi膮 inni lazy load)?

Lazy Loading to nic innego jak technika, dzi臋ki kt贸rej poprawimy szybko艣膰 艂adowania strony internetowej. Dzieje si臋 tak ze spraw膮 tego, 偶e cz臋艣膰 zasob贸w zostanie doczytana dopiero w贸wczas, gdy u偶ytkownik przewinie stron臋 do kolejnych zasob贸w (np. grafik lub film贸w). Doskona艂y przyk艂ad dzia艂ania tego typu funkcjonalno艣ci podaje sam gigant w艣r贸d wyszukiwarek. Google 艂膮czy niesko艅czone przewijanie i Lazy Load, dzi臋ki czemu mo偶emy swobodnie przegl膮da膰 graficzne wyniki wyszukiwania. Po wyszukaniu frazy, na pierwszej stronie znajduje si臋 cz臋艣膰 grafik, kt贸re algorytm promuje jako najbardziej pasuj膮ce do wynik贸w wyszukiwania. Co zatem z pozosta艂ymi plikami, kt贸re wczytuj膮 si臋 po przescrollowaniu? A no w艂a艣nie, strona doczytuje je, w miar臋 jak przewijamy j膮 coraz ni偶ej, co korzystnie wp艂ywa na pr臋dko艣膰 wy艣wietlania si臋 promowanych w widoku g艂贸wnym tre艣ci.

Loading above the fold w graficznych wynikach wyszukiwania Google z przewijan膮 zawarto艣ci膮

Dlaczego decydujemy si臋 na Lazy Loading?

Przede wszystkim, pozbywamy si臋 problemu (przynajmniej cz臋艣ciowo 馃檪), jakim jest wolne 艂adowanie si臋 zasob贸w. Ka偶de zmniejszenie obci膮偶enia sieci sprawia, 偶e strony internetowe wczytuj膮 si臋 szybciej, a tym samym nie zwi臋kszaj膮 wsp贸艂czynnika odrzuce艅.

Leniwe 艁adowanie 鈥 czyli korzy艣ci p艂yn膮ce z Lazy Loading

Jak ju偶 wspomnia艂em wcze艣niej, implementacja Lazy Loading przynosi wiele korzy艣ci, ale c贸偶 to za enigmatyczne korzy艣ci, o kt贸rych wspomina sam autor?

Poprawa UX i szybszy czas wst臋pnego 艂adowania 鈥 przede wszystkim to poprawa naszej witryny od strony technicznej. Dzi臋ki prostym zabiegom implementacji Lazy Loading mo偶emy znacznie przyspieszy膰 stron臋 dla u偶ytkownik贸w i pozby膰 si臋 problemu, jakim jest wolne 艂adowanie si臋 zasob贸w.

Poprawa metryk szybko艣ci dzia艂ania strony internetowej 鈥 boty Google wraz z algorytmem potrafi膮 oceni膰, czy strona dzia艂a wystarczaj膮co szybko i warto wspomnie膰, 偶e jest to jeden z oficjalnych czynnik贸w wp艂ywaj膮cych na pozycje naszej strony w organicznych wynikach wyszukiwania.

Oszcz臋dzanie zasob贸w po stronie serwera i klienta 鈥 Lazy Loading oszcz臋dza zasoby zar贸wno po stronie serwera, jak i klienta, gdy偶 艂adowana jest jedynie ta cz臋艣膰, kt贸ra obecnie jest przegl膮dana przez u偶ytkownika.

Eager Loading vs Lazy Loading

Skoro wiemy ju偶 czym jest Lazy Loading, warto wspomnie膰 r贸wnie偶 o Eager Loading, kt贸re dzia艂a zupe艂nie inaczej, a rezultat jest ca艂kiem odwrotny. Jest to metoda, kt贸ra polega na jak najszybszym przes艂aniu wskazanych zasob贸w. Przydaje si臋 to w przypadku stron, dla kt贸rych istotne jest wczytanie si臋 wszystkich kluczowych zasob贸w, w celu poprawnego funkcjonowania strony internetowej.

Zastosowanie Lazy Loadingu w praktyce

Na czym polega Lazy Loading i dlaczego chcemy, aby by艂 elementem naszej strony internetowej, ju偶 wiemy. Teraz musimy zada膰 sobie pytanie: "Dlaczego akurat moja strona potrzebuje Lazy Loading?" Odpowiedzi na to pytanie mo偶e by膰 kilka, w zale偶no艣ci od tego, o jakim typie podstron m贸wimy.

Kategorie produkt贸w w sklepie internetowym

W przypadku sklep贸w internetowych dobrze jest zaimplementowa膰 Lazy Load dla listingu produkt贸w spoza Above The Fold聽(pierwszy/g艂贸wny widok strony po za艂adowaniu). W przypadku du偶ej ilo艣ci produkt贸w u偶ytkownik znacznie szybciej otrzyma niezb臋dne zasoby, co znacznie poprawi wydajno艣膰 strony w jego odczuciu.

Kategorie i wpisy blogowe

Kategorie blogowe to kolejny typ podstrony, dla kt贸rej mo偶emy zaimplementowa膰 Lazy Loading. Dzia艂a to mniej wi臋cej w taki sam spos贸b jak w przypadku kategorii. U偶ytkownik przewija stron臋, a w efekcie do艂adowuj膮 si臋 kolejne grafiki, natomiast sama kategoria wczytuje si臋 znacznie szybciej. Wpisy blogowe to nieco inny przypadek, jednak ka偶dy z nas wie, jak potrafi膮 by膰 obszerne i ile scrollowania nas kosztuj膮, 偶eby w ko艅cu dotrze膰 do upragnionej informacji, w kt贸rej poszukiwaniu surfujemy w meandrach internetu 馃檪. Warto zadba膰, aby zdj臋cia, kt贸re nie znajduj膮 si臋 bezpo艣rednio w pierwszym widoku po za艂adowaniu, wczytywa艂y si臋 dopiero gdy pojawi膮 si臋 w polu widzenia u偶ytkownika.

Og贸lna zasada dla tekstowych stron internetowych

Wszelkie zasoby, kt贸re nie s膮 wymagane do poprawnego dzia艂ania strony, mo偶emy wczytywa膰 po za艂adowaniu si臋 g艂贸wnej cz臋艣ci tre艣ci. Wdro偶enie Lazy Loading dla grafik, czy materia艂贸w wideo (zasob贸w dost臋pnych z poziomu strony internetowej) potrafi zdzia艂a膰 cuda dla szybko艣ci strony, a i sama funkcjonalno艣膰 jest kompatybilna ze wszystkimi nowoczesnymi przegl膮darkami.

Lazy Loading jest szczeg贸lnie przydatne w przypadku stron z elementami zagnie偶d偶onymi. Pozwala na wst臋pne wczytanie strony z pomini臋ciem element贸w <iframe> do czasu ich wy艣wietlenia.

Lazy Loading 鈥 oszcz臋dzanie zasob贸w poprzez dodatkowy skrypt

Na co uwa偶a膰 podczas wdra偶ania Lazy Loading?

Nowo zaimplementowany Lazy Loading niekiedy bywa problematyczny i nale偶y przeanalizowa膰 czy leniwie 艂aduj膮ce si臋 zasoby nie wp艂ywaj膮 na inne elementy techniczne. Zdarzaj膮 si臋 sytuacje, 偶e wtyczki automatycznie przypisuj膮 parametr 鈥瀕azy鈥 do element贸w znajduj膮cych si臋 w Above The Fold. W takiej sytuacji, pomimo zmniejszenia czas贸w 艂adowania (Largest Contentful Paint), mo偶emy mie膰 problemy z innymi metrykami wp艂ywaj膮cymi na ocen臋 ca艂ej strony.

Lazy Loading w praktyce

Teoria ju偶 za nami. Jak jednak si臋 zabra膰 za wdro偶enie tego enigmatycznego leniwego 艂adowania? Musimy wdro偶y膰 odpowiedni skrypt JavaScript, kt贸ry odpowiada za op贸藕nienie 艂adowania tre艣ci (a tym samym op贸藕niaj膮 u偶ycie transferu niepotrzebnych danych 鈥 przynajmniej w danej chwili 馃檪) spoza Above The Fold.

Zastosowanie atrybutu loading w tagu obrazu

Wiele system贸w CMS posiadaj膮 w艂asne 鈥 zaimplementowane rozwi膮zania lub udost臋pniaj膮 wtyczki do automatycznego wdra偶ania Lazy Loading. Na przyk艂ad, na jednym z najpopularniejszych system贸w CMS 鈥 Wordpressie, od wersji 5.5 zosta艂o wprowadzone natywne Lazy Loading i aby go wy艂膮czy膰 musimy zainstalowa膰 wtyczk臋, kt贸ra to za nas zrobi. Ale zaraz... Po co wy艂膮cza膰 co艣, co jest dobre? No wi臋c nie zawsze natywne rozwi膮zania s膮 optymalne. W niekt贸rych szablonach automaty potrafi膮 nak艂ada膰 Lazy Load dla grafik i zasob贸w w Above The Fold, a to ju偶 zdecydowanie nie jest po偶膮dan膮 funkcjonalno艣ci膮.

Co je艣li nie mamy mo偶liwo艣ci skorzystania z wtyczek?

W przypadku gdy nasz CMS nie posiada mo偶liwo艣ci instalacji wtyczki, kt贸ra automatycznie 艂aduje obrazy w trybie On Demand Loading, mo偶emy skorzysta膰 z gotowych skrypt贸w. Istnieje wiele stron internetowych, kt贸re udzielaj膮 tego typu informacje nieodp艂atnie. Polecam wygooglowa膰 interesuj膮cy nas przyk艂ad, a odpowied藕 na pewno znajdziecie w pierwszych wynikach wyszukiwania.

Samodzielna implementacja Lazy Loading to jednak rozwi膮zanie przeznaczone dla do艣wiadczonych u偶ytkownik贸w i developer贸w webowych. W przypadku gdy nie dysponujesz wystarczaj膮c膮 wiedz膮 techniczn膮, polecam zwr贸ci膰 si臋 z pro艣b膮 do agencji lub firm developerskich.

Twoja strona wymaga optymalizacji?

Zle膰 to profesjonalistom z KS!

Co Google s膮dzi o Lazy Loading?

Google ma w艂asne wytyczne odno艣nie Lazy Loading, oraz sposobu umieszczenia skrypt贸w JavaScript w kodzie strony. Mo偶emy wi臋c uzna膰, 偶e wdro偶enie leniwego 艂adowania to dzia艂anie nie tylko aprobowane przez developer贸w Google, ale wr臋cz zalecane.

Lazy Loading 鈥 Podsumowanie

Je艣li uwa偶asz, 偶e powolne 艂adowanie si臋 Twojej strony stanowi jeden z wi臋kszych problem贸w, polecam zastosowa膰 Lazy Loading. Technika ta zapewni mniejsze obci膮偶enie sieci zar贸wno po stronie klienta, jak i serwera. Zadbaj o wysok膮 pozycj臋 strony i zmniejsz czas 艂adowania poszczeg贸lnych element贸w, w taki spos贸b, aby strona by艂a przyjazna dla ka偶dego u偶ytkownika.