Lazy loading img con wordpress utilizzando il tema

Fino ad oggi con WordPress, senza aggiungere plugin, non è possibile avere un caricamento delle immagini di tipo "lazy" (lazy loading), ovvero in maniera asincrona cioè solo se l'immagine rientra o sta per rientrare nella viewport del browser.

Solo così i tempi di caricamento della pagina si riducono di molto e quindi è importante sia conoscere che abilitare il caricamento "lazy".

Perché il browser carichi le immagini in modalità "lazy" bisogna utilizzare il tag html onloading="lazy" nell'elemento "img".

Dato che per ora non è ancora utilizzabile tramite l'editor di WordPress aggiungiamo al nostro tema (meglio se usiamo un child tema) una funzione nel file principale functions.php:

function quoll_filter_the_content( $content ) {
  // Check if we're inside the main loop in a post or page.
  if ( ( is_single() || is_page() ) && in_the_loop() && is_main_query() ) {
    // remove loading tag in img elements if exist
    $content=preg_replace('/]?)loading="[^"]"\s*/',"<img $1",$content);
    // add loading="lazy" in img elements
    return preg_replace('/<img\s+/','<img loading="lazy" ',$content);
  }
  return $content;
}
add_filter( 'the_content', 'quoll_filter_the_content', 99 );

Se necessario puliamo la cache di WordPress e controlliamo che le immagini si carichino asincronamente.

Controlliamo anche la lista dei browser che rispettano l'attributo "onloading="lazy"

Novità WordPress 5.5

Da WordPress 5.5 dovrebbe esser inglobato il lazy-loading come da articolo ufficiale.

Riferimenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Q Captcha 72 + = 78