Uno degli strumenti più utilizzati dai webmaster per testare le performance di un sito internet è Google PageSpeed Insights. Attraverso lo strumento di Google, infatti, è possibile testare il proprio sito alla ricerca degli errori più comuni. Tra i vari messaggi e warning messi a disposizione da Google oggi analizzeremo questo: Rimanda immagini fuori schermo
Vedremo assieme cosa significhi rimandare le immagini fuori schermo e, soprattutto, cercheremo di porre rimedio a questo errore attraverso il caricamento differito ed asincrono dei contenuto multimediali in modo semplice e veloce.
Ti proporrò, dunque, alcune soluzioni, per effettuare il caricamento in lazy dei contenuti con particolare attenzione verso i neofiti e chi lavora con i Cms come WordPress.
Indice dei contenuti
- Cosa significa rimandare le immagini fuori schermo
- Caricare contenuti tramite AJAX
- Infinite scroll su WordPress
- Come rimandare le immagini fuori schermo in WordPress
- Conclusioni
Cosa significa rimandare immagini fuori schermo
Cerchiamo di capire assieme cosa voglia dire questo messaggio di errore e perché si tratta di uno tra i suggerimenti più importanti messi a disposizione dal tool di testing di Google e da Ligthhouse. Quando un utente carica la pagina di uno nostro sito, soprattutto su mobile, la porzione di schermo visibile è sostanzialmente molto ridotta. In base al dispositivo questa porzione cambia ma, generalmente, non si va oltre le centinaia di pixel su i dispositivi mobile.
Nonostante questo, se gli elementi come le immagini e i vari nodi del dom risultano già presenti in pagina, chi apre il sito per la prima volta sarà costretto a scaricare tutti i contenuti della pagina, anche se non dovesse usufruirne. Non è detto, infatti, che l’utente scrolli fino al footer del sito e potrebbe di conseguenza aver scaricato dei contenuti inutilmente.
Questo incide chiaramente sul peso del nostro sito e, di riflesso, sulla velocità. Sebbene siano varie le operazioni che possiamo svolgere, soprattutto lato caching, per far si che l’utente riesca a fruire velocemente i nostri contenuti, il fattore degli elementi fuori schermo impatta tanto sul caricamento di un sito.
Facciamo un esempio concreto. Facebook utilizza un metodo che si chiama infinite scroll. Provate ad aprire il vostro feed e vi renderete immediatamente conto della tattica usata dal social network. Al caricamento della pagina, infatti, sono presenti solo pochissimi contenuti, quando l’utente ha effettuato piena fruizione degli elementi della pagina scrollando fino in fondo, il social fa partire una richiesta AJAX che non fa altro che dire al browser: ‘Hei, l’utente è arrivato a fondo pagina, carica altri contenuti!’
E’ facile capire l’importanza di questa operazione. L’utente scaricherà i contenuti volta per volta e questo gli permetterà di avere un’esperienza utente senza dubbio migliore. Pensate, infatti, se ogni volta che apriamo Facebook quest’ultimo dovesse caricare tutti i contenuti del nostro feed! Sarebbe da pazzi, chiaramente.
Caricare contenuti tramite AJAX
Ora che abbiamo capito l’importanza del caricamento differito, cerchiamo di analizzare la faccenda dal punto di vista tecnico. AJAX è l’acronimo di Asynchronous JavaScript and XML. Si tratta di una tecnica di sviluppo software nata nel lontano 2006. Attraverso questa metodologia è possibile sfruttare l’aggiornamento asincrono dei contenuti.
Sono tantissimi, infatti, i casi in cui abbiamo bisogno che soltanto parte di una pagina web sia ricaricata. Per esempio, nella scheda prodotto di un’e-commerce è essenziale poter cambiare le varianti di un singolo prodotto senza dover di volta in volta aggiornare la pagina per conoscere il prezzo di quel prodotto in base alla variante selezionata.
In questo, come altri casi, entra in gioco AJAX. Facendo partire una chiamata AJAX, infatti, è possibile caricare ulteriori contenuti all’interno della pagina al verificarsi di un determinato evento, come lo scroll a fine pagina per quanto riguarda Facebook. Nulla, comunque, ci vieta di inserire un bottone con “mostra di più”, il concetto sostanzialmente è lo stesso.
Google, dunque, ci sta chiedendo di caricare in modo differito ed asincrono tutti quei contenuti che, per loro natura, non possono essere visualizzati immediatamente dall’utente.
Ora che abbiamo capito largamente la teoria, passiamo alla pratica. Esistono diverse librerie JS, basate soprattutto su jQuery, che ti permettono di caricare contenuti in modo differito. La prima che voglio presentarti è jScroll .
jScroll non è altro che un plugin jQuery utilizzato per l’infinite scroll. Si tratta di una libreria scritta da Philip Klauzinski. Utilizzarla è davvero semplice, basta seguire la documentazione che trovi sul sito stesso della libreria. Su CodePen, ad ogni modo, trovi alcuni esempi molto semplici da poter seguire.
Un’altra libreria openSource e molto semplice da utilizzare è infinite-scroll– Si tratta di una libreria che io utilizzo molto spesso, poiché è ben documentata oltre che ampiamente customizzabile in base alle proprie esigenze.
Questo sono solo due delle librerie più utilizzate, ma sul web ce ne sono davvero a decine, basta saper cercare. Le due che ho riportato, ad ogni modo, dovrebbero già fare al tuo caso.
Infinite scroll su WordPress
Chiaramente non esistono solo librerie pure, ma anche ottimi plugin che ti permettono di caricare contenuti differiti ed eseguire infinite scroll su WordPress. Certo, i plugin possono svolgere gran parte del lavoro, ma anche da parte tua ci sarà bisogno di un valido aiuto. Dovrai, infatti, essere in grado di identificare il contenitore nel quale vorrai caricare i tuoi contenuti.
Il plugin che mi sento di consigliarti si chiama Ajax Load More e ti permette di caricare in modo differito qualsiasi tipo di contenuto WordPress: pagine, post, commenti e molto altro ancora.
L’unica cosa che dovrai fare è quella di generare lo shortcode attraverso il pratico shortcode builder messo a disposizione dal plugin stesso ed inserirlo direttamente nel file del tuo template. Il plugin offre diverse features, ti elenco di seguito alcune delle più interessanti:
- Lo Shortcode Builder: Questo comodo strumento ti consente di creare delle query personalizzate in base alle nostre esigenze.
- Facile da estendere: il plugin è molto semplice da estendere per chi ha dimestichezza con il codice. Si possono quindi matchare diversi tipi di contenuti, anche custom.
- Compatibile con il multisite: Il plugin può essere utilizzato anche su diversi siti gestiti attraverso il multisite di WordPress.
Come rimandare le immagini fuori schermo in WordPress
Se utilizzi WordPress, voglio subito rassicurarti. Dalla versione 5.0 del Cms, infatti, gli sviluppatori hanno introdotto il caricamento in lazy degli elementi multimediali presenti in pagina come le immagini che, ti ricordo, andrebbero sempre pubblicate in formati recenti.
Per usufruire del caricamento Lazy in WordPress dei tuoi contenuti, quindi, ti basta aggiornare WordPress all’ultima versione.
Non dovrai eseguire alcuna altra operazione o installare plugin aggiuntivi.
Conclusioni
Un sito web che si rispetti, soprattutto con una grossa mole di contenuti, non può esimersi dal caricare contenuti in modo dinamico, differito ed asincrono.
Questa metodologia ti permetterà di migliorare notevolmente le performance. Un utente che ha la possibilità di fruire i contenuti sul tuo sito in modo semplice è un utente che tornerà a farti visita.
Se conosci altri metodi per risolvere l’errore specifico di PageSpeed scrivimi pure: sarò lieto di testare e risponderti!