WordPress Lazy Loading: come aggiungerlo al tuo sito

Pubblicato: 2023-03-09

Avere una buona velocità di caricamento della pagina è importante per fornire una buona esperienza utente e ti aiuta anche a migliorare il posizionamento nei motori di ricerca. Quando si tratta di creare un sito Web online o un sito Web aziendale, nessun altro CMS può essere una scommessa migliore di WordPress.

Il caricamento lento è la migliore strategia per avere molte risorse multimediali mantenendo un buon tempo di caricamento per il tuo sito web. È una strategia critica che identifica le risorse non critiche e le carica solo quando sono necessarie. L'utilizzo di questa strategia riduce il tempo di caricamento della pagina, riduce la frequenza di rimbalzo e migliora l'esperienza del cliente.

WordPress è un CMS leader che ti consente di integrare video, immagini e altri media nel tuo sito web. Tuttavia, la nuova versione include anche la funzionalità di caricamento lento di WordPress.

Una volta attivata la funzione di caricamento lento di WordPress, tutte le immagini o i video straordinari sul tuo sito verranno sottoposti a caricamento lento.

Caricamento pigro di WordPress

Ora i visitatori saranno in grado di caricare rapidamente il tuo sito e accedere ai contenuti. Questa tattica è altamente raccomandata se le entrate della tua attività dipendono dal tuo sito Web WordPress.

Cos'è il caricamento lento e come funziona?

Il lazy loading è una tecnica di ottimizzazione che rende il caricamento del contenuto visibile all'utente e ritarda il download e il rendering del contenuto below the fold.

Se il tuo sito Web ha molte immagini e video ad alta risoluzione, il tuo sito non deve caricarsi lentamente. Può dare la priorità a queste immagini e video critici, il che riduce notevolmente i tempi di caricamento.

Ecco come funziona:

  • Il browser crea il DOM della pagina Web senza scaricare immagini e precaricare video.
  • Le immagini che verranno scaricate e i video da precaricare si basano sui contenuti inizialmente visibili determinati da JavaScript.
  • Il caricamento lento carica un'immagine o un video solo quando un visitatore lo visualizza sullo schermo.

Immagini e video non vengono caricati in anticipo fino a quando non sono effettivamente necessari. Se non visiti più parti del sito Web, alcune di queste immagini non verranno mai caricate.

Il caricamento lento è fondamentalmente il caricamento basato sulla priorità delle immagini e dei video di WordPress. È un modo estremamente efficace per ottenere il meglio da entrambi i mondi. Puoi avere sia un sito Web fantastico con grafica e velocità eccezionali.

Come aggiungere il lazy loading di WordPress al tuo sito web

Ci sono due modi per aggiungere il lazy loading al tuo sito. Puoi farlo con un plugin per WordPress e manualmente. Per garantire il successo di questo compito è importante conoscere entrambi i metodi.

1. Implementazione del caricamento lento utilizzando un plug-in

Puoi eliminare tutti i problemi di caricamento pigro di WordPress installando un plug-in. Ci sono molti plugin disponibili su WordPress, ma l'utilizzo di un plugin per l'ottimizzazione della velocità porterà altri vantaggi.

Puoi utilizzare plug-in come w3speedster che ottimizzeranno la velocità complessiva del sito implementando il caricamento lento. Hai il controllo assoluto su quali immagini puoi caricare in modo pigro e tutto questo può essere fatto senza alcuna codifica.

Se il tuo team non ha molta esperienza tecnica, l'utilizzo di un plug-in sarà l'opzione migliore. Una volta che hai finito di utilizzare il plug-in, controlla la tua velocità tramite PageSpeed ​​Insights. Se vedi un drastico miglioramento allora hai fatto il lavoro correttamente!

Puoi essere certo che i tuoi visitatori saranno accolti con un'ottima esperienza utente.

Segui questi passaggi per aggiungere correttamente il plugin w3speedster al tuo sito web.

Passaggio 1: installa e attiva il plug-in

Vai alla dashboard di WordPress, fai clic sulla sezione plugin, quindi fai clic su aggiungi nuovo. Trova il plug-in w3speedster e fai clic su carica. Selezionare il file zip e quindi fare clic su Installa.

