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.

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 browser crea il DOM della pagina web senza scaricare le immagini e precaricare i video.
  • JavaScript viene utilizzato per determinare quali immagini scaricare e quali video precaricare in base al contenuto subito visibile al caricamento della pagina. Quelle immagini e quei video sono scaricati e precaricati in modo appropriato.
  • Il download e il rendering dei video aggiuntivi sono ritardati fino a quando un visitatore del sito scorre verso il basso nella pagina e il contenuto successivo diventa visibile.

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

Cinque 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.

1. BJ Lazy Load

BJ Lazy Load è un plugin molto popolare. È attivo su più di 70.000 siti web WordPress ed ha un punteggio di 4,1 stelle su 5, con oltre 60 recensioni complessive.

Plugin WordPress BJ Lazy Load

Plugin BJ Lazy Load

L’installazione e la configurazione sono semplici. Cercate il plugin usando l’installatore integrato di plugin WordPress, installatelo e attivatelo. All’attivazione, viene aggiunta una nuova voce di menu in Impostazioni > BJ Lazy Load. Tutte le opzioni di lazy load sono selezionate di default e probabilmente le lascerete come sono a meno che non si verifichino problemi sul front-end del sito dopo l’attivazione del plugin.

Un’opzione di questo plugin e di nessuno degli altri due è la possibilità di aggiungere un URL per un’immagine da utilizzare come segnaposto per immagini e video caricati in lazy load finché non vengono scaricate le risorse effettive. Naturalmente, se decidete di selezionare questa opzione, vi consigliamo di utilizzare un file molto piccolo e non un’immagine ad alta risoluzione.

Per avere il minimo impatto e risultati senza interruzioni, vi consigliamo di creare un’immagine a tinta unita dello stesso colore dello sfondo del vostro sito e salvarla in formato png.

Potete anche specificare una classe HTML che verrà esclusa dal lazy load. Potrete assegnare questa classe a qualsiasi immagine o video che desiderate escludere dal caricamento differito. Infine, potete specificare quanto deve avvicinarsi un’immagine o un video al viewport prima che venga scaricato e visualizzato.

Vediamo quanto carica velocemente la nostra pagina con BJ Lazy Load.

Speed test di Pingdom con il plugin BJ Lazy Load

Speed test con il plugin BJ Lazy Load

È semplicemente pazzesco. Il sito è stato testato cinque o sei volte, in più momenti della giornata, e i tempi di caricamento erano costantemente compresi tra 300 e 400 millisecondi.

Questo impressionante risultato del test non è un’anomalia.

Sebbene la pagina carichi in modo incredibilmente rapido con questo plugin, la dimensione della pagina è effettivamente aumentata. Cosa succede? In teoria, con il lazy load attivo, le dimensioni della pagina dovrebbero diminuire perché non tutte le immagini vengono scaricate al caricamento iniziale.

Dopo alcune analisi sulla situazione ecco cosa ho scoperto.

In Che Modo WordPress Serve le Immagini?

Il comportamento predefinito di WordPress consiste nel presentare al browser un range di dimensioni di file utilizzando l’attributo srcset dell’elemento img utilizzato per incorporare l’immagine. Il browser controlla l’elenco delle dimensioni disponibili e carica la versione più piccola dell’immagine utile a riempire lo spazio disponibile.

Ciò significa che, se caricate un file immagine molto grande, WordPress offrirà automaticamente diverse versioni più piccole di quell’immagine ai visitatori del vostro sito web. Il browser del visitatore acquisirà l’immagine più piccola, in base alla quantità di pixel da occupare.

In che Modo BJ Lazy Load Cambia il Comportamento di WordPress?

BJ Lazy Load sovrascrive il comportamento predefinito di WordPress. L’attributo srcset è stato sostituito con un attributo data-lazy-srcset che funziona congiuntamente allo script del plugin. Tuttavia, il risultato finale è che, anziché scaricare una versione di dimensioni ridotte dell’immagine, finisce per essere scaricata e renderizzata l’immagine a risoluzione intera.

Non è l’ideale, ma se ottimizzate i file di immagine prima di caricarli su WordPress – cosa che non ho fatto – non avrete lo stesso problema.

Screenshot caricamento pagina con BJ Lazy Load

Caricamento pagina con BJ Lazy Load

Il test eyeball (“palla d’occhio”) – che consiste semplicemente nel caricare il sito e guardare cosa succede – dimostra che se utilizzate BJ Lazy Load e lo sfondo del vostro sito ha un colore diverso dal bianco, dovrete aggiungere una qualche immagine segnaposto. Di default, senza immagine segnaposto, il plugin visualizza un segnaposto gif bianco al posto dell’immagine.

2. Lazy Load XT

Lazy Load XT ha ottenuto buoni risultati nei nostri test ed è un altro buon plugin per il lazy load in WordPress che vale la pena tenere in considerazione. Con un po’ più di 4.000 installazioni attive, questo plugin non è così popolare come BJ Lazy Load. Tuttavia, ha catturato la mia attenzione con la sua valutazione di 4.9 stelle su 5. Solo una delle 22 recensioni pubblicate è inferiore a 5 stelle.

