I migliori plugin Lazy Load per rendere più veloce il tuo sito WordPress
Pubblicato: 2019-04-01I siti con un sacco di immagini possono richiedere un'eternità per essere caricati. Per ogni immagine, questa è un'altra richiesta HTTP e più tempo i tuoi utenti devono aspettare frustrati mentre le pagine si caricano lentamente.
Allora qual è la soluzione? Caricamento pigro.
Continua a leggere o vai avanti usando questi link:
- Il caricamento lento nativo è arrivato con WordPress 5.5
- È più necessario un plug-in?
- Accesso a un'interfaccia
- Compatibilità del browser
- Ottimizzazione extra
- Ci sono dei vantaggi nel caricamento lento nativo?
- I migliori plugin di carico pigro
- Maggiori informazioni sul caricamento lento
Il caricamento lento può velocizzare notevolmente i siti con molte immagini e l'abilitazione sul tuo sito non richiede tempo.
In poche parole, forza il caricamento delle immagini solo quando sono "above the fold" - in altre parole, verranno caricate solo le immagini che vengono visualizzate nel browser di un utente.
Quindi, se hai una pagina con 10 temi WordPress a schermo intero freschi e gratuiti, verranno caricate solo le prime immagini nel post e le altre verranno caricate mentre l'utente scorre la pagina verso il basso.
Il caricamento lento nativo è arrivato con WordPress 5.5
Il caricamento lento è ancora una funzionalità relativamente nuova per WordPress.
Funziona aggiungendo l'attributo "lazy" e impostando il valore su "loading" sulle tue immagini, che viene poi elaborato dal browser in uscita.
Se hai un plug-in di caricamento lento a cui sei fedele o attraversi fasi in cui non desideri che il caricamento lento sia abilitato, sarai felice di sapere che puoi disabilitarlo.
Alcuni plugin lo fanno automaticamente, tuttavia, se devi farlo manualmente, vai semplicemente al tuo file functions.php e aggiungi quanto segue:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Ciò disabiliterà la funzione di caricamento lento di WordPress, il che significa che sarai in grado di utilizzare un plug-in di tua scelta senza il rischio di conflitti.
È solo una riga di codice, ma se non ti senti a tuo agio ad aggiungerla, puoi scaricare questo semplice plugin che lo farà per te.
È più necessario un plug-in?
Ti starai chiedendo se utilizzare un plug-in ora che WordPress offre il caricamento lento nativo.
Continua a leggere, perché in realtà ci sono alcuni motivi per cui potresti voler rimanere con un plug-in:
Accesso a un'interfaccia
Un buon plug-in di caricamento lento come Smush offre un'interfaccia con opzioni per modificare impostazioni specifiche, nonché la possibilità di attivare e disattivare il caricamento lento con la semplice pressione di un pulsante.
Queste opzioni possono variare dai tipi di immagine che verranno caricati in modo lento, alle pagine a cui si applica il caricamento lento. Se desideri modificare impostazioni come queste senza un plug-in, dovrai approfondire il codice e aggiungere queste eccezioni manualmente.
Compatibilità del browser
Un altro grande vantaggio è che la maggior parte dei plugin funzionerà su tutti i browser. Safari è uno dei principali browser che non supporta l'attributo di caricamento, quindi se hai un sito Web con molte immagini, potresti vedere rimbalzare gli utenti di browser non supportati. Questo è qualcosa di cui non devi preoccuparti quando usi un plugin.
Ottimizzazione extra
La maggior parte dei plugin offre molto di più del semplice caricamento lento. L'introduzione di un plug-in per l'ottimizzazione delle immagini nel tuo sito Web è forse una delle migliori decisioni che tu possa mai prendere.
Plugin come Smush possono aiutarti a superare i consigli PageSpeed di Google relativi alle immagini e dare al tuo sito una spinta in più di velocità: il caricamento lento è solo l'inizio!
Ci sono dei vantaggi nel caricamento lento nativo?
In superficie, può sembrare che un plug-in farà tutto ciò che il caricamento lento nativo può fare e altro ancora.
Anche se questo è tecnicamente corretto, la differenza principale è che la maggior parte dei plugin comporterà l'introduzione di una libreria JavaScript, da cui dipenderà il tuo sito.
Il caricamento lento nativo è più semplice e diretto e non richiede molto codice aggiuntivo.
Il nostro plug-in per l'ottimizzazione delle immagini, Smush, offre in realtà la propria versione del caricamento lento nativo.
Funziona sulla stessa base di WordPress ma supporta tutti gli stessi formati di immagine di Smush.
Il caricamento lento nativo è forse qualcosa che può essere utilizzato come base per altri sviluppi in futuro, ma almeno per ora, i plug-in sono la soluzione giusta per la maggior parte dei siti.
Se preferisci l'idea di un plug-in per risolvere le tue esigenze di caricamento lento, abbiamo messo insieme una raccolta di plug-in di caricamento lento gratuiti.
Ottimizzazione dell'immagine Smussh
Smush è il plug-in di ottimizzazione delle immagini all-in-one più popolare per un motivo. Includiamo tutto ciò di cui hai bisogno per caricare più velocemente le tue immagini.
Il caricamento lento è disponibile sia sulla versione gratuita di Smush che su Smush Pro turbo, che viene fornito completo di Smush Pro CDN e, a differenza del caricamento lento nativo, è compatibile con tutti i browser.
Per attivare il caricamento lento con Smush, abbiamo reso il processo estremamente semplice. Tutto quello che devi fare è andare alla sezione Lazy Loading in Smush e premere il pulsante Attiva . Questo è tutto.
È possibile regolare ulteriormente le impostazioni una volta attivato il caricamento lento, ma non è necessario. Le impostazioni predefinite di Smush e Smush Pro sono tutto ciò di cui hai bisogno per vedere un notevole miglioramento delle prestazioni.
a3 Carico pigro
A3 Lazy load è un popolare plugin per il caricamento lento di immagini, iframe, video e altri elementi sul tuo sito.
Ha molte impostazioni in modo da poter personalizzare il modo in cui desideri caricare le risorse sul tuo sito.
È inoltre testato per essere compatibile al 100% con plug-in popolari come WooCommerce, Advanced Custom Fields e una varietà di CDN.
Pazzo pigro
Ecco un altro plug-in di caricamento lento ultra snello che funziona. Nessuna configurazione complicata richiesta.
A seconda del tema o dell'utilizzo di jQuery, Crazy Lazy utilizzerà opzionalmente una versione modificata del plugin jQuery Unveil.js o la libreria JavaScript nativa lazyload.js.
Carico pigro per i video
Non tutti i plug-in di caricamento lento funzionano con i video, il che è un peccato perché i video possono aggiungere più volume alle dimensioni del file della tua pagina Web rispetto alle immagini.
Lazy Load for Videos può aiutarti a caricare pigri i video ospitati su Vimeo o YouTube. Carica un'immagine segnaposto e carica l'intero video e lettore video solo se un visitatore fa clic su di esso.
Questo è essenziale se il tuo sito ha molti video e scegli un plug-in leggero che non includa il caricamento lento per i video.
Maggiori informazioni sul caricamento lento
L'utilizzo di un plug-in è il modo più semplice per aggiungere il caricamento lento al tuo sito, ma non è l'unico modo. Puoi anche utilizzare JavaScript sul tuo sito se desideri una soluzione più snella.
Se vuoi saperne di più, dai un'occhiata a Come differire le immagini fuori schermo in WordPress con il caricamento lento per un'analisi completa di come funziona il caricamento lento e come ricreare la tecnica sul tuo sito.
Se vuoi saperne di più sulla funzione di caricamento lento di WordPress, dai un'occhiata all'annuncio.
Il modo più semplice per iniziare con il caricamento lento è con Smush free o Smush Pro.
Smush Pro aggiunge altre funzionalità che possono aiutarti con altre opportunità di Google PageSpeed Insights. Può aiutarti a fornire immagini nei formati di nuova generazione convertendo le tue immagini in file WebP e ridimensionando correttamente le immagini ridimensionando le tue immagini con Smush Pro CDN. Smush Pro è persino compatibile con il popolare plug-in WP Retina 2x, quindi puoi caricare pigramente quelle enormi immagini Retina senza rallentare WordPress.
Prova Smush Pro gratuitamente e scopri quanta differenza può fare per il tuo sito.
tag: