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
- 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.
Lazy loading plugin: img con wordpress utilizzando un plugin apposito
Come già scritto nella FAQ precedente su WordPress e su “lazy loading” per far in modo che in WordPress le immagini si carichino in maniera asincrona in base all’attuale viewport del browser non è possibile farlo tramite l’editor integrato ma bisogna utilizzare appositi temi o plugin.
Ora vediamo lo stesso funzionamento della FAQ precedente utilizzando un plugin (un lazy loading plugin) invece che scrivere una funzione direttamente nel tema.
In questo modo anche cambiando tema l’effetto “lazy” rimarrebbe.
Lazy loading plugin
Supponiamo di chiamare il plugin “quoll_img_lazy_loading” allora il file principale nella sua directory, “quoll_img_lazy_loading.php” dovrà contenere almeno il seguente codice:
function quoll_img_lazy_loading_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 if exist
$content=preg_replace('/<img\s+([^>]*?)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_img_lazy_loading_filter_the_content', 100 );Naturalmente mancano le intestazioni del plugin.
Il plugin completo lo possiamo trovare su GitHub.
Se invece vogliamo utilizzare anche un po’ di javascript per rendere l’effetto “lazy” sulle immagini più compatibile con tutti i browser basta dare un occhio al progetto “quoll_img_lazy_loading_plus“.
Novità WordPress 5.5
Da WordPress 5.5 dovrebbe esser inglobato il lazy-loading come da articolo ufficiale.
Riferimenti
- Plugin WordPress “quoll_img_lazy_loading” su GitHub
- 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 plugin con WordPress;
- Articolo ufficiale WordPress che la versione 5.5 ingloba il lazy-loading sulle immagini.