Velocizza WordPress con il caricamento differito di immagini e video (nessun plugin necessario)

Il caricamento differito è uno dei metodi più semplici ed efficaci per far sì che il tuo sito WordPress si carichi più velocemente, soprattutto sui dispositivi mobili. Non hai nemmeno bisogno di un plugin per implementarlo. In questa guida ti mostreremo come abilitare manualmente il caricamento differito nativo per immagini e video utilizzando un codice pulito e leggero.

Cos'è il caricamento lento?

Il lazy loading è una tecnica di caricamento che consente di caricare risorse multimediali come immagini e video solo quando stanno per entrare nel viewport dell'utente (ovvero, per essere visibili sullo schermo). Questo riduce il numero di richieste HTTP al caricamento iniziale della pagina, rendendo il sito più veloce e leggero.

Perché il caricamento differito è fondamentale per le prestazioni di WordPress

• Riduce il peso iniziale della pagina: Le pagine si caricano più velocemente perché vengono richieste meno risorse in anticipo.
• Risparmia larghezza di banda: I contenuti multimediali non visualizzati vengono scaricati solo se necessari.
• Migliora i Core Web Vitals: Il caricamento differito migliora parametri come Largest Contentful Paint (LCP).
• Migliore SEO ed esperienza utente: La velocità è un fattore di ranking. Un sito più veloce mantiene gli utenti coinvolti.

Come implementare il caricamento lazy nativo per le immagini

A partire da WordPress 5.5, il caricamento lazy nativo viene aggiunto automaticamente ai tag delle immagini con loading="lazy" attributo. Puoi assicurarti che funzioni correttamente con modifiche minime:

<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">

Buone pratiche: Specificare sempre width E height per evitare variazioni di layout (importante per il punteggio CLS).

Come forzare il caricamento differito per tutte le immagini (facoltativo)

Se alcuni temi o plugin saltano l'aggiunta loading="lazy", puoi forzarlo con un semplice frammento JavaScript:

<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>

Aggiungi questo script al tuo piè di pagina oppure utilizza un tema figlio per includerlo correttamente.

Caricamento lento dei video senza plugin

I video sono pesanti. Gli incorporamenti da YouTube o Vimeo caricano diversi script esterni. Per caricarli in modo differito senza plugin, sostituisci l'iframe con un'anteprima dell'immagine cliccabile e carica il video solo dopo l'interazione.

Esempio: caricamento lento di un video di YouTube

<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>

Sostituire VIDEO_ID con l'ID effettivo del video di YouTube.

Stile utile (facoltativo)

Aggiungi un po' di CSS di base per renderlo più gradevole:

.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }

Perché non utilizzare un plugin?

I plugin sono comodi, ma spesso contengono script, stili o elementi aggiuntivi. Il caricamento differito manuale offre:

• Maggiore controllo su ciò che viene caricato
• Nessun impatto sulle prestazioni da parte delle funzionalità di terze parti
• Uscita front-end più pulita

Quando dovresti prendere in considerazione un plugin invece

Se gestisci un sito web di grandi dimensioni con frequenti caricamenti di contenuti multimediali o hai collaboratori che non hanno familiarità con il codice, prendi in considerazione questi plugin ottimizzati per il caricamento differito:

• Cache LiteSpeed (se il tuo server lo supporta)
• FlyingPress
• Perfmatters (premio)

Ma ricordate che, anche con questi plugin, è fondamentale rivedere l'effettivo comportamento del caricamento differito in DevTools.

Suggerimenti finali

• Utilizzare gli strumenti per sviluppatori del browser per verificare se loading="lazy" è applicato
• Metti alla prova il tuo sito con Google PageSpeed Insights
• Traccia i miglioramenti LCP dopo aver abilitato il caricamento differito

Hai bisogno dell'aiuto di un esperto per migliorare la velocità di WordPress senza plugin appesantiti? Prova un controllo manuale gratuito su SpeedWP Pro — ottimizziamo partendo dal nucleo.