Rimanda le immagini fuori schermo: come risolvere questa opportunità di Google Lighthouse

Misurare le prestazioni del tuo sito è stato spesso un lavoro incostante. Questo perché gli strumenti disponibili non ci hanno fornito una visione adeguata dell'esperienza dell'utente rispetto alle prestazioni del sito. Tuttavia, Google Lighthouse risolve molti di questi inconvenienti e lo rende in modo che tu possa adattarlo al tuo flusso di lavoro di sviluppo. Una delle "opportunità" all'interno di Lighthouse è quella di differire le immagini fuori schermo in WordPress. La buona notizia è che questo è semplice da ottenere.

Per questo post, vedremo 🔎 come differire le immagini fuori schermo in WordPress utilizzando sia il codice che i plugin. Prima però, dobbiamo chiarire alcuni termini su Google Lighthouse, quindi parlare di dove la metrica Defer offscreen images dovrebbe trovarsi nel tuo elenco di priorità.

La differenza tra una raccomandazione di audit e un'opportunità

Prima di entrare nel modo in cui rinvii le immagini fuori schermo in WordPress, è importante capire come questa istruzione si inserisce in Google Lighthouse. È una "opportunità" di performance piuttosto che una raccomandazione di audit. Ecco la differenza:

• Raccomandazione di revisione . Ciò avrà un impatto definitivo sui tuoi punteggi all'interno di Google Lighthouse e dovresti dare a queste metriche la tua attenzione come priorità.
• Opportunità . Sebbene questi abbiano ancora una certa importanza, non influiranno sui punteggi di audit. In quanto tali, puoi considerarli una preoccupazione secondaria.

La metrica Defer offscreen images è un'opportunità. Ciò significa che può ancora avere un impatto, ma è qualcosa che puoi guardare una volta che il tuo punteggio non può più migliorare.

Differire le immagini fuori schermo: una definizione

Il tuo sito web probabilmente utilizzerà immagini in tutte le sezioni delle tue pagine. Alcuni di questi verranno visualizzati "above the fold", ovvero sullo schermo senza la necessità di scorrere. In quanto tali, le immagini fuori schermo rappresentano tutto il resto.

La metrica Defer offscreen images fa riferimento a elementi visivi che soddisfano uno dei seguenti quattro criteri:

• Un'immagine deve iniziare sotto l'area visibile della pagina e terminare tre volte l'altezza di quest'area.
• Le immagini super-piccole (quelle di dimensioni inferiori a 0,02 MB) non verranno prese in considerazione nella metrica Rinvia immagini fuori schermo .
• Le pagine che richiedono più di 50 ms per caricarsi attiveranno l'opportunità.
• Se la tua pagina definisce un attributo di caricamento, non vedrai affatto Defer offscreen images . Avviso spoiler: mettiti comodo con loading="lazy" ora!

Inoltre, potresti scoprire che un sito con molte immagini fuori schermo vedrà punteggi LCP (Largest Contentful Paint) scarsi. Questo fa apparire una modifica confusa a Google Lighthouse 10, che tratteremo in seguito.

Il miglioramento del tempo per l'interazione (TTI) è una metrica ammortizzata

Nelle versioni precedenti di Google Lighthouse, Defer offscreen images influiva su TTI. Tuttavia, Google ora considera questa metrica ammortizzata. La ponderazione del 10% ha dato il punteggio complessivo del Performance Audit trasferito al Cumulative Layout Shift (CLS) e ora fornisce una ponderazione del 25% [1][2] .

Ciò comporta un problema, in quanto, indipendentemente dal fatto che tu rinvii o meno le immagini fuori dallo schermo, ciò non causerà uno spostamento del layout. In quanto tale, questo è il motivo per cui differire le immagini fuori schermo ora è solo un'opportunità, piuttosto che una raccomandazione di controllo completa.

Perché Google Lighthouse ti chiederà di differire le immagini fuori schermo

Nonostante la retrocessione di Defer offscreen images , ha ancora una certa importanza per la velocità di caricamento e le prestazioni. Puoi vedere l'impatto delle immagini fuori schermo completamente caricate in pochi secondi all'interno di qualsiasi strumento tu scelga:

Sebbene questa metrica non influisca su CLS o TTI, può avere un impatto su LCP, anche se in molti casi minore. È anche un buon promemoria per caricare le immagini solo quando è necessario. Successivamente, discuteremo perché.

Perché non dovresti caricare tutte le tue immagini in una volta

Nella conversazione lavoriamo tutti sul 'principio cooperativo'. Questa non è una lezione di scienze sociali, quindi non entreremo nei dettagli. Tuttavia, c'è un aspetto importante di questo concetto che conta per la metrica Defer offscreen images . La "massima della quantità di Grice" afferma che dovresti rivelare solo la quantità di informazioni necessaria per stabilire il contesto.

Perché questo è importante? Perché se fornisci troppe informazioni, questo può causare sovraccarico per l'ascoltatore (tra gli altri problemi).

Pertanto, non dovresti nemmeno caricare tutte le immagini del tuo sito contemporaneamente! Questo per alcuni validi motivi:

• Un utente non vedrà le immagini fuori schermo e altrimenti occuperà le risorse di cui avrai bisogno per gli elementi sullo schermo.
• Il caricamento di immagini fuori schermo potrebbe contribuire a una scarsa esperienza utente (UX) perché una pagina verrà caricata senza che accada nulla di degno di nota all'interno del viewport.
• Per l'utente, questo potrebbe anche costare loro finanziariamente. Ad esempio, considera qualcuno che naviga su un sito che non rinvia alcuna immagine fuori schermo mentre utilizza i dati mobili, piuttosto che il Wi-Fi.

Dato che l'attenzione di Google Lighthouse è rivolta all'esperienza utente e al modo in cui le prestazioni percepite la influenzano, è fondamentale comprendere quanto sopra. La buona notizia è che esiste un modo semplice per rinviare le immagini fuori schermo.

Come rinviare le immagini fuori schermo sul tuo sito

La risposta è: caricamento pigro. Questo è il modo più diretto ed efficace per ridurre l'impatto delle immagini fuori schermo sulle prestazioni percepite del tuo sito. Ancora meglio, la maggior parte dei browser supporta il lazy loading:

Tuttavia, Firefox supporta solo il caricamento lento per le immagini, il che sarà importante se scegli di implementarlo per Inline Frames. Tuttavia, hai diversi modi per implementarlo. L'approccio principale utilizza l'attributo loading HTML all'interno di un elemento <img> o <iframe> . Avrai la possibilità di utilizzare tre diversi valori:

• eager . Questo dirà al browser di caricare prima queste immagini. È l'opzione predefinita ed è buona come non includerla affatto, in quanto le immagini verranno sempre visualizzate indipendentemente da dove si trovino sulla pagina.
• lazy . Ciò differirà il caricamento di un'immagine o di un iframe finché non raggiunge una distanza codificata dal viewport. La distanza esatta può differire tra i browser e ti consigliamo inoltre di specificare sempre anche le dimensioni dell'immagine.
• auto . Il browser sceglierà l'opzione migliore per il lavoro.

Questo è semplice da implementare come ti aspetteresti:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Ovviamente, non c'è niente da vedere sul frontend qui, perché l'immagine sarà comunque fuori schermo e invisibile.

Se scegli di utilizzare Accelerated Mobile Pages (AMP), puoi implementare il caricamento lento su base automatica utilizzando l'elemento amp-img . Quando si tratta di altre piattaforme, i moduli o i plug-in sono il modo migliore per implementare il caricamento lento.

Se desideri differire le immagini fuori schermo in WordPress, ti consigliamo di utilizzare un plug-in dedicato per farlo. Per impostazione predefinita, WordPress implementa il caricamento lento per tutte le immagini, ma questo pennello ampio potrebbe non soddisfare le tue esigenze esatte.

Utilizzo dei plugin di WordPress per aggiungere il lazy loading al tuo sito

Ogni volta che desideri aggiungere funzionalità extra a WordPress, un plug-in è sempre la soluzione migliore. Quando si tratta di caricamento pigro, questo può anche essere il caso.

WordPress ha una serie di plugin che possono aiutarti ad aggiungere il lazy loading, ma non tutti sono uguali. Ad esempio, alcuni hanno valutazioni e recensioni scadenti, altri non ricevono molti aggiornamenti e alcuni non sono nemmeno in grado di fornire il giusto livello di funzionalità. Tuttavia, Optimole può fornire la merce quando si tratta sia di compressione delle immagini che di caricamento lento.

Questa non sarà una panoramica di ciò che Optimole può fare in generale: il nostro sito gemello Themeisle può mostrartelo. Invece, evidenzieremo le opzioni rapide e indolori che hai a disposizione per il caricamento lento delle immagini. Per trovare le opzioni giuste, vai alla schermata Media > Optimole > Impostazioni , quindi cerca l'interruttore Ridimensiona immagini e carica lazy . Ti consigliamo di assicurarti che sia attivo:

Una volta fatto questo, un'intera serie di opzioni diventerà disponibile nella sezione Avanzate > Lazyload :

Questo ti offre un prezioso set di opzioni con cui lavorare. Ad esempio, puoi abilitare un segnaposto per le tue immagini, alternare il caricamento lento nativo del browser o classico, abilitare il ridimensionamento delle immagini e altro ancora.

Tuttavia, ci sono due impostazioni che ti consigliamo di esaminare ulteriormente. Il primo ti consente di escludere un determinato numero di immagini dal caricamento. Il valore predefinito è tre, ma puoi impostarlo su tutte le immagini che hai above the fold. Significa che implementerai il caricamento lento per tutte le immagini sul sito:

L'altra caratteristica interessante è la possibilità di specificare i selettori CSS per aiutarti a caricare in modo pigro le immagini di sfondo:

Questo ti dà un modo per personalizzare l'intera esperienza di caricamento lento in base alle tue esigenze e al punteggio Lighthouse, pur mantenendo una certa flessibilità. Inoltre, tutto questo è possibile con la versione gratuita di Optimole!

Conclusione 🧐

Se le immagini non sono sullo schermo, non è necessario caricarle. Senza una soluzione come il lazy loading, è necessario allungare il tempo necessario per il caricamento del sito. Influirà anche su alcune delle metriche più importanti relative alle prestazioni. L'opportunità di rinviare le immagini fuori schermo di Google Lighthouse ti dà una spinta per implementare una sorta di caricamento lento e ci sono molti modi senza codice per farlo.

Ad esempio, Optimole è uno dei migliori plugin per aiutarti a differire le immagini fuori schermo in WordPress. Sei in grado di impostare opzioni con una maggiore specificità rispetto all'approccio globale "sempre attivo" di WordPress. Tuttavia, ci sono altri plugin che ti aiutano a fare anche questo, come i plugin di memorizzazione nella cache. Anche il percorso di codifica è semplice e, ancora meglio, ottieni supporto da quasi tutti i browser.

Optimole diventerà il tuo metodo per rinviare le immagini fuori schermo in WordPress? Condividi i tuoi pensieri con noi nella sezione commenti qui sotto!