Automatyczny lazy loading – instrukcja obsługi modułu PrestaShop

1. Co robi moduł

Strona sklepu zawiera często kilkadziesiąt obrazków, a większość z nich leży poniżej części, którą odwiedzający widzi na początku. Dzięki lazy loadingowi przeglądarka pobiera obrazek dopiero wtedy, gdy odwiedzający przewinie stronę w jego pobliże, więc strona pojawia się szybciej i zużywa mniej transferu. Domyślne motywy robią to dla większości własnych obrazków, ale motywy innych firm, szablony modułów i wszystko, co wpisujesz w edytorze — opisy produktów, strony CMS — zwykle nie. Niektóre motywy opóźniają też ten jeden obrazek, który czekać nie powinien: duży obrazek u góry strony.

Moduł dodaje lazy loading do obrazków Twojego sklepu i nie zmienia przy tym żadnego pliku motywu ani modułu. Pilnuje też, żeby pierwsze obrazki każdej strony wczytywały się od razu — to właśnie mierzy Google jako Largest Contentful Paint (LCP).

Działa z PrestaShop 1.7.8, 8.x i 9.x (PHP 7.2.5 lub nowsze), z motywami Classic, Hummingbird i motywami innych firm oraz z multistore.

2. Instalacja

1. Pobierz moduł z Moje konto → Historia zamówień w addonspresta.com.
2. W panelu administracyjnym otwórz Moduły → Menedżer modułów i kliknij Załaduj moduł.
3. Upuść plik ap_autolazyload_v1.0.0.zip i poczekaj na potwierdzenie.
4. Kliknij Konfiguruj na karcie modułu.

Moduł działa od razu po instalacji, w technice natywnej, i nie wymaga żadnych dalszych ustawień. Nie trzeba czyścić pamięci podręcznej: zapis ustawień robi to sam.

3. Jak to działa

Moduł pracuje w dwóch miejscach.

W każdym szablonie. Każda strona powstaje z szablonów: sama strona, bloki modułów, lista produktów doczytana po filtrowaniu lub sortowaniu, szybki podgląd, okno koszyka. Gdy szablon wypisze swój HTML, moduł go czyta, znajduje znaczniki <img> i <iframe> i dodaje do nich lazy loading. Obrazki wpisane w opisach produktów i na stronach CMS są częścią tego HTML-u, więc też są objęte.

W gotowej stronie. Tuż przed wysłaniem strony do odwiedzającego moduł jeszcze raz szybko ją przegląda: pierwsze obrazki strony ustawia tak, żeby wczytały się od razu, a pierwszy duży dostaje wysoki priorytet.

Do wyboru są dwie techniki:

• Natywna (domyślna) — moduł dodaje atrybut loading="lazy". O tym, kiedy wczytać obrazek, decyduje przeglądarka. Do sklepu nie trafia żaden JavaScript, a wyszukiwarki widzą zwykłe obrazki.
• Skrypt — moduł wstawia do src mały przezroczysty placeholder o proporcjach obrazka, a prawdziwy adres odkłada na bok. Niewielki skrypt (około 4 KB, bez bibliotek) przywraca adres, gdy obrazek zbliża się do ekranu. Ta technika pozwala ustalić, jak wcześnie obrazki zaczynają się wczytywać, pokazywać je płynnie i opóźniać tła CSS wpisane w elemencie.

Czego moduł nie rusza:

• obrazków, którymi zajmuje się już skrypt lazy loadingu Twojego motywu;
• obrazków i szablonów, które wyłączysz (patrz Wykluczone szablony i Klasy CSS niżej);
• pikseli śledzących i obrazków osadzonych w stronie jako data:;
• w technice ze skryptem: ikon SVG i obrazków oznaczonych jako dane strukturalne (itemprop), które muszą zachować adres;
• e-maili, dokumentów PDF takich jak faktury i panelu administracyjnego;
• obrazków dodawanych przez skrypty, teł z arkuszy stylów i filmów.

Moduł nie edytuje żadnego pliku motywu ani modułów i niczego nie zapisuje w produktach ani stronach. Zmienia wyłącznie HTML wysyłany odwiedzającemu; wyłączenie lub odinstalowanie modułu od razu przywraca pierwotne strony. Nie zmniejsza, nie kompresuje i nie konwertuje obrazków, przechowuje wyłącznie swoje ustawienia (a podczas nagrywania listę szablonów) i nie łączy się z addonspresta.com ani żadnym innym serwerem.

4. Funkcje i ustawienia

Otwórz Moduły → Menedżer modułów → Automatyczny lazy loading → Konfiguruj. Pole Pomoc u góry prowadzi do tej instrukcji i do strony modułu w addonspresta.com, w języku Twojego panelu. Niżej są trzy sekcje ustawień, każda z przyciskiem Zapisz, który zapisuje je wszystkie, oraz tabela Szablony z obrazkami.

Lazy loading

• Opóźniaj ładowanie obrazków — włącza lub wyłącza cały moduł w sklepie.
• Technika — Natywna: loading="lazy", bez skryptu albo Skrypt: placeholder i loader, opisane wyżej.
• Także ramki iframe — filmy i mapy osadzone w <iframe> dostają loading="lazy", w obu technikach.
• Obrazki ładowane od razu — liczba obrazków u góry każdej strony, które nigdy nie są opóźniane, od 0 do 20 (domyślnie 4). Reguła usuwa też lazy loading, który na te obrazki nałożył motyw, na przykład na główne zdjęcie produktu. Policz, co widać bez przewijania na stronie głównej i na stronie produktu: logo, slajd, zdjęcie produktu. 0 wyłącza regułę.
• Wysoki priorytet dla pierwszego dużego obrazka — pierwszy z tych obrazków o szerokości co najmniej 300 pikseli dostaje fetchpriority="high", czyli prośbę do przeglądarki, żeby pobrała go wcześniej niż inne pliki. Zwykle to slajd na stronie głównej i główne zdjęcie na stronie produktu.

Szablony

• Objęte szablony — Wszystkie szablony sklepu poza wykluczonymi (domyślnie) albo Tylko szablony z listy poniżej.
• Szablony z listy — używane przy drugim wyborze: jeden szablon w wierszu.
• Wykluczone szablony — szablony, które nigdy nie są opóźniane, bez względu na wybór powyżej. Domyślnie dwa szablony galerii produktu z motywów Classic i Hummingbird, które sklep wypisuje ponownie, gdy odwiedzający wybierze inną kombinację.
• Klasy CSS wyłączające lazy loading — oddzielone przecinkami, domyślnie no-lazy, skip-lazy. Obrazek, iframe albo element z jedną z tych klas lub z atrybutem data-no-lazy zostaje bez zmian. Przydaje się dla pojedynczego obrazka w opisie: dopisz mu class="no-lazy" w widoku źródła edytora.

Szablon to wszystko, co sklep wypisuje za jednym razem: strona (index.tpl, catalog/product.tpl, cms/page.tpl), blok modułu (module:ps_imageslider/views/templates/hook/slider.tpl), lista produktów doczytana po filtrowaniu. Zapisujesz go tak, jak pokazuje go tabela Szablony z obrazkami. * zastępuje dowolne znaki: catalog/listing/* obejmuje każdą stronę z listą produktów, module:ps_imageslider/* każdy szablon slidera. Mały szablon dołączany przez inny należy do tamtego; pojedynczy obrazek zostawisz bez zmian, nadając mu klasę no-lazy.

Technika ze skryptem

Te ustawienia działają tylko w technice Skrypt.

• Zacznij wczytywać, zanim obrazek będzie widoczny — odległość od ekranu w pikselach, przy której obrazek zaczyna się wczytywać (od 0 do 2000, domyślnie 300). Większa wartość wczytuje wcześniej, więc przy szybkim przewijaniu widać mniej pustych miejsc.
• Płynne pojawianie się obrazków — wczytany obrazek pojawia się z krótkim przenikaniem.
• Kopia każdego obrazka w <noscript> — dodaje pierwotny obrazek dla odwiedzających i robotów, które nie uruchamiają JavaScriptu. Nieco zwiększa strony; Google uruchamia JavaScript i tej kopii nie potrzebuje.
• Także tła CSS wpisane w elemencie — elementy z obrazkiem tła w atrybucie style, częsty sposób budowania banerów. Tła z arkuszy stylów nie są objęte.

Szablony z obrazkami

Tabela pokazuje, jakie szablony wypisał sklep i co moduł zrobił w każdym z nich. Kliknij Nagrywaj przez 10 minut, otwórz w sklepie strony, które chcesz sprawdzić — stronę główną, kategorię, produkt, stronę CMS — i odśwież stronę konfiguracji. Nagrywanie kończy się samo; poza nim sklep niczego nie zapisuje. Każde nowe nagrywanie i każdy zapis ustawień zaczyna nową listę.

„Nie da się bezpiecznie odczytać” oznacza, że znacznik jest zapisany w sposób, którego moduł nie zaryzykuje zmieniać; obrazek po prostu wczytuje się tak jak dotąd. „Wyłączone” to obrazki z data-no-lazy, z klasą z listy powyżej, z wysokim priorytetem albo z loading="eager".

5. Multistore

Ustawienia zapisują się dla sklepu wybranego w nagłówku panelu; tabela Szablony z obrazkami pojawia się po wybraniu jednego sklepu, bo zależy od jego motywu. Każdy sklep może mieć własną technikę i własne listy, także wtedy, gdy kilka sklepów korzysta z jednego motywu. W kontekście wszystkich sklepów lub grupy zapisać może tylko pracownik, który zarządza każdym sklepem tego kontekstu. Jedna licencja obejmuje wszystkie sklepy instalacji.

6. Odinstalowanie

Menedżer modułów → Automatyczny lazy loading → Odinstaluj usuwa ustawienia modułu i nagraną listę; strony są znowu takie, jakimi zrobił je motyw. Jeśli chcesz zachować ustawienia, użyj Wyłącz.

7. Najczęstsze pytania i problemy

Po czym poznać, że działa? Otwórz stronę sklepu, kliknij prawym przyciskiem obrazek daleko w dole strony i wybierz Zbadaj. W technice natywnej znacznik ma loading="lazy"; w technice ze skryptem ma data-ap-lazy, dopóki do niego nie przewiniesz. W karcie Sieć narzędzi przeglądarki, z filtrem obrazków, nowe pliki pojawiają się w miarę przewijania.

PageSpeed pisze „Obraz największego wyrenderowania treści został leniwie załadowany”. Zwiększ Obrazki ładowane od razu, żeby objąć duży obrazek u góry tej strony, i zostaw włączony Wysoki priorytet dla pierwszego dużego obrazka.

Slider, zoom albo galeria motywu pokazuje pusty lub zły obrazek. Ich skrypt sam operuje adresami obrazków. Nagraj, znajdź jego szablon w tabeli Szablony z obrazkami i dopisz go do pola Wykluczone szablony albo nadaj obrazkowi klasę no-lazy. Technika natywna rzadko sprawia ten kłopot; rozważ ją, jeśli motyw ma wiele takich skryptów.

Obrazek w opisie produktu nie powinien być opóźniany. Dopisz mu class="no-lazy" w widoku źródła edytora.

Zmieniłem ustawienie, a strona wygląda tak samo. Zapis czyści pamięć podręczną szablonów PrestaShop, ale starą stronę może jeszcze podawać moduł cache całych stron, CDN albo pamięć przeglądarki. Odśwież tamtą pamięć albo wyczyść pamięć podręczną w Zaawansowane → Wydajność.

Czy wyszukiwarki widzą moje obrazki? Tak. W technice natywnej strona zawiera zwykłe obrazki. W technice ze skryptem Google uruchamia loader; dla robotów, które nie uruchamiają JavaScriptu, włącz Kopia każdego obrazka w <noscript>.

Mój motyw sam opóźnia obrazki własnym skryptem. Moduł zostawia te obrazki motywowi i obejmuje resztę: szablony modułów, treści z edytora i ramki iframe.

Tabela pokazuje przy szablonie „nie da się bezpiecznie odczytać”. Nic się nie zepsuło: obrazek z tego szablonu wczytuje się tak jak dotąd. Jeśli ma być opóźniany, dopisz loading="lazy" do znacznika w szablonie samodzielnie.

Faktury i e-maile nigdy nie są zmieniane, niezależnie od ustawień.

8. Aktualizacje i wsparcie

Aktualizacje są bezpłatne dożywotnio: nowe wersje pobierasz z Moje konto → Historia zamówień w addonspresta.com i wgrywasz tak samo jak nowy moduł. Ustawienia zostają zachowane.

Wsparcie obejmuje 12 miesięcy od zamówienia: napisz na mail@addonspresta.com albo przez formularz kontaktowy na addonspresta.com (od poniedziałku do piątku, 10:00–16:00; odpowiadamy zwykle w ciągu 2 dni roboczych). Podaj wersję PrestaShop, wersję modułu, nazwę motywu i adres strony, na której widać problem.

Wróć do: Instrukcje modułów