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?
- Lazy Load in WordPress
- Migliorare la Velocità di Caricamento delle Pagine con i Plugin di Lazy Load
- Effetti del Lazy Load sulla SEO
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.
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.
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?
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.
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.
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.
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.
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.
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.
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 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.
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:
- 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.
- Assicuratevi di stare ancora utilizzando il testo alternativo sulle immagini, poiché questo è importante per il posizionamento nelle ricerche delle immagini di Google.
Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.
— John Mueller is watching out for Google+ 🐀 (@JohnMu) September 4, 2018
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.
Jon Penland
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Lascia un commento