Plugin WordPress Lazy Load XT

Plugin Lazy Load XT

Dopo l’attivazione, il plugin viene configurato navigando nel menu che si trova in Impostazioni > Lazy Load XT. Noterete subito che questo plugin fa molto più che caricare immagini e video lazy load. È anche possibile utilizzare questo plugin per minimizzare i file JS e CSS, caricare librerie JavaScript e CSS utilizzando il CDN di Cloudflare e spostare gli script nel footer del sito.

Ci sono alcune opzioni aggiuntive che potete utilizzare per mettere a punto le prestazioni del sito. Tuttavia, dal momento che stiamo testando il lazy load, a questo punto ho lasciato le impostazioni predefinite, non ho creato disordine e minimizzando risorse CSS e JavaScript, ho cancellato la cache del server ed ho eseguito il test sulla pagina attraverso lo speed test del sito web di Pingdom.

Speed test di Pingdom con Lazy Load XT

Speed test con Lazy Load XT

La pagina è ancora ferma a 2 MB e il caricamento della pagina non è così veloce come con BJ Lazy Load, ma abbiamo comunque ottenuto una riduzione del 50% del tempo di caricamento della pagina rispetto al tempo necessario per caricare la pagina senza lazy load.

Un rapido sguardo alla struttura dei file nei risultati del test mostra che con Lazy Load XT attivo succede la stessa cosa che abbiamo osservato con BJ Lazy Load. Invece di caricare una versione ottimizzata dell’immagine, con il plugin attivo viene scaricata e visualizzata la versione dell’immagine a risoluzione intera.

Sebbene il plugin non abbia generato lo stesso aumento di velocità di BJ Lazy Load, il test “eyeball” va a favore di Lazy Load XT. A differenza di BJ Lazy Load, il segnaposto utilizzato da Lazy Load XT è trasparente. Di conseguenza, non ci sono sgradevoli riquadri bianchi vuoti durante il caricamento di immagini e video, e non dovete preoccuparvi di creare e caricare un’immagine segnaposto.

3. 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. Sia BJ Lazy Load che Lazy Load XT hanno generato una pagina di 2,0 MB. 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.

Sia BJ Lazy Load che Lazy Load XT sovrascrivono questo comportamento e finiscono per consegnare l’immagine a piena risoluzione. Tuttavia, a3 Lazy Load lascia intatto il comportamento predefinito di WordPress e il risultato è che viene consegnato un file immagine molto più piccolo.

Stranamente, nonostante la differenza di dimensioni della pagina, il caricamento del sito è più rapido con BJ Lazy Load rispetto a a3 Load Lazy. Il sito è stato testato più volte con ciascun plugin per garantire che i risultati mostrati non fossero insoliti. La differenza arriva al numero di richieste HTTP necessarie per caricare la pagina. A colpo d’occhio, sembra che BJ Lazy Load generi più richieste. Tuttavia, se diamo un’occhiata alla struttura dei file, vediamo cosa accade realmente.

by lazy load - Opzioni wordpress lazy load

Lazy Load Data URIs

Il file del sito con BJ Lazy Load attivato genera una ventina di richieste che iniziano con data:image/gif. Questi sono URI di dati anziché richieste HTTP. In effetti, dicono al browser di creare una gif localmente piuttosto che richiedere una gif da un server. Di conseguenza, BJ Lazy Load ha bisogno di sole 17 richieste HTTP per costruire la pagina, rispetto alle 27 richieste da a3 Lazy Load. Questo spiega perché la pagina si carica velocemente.

Lazy Load XT impiega una tattica simile, ma anche questo richiede alcune richieste in più di BJ Lazy Load, il che spiega perché non produce gli stessi risultati.

4. Lazy Load

E una quarta 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.

5. 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 e Raccomandazioni

Tutto questo dove ci porta? Tutte e quattro queste opzioni hanno fatto un ottimo lavoro per migliorare la velocità di caricamento delle pagine differendo il caricamento di immagini e video. La scelta della soluzione migliore dipende dalle preferenze personali e da come si preparano le immagini prima di caricarle sul proprio sito Web WordPress.

  • Se non ottimizzate le immagini prima di caricarle sul vostro sito – e dovresti farlo davvero – allora scegliete con a3 Lazy Load, in modo da ottenere il vantaggio dell’ottimizzazione delle immagini integrata in WordPress.
  • Se ottimizzate le immagini prima di caricarle, e desideri la consegna più veloce possibile con il minimo sforzo, non potete sbagliare con BJ Lazy Load. Lazy Load è un’altra buona soluzione.
  • Se ottimizzate le immagini prima di caricarle, e desideri opzioni di configurazione aggiuntive che vi consentano di modificare il modo in cui vengono fornite e gestite le risorse CSS e JavaScript, allora andate con Lazy Load XT.

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.

37
Condivisioni