Le pagine web pesano in media 3719 kB, con immagini e video che rappresentano quasi il 78% del peso totale, secondo quanto afferma HTTP Archive. Sono un sacco di byte da scaricare e visualizzare per il browser di un visitatore del sito, e la tendenza punta verso pagine web di dimensioni maggiori e un maggiore uso di immagini nel futuro. WordPress è al primo posto nella condivisione di contenuti multimediali e nell’incorporazione di file multimediali nel design del sito. Con WordPress è facile integrare immagini e video in post, pagine e persino nello sfondo del tema.

Con il rilascio di WordPress 5.5, il lazy loading è parte integrante del core e rende molto facile l’implementazione di questa tecnica.

Tuttavia, tutte queste pesanti risorse rendono il download di una pagina web un’esperienza costosa in quanto gli utenti devono attendere il download di file di grandi dimensioni, compresi i file che non sono inizialmente visibili, prima di visualizzare una pagina web. È qui che entra in scena il lazy load di WordPress.

Che Cos’È il Lazy Load e Come Funziona

Il lazy load (caricamento differito) è una tecnica di ottimizzazione tramite la quale vengono caricati i contenuti visibili, ma viene ritardato il download e il rendering dei contenuti che appaiono nella parte non visibile della pagina (“below the fold“). È quel genere di cose per le quali Google si entusiasma, ed è una tecnica da prendere in considerazione se i vostri post e le vostre pagine incorporano molti video e immagini ad alta risoluzione.

Il lazy load funziona così:

Il risultato finale è che le immagini non vengono scaricate e i video non vengono caricati finché non sono realmente necessari. Ciò può apportare un significativo miglioramento alle prestazioni per i siti che incorporano molti video e molte immagini ad alta risoluzione.

Il lazy load può avere un notevole impatto sulla velocità del sito se utilizzate molte immagini. 🚀Click to Tweet

Lazy Load in WordPress

Come avviene per molte altre anomalie legate alle prestazioni, per il lazy load in WordPress abbiamo a disposizione un plugin per risolvere il problema. In realtà, nella directory dei plugin di WordPress ci sono molti plugin gratuiti che possono essere utilizzati per caricare immagini e video. Dopo aver considerato alcune decine di plugin e averne messo alla prova diversi, abbiamo identificato tre plugin che producono un miglioramento misurabile delle prestazioni dei un sito. Se siete pronti per implementare il lazy load, cominciate considerando queste tre opzioni.

Le Immagini e i Video Rallentano Davvero i Siti web?

Innanzi tutto, prima di caricare qualsiasi immagine su WordPress ricordatevi di ottimizzarla.

Abbiamo bisogno di un punteggio di base in modo da poter vedere le conseguenze dell’aggiunta di immagini e video. Non ha senso risolvere un problema se non ci sono problemi da risolvere. Per testare le cose, ho configurato un’installazione standard di WordPress su un account di hosting Kinsta. TwentySixteen è il tema attivo e non sono stati implementati plugin o tecniche di ottimizzazione come il caching.

Ecco come lo speed test di Pingdom valuta il sito prima di aggiungere qualsiasi immagini o video.

Speed test di Pingdom senza immagini e video

Speed test senza immagini e video

Come potete vedere, la pagina è molto leggera, poco meno di 155 kb, e carica in meno di mezzo secondo. Difficile trovare difetti con questi punteggi. Cosa succede se carichiamo una pagina con file immagine di grandi dimensioni e con video di YouTube incorporati?

Speed test di Pingdom senza plugin lazy loading

Speed test senza plugin lazy loading

Le dimensioni della pagina sono schizzate a 1.7 MB e il tempo di caricamento della pagina è quasi triplicato a poco meno di 1,3 secondi. TwentySixteen è un tema leggero e ben scritto, quindi anche con cinque o sei immagini e video di YouTube questo sito è ancora abbastanza leggero e carica velocemente. Tuttavia, l’aggiunta di immagini e video ha fatto aumentare di molto le dimensioni della pagina e ha rallentato considerevolmente la velocità di caricamento.

Migliorare la Velocità di Caricamento delle Pagine con i Plugin di Lazy Load

Due plug-in che accelerano notevolmente la consegna di questa pagina web sono BJ Lazy Load, Lazy Load XT, a3 Lazy Load e Lazy Load. Vediamo come si è comportato ognuno di questi plugin. Abbiamo provato anche altri plugin, ma non hanno prodotto un miglioramento misurabile delle prestazioni del sito. Mentre provate i plugin di lazy load, ricordatevi di fare un test prima e dopo per assicurarvi che diano i risultati che state cercando.

a3 Lazy Load

a3 Lazy Load è un’altra popolare opzione di caricamento differito per WordPress disponibile nella repository. Questo plugin è attivo su oltre 50.000 siti WordPress ed ha ottenuto un punteggio molto elevato, 4,7 stelle su 5, e poco meno di 40 recensioni da parte degli utenti.

Il Plugin WordPress A3 Lazy Load

Plugin A3 Lazy Load

Attivando il plugin viene aggiunto un menu di impostazioni in Impostazioni > a3 Lazy Load. A scopo di test, ho lasciato le impostazioni predefinite con una sola eccezione. Ho usato l’opzione Loading Background Colour per abbinare il colore del segnaposto al colore dello sfondo della pagina web. Con questa modifica, e le impostazioni predefinite, il sito ha ottenuto una buona prestazione.

Speed test di Pingdom con A3 Lazy Load

Speed test con A3 Lazy Load

Siamo tornati a un tempo di caricamento della pagina inferiore al mezzo secondo. Questo risultato è notevole considerando il numero di immagini e video inseriti in questa pagina web.

Risultati dei Test a Confronto

Senza dubbio, noterete che le dimensioni della pagina e il numero di richieste sono diminuite considerevolmente. Cosa genera questa notevole differenza? Pingdom fornisce un’istantanea delle dimensioni del contenuto e un rapido confronto ci dà la risposta. Innanzitutto, ecco come appare l’istantanea della dimensione del contenuto con a3 Lazy Load attivato.

Schermata Content Size dello speed test di Pingdom con a3 Lazy Load

Content Size con A3 Lazy Load

L’ingombro dell’immagine è appena un po’ sopra i 150 kb. Ecco come appare lo screenshot del contenuto con un carico utile totale di 2,0 MB.

Schermata Content Size nello speed test di Pingdom con Lazy Load XT

Content Size con Lazy Load XT

Le dimensioni di script, HTML, CSS e altri contenuti sono quasi identici. Tuttavia, la dimensione dell’immagine è di 1.86 MB – in pratica la dimensione della versione alla massima risoluzione della primissima immagine sulla pagina – anziché solo di 150 kb. Cosa succede?

Come accennato in precedenza, WordPress fornisce automaticamente una varietà di dimensioni delle immagine e il browser seleziona e rende a video la versione più piccola possibile, in base alla dimensione in cui l’immagine sarà resa sullo schermo. A3 Lazy Load lascia intatto il comportamento predefinito di WordPress e il risultato è che viene consegnato un file immagine molto più piccolo.

Lazy Load

La seconda opzione è Lazy Load, che è un plugin gratuito creato dal team di WP Rocket. Attualmente è attivo su oltre 10.000 installazioni, con una valutazione 4 stelle su 5. Se state cercando una semplice opzione di lazy load per WordPress con una buona velocità, questa è un’ottima scelta.

Il plugin Lazy Load di WP Rocket

Il plugin Lazy Load di WP Rocket

Questo plugin funziona su miniature, tutte le immagini all’interno del contenuto di un post o nel testo di un widget, su avatar e faccine. Il grande vantaggio di questo plugin è che non è usa alcuna libreria JavaScript come jQuery, e lo script pesa meno di 10 KB. Non ci sono opzioni da configurare, basta installare il plugin e il caricamento differito entrerà in funzione.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi

Native Lazy Loading

Negli ultimi anni, c’è stata una spinta per integrare le funzionalità di lazy loading direttamente nei browser web. Al momento, il lazy loading nativo è disponibile nei browser basati su Chromium come Chrome e Brave, così come in Firefox.

Il lazy loading nativo è ottimo per le prestazioni del sito perché non si basa su codice Javascript in linea o su script esterni. Per aggiungere il lazy loading nativo al vostro sito, è sufficiente aggiungere un attributo loading=lazy  alle immagini e agli iframes su cui volete applicare il lazy load.

Google Native Lazyload plugin.

Google Native Lazyload plugin.

Google ha sviluppato il plugin Native Lazyload per facilitare questo processo. Dopo aver attivato il plugin, WordPress inserirà automaticamente l’attributo loading nei vostri tag img e iframe.

Lazy Load for Videos

Se vi preoccupate solo dei video con lazy load, vi consigliamo di dare un’occhiata al plugin Lazy Load for Videos. Anche se alcuni dei plugin di cui abbiamo parlato sopra fanno altrettanto, questo plugin è un’ottima soluzione per i soli contenuti video.

Il plugin Lazy Load for Videos

Il plugin Lazy Load for Videos

Effetti del Lazy Load sulla SEO

A prescindere dal plugin che utilizzate per il lazy load di WordPress, è importante non danneggiare la vostra SEO. Ci sono due cose che dovete verificare bene:

  1. Assicuratevi che Google possa ancora eseguire la scansione delle vostre immagini caricate in lazy load. Potete facilmente verificarlo utilizzando lo strumento “Search as Google” nella sezione di ricerca per indicizzazione in Google Search Console. Se riuscite ancora a vedere le vostre immagini nel codice sorgente, molto probabilmente funziona tutto correttamente.
  2. Assicuratevi di stare ancora utilizzando il testo alternativo sulle immagini, poiché questo è importante per il posizionamento nelle ricerche delle immagini di Google.

Riepilogo

Visto che il supporto di lazy loading nativo nel browser è ormai all’orizzonte, vi consigliamo di utilizzare un plugin come il Native Lazy Load di Google per impostare una base di lazy loading per il vostro sito.

Con il supporto di Chrome e Firefox, e il supporto di Safari in futuro, il lazy loading nativo del browser dovrebbe essere tutto ciò che serve per caricare “pigramente” le immagini e gli iframe. Detto questo, se state cercando un’opzione basata su JavaScript che si rivolga anche ai browser più vecchi, a3 Lazy Load è un’ottima opzione.

Il caricamento differito è solo una delle tecniche che potete utilizzare per ottimizzare il vostro sito WordPress. Tuttavia, può potenzialmente avere un impatto pesante sulla velocità del sito nel caso in cui si utilizzino molte immagini e video. Tuttavia, una volta implementato il lazy load, esistono diverse tecniche aggiuntive da prendere in considerazione e implementare per portare al massimo le prestazioni del sito.

Abbiamo dimenticato altre buone soluzioni di lazy load per WordPress? Se è così, fatecelo sapere qui sotto.


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani