Esistono molti approcci diversi per implementare il lazy loading sul tuo sito web. Ti invitiamo a dare un'occhiata alla nostra classifica dei migliori plugin per WordPress che supportano il lazy loading.
Esistono numerosi plugin gratuiti nella directory di WordPress che possono essere utilizzati per il caricamento differito di immagini e video. Dopo averne considerati alcune decine e averne testati alcuni, ne abbiamo individuati due che migliorano significativamente le prestazioni del sito web. Se desideri implementare il caricamento differito, valuta le opzioni seguenti.
Utilizzo di WP Rocket (Premium)
WP Rocket è l'approccio più semplice per implementare il caricamento lento sul tuo sito web. Inoltre, il processo di abilitazione richiede meno di un minuto. LazyLoad è il nome del plugin che WP Rocket include come versione di caricamento lento delle immagini.
Quando LazyLoad è attivo, WP Rocket interromperà immediatamente il caricamento differito delle immagini native di WordPress per prevenire eventuali problemi.
Per abilitare la funzionalità LazyLoad di WP Rocket, segui i passaggi sottostanti:
- Puoi attivare LazyLoad andando su Impostazioni > WP Rocket > pannello Media all'interno dell'installazione di WordPress.
- Fare clic su "Abilita per le immagini" nell'area LazyLoad nella parte superiore dello schermo.
- Dopo aver effettuato la selezione, fare clic su "Salva modifiche".
Questo è tutto ciò che deve essere fatto. Di conseguenza, i visitatori riscontreranno lentezza nel caricamento delle foto.
LazyLoad offre il caricamento differito per elementi HTML aggiuntivi, come iframe e video, a differenza dell'approccio nativo offerto da WordPress. Inoltre, utilizza il caricamento differito per le immagini di sfondo se tali immagini vengono applicate in linea a specifici componenti HTML.
Se desideri utilizzare la funzionalità nativa di caricamento lento delle immagini di WordPress, puoi disattivare l'opzione LazyLoad in WP Rocket. D'altra parte, la nuova proprietà di caricamento non è ancora supportata da tutti i browser. Inoltre, l'installazione di WordPress è incentrata solo sulle foto. Pertanto, LazyLoad di WP Rocket rimane l'alternativa migliore, soprattutto se il tuo sito web contiene molte immagini, video e contenuti incorporati.
Cose da notare durante l'attivazione del caricamento lento nativo di WP Rocket
Sebbene WP Rocket non includa la compatibilità automatica con i browser Chrome che utilizzano il lazy loading nativo, è comunque possibile scegliere il supporto per il lazy loading nativo di Chrome abilitandolo tramite un plugin di supporto. Allo stesso modo, WP Rocket non include la compatibilità automatica con altri browser che utilizzano il lazy loading nativo.
Utilizzando questo utile plugin puoi garantire quanto segue:
- Ognuna delle tue foto conterrà la sintassi HTML essenziale per utilizzare il caricamento differito nativo; i browser compatibili con Chrome utilizzeranno automaticamente il caricamento differito nativo; tutti gli altri browser utilizzeranno automaticamente LazyLoad di WP Rocket.
- Puoi scegliere se continuare a utilizzare la nostra solida tecnologia LazyLoad oppure passare alla funzionalità di caricamento differito integrata in Chrome.
Dipende tutto da te! Per prima cosa, prova entrambi gli approcci nella tua sede e scegli quello più adatto a te.
Utilizzo di a3 Lazy Load (gratuito)
Se stai cercando un'opzione gratuita, ti consigliamo di utilizzare il a3 L az y Load . Puoi disattivare il caricamento differito per immagini e pagine specifiche utilizzando il plugin a3. Inoltre, consente il caricamento ritardato dei video sul tuo sito web :
Inoltre, questo plugin supporta il caricamento differito di immagini e video esterni. L'implementazione principale di WordPress non esegue tale azione.
Puoi installare e attivare questo plugin dalla dashboard di WordPress. Ora puoi personalizzare le impostazioni dello strumento.
Passaggio 2: regola le impostazioni dell'immagine del plugin
Vai su Impostazioni > a3 Lazy Load. Se guardi sotto Attivazione Lazy Load, il plugin è attivato per impostazione predefinita dopo l'installazione.
Ora, apri la scheda Immagini di LazyLoad. Puoi (1) scegliere quali immagini del sito web ritardare e (2) fornire un fallback per i browser web che rifiutano JavaScript. Per le immagini di cui non vuoi ritardare il caricamento, puoi (3) impostare una classe CSS:
Le impostazioni predefinite hanno tutte le opzioni abilitate . Ti consigliamo vivamente di mantenere questa impostazione. Crea una classe CSS che ti permetta di saltare il caricamento differito per immagini specifiche.
Passaggio 3: regola le impostazioni video del plugin
Il passaggio successivo è la scheda "Lazy Load" per video e iframe. Con a3 Lazy Load, puoi selezionare il caricamento ritardato per clip specifiche, proprio come fai con le immagini.
Il plugin consente la visualizzazione di video in (1) contenuti e widget e fornisce (2) una funzionalità di fallback per i browser che non supportano JavaScript:
Puoi specificare una classe CSS nelle impostazioni video (3) per escludere determinati video dal caricamento differito. Se desideri una configurazione più semplice, utilizza la stessa classe scelta nella sezione immagini.
Altri plugin di caricamento lento per WordPress
Oltre a WP rocket e a3 Lazy Load, sono disponibili diversi plugin utili per il caricamento lento che potresti prendere in considerazione:
- Caricamento lento per i video
- BJ Lazy Load
- Carica altri prodotti per WooCommerce
- WordPress Infinite Scroll – Ajax Carica altro
- Caricamento condizionale di Disqus
- Caricamento lento per i commenti
Considerazioni finali
È fondamentale essere consapevoli di eventuali conflitti ogni volta che si aggiorna o si modifica il proprio sito web. Consultate questo elenco di problemi frequenti associati al caricamento differito se scoprite che l'attivazione del caricamento differito ha reso inutilizzabile qualsiasi aspetto del vostro sito web.
È possibile che si verifichino incompatibilità a causa della mancata applicazione della funzione di caricamento differito alle immagini caricate da plugin come Revolution Slider ed Envira Gallery. L'elenco completo dei plugin compatibili è disponibile qui.
Questo articolo, insieme a molti altri, è disponibile sul blog Seahawk Media .
