Come eseguire il lazy load su WordPress (immagini e video)

Se sei il proprietario di un sito web, probabilmente hai pensato alla velocità del sito almeno una volta in passato. Dopotutto, Google considera la velocità quando determina dove posizionare i siti nei risultati di ricerca. Quindi, se il tuo sito è lento a caricarsi, sei in svantaggio quando si tratta di classificare. E sappiamo tutti che classifiche più alte portano a più traffico.

Quindi, come assicurarti che il tuo sito WordPress si carichi il più velocemente possibile? Un modo è caricare le tue immagini in modo pigro.

Il lazy loading è una tecnica che ritarda il rendering di immagini e video finché non sono necessari. L'implementazione di questo può velocizzare notevolmente il tuo sito e la grande notizia è che non è necessario essere uno sviluppatore per farlo funzionare.

Oggi ti mostreremo come caricare lentamente immagini e video in WordPress utilizzando due metodi: con un plug-in e senza.

Cos'è il caricamento lento?

Il caricamento lento è una tecnica comune utilizzata per migliorare la velocità della pagina. L'idea è semplice: invece di caricare tutte le immagini su una pagina quando un visitatore arriva per la prima volta, rende solo le immagini che sono visibili. Quindi, mentre il visitatore scorre la pagina verso il basso, vengono caricate più immagini secondo necessità.

Ciò significa che se un visitatore non scorre mai fino alla fine di una pagina, le immagini sotto l'area della pagina visualizzata non vengono mai caricate. Pertanto, il caricamento lento può far risparmiare preziosi millisecondi (o addirittura secondi) al tempo di caricamento della pagina.

Inoltre, il caricamento lento può anche aiutarti a conservare la larghezza di banda. Questo è particolarmente importante se hai persone che visitano il tuo sito su un dispositivo mobile. Posticipando il caricamento di immagini e video non visibili, puoi diminuire la quantità di dati utilizzati.

Come funziona il caricamento lento?

In generale, il lazy loading funziona in due modi. WordPress, a partire dalla versione 5.5, aggiunge un attributo HTML5 chiamato "caricamento". In questo caso, il browser gestisce tutte le parti del processo di caricamento lento senza la necessità di alcun JavaScript aggiuntivo.

Un altro metodo, sviluppato prima dell'attributo di HTML5, è attraverso un JavaScript creativo. In questo caso, viene servito un segnaposto vuoto al caricamento della pagina, quindi viene utilizzato JavaScript per caricare le immagini non appena entrano nel viewport.

In ogni caso, vengono caricate solo le immagini necessarie al browser. Altre immagini vengono caricate una volta che un visitatore scorre la pagina.

Esistono diversi modi per farlo, che discuteremo più dettagliatamente di seguito. Ma questo è il succo di come funziona il caricamento lento.

Quali sono i vantaggi del caricamento lento?

Ci sono tre vantaggi principali nel caricamento lento delle immagini:

• Aumento della velocità del sito
• Utilizzo ridotto della larghezza di banda
• Migliore esperienza utente

L'aumento della velocità del sito è solitamente la motivazione principale per l'implementazione del caricamento lento. Aspettando di eseguire il rendering delle immagini non necessarie, puoi ridurre il tempo di caricamento della pagina. Ciò è particolarmente vero se hai molte immagini su una pagina o se le tue immagini sono grandi.

Successivamente, il caricamento lento può aiutarti a conservare la larghezza di banda. Se i visitatori non si avventurano mai in fondo alla pagina, non c'è larghezza di banda sprecata nel caricamento di immagini che non vedranno mai.

Infine, il caricamento lento può migliorare la tua esperienza utente. Questo perché i visitatori non devono attendere il caricamento di tutte le immagini su una pagina prima di poter iniziare a interagire con il tuo sito.

Il lazy load di WordPress è predefinito?

Sì, a partire da WordPress 5.5, il caricamento lento è abilitato automaticamente per impostazione predefinita al momento dell'installazione. Tuttavia, ci sono alcuni modi per personalizzare l'esperienza che sono piuttosto semplici e intuitivi. Discuteremo questi metodi in modo più dettagliato di seguito.

Devo caricare in modo pigro le mie immagini? Ci sono svantaggi?

Nella maggior parte dei casi, il caricamento lento delle immagini è un'ottima idea se si desidera migliorare la velocità della pagina o risparmiare larghezza di banda. Tuttavia, ci sono anche alcuni potenziali svantaggi da considerare.

Spostamento del layout

Se carichi le tue immagini in modo pigro, il layout della tua pagina potrebbe cambiare. Ad esempio, se hai una barra laterale sul lato destro della pagina e carichi lentamente un'immagine che si trova al suo interno, la barra laterale potrebbe spostarsi verso il basso per fare spazio. Questo può essere molto disorientante per i tuoi visitatori.

Come regola generale, si consiglia di utilizzare i segnaposto per evitare questo problema.

Potenziale successo alla SEO

Se non lo fai correttamente, il caricamento lento delle immagini può far sì che i motori di ricerca, come Google, abbiano problemi a indicizzarle. Il contenuto è il re quando si tratta di classifiche e, in questo caso, potresti perdere pezzi preziosi.

Le tue immagini potrebbero non apparire più nei risultati di ricerca e, a seconda dell'importanza delle immagini in relazione al resto del contenuto della pagina (come le immagini dei prodotti per un elenco di e-commerce), potrebbero anche rovinare le tue normali classifiche di ricerca.

Detto questo, se imposti correttamente il caricamento lento, questo non sarà un problema. Ecco perché, a meno che tu non sia uno sviluppatore fiducioso, il miglior modo di agire è utilizzare un plug-in di caricamento lento o attenersi al caricamento lento predefinito incluso in WordPress.

Conflitti di plug-in

Inoltre, il caricamento lento può causare problemi con alcuni plug-in di WordPress, come i plug-in che utilizzano le immagini per generare anteprime sui social media.

Ogni volta che apporti modifiche al tuo sito, dovresti testarle accuratamente per assicurarti che tutto funzioni come dovrebbe.

E, nel caso qualcosa vada storto, tieni a portata di mano un backup del tuo sito WordPress per un rapido recupero.

Come abilitare il lazy loading su WordPress

Il caricamento lento è ora abilitato per impostazione predefinita in WordPress. Se non stai utilizzando una moderna iterazione di WordPress (anche se ti consigliamo di farlo), o se desideri un controllo più granulare sul processo di caricamento lento, puoi farlo utilizzando uno dei due metodi distinti: utilizzando un plug-in o aggiungendo codice al tuo luogo.

1. Lazy load con un plugin

Se non sei uno sviluppatore esperto, ti consigliamo di utilizzare un plug-in perché ogni volta che modifichi il codice del tuo sito, rischi di incorrere in problemi. Anche se disponi di backup a portata di mano nel caso in cui rompi qualcosa, potrebbe comunque essere meglio utilizzare semplicemente un plug-in affidabile.

Jetpack Boost è un plug-in gratuito dedicato ad aiutarti a valutare e migliorare le prestazioni del sito. Offre funzionalità come:

• Rinvio di JavaScript non essenziale
• Ottimizzazione del caricamento CSS
• Caricamento pigro delle immagini
• Test delle prestazioni del sito

Per iniziare con Jetpack Boost, scaricalo gratuitamente dalla directory dei plugin di WordPress.

Oppure, nella dashboard di WordPress, vai su Plugin → Aggiungi nuovo, quindi cerca "Jetpack Boost" e fai clic su Installa ora . Una volta installato, fai clic su Attiva .

Successivamente, vai alla nuova opzione di menu della dashboard intitolata Boost . Quindi, fai clic su Inizia gratuitamente .

Nella pagina successiva, scorri verso il basso fino al grande interruttore che dice Lazy Image Loading e attivalo. Ora dai un'occhiata al tuo sito e assicurati che tutto venga visualizzato correttamente e abbia un bell'aspetto. Questo è tutto! Il caricamento pigro va bene con pochi clic.

Se vuoi fare un ulteriore passo avanti e personalizzare il caricamento lento del tuo sito, puoi farlo utilizzando frammenti di codice, che puoi aggiungere al tuo file functions.php . Oppure puoi inserirli con un plug-in di funzionalità.

Ecco solo alcune attività che puoi svolgere:

1. Disabilita il caricamento lento su determinate pagine
2. Imposta un segnaposto che viene visualizzato finché l'immagine non viene caricata
3. Disattiva il caricamento lento per immagini specifiche
4. Disattiva il caricamento lento per una classe CSS specifica

Ad esempio, se desideri escludere una classe CSS dal processo di caricamento lento, devi utilizzare questo codice:

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

Per maggiori dettagli, consulta la documentazione completa sul lazy loading.

2. Come eseguire il lazy load delle immagini in WordPress senza plug-in

Come accennato in precedenza, WordPress, per impostazione predefinita, abilita il caricamento lento per tutte le immagini che hanno dimensioni impostate. Non è necessario attivare nulla o aggiungere alcun codice per farlo. Tuttavia, a volte potresti voler personalizzare il funzionamento di questa funzionalità.

Ad esempio, supponiamo che non desideri includere immagini modello. Dovresti aggiungere questo codice al tuo file functions.php :

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

O forse vuoi diventare super granulare e disattivare il caricamento lento per immagini specifiche. Puoi farlo assegnando una classe di immagine aggiuntiva a ciascuna immagine quando viene aggiunta a una pagina o a un post e quindi aggiungendo quella classe al seguente codice nel tuo file functions.php :

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

Per aggiungere la classe immagine skip-lazy nell'esempio precedente a un'immagine:

1. Aggiungi l'immagine alla pagina o pubblicala tramite la Libreria multimediale.
2. Dopo aver aggiunto l'immagine, trova le impostazioni dell'immagine. Questo può apparire in modo diverso a seconda che tu stia utilizzando l'editor di Gutenberg Blocks, l'editor classico o un plug-in di creazione di siti. La possibilità di aggiungere una nuova classe CSS si trova solitamente nell'area delle impostazioni avanzate (Gutenberg e editor classici) o nella parte inferiore delle opzioni delle impostazioni dell'immagine (la maggior parte degli altri costruttori di siti).
3. Aggiungi la classe skip-lazy all'immagine e salva l'aggiornamento.

Puoi saperne di più sulle possibilità nella documentazione di WordPress.

Come eseguire il lazy load dei video su WordPress

Se vuoi eseguire il lazy load dei tuoi video, puoi farlo aggiungendo il codice al video stesso nel post o nella pagina. Questo codice dovrebbe assomigliare a questo:

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

Domande frequenti sul lazy loading in WordPress

Vuoi saperne di più sul lazy loading di WordPress? Di seguito abbiamo risposto ad alcune domande frequenti:

Il caricamento pigro e il rinvio delle immagini fuori schermo sono la stessa cosa?

Rinviare le immagini fuori schermo significa attendere il caricamento delle immagini fino al caricamento del resto del contenuto critico above the fold. Esistono diversi modi per farlo, ma i siti WordPress in genere utilizzano il caricamento lento.

In sostanza, il caricamento lento è un metodo per rinviare le immagini fuori schermo.

Posso caricare in modo pigro le immagini di sfondo in WordPress?

Sì, puoi caricare in modo pigro le immagini di sfondo, se lo desideri. Jetpack Boost attiva il caricamento lento per le immagini di sfondo. Tuttavia, a seconda di come sono impostate le tue immagini, potrebbe non essere in grado di identificarle tutte. Ad esempio, se l'immagine viene caricata tramite la proprietà background:url, il plug-in non la leggerà come un'immagine e, pertanto, non abiliterà il caricamento lento per essa.

In tale situazione, puoi utilizzare uno strumento come Lazy Loader, che ti consentirà di selezionare le immagini di sfondo specifiche che desideri caricare in modo pigro.

Posso caricare in modo pigro un video di YouTube?

Si, puoi! Per fare ciò, inserisci il seguente frammento di codice da WPOrbit nel file functions.php del tuo tema. Se non sei sicuro di come farlo, dai un'occhiata alla nostra guida per accedere e modificare il file functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

Il lazy loading ha un impatto sulla SEO?

Sì, il lazy loading può avere un impatto positivo sul posizionamento nei motori di ricerca. Google considera la velocità del sito quando decide dove classificare le pagine nei risultati di ricerca. E poiché il lazy loading migliora le prestazioni, può anche aumentare la percezione del tuo sito da parte di Google.

Se lo fai manualmente, invece di utilizzare un plug-in di caricamento lento e commetti un errore, può avere un impatto negativo sulla SEO ostacolando la capacità dei motori di ricerca di riconoscere le tue immagini.

Il caricamento lento influisce sull'esperienza dell'utente?

Sì, il caricamento lento può migliorare la tua esperienza utente perché riduce il tempo di caricamento del tuo sito, garantendo comunque che i visitatori possano visualizzare immediatamente i tuoi contenuti. Questo, a sua volta, può migliorare la loro percezione del tuo marchio.

Ho bisogno di un plug-in per il lazy load dei miei contenuti?

No, non hai bisogno di un plug-in per il lazy load dei tuoi contenuti. Il caricamento lento è abilitato in WordPress per impostazione predefinita. Tuttavia, se desideri un maggiore controllo sul processo di caricamento lento, potresti voler utilizzare un plug-in. Ecco una selezione dei migliori plugin di lazy load per WordPress.

C'è uno svantaggio nel caricamento lento dei contenuti?

Non ci sono molti aspetti negativi nel caricamento lento dei contenuti. Migliora la velocità, l'esperienza utente e il posizionamento nei motori di ricerca. Tuttavia, occasionalmente può causare strani spostamenti nei layout di pagina. Pertanto, dovresti sempre testare il tuo sito dopo aver abilitato il caricamento lento.

Devo eseguire il lazy load di tutti i miei contenuti?

No, non è necessario eseguire il lazy load di tutti i tuoi contenuti. Puoi scegliere di caricare in modalità lazy solo elementi specifici, come immagini, video o iFrame.

Cos'altro posso fare per migliorare la velocità di caricamento?

Oltre al lazy loading, ci sono molti altri modi per migliorare la velocità del tuo sito WordPress, tra cui:

• Utilizzo di una rete per la distribuzione di contenuti (CDN)
• Concentrandosi sul miglioramento delle stesse cose che migliorano anche i Core Web Vitals.
• Ottimizzazione delle immagini
• Abilitazione della memorizzazione nella cache del browser
• Minimizzare le risorse

Velocizza il tuo sito con il lazy loading di WordPress

Il caricamento pigro delle tue immagini è un ottimo modo per ottimizzare le prestazioni del tuo sito e migliorare la tua esperienza utente complessiva. Jetpack Boost offre il modo più conveniente e robusto per abilitare il caricamento lento, fornendo anche altri potenti strumenti di velocità. Pronto per iniziare? Ottieni Jetpack potenziato!