Faq WordPress

Faq WordPress

Pubblicato il Pubblicato in Faq, wordpress

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

Vedi tutte le FAQs

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

Vedi tutte le FAQs

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *