.lozad czyli lazyload, placeholder i dobre praktyki | GrowCommerce

Jeśli na sklepie w jakimś module zauważysz klasę .lozad, to możesz przyjąć za pewnik, że moduł ten powinien zostać lazyloadowany.

Szybki słowniczek dwóch ważnych pojęć:

Lazyload - leniwe ładowanie, opóźnione ładowanie
Generalnie zdjęcie załaduje się tuż przed tym, jak użytkownik sklepu "dojedzie" do tego miejsca scrollem.

Placeholder - miejsco-trzymacz
Czyli grafika, która wyświetla się do czasu załadowania tej docelowej. Jakiejś niskiej jakości grafika, która ma się załadować instant i oszukać wskaźniki ładowania, przyspieszyć czas ładowania się sklepu.

1. Po co to?

W dużym skrócie - ale naprawdę dużym, bo temat ten jest długi jak rzeka - lazyloadujemy zdjęcia, aby sklep załadował się szybciej. Pobiera on na początku tylko placeholdery, czyli powiedzmy na stronie głównej 20 grafik po 1kb = 20kb do pobrania na start.

Adekwatnie średni rozmiar grafik to około 200kb x 20 grafik = 4mb. Dużo. Ciężko.

W szybki sposób, bardzo latwo "oszukujemy" wskaźniki. Skoro użytkownik nie musi mieć od razu zdjęć na całej stronie, to po co je pakować. Może od razu kliknie w baner główny. Adekwatnie na Facebooku, nie dostajemy całego feeda, tylko co jakiś czas nowe treści są doładowywane - to też adekwatny sposób zastosowania lazyload.

2. Praktyka w Modernie 3.0

Gdy używamy klasy "lozad" to możemy przygotować zdjęcie główne (takie, które chcemy wyświetlać) powiedzmy w rozmiarze do 150-300kb. Możemy też zrobić ten sam format, ten sam rozmiar, wszystko to samo, ale bez treści. Samo tło.

Sugeruję kolor, najlepiej lekki szary. Utarło się, że tak wygląda placeholder.

W Modernie placeholdery mają kolor #f8fafb

Sam kolorowy box będzie miał kilka kilobajtów, czasem nawet nie.

Zasada jest taka, że dodajemy najpierw placeholdr, zdjęcie które wisi do czasu załadowania grafiki. Potem dodajemy link do zdjęcia, które chcemy oryginalnie umieścić.

I tak na przykład mamy moduł promoboxa. Przy włączonym edytorze widzimy to co na grafice powyżej, czyli domyślnie załaduje obraz placeholdera w kolorze. Lekki, szybki.

Modern 3.0 używa lazyloadingu dla karuzel produktowych, dla modułów z grafiką, dla sliderów, dla wszystkich grafik w opisie produktu.

3. Użycie lozad

Żeby taki efekt osiągnąć musimy mieć trzy elementy.

I. Klasę .lozad podpisaną w formie class="lozad".

<img class="lozad" ... >

II. Placeholder w formie linku do zdjęcia, dodanego jako normalne źródło zdjęcia czyli src="link-do-zdjęcia".

<img class="lozad" src="/link-do-placeholdera.webp" ... >

III. Oryginalne zdjęcie, które nie załaduje się do czasu, aż będzie potrzebne. Ukrywamy je pod kodem data-src="link-do-właściwego-zdjęcia"

<img class="lozad" src="/link-do-placeholdera.webp" data-src="/link-do-prawidłowego-zdjęcia.webp" >

Spójrz jak zastosowaliśmy ten przepis w module Promoboxa:

<img class="lozad" src="/skins/user/rwd_primary_1/images/user/gc__placeholder__promobox.webp" alt="Sprawdź bloga GrowCommerce - Dawka wiedzy o Shoperze" data-src="/skins/user/rwd_primary_1/images/user/growcommerce-blog.jpg" />