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
- WordPress è un potente software open source che puoi usare facilmente, e liberamente, per creare siti, blog, forum, app;
- l'attributo lazy loading per caricare le immagini immediatamente o quando una condizione si verifica;
- lista dei browser che rispettano il caricamento lazy tramite tag "onloading";
- come realizzare un tema con WordPress;
- come realizzare un child tema (o tema figlio) con wordPress;
- Articolo ufficiale WordPress che la versione 5.5 ingloba il lazy-loading sulle immagini.
