Come uti­liz­za­re il lazy loading su WordPress

Per mi­glio­ra­re le pre­sta­zio­ni del vostro sito WordPress, dovreste uti­liz­za­re il lazy loading (tra­du­ci­bi­le come “ca­ri­ca­men­to pigro” in italiano). Sebbene la funzione faccia ora parte delle im­po­sta­zio­ni pre­de­fi­ni­te di WordPress, può comunque essere estesa con i plugin.

Cos’è il lazy loading?

Il lazy loading è una tecnica per mi­glio­ra­re le pre­sta­zio­ni di un sito web. Anziché caricare tutti i contenuti con­tem­po­ra­nea­men­te, ini­zial­men­te vengono rese visibili solo le immagini e i video che l’utenza vede da subito. Tutto ciò che non è nell’area at­tual­men­te vi­sua­liz­za­ta del sito web, viene caricato suc­ces­si­va­men­te.

Grazie al lazy loading, chi visita il sito web può lavorare molto più ve­lo­ce­men­te. Quando l’utente ha finito di leggere (o guardare) l’area visibile, viene caricata anche l’area “below the fold”, ossia quella che appare solo dopo lo scor­ri­men­to.

Cosa fa il lazy loading per WordPress?

Con il lazy loading potete rendere più veloce il vostro sito WordPress. Questo non accelera il ca­ri­ca­men­to effettivo, ma migliora l’espe­rien­za utente. L’utenza di un sito web riceve ra­pi­da­men­te i contenuti ini­zial­men­te più im­por­tan­ti. Tutto il resto può essere caricato inos­ser­va­to in back­ground.

Ciò che piace a Google: i segnali web es­sen­zia­li sono fattori di ranking che mirano alla velocità degli elementi del sito web. Più ve­lo­ce­men­te si in­te­ra­gi­sce con un sito web, più il suo po­si­zio­na­men­to viene in­fluen­za­to po­si­ti­va­men­te nei risultati di ricerca. Pertanto, anche il lazy loading ap­par­tie­ne al campo dell’ot­ti­miz­za­zio­ne SEO per i motori di ricerca. In com­bi­na­zio­ne con altri consigli per la SEO su WordPress, vi aiuterà a portare il vostro sito web a posizioni più alte della clas­si­fi­ca dei risultati di Google.

Per mi­glio­ra­re le pre­sta­zio­ni della pagina, potete anche com­pri­me­re le immagini. Così facendo, il contenuto grafico verrà caricato molto più ve­lo­ce­men­te. È anche utile conoscere le di­men­sio­ni delle immagini di WordPress per scegliere l’in­qua­dra­tu­ra perfetta.

Come si utilizza il lazy loading su WordPress?

Dalla versione 5.5, il lazy loading è stato abilitato come im­po­sta­zio­ne pre­de­fi­ni­ta per le immagini su WordPress. Ogni volta che si inserisce un’immagine nelle pagine e nei post, WordPress aggiunge au­to­ma­ti­ca­men­te un attributo ai file. Nel codice sorgente appare così:

<img loading="lazy">

L’attributo al momento è sup­por­ta­to da Chrome, Firefox e Safari. Gli altri browser, però, non rea­gi­sco­no all’attributo. Inoltre, ci sono altri contenuti, come i video, che possono be­ne­fi­cia­re del lazy loading. Tuttavia, l’attributo è legato solo alle immagini. Pertanto, se de­si­de­ra­te uti­liz­za­re questa tecnica in modo più esteso sul vostro sito web, dovrete affidarvi ad altre opzioni. Potete estendere il lazy loading con l’aiuto dei plugin, ad esempio se de­si­de­ra­te in­cor­po­ra­re dei video su WordPress.

Plugin per il lazy loading di WordPress

Per con­trol­la­re al meglio il lazy loading su WordPress, si consiglia di uti­liz­za­re i plugin. Di seguito un riepilogo di alcune esten­sio­ni af­fi­da­bi­li:

LazyLoad

Close

Il plugin LazyLoad di WP Rocket consente il lazy loading di immagini, video e iFrame, ampliando così le pos­si­bi­li­tà dell’im­po­sta­zio­ne standard. Allo stesso tempo, il plugin rimane molto leggero con una di­men­sio­ne di 10 KB. Anche gli avatar e le emoticon sono coperti dal plugin. È degno di nota anche il fatto che i video di YouTube in­cor­po­ra­ti possono essere so­sti­tui­ti da immagini di anteprima prima di essere caricati cor­ret­ta­men­te. Questo riduce il tempo di ca­ri­ca­men­to della pagina.

Il plugin è im­me­dia­ta­men­te pronto all’uso e non deve essere con­fi­gu­ra­to. Ma questo è anche uno degli svantaggi: LazyLoad non offre quasi nessuna opzione di im­po­sta­zio­ne. Quan­to­me­no è possibile attivare o di­sat­ti­va­re il lazy loading per diversi tipi di file mul­ti­me­dia­li, in­di­pen­den­te­men­te l’uno dall’altro.

Se de­si­de­ra­te più funzioni, potete passare a WP Rocket: il plugin di caching di WordPress a pagamento. Questo include il lazy loading, ma anche altre funzioni di ot­ti­miz­za­zio­ne.

a3 Lazy Load

Close

Con a3 Lazy Load si hanno molte più opzioni. Il plugin vi offre la pos­si­bi­li­tà di attivare il lazy loading in modo in­di­pen­den­te per immagini o video e iFrame. Ma la scelta non finisce qui. Potete anche stabilire quale tipo di immagini deve essere coperto dal lazy loading. Ad esempio, potete escludere gravatar o thumbnail. La funzione può anche essere di­sat­ti­va­ta su diversi tipi di pagina (come la pagina iniziale). Potete andare ancora più nel dettaglio usando l’opzione Uniform Resource Iden­ti­fier (URI) per escludere singoli oggetti dal lazy loading.

Inoltre, a3 Lazy Load offre la pos­si­bi­li­tà di de­ter­mi­na­re l’aspetto grafico del ri­ca­ri­ca­men­to: le immagini devono svanire len­ta­men­te o il plugin deve mostrare un’icona di ca­ri­ca­men­to? Tec­ni­ca­men­te più im­por­tan­te, tuttavia, è la pos­si­bi­li­tà di espandere la finestra di vi­sua­liz­za­zio­ne. In questo modo, potete decidere che le parti dell’area non ancora visibili vengano caricate di­ret­ta­men­te.

Un’altra ca­rat­te­ri­sti­ca speciale del plugin: tramite a3 Lazy Load potete di­sat­ti­va­re il lazy loading pre­de­fi­ni­to, già incluso per im­po­sta­zio­ne pre­de­fi­ni­ta su WordPress. In questo modo garantite che le funzioni del plugin e del CMS non si osta­co­li­no a vicenda.

Optimole

Close

Il plugin Optimole va oltre il lazy loading. In generale, cerca di mi­glio­ra­re la di­stri­bu­zio­ne delle immagini sul vostro sito WordPress. Oltre al ca­ri­ca­men­to in­tel­li­gen­te, le immagini vengono compresse grazie al plugin. Inoltre, le di­men­sio­ni dell’immagine sono adattate al di­spo­si­ti­vo finale dell’utente. Per la consegna delle immagini viene uti­liz­za­ta una Content Delivery Network (CDN), riducendo ul­te­rior­men­te il tempo di ca­ri­ca­men­to.

Tuttavia, per il lazy loading ci sono po­chis­si­me opzioni. Oltre alla scelta se uti­liz­za­re la funzione o meno, potete escludere la grafica di sfondo dal lazy loading. Inoltre, è ne­ces­sa­rio re­gi­strar­si a Optimole prima di poter uti­liz­za­re le funzioni.

Smush

Close

Anche Smush è una soluzione completa per rendere il vostro sito WordPress più veloce. Questo plugin può com­pri­me­re au­to­ma­ti­ca­men­te le immagini ed eliminare anche i dati EXIF per ridurre ul­te­rior­men­te le di­men­sio­ni del file. Come Optimole, anche Smush offre una CDN per ac­ce­le­ra­re ul­te­rior­men­te la consegna delle immagini.

A dif­fe­ren­za di Optimole, tuttavia, Smush offre alcune opzioni in più per il lazy loading: ad esempio, potete definire per quali formati grafici deve essere attiva la funzione e ag­giun­ge­re o de­se­le­zio­na­re iFrame. Stabilite anche le posizioni o gli scopi di utilizzo, ad esempio se de­si­de­ra­te che i thumbnail o le immagini nei widget vengano incluse nel lazy loading. È possibile escludere anche singoli tipi di pagina. Più nello specifico, potete anche escludere URL o URI specifici dalla funzione di lazy loading.

Come nel caso di a3 Lazy Load, con Smush è possibile per­so­na­liz­za­re il design del ca­ri­ca­men­to. Potete farlo a dis­sol­ven­za, scegliere il simbolo di ca­ri­ca­men­to o una grafica se­gna­po­sto.

Lazy Loader

Close

Lazy Loader di Florian Brinkmann non funziona con l’attributo loading, ma utilizza uno script. Consente di impostare il ri­ca­ri­ca­men­to di immagini, iFrame, video e file audio. Per affinare questo aspetto, è possibile spe­ci­fi­ca­re le classi CSS che devono essere escluse dal lazy loading. Attivando un’opzione, stabilite per ogni pagina e ogni post se devono essere coperti dal lazy loading.

Per rendere il ca­ri­ca­men­to un po’ più ac­cat­ti­van­te dal punto di vista grafico, potete attivare un cerchio animato e im­po­star­ne il colore.

Guida al lazy loading su WordPress passo dopo passo

Se non de­si­de­ra­te affidarvi alla funzione pre­de­fi­ni­ta di WordPress, dovreste optare per un plugin. Poiché a3 Lazy Load è dotato di molte funzioni, abbiamo scelto questa esten­sio­ne per il nostro tutorial.

Primo passaggio: pre­pa­rar­si

Prima di apportare modifiche im­por­tan­ti al vostro sito, dovreste sempre ef­fet­tua­re un backup di WordPress. In questo modo potrete tornare ra­pi­da­men­te a una versione fun­zio­nan­te, in caso di com­pli­ca­zio­ni. Dovreste anche pensare a un tema child di WordPress. Questo duplicato del tema attuale ga­ran­ti­sce che tutte le im­po­sta­zio­ni fun­zio­ni­no anche dopo un ag­gior­na­men­to da parte del fornitore del tema.

Secondo passaggio: in­stal­la­re e attivare

Accedete all’area dei plugin nel back end di WordPress e passate alla voce “Installa”. Se ora inserite “a3 Lazy Load” nel campo di ricerca, vi verrà mostrato il plugin cor­ri­spon­den­te. Potete in­stal­lar­lo e attivarlo con un altro clic.

Terzo passaggio: aprire le im­po­sta­zio­ni

Le opzioni del plugin si trovano nella voce di menu “Im­po­sta­zio­ni” della dashboard di WordPress, dove a3 Lazy Load ha ora una propria voce. In al­ter­na­ti­va, potete accedere alle im­po­sta­zio­ni dell’esten­sio­ne tramite la pagina di riepilogo del plugin. Potete anche di­sat­ti­va­re la funzione senza di­sat­ti­va­re il plugin nella seconda voce di menu (“Lazy Load Ac­ti­va­tion”). Un’altra opzione che avete è quella di spe­ci­fi­ca­re se volete di­sa­bi­li­ta­re la funzione di lazy loading pre­de­fi­ni­ta di WordPress (una buona idea, se de­si­de­ra­te evitare com­pli­ca­zio­ni).

Quarto passaggio: ef­fet­tua­re la selezione

Close

Ora dovete spe­ci­fi­ca­re quali oggetti devono essere in­te­res­sa­ti dal Lazy Load. Per farlo, avete diverse opzioni a di­spo­si­zio­ne:

• Lazy Load Images: qui spe­ci­fi­ca­te in quali punti le immagini debbano essere in­te­res­sa­te dal lazy loading. Ad esempio, potete decidere che vengano incluse solo le immagini presenti nelle aree di contenuto e non quelle all’interno dei widget.
• Lazy Load Videos and iframes: stabilite se i video e gli iFrame nei contenuti e/o nei widget debbano be­ne­fi­cia­re del lazy loading.
• Exclude by URI’s and Page Types: uti­liz­za­te il cursore per impostare i tipi di pagina che de­si­de­ra­te includere nel lazy loading. Ad esempio, potete escludere la pagina iniziale o una categoria. Avete anche la pos­si­bi­li­tà di se­le­zio­na­re alcuni oggetti tramite URI.

Quinto passaggio: scegliere il design

Close

Il plugin vi offre anche la pos­si­bi­li­tà di rendere vi­si­va­men­te più piacevole il ca­ri­ca­men­to di immagini e video. Potete mo­di­fi­car­lo alla voce “Effect & Style”. Le opzioni sono tra una dis­sol­ven­za o un cerchio rotante. Inoltre, potete se­le­zio­na­re il colore dello sfondo, così potete ad esempio adattarlo allo sfondo del vostro sito web.

Di­sat­ti­va­re il lazy loading già integrato su WordPress

La funzione di lazy loading pre­de­fi­ni­ta fa parte delle im­po­sta­zio­ni pre­de­fi­ni­te di WordPress. In realtà non è previsto che questa funzione venga di­sat­ti­va­ta. Per questo motivo, WordPress non dispone di un comando per la di­sat­ti­va­zio­ne nelle proprie im­po­sta­zio­ni. Tuttavia, può avere senso di­sat­ti­va­re la funzione, ad esempio se uti­liz­za­te un plugin con l’opzione di lazy loading. In questo modo evitate conflitti tra le due funzioni.

Per la di­sat­ti­va­zio­ne, è possibile uti­liz­za­re un plugin come a3 Lazy Load. In al­ter­na­ti­va, potete uti­liz­za­re Disable Lazy Load, un plugin pro­gram­ma­to ap­po­si­ta­men­te per questo scopo. Basta attivarlo e la funzione di lazy loading di WordPress non funziona più.

In ogni caso, un plugin non è stret­ta­men­te ne­ces­sa­rio. È anche possibile di­sat­ti­va­re la funzione inserendo una voce nel codice sorgente. Prima di farlo, dovreste creare un tema child per garantire che le modifiche non vadano perse dopo l’ag­gior­na­men­to del tema. Andate quindi nell’“Editor del file del tema” tramite la voce di menu “Aspetto” e aprite il file functions.php. Qui, inserite una nuova riga:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Se ora fate clic su “Aggiorna file”, le modifiche vengono applicate e il lazy loading viene di­sat­ti­va­to.