Widget asincroni e immagini leggere su Wordpress

Normalmente su un blog Wordpress è possibile contare una media di 10 immagini per pagina, basti pensare all'immagini in evidenza degli articoli in homepage, a quelle dei widget degli articoli recenti, più commentati o più popolari. Le immagini sono gli elementi che più influiscono sulla velocità di un sito web e bisognerebbe innanzitutto diminuire il loro peso, magari mediante un plugin, e poi fare in modo che non si aprano tutte in una volta. Per fare ciò occorre utilizzare plugin dal caricamento pigro (Lazy Load) che le faranno caricare solo quando saranno realmente visualizzate. Una tecnica molto simile è quella dei widget che caricano in modo asincrono e cioè dopo gli altri contenuti; è consigliato l'uso quando si hanno javascript che bloccano la visualizzazione della parte alta del sito.

1) a3 Lazy Load: Questo plugin incrementa la velocità di ogni sito web Wordpress e migliora l'esperienza visiva dell'utente che lo visita da PC, tablet e mobile. Una volta attivo potrete decidere ciò che debba caricarsi in modo asicrono come le immagini dei post, dei widget o le thumbnails (le cosiddette immagini in evidenza), ma anche gravatars, video e iframes. Qualora fosse presente un elemento incompatibile con il plugin "a3" è possibile escluderlo aggiungendo al codice termini come: no-lazy, lazy-ignore, image-235 o una classe personalizzata.

2) Lazy Widget Loader: è un ottimo plugin che permette di rendere asincrono qualsiasi widget di Wordpress. L'unico inconveniente è che i widget di testo non sono facili da identificare dal nome perché vengono associati a un numero (es. Text-1, Text-2, Text-3...), per capire di quale si tratta bisognerebbe utilizzare la funzione "Ispeziona Elemento" di una pagina del sito.

3) Asynchronous Widgets: permette di caricare qualsiasi widget in modo asincrono tramite una chiamata AJAX.

4) Lazy Load: questo è il plugin più semplice fra i vari Lazy Load, utilizza jQuery.sonar per caricare solo una foto quando è visibile nella pagina.

5) BJ Lazy Load: proprio come a3 Lazy Load serve per velocizzare il sito e risparmiare il consumo della banda. Utilizza jQuery e rende più leggero il caricamento di immagini e iframe. I visitatori che non usano JavaScript otterranno l'elemento originale in versione noscript.

LEGGI ANCHE: Come caricare javascript esterni in asincrono