Lazy Load su WordPress senza plugin, si può fare!

Il Lazy Load è una tecnica per caricare i contenuti interni di una pagina web in maniera asincrona, ovvero, “in un secondo momento”. Vediamo come integrarlo su WordPress, senza usare plugin.

Questa operazione è conveniente per i siti web, in quanto permette di caricare tutte le sezioni più leggere di una pagina prima di passare a quelle più pesanti, dando così l’impressione di una velocità maggiore.

La logica che c’è dietro (come abbiamo visto in un articolo precedente) è relativamente semplice.

Senza soffermarci troppo sulle spiegazioni, vediamo direttamente come applicarla ad un sito web fatto in WordPress.

Premesse

Prima di iniziare, ci terrei a fare una premessa: Tutto quello di cui andremo a parlare, è già stato realizzato, ed è integrato (in maniera molto minimale) in questo plugin che ho realizzato io stesso.

Per “scopi scientifici”, però, vedremo come raggiungere lo stesso risultato senza dover utilizzare alcun plugin.

Dovendo mettere mano al codice del sito, ti consiglio vivamente (se non lo hai già fatto) di utilizzare un tema Child. In questo modo non rischierai di cancellare cose importanti, e soprattutto, queste modifiche verranno conservate anche con i futuri aggiornamenti di plugin e temi.

Se non sai cos’è un tema Child, o non sai come realizzarlo, ho scritto un articolo anche per questo.

Step 1: Prevenire il caricamento delle immagini

Dato che dovremo andare a modificare il codice del nostro tema, apriamo prima di tutto l’editor del nostro Child Theme, andando su “Aspetto” > “Editor del tema”:

Da qui, dovremo aggiungere qualche riga di codice al file “functions.php”, quindi, apriamolo in modalità di modifica cliccandoci sopra, sulla colonna di destra:

In fondo al codice già presente, dovremo aggiungere alcune righe di codice, che andranno a modificare una stringa all’interno del “Contenuto dei post”, ovvero tutto quello che gli autori del blog scrivono tramite Gutenberg o simili:

add_filter( 'the_content', 'fs_lazyload_images' );
add_filter( 'widget_text', 'fs_lazyload_images' );
// Replace the image attributes in pages and posts
function fs_lazyload_images( $content ) {
  $content = preg_replace( '/(<img.+)(src)/Ui', '$1data-$2', $content );
  $content = preg_replace( '/(<img.+)(srcset)/Ui', '$1data-$2', $content );
  return $content;
}

Allo stesso modo, dovremo aggiungere altre righe di codice, che andranno a modificare il modo in cui il nostro tema genererà le “liste” (per il riepilogo degli articoli, l’elenco dei commenti, ecc):

add_filter( 'wp_get_attachment_image_attributes', 'fs_lazyload_image_attributes', 10, 2 );
// Replace the image attributes in listings
function fs_lazyload_image_attributes( $atts, $attachment ) {
  $atts['data-src'] = $atts['src'];
  unset( $atts['src'] );
  if( isset( $atts['srcset'] ) ) {
    $atts['data-srcset'] = $atts['srcset'];
    unset( $atts['srcset'] );
  }
  return $atts;
}

Arrivati a questo punto, abbiamo fatto in modo che, quando la pagina viene caricata, tutti i tag “img” non avranno più l’attributo “src” o “srcset”, ma avranno, rispettivamente, l’attributo “data-src” e “data-srcset”.

In questo modo, il browser non saprà dove andare a “cercare” i contenuti, e, quindi, non li caricherà (almeno inizialmente).

Step 2: Applicare il Lazy Load

Ora che abbiamo “bloccato” il caricamento delle immagini, bisogna fare in modo che questi contenuti vengano caricati subito dopo del resto della pagina.

Per farlo, prendiamo il codice JavaScript spiegato nell’articolo teorico:

window.onload = function() {
  var images = document.querySelectorAll("img[data-src]");
  images.forEach(function(image) {
    var datasrc = image.getAttribute('data-src');
    image.setAttribute('src', datasrc);
    image.onload = function() {
      image.removeAttribute('data-src');
    };
  });
};

Questo codice, dovrà prima di tutto essere inserito all’interno di tag <script> che ne permetteranno l’esecuzione, e, poi, integrato in tutte le pagine, in questo modo:

add_action( 'wp_head', 'fs_lazyload_loader' );
function fs_lazyload_loader(){
  ?>
  <script>
	window.onload = function() {
		document.querySelectorAll("img[data-src]").forEach(function(image) {
			image.setAttribute('src', image.getAttribute('data-src'));
			image.onload = function() {image.removeAttribute('data-src');};
		});
	};
  </script>
  <?php
}

Ecco fatto, ora, dopo aver salvato le modifiche, il tuo sito web applicherà il Lazy Load a tutte le immagini.