Automatyczne Tagi Lazy SEO dla obrazów: konfiguracja i pomoc

Prześlij ZIP w Moduły > "Module Manager" > "Upload a module". Zainstaluj moduł i kliknij "Configure". Otworzy to kontroler konfiguracji z formularzem Ustawienia lazy loading.

Wymaga PrestaShop 1.6.1 lub nowszego i PHP 7.1 lub nowszego.

Kliknij Zapisz.

Obrazy w polach HTML przechodzących przez filterHtmlContent otrzymują atrybuty bezpośrednio w prezentowanej treści. Może to obejmować opisy i treści CMS, jeśli rdzeń kieruje te pola przez ten hook.

Dla obrazu, który musi zachować sposób ładowania, użyj skonfigurowanej klasy:

<img src="/img/cms/banner.jpg" alt="Store banner" class="no-autolazy">

Zapobiega to dodawaniu nowych atrybutów loading i decoding w normalnej ścieżce wykluczenia. Nie dodaje loading="eager". Aby jawnie zażądać natychmiastowego ładowania, użyj:

<img src="/img/cms/banner.jpg" alt="Store banner" loading="eager">

Moduł zachowuje istniejące wartości loading. Przy włączonym dekodowaniu asynchronicznym może nadal dodać decoding="async" do obrazu, który ma już loading, nawet jeśli ma też klasę wykluczającą lub URI danych. Obsługa istniejącego loading następuje przed tymi kontrolami.

Zwykły kwalifikujący się obraz treści może przyjąć postać:

<img decoding="async" loading="lazy" src="/img/cms/detail.jpg" alt="Product detail">

Obrazy z klasą wykluczającą lub src zaczynającym się od data: są pomijane, jeśli nie mają istniejącego atrybutu loading. Istniejące wartości decoding w HTML treści zostają zachowane.

Hooki produktów dodają dane do wpisów tablic w cover, default_image i images. Ustawiają loading na lazy, a przy włączonej opcji decoding na async. Te przypisania mogą zastąpić istniejące wartości w prezentowanych tablicach. Klasa wykluczająca treści nie steruje tą ścieżką.

Motyw musi wyświetlać wartości w rzeczywistych znacznikach obrazów. Dostępne wartości obejmują:

{$product.cover.loading}
{$product.cover.decoding}
{$product.default_image.loading}
{$product.default_image.decoding}

Na przykład dodaj te atrybuty do odpowiedniego znacznika okładki we własnym szablonie:

loading="{$product.cover.loading|default:'lazy'|escape:'html':'UTF-8'}"
{if isset($product.cover.decoding)}decoding="{$product.cover.decoding|escape:'html':'UTF-8'}"{/if}

Zastosuj tę samą zasadę do każdego obrazu galerii lub listy, używając jego własnych prezentowanych danych. Unikaj podwójnych atrybutów loading, jeśli szablon już je zawiera. Dla obrazu ładowanego natychmiast świadomie ustaw końcowy atrybut szablonu. Moduł nie identyfikuje automatycznie pierwszego widocznego obrazu produktu.

Dodaj obraz testowy poniżej widocznego obszaru w obsługiwanym polu treści HTML. Zapisz, otwórz stronę sklepu i sprawdź znacznik obrazu. Potwierdź loading="lazy" oraz, jeśli włączone, decoding="async".

Przetestuj obraz z class="no-autolazy", a następnie z loading="eager". Przykład z klasą nie powinien otrzymać nowych atrybutów przez normalną ścieżkę wykluczenia. Przykład eager powinien zachować wartość loading i może otrzymać dekodowanie asynchroniczne.

Otwórz produkt i listę. Sprawdź końcowy HTML, zamiast zakładać, że dodane pola presentera pojawią się automatycznie. Użyj narzędzi sieciowych przeglądarki podczas przewijania, aby sprawdzić ładowanie. Przeglądarka decyduje, kiedy pobrać obraz oznaczony do natywnego lazy loading.

Moduł zmienia atrybuty i prezentowane dane, nie pliki obrazów ani zapisane opisy. Nie analizuje końcowej odpowiedzi strony. Obrazy wstawione później przez JavaScript są obsługiwane tylko wtedy, gdy ich oryginalna treść przeszła przez odpowiednie hooki PHP.

Potwierdź, że Włącz lazy loading ma wartość Tak. Jeśli obrazy edytowalnej treści nie zmieniają się, sprawdź, czy pole przechodzi przez filterHtmlContent. Sprawdź klasę wykluczającą, istniejący atrybut loading i warunki URI danych.

Jeśli obrazy produktów nie zmieniają się, sprawdź znaczniki obrazów w motywie. Szablon musi używać prezentowanych wartości loading i decoding. Same hooki PHP nie dodają atrybutów do dowolnego HTML motywu.

Po zmianie ustawień odśwież pamięć podręczną stron. Użyj "Integrity" do kontroli konfiguracji i infrastruktury. Sprawdź ustawienia po aktualizacji starszej instalacji.

Ustaw Włącz lazy loading na Nie, aby zatrzymać przetwarzanie i zachować ustawienia. Odinstaluj przez "Module Manager", aby usunąć menu modułu i wpisy wspólnej konfiguracji.

Atrybuty dodane ręcznie do szablonów motywu lub zapisanej treści pozostają do czasu ich edycji. Usuń osobno własne dodatki do szablonów, jeśli nie są już potrzebne.