Se stai cercando un modo per velocizzare il tuo sito web è arrivato il momento di pensare ad aggiungere il lazy load alle tue immagini.
Sfruttare questa tecnica è un modo molto efficace per migliorare le performance del proprio sito web e aumentarne la velocità!
Il lazy load è molto semplice da implementare e in questa guida ti mostrerò come farlo tramite plugin oppure tramite codice, se non volessi aggiungere nuovi moduli alla tua installazione di WordPress.
Indice dei contenuti [Nascondi/Mostra]
Perché è fondamentale aggiungerlo al sito web?
La velocità di un sito web è un importante fattore di posizionamento. Ecco perché dovresti fare tutto ciò che è in tuo potere per cercare di velocizzare al massimo il tuo sito.
Le immagini sono i file che impiegano più tempo per essere caricati, soprattutto se non sono ottimizzate. Se aggiungi un sacco di immagini ad un articolo, allora questo impiegherà parecchio tempo per essere caricato completamente.
Per risolvere questo problema ecco che interviene il lazy load, tramite il quale puoi rimandare il caricamento di tutte quelle immagini che non sono ancora nello schermo dell’utente, perché ancora non raggiunte dallo scroll.
Ma come funziona esattamente?
Normalmente il browser quando apre una pagina web carica tutte le immagini insieme, il lazy loading invece carica solo quelle visibili e sostituisce tutte le altre con uno spazio vuoto o un’immagine segnaposto (dipende dal metodo usato).
WordPress dalla versione 5.5 contiene già il lazy load, ma utilizzare un plugin o un codice personalizzato ti permetterà di agire su tutte le impostazioni e ottimizzare il tuo lazy load.
Metodo 1: aggiungere il lazy load tramite plugin
Di plugin utili a questo scopo ce ne sono davvero tanti, come Smush o ShortPixel, oppure la maggior parte dei plugin che si occupano di caching.
Quello che mi sento di consigliarti è OptiMole.
Un volta installato dovrai registrarti per ottenere la API Key: tranquillo è del tutto gratuito (fino a 5k visitatori al mese).
Clicca sul pulsante rosso e inserisci la tua email. Riceverai in risposta all’indirizzo selezionato l’API e l’utente e password per accedere al tuo account di OptiMole.com
Inserisci l’API ottenuta nel campo corretto e clicca il pulsante verde “Connect to Optimole Service”.
Attendi il caricamento del collegamento, dopodiché apri la tab Settings.
Qui potrai controllare che tutto sia andato nel verso giusto e che il lazy load sia già attivo. Infatti non dovrai più fare altro, puoi fermarti a questo step.
Il plugin aggiungerà il lazyload direttamente alle tue immagini.
Nella tab Settings ci sono però delle impostazioni avanzate che puoi personalizzare.
Quindi clicca su Advanced e poi su Lazyload.
Qui ti consigli di abilitare queste opzioni:
- Enable generic lazyload placeholder: aggiunge un’immagine segnaposto al posto delle immagini ancora da caricare, invece di lasciare uno spazio bianco, migliora l’esperienza utente.
- Scale Images: ridimensiona le immagini a quelle dello schermo dell’utente rendendo la tua pagina più veloce.
- Enable lazyload for background images: attiva il lazyload anche per le immagini di background.
- Enable lazyload for embedded videos and iframes: se il video o l’ifram non vengono visualizzati saranno sostituiti con l’immagine campione, quando l’utente scrollerà alla loro posizione verranno mostrati normalmente.
Una volta impostato tutto ricordati di salvare le modifiche.
Metodo 2: aggiungere il lazy load tramite codice
Se invece vuoi sfruttare la potenza del lazy load ma senza appesantire ancora il tuo sito WordPress con un altro plugin puoi utilizzare il codice sottostante.
Per aggiungere al tuo sito puoi utilizzare il file functions.php oppure il plugin Code Snippets che ti permette di caricare codice php e script js senza fare danni e modificare i file del tema o di WordPress.
Per prima cosa aggiungiamo questo codice PHP.
// Replace the image attributes in Post/Page Content
function my_lazyload_content_images( $content ) {
$content = preg_replace( '/(<img.+)(src)/Ui', '$1data-$2', $content );
$content = preg_replace( '/(<img.+)(srcset)/Ui', '$1data-$2', $content );
return $content;
}
// Replace the image attributes in Post Listing, Related Posts, etc.
function my_lazyload_attachments( $atts, $attachment ) {
$atts['data-src'] = $atts['src'];
unset( $atts['src'] );
if( isset( $atts['srcset'] ) ) {
$atts['data-srcset'] = $atts['srcset'];
unset( $atts['srcset'] );
}
return $atts;
}
Il codice sopra fa in modo di eliminare l’attributo src da tutte le immagini del sito, aggiungendo invece il data-src.
In questo modo al caricamento di una qualsiasi pagina web, le immagini non verranno mostrate, perché l’attributo src che contiene il link del file è inesistente.
Quello che dobbiamo fare ora è aggiungerlo dinamicamente nel momento in cui l’utente scrollando arriva a visualizzare la posizione dell’immagine. Lo facciamo con questo codice JS.
( function() { 'use strict';
let images = document.querySelectorAll('img[data-src]');
document.addEventListener('DOMContentLoaded', onReady);
function onReady() {
// Show above-the-fold images first
showImagesOnView();
// scroll listener
window.addEventListener( 'scroll', showImagesOnView, false );
}
// Show the image if reached on viewport
function showImagesOnView( e ) {
for( let i of images ) {
if( i.getAttribute('src') ) { continue; } // SKIP if already displayed
// Compare the position of image and scroll
let bounding = i.getBoundingClientRect();
let isOnView = bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
if( isOnView ) {
i.setAttribute( 'src', i.dataset.src );
if( i.getAttribute('data-srcset') ) {
i.setAttribute( 'srcset', i.dataset.srcset );
}
}
}
}
})();
In pratica quando l’utente raggiunge l’immagine lo script javascript preleva il link del file dall’attributo data-src e lo inserisce nel src, così da mostrare l’immagine.