Prima che il processo di installazione possa iniziare, WordPress ti chiederà di confermare se desideri aggiungere o meno il plug-in al tuo sito. Seleziona sì e il processo di installazione inizierà.

Una volta attivato il plug-in, puoi iniziare a goderne i vantaggi. Tuttavia, prima di ciò, dovresti andare alla sezione delle impostazioni.

Passaggio 2: utilizzare il pannello delle impostazioni per configurare il plug-in

Vai al plug-in w3speedster in modo da poter configurare le impostazioni per il caricamento lento. Qui puoi selezionare i file multimediali che vuoi che il tuo sito carichi lentamente.

Questo plug-in ti consente di caricare in modo pigro immagini, video, audio e iframe. Fare clic sulle caselle di controllo dei file multimediali che si desidera caricare in modalità lazy. Dopo aver fatto la tua scelta, salva le modifiche e poi esci.

2. Aggiungere il caricamento lento manualmente

Se non desideri aggiungere un altro plug-in al tuo sito WordPress, sarai felice di sapere che puoi farlo anche manualmente. Più browser come Chrome, Firefox e Opera supportano il caricamento lento nativo.

Devi solo aggiungere il attribuire a immagini e video selezionati. Una volta aggiunto l'attributo, abiliterai automaticamente il caricamento lento sul tuo sito.

Il caricamento lento è ora implementato sul tuo sito WordPress per impostazione predefinita. Se desideri attivare il caricamento lento solo per poche immagini, puoi farlo manualmente.

<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”300″ height=”300″>

Anche se questo è un modo fantastico per aggiungere il lazy loading al tuo sito Web WordPress. Dovresti sapere che non tutti i browser supportano questo metodo. Tuttavia, alcuni dei più popolari lo fanno. Quindi è ancora una scommessa sicura.

Pro e contro del caricamento pigro

Se non sei sicuro di implementare il lazy loading sul tuo sito Web WordPress. Quindi puoi considerare i pro e i contro per prendere una decisione.

Professionisti

  • Riduce l'utilizzo della larghezza di banda che riduce i costi di hosting.
  • Migliora la velocità del sito che migliora l'esperienza del visitatore.
  • Migliora l'usabilità mobile.
  • Migliora il posizionamento del sito.
  • Aumenta le possibilità di fidelizzazione degli utenti

Contro

  • Rallenta la velocità di scorrimento.

In che modo il lazy loading influisce sulla SEO?

I motori di ricerca eseguono la scansione del tuo sito Web e di altri elementi su di esso come immagini per fornire un risultato all'utente. Sebbene il caricamento lento possa aumentare la velocità del sito e migliorare le prestazioni.

In alcuni casi, può impedire ai motori di ricerca di indicizzare le immagini. Le immagini del tuo sito web possono anche aiutarti a posizionarti sui motori di ricerca. A volte un utente può trovare il tuo sito web interamente attraverso un'immagine. Quindi, sono essenziali per ottenere risultati organici.

Ecco alcune cose da controllare

  • Devi assicurarti che Google e altri motori di ricerca siano ancora in grado di eseguire la scansione delle tue immagini a caricamento lento. Questo può essere verificato utilizzando lo strumento "Visualizza come Google" nella sezione di scansione in Google Search Console. Se riesci a vedere le immagini nel codice sorgente, allora sei a posto.
  • Dovresti usare un tag alt per le immagini del tuo sito web. Ciò aiuterà i motori di ricerca a conoscere il contesto dell'immagine e come è correlata al resto del contenuto del tuo sito web.

Conclusione

Mentre il caricamento lento è un ottimo metodo per migliorare l'esperienza dell'utente, è importante fare lo stesso in modo strategico. Ad esempio, non dovresti caricare le immagini che appaiono nell'intestazione del sito. Perché è importante che queste immagini si carichino velocemente.

Oltre a questo, puoi caricare in modo pigro il resto dei media del sito. Il caricamento pigro ha più di un vantaggio. Migliora la velocità del sito, riduce l'utilizzo della larghezza di banda, offre un'ottima esperienza utente e migliora la SEO.