Il lazy loading è un metodo utilizzato per migliorare la velocità delle pagine tramite il caricamento posticipato delle immagini non visibili nello schermo.

Il principio è quello di sostituire l’immagine con un elemento “leggero”, in termini di dimensioni del file, da riempire successivamente solo se lo scroll della pagina o un cambio di risoluzione (ad esempio passare dalla vista verticale a quella orizzontale su mobile) lo attivi.

Aggiungere il lazy loading tramite puro codice o da plugin?

In linea di massima, la maggior parte dei temi grafici di buona qualità hanno al loro interno uno strumento per attivare il lazy loading.

Oltre ad essi, anche diversi strumenti di minificazione del codice implementano dei semplici strumenti per il caricamento in un secondo momento delle immagini, come accade su Autoptimize.

Se si da per buono un utilizzo ottimale dei plugins (anche se nella maggior parte delle consulenze SEO si scopre che spesso non è così) e una conoscenza delle interazioni tra i plugin ottimale (anche questo tutto da verificare), non ci sono differenze tra utilizzare del codice o affidarsi a qualcosa di già pronto.

L’unica differenza è se l’implementazione del lazy loading è pensato per lavorare sull’HTML o si avvale degli hooks di WordPress. Vi consiglio sempre la seconda opzione, la prima potrebbe richiedere una quantità di tempo difficile da rendicontare in progetti anche solo di medie / piccole dimensioni.

Inserimento da codice

In genere il metodo utilizzato per far comparire delle immagini non presenti durante il primo caricamento dell’immagine, è utilizzare le API (come le IntersectionObserver API) per cambiare lo stato dell’elemento una volta che quest’ultima sia presente nel viewport o che siano presenti delle interazioni colte dal codice Javascript sulla presenza di un nuovo scroll o di una modifica della visualizzazione della pagina.

l primo passaggio per rendere l’operazione possibile è creare una dipendenza in cui inserire uno script. E’ importante che quest’ultimo venga caricato dopo la libreria JQuery.

La procedura utilizza un metodo simile a quello utilizzato nell’articolo Delay loading of images until user scrolls to them.

function enqueue_lazyload() {

    wp_enqueue_script('jquery_lazy_load', get_stylesheet_directory_uri() . '/js/jquery.lazyload.min.js', array('jquery'), '1.9.1');

add_action('wp_enqueue_scripts', 'enqueue_lazyload');

Successivamente bisogna sostituire le immagini con dei segnaposto, e aggiungere a queste una classe che verrà poi richiamata da JQuery. Per rendere possibile tutto questo, bisogna cercare e operare su tutte le immagini:

function filter_lazyload($content) {
return preg_replace_callback('/(]+)(src\s*=\s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content);
}
add_filter('the_content', 'filter_lazyload');

Una volta sostituite le immagini e alleggerite le pagine bisogna cominciare a realizzare un codice che durante il rendering delle pagine riconosca le immagini segnaposto e le sostituisca con le originali.

function preg_lazyload($img_match) {

    $img_replace = $img_match[1] . 'src="' . get_stylesheet_directory_uri() . '/img/grey.gif" data-original' . substr($img_match[2], 3) . $img_match[3];

$img_replace = preg_replace('/class\s*=\s*"/i', 'class="lazy ', $img_replace);

    $img_replace .= '' . $img_match[0] . '';

return $img_replace;

}

Plugin WordPress di lazy loading

Per tutti coloro che non riescono o disdegnano l’utilizzo del codice puro, sopratutto se considerano l’operazione più lenta e capace solo di portare alla stessa soluzione di un tool pronto da scaricare e utilizzare, è il caso di menzionare i migliori software dedicati alle piattaforme WordPress.

Sia inteso naturalmente, che questi plugin funzionano perfettamente anche su WooCommerce.

Lazy Load

Tra i plugin di lazy loading più semplici c’è Lazy Load, che utilizza jQuery.sonar per caricare le immagini solo quando sono visibili nel viewport.

Il vantaggio di questo strumento è che non richiede un setup, difficilmente entra in contrasto con altri plugin ed è molto leggero.

Lazy load WP Rocket

Se invece si avesse bisogno di una soluzione più sofisticata, il plugin di WP Rocket opera su iframe e si occupa di diminuire il numero di richieste HTTP della pagina, in modo da velocizzarne i processi.

A3 lazy load

Al momento il plugin meglio recensito e forse più utilizzato è A3 lazy load sopratutto perché divide all’interno della dashboard presente nel back-end le opzioni dedicate alle immagini da quelle dedicate a iframe e video, ma sopratutto è un tool orientato alla visualizzazione del sito su device mobile.

In aggiunta a quanto detto, è possibile scegliere (e forse è l’unico plugin famoso in circolazione che lo permetta) lo stile di sostituzione posta tra l’immagine segnaposto e l’originale.