Ti stai chiedendo perché le immagini sul tuo sito non si convertono nel formato WebP quando usi Leap di Ezoic? Questo articolo mira a rispondere a questa comune preoccupazione fornendo informazioni dettagliate su come Leap gestisce l'ottimizzazione delle immagini, concentrandosi in particolare sull'uso di formati di nuova generazione come WebP. Imparerai a conoscere le dipendenze e le impostazioni necessarie affinché questa funzione funzioni correttamente, i potenziali conflitti che possono sorgere e altri fattori che potrebbero impedire alle immagini di convertirsi in WebP. Comprendendo questi elementi, potrai risolvere i problemi e ottimizzare le immagini del tuo sito in modo più efficace.

Nei browser supportati, la funzione Formati di nuova generazione servirà le immagini in formato WebP, progettato per avere una dimensione del file più piccola. Leap utilizza il "caricamento lento" per ottimizzare le immagini prima che vengano visualizzate sul sito. Il caricamento lento carica un'immagine solo quando è all'interno della finestra visibile, il che aiuta a ottimizzare le prestazioni.

Le impostazioni di ottimizzazione di Leap Imposta larghezza e altezza esplicite, Formati di nuova generazione e Ridimensiona immagini dipendono dalla impostazione Carica immagini lentamente.

Quando l'immagine da ottimizzare è l'elemento LCP (Largest Contentful Paint), come un'immagine di copertina o "eroe", sarà convertita in formato WebP senza caricamento lento. Tali immagini avranno attributi come loading="eager" e importance="high".

Per ispezionare gli attributi e i nomi delle classi delle immagini sul tuo sito, puoi fare clic con il tasto destro su di esse e selezionare "ispeziona" dal menu.

Problemi e conflitti potenziali per l'impostazione Formati di nuova generazione:

1. Se Leap carica lentamente un elemento immagine con successo, avrà un nome di classe "ezlazyloaded". L'assenza di questo nome di classe su un'immagine non-LCP suggerisce che qualcosa stia impedendo a Leap di caricare e ottimizzare l'immagine lentamente.

1. Assicurati che le immagini abbiano attributi di larghezza e altezza espliciti impostati. Questo aiuta i browser ad allocare lo spazio per l'immagine mentre viene caricata, migliorando la stabilità complessiva del layout.

2. Controlla regolarmente gli attributi e i nomi di classe delle immagini sul tuo sito. Questo può essere fatto facendo clic destro su un'immagine e selezionando "ispeziona" dal menu. Cerca il nome della classe "ezlazyloaded" per verificare che Leap abbia caricato correttamente l'immagine in modalità lazy load.

3. Evita di utilizzare altri plugin che tentano di ottimizzare la velocità del sito caricando elementi in modalità lazy load, poiché possono entrare in conflitto con gli sforzi di ottimizzazione di Leap. In particolare, fai attenzione ai plugin come LazyLoad di WP Rocket.

4. Evita di assegnare nomi di classe non Ezoic contenenti la parola “lazy” agli elementi immagine per prevenire conflitti con il caricamento lazy di Leap.

5. Non assegnare un attributo di evento "onload" agli elementi immagine, poiché ciò potrebbe interrompere il caricamento lazy e influenzare negativamente il comportamento del sito.

6. Sii consapevole di specifici attributi e condizioni che possono impedire la conversione delle immagini in formato WebP. Questi includono:

   • Presenza di attributi "data-image" o "data-src"
   • Immagini in formato .gif
   • Immagini ospitate da Cloudinary
   • Attributi "src" o "srcset" vuoti

Seguendo queste best practices, puoi assicurarti che la funzionalità dei formati di prossima generazione e del caricamento lazy load lavorino in modo ottimale per migliorare le prestazioni del tuo sito.