Tag Lazy SEO automatici per immagini: configurazione e aiuto

Carica lo ZIP in Moduli > "Module Manager" > "Upload a module". Installalo e fai clic su "Configure". Si apre il controller di configurazione con il modulo Impostazioni lazy loading.

Richiede PrestaShop 1.6.1 o successivo e PHP 7.1 o successivo.

Fai clic su Salva.

Le immagini nei campi HTML che passano per filterHtmlContent ricevono gli attributi direttamente nel contenuto presentato. Ciò può includere descrizioni e contenuti CMS quando il core instrada quei campi attraverso questo hook.

Per un'immagine che deve mantenere il proprio comportamento di caricamento, usa la classe configurata:

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

Questo impedisce nuovi attributi loading e decoding nel normale percorso di esclusione. Non aggiunge loading="eager". Per richiedere esplicitamente il caricamento immediato, usa:

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

Il modulo conserva i valori loading esistenti. Con la decodifica asincrona attiva può comunque aggiungere decoding="async" a un'immagine che ha già loading, anche se ha la classe di esclusione o un URI di dati. La gestione di loading esistente precede questi controlli.

Una normale immagine di contenuto idonea può diventare:

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

Le immagini con la classe di esclusione o con src che inizia per data: vengono saltate se non hanno già un attributo loading. I valori decoding esistenti nell'HTML del contenuto restano invariati.

Gli hook prodotto aggiungono dati alle voci degli array cover, default_image e images. Impostano loading su lazy e, se attivo, decoding su async. Queste assegnazioni possono sostituire valori esistenti negli array presentati. La classe di esclusione dei contenuti non controlla questo percorso.

Il tema deve stampare i valori nei suoi effettivi tag immagine. I valori disponibili includono:

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

Per esempio, aggiungi questi attributi al tag della copertina corrispondente in un template personalizzato:

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

Applica lo stesso principio a ogni immagine di galleria o elenco usando i suoi dati presentati. Evita attributi loading duplicati se il template li contiene già. Per un'immagine da caricare immediatamente, gestisci consapevolmente l'attributo finale del template. Il modulo non identifica automaticamente la prima immagine prodotto visibile.

Aggiungi un'immagine di prova sotto l'area visibile in un campo HTML supportato. Salva, apri la pagina del negozio e ispeziona il tag immagine. Conferma loading="lazy" e, se attivo, decoding="async".

Prova un'immagine con class="no-autolazy", poi una con loading="eager". L'esempio con la classe non deve ricevere nuovi attributi nel normale percorso di esclusione. L'esempio eager deve mantenere il proprio valore loading e può ricevere la decodifica asincrona.

Apri un prodotto e un elenco. Ispeziona l'HTML finale senza presumere che i campi aggiunti al presenter compaiano automaticamente. Usa gli strumenti di rete del browser mentre scorri per controllare il caricamento. Il browser decide quando scaricare un'immagine contrassegnata per il lazy loading nativo.

Il modulo modifica attributi e dati presentati, non file immagine o descrizioni salvate. Non analizza la risposta finale della pagina. Le immagini inserite successivamente da JavaScript vengono gestite solo se il contenuto originale è passato attraverso gli hook PHP pertinenti.

Verifica che Attiva lazy loading sia su Sì. Se le immagini nei contenuti modificabili non cambiano, controlla che il campo passi per filterHtmlContent. Controlla classe di esclusione, attributo loading esistente e condizioni degli URI di dati.

Se le immagini prodotto non cambiano, ispeziona i tag immagine del tema. Il template deve usare i valori loading e decoding presentati. I soli hook PHP non aggiungono attributi a HTML arbitrario del tema.

Dopo aver modificato le impostazioni, aggiorna la cache delle pagine. Usa "Integrity" per controllare configurazione e infrastruttura. Controlla le impostazioni dopo l'aggiornamento di una vecchia installazione.

Imposta Attiva lazy loading su No per interrompere l'elaborazione conservando le impostazioni. Disinstalla tramite "Module Manager" per rimuovere il menu del modulo e le voci di configurazione condivisa.

Gli attributi aggiunti manualmente ai template del tema o ai contenuti salvati restano finché non li modifichi. Rimuovi separatamente le aggiunte personalizzate ai template se non ti servono più.