Prepariamo i nostri siti per lo 'Speedgeddon' di Google!

Già nel 2015 avevamo assistito all'importante passo in avanti fatto da Google che dal famoso 21 Aprile aveva ufficialmente premiato e inserito come fattore di ranking la compatibilità dei siti con i dispositivi mobili, passaggio che era stato ribattezzato 'Mobilegeddon' vista la vera e propria rivoluzione che i webmaster affrontarono per aggiornare i propri siti ad un layout responsive.

A questo avvenimento epocale molto probabilmente farà seguito un passaggio simile, dato che Google sta dando sempre più importanza alla velocità di caricamento dei siti web. Infatti nella Google Search Console troviamo già il nuovo report di velocità per la varie pagine che ci permette di tenere traccia di eventuali pagine lente e che necessitano di un miglioramento in fatto di prestazioni, magari perchè ci siamo dimenticati di aver inserito un'immagine troppo pesante oppure dei file CSS molto grandi. La Google Search Console ci notificherà via email, come già eravamo abituati per altre funzionalità, se alcune pagine presentano dei problemi in quanto troppo lente.

Tuttavia questo è solo l'inizio, il 'peggio' deve ancora arrivare dato che il team di Google sta lavorando per integrare direttamente in Chrome una speciale 'badge' che contrassegnerà i siti lenti, rendendo di fatto evidente, per un visitatore, che il sito che sta aprendo caricherà la pagina molto lentamente. Pertanto l'effetto sarà quello di incoraggiarlo ad abbandonare quel sito a beneficio di altro più veloce e performante.

Quindi non solo un fattore di ranking, la velocità di caricamento delle pagine web diventerà anche una sorta di fattore valutativo da parte degli utenti che utilizzano Chrome per navigare, che a colpo d'occhio potrebbero essere in grado di decidere se cliccare o meno sul risultato di una SERP contrassegnato come lento, oppure se decidere a favore di un altro più veloce. Il team di Google sta lavorando e sperimentando su una possibile metodologia di notifica per l'utente, nell'immagine seguente vediamo un'ipotesi di come potrebbe presentarsi il caricamento di una pagina lenta e di una veloce in Chrome:

chrome-slow.png

Nell'immagine di sinistra Chrome potrebbe visualizzare un avviso riguardo al fatto che il caricamento del sito di solito avviene lentamente, mentre a destra una barra di caricamento in verde indica un sito che effettua un caricamento veloce.

Un utente trovandosi di fronte all'avviso di un sito lento potrebbe essere indotto ad abbandonarlo, aumentando quindi il bounce rate a favore di un altro sito non etichettato in questo modo. Ad oggi la velocità di caricamento di una pagina web è cruciale specialmente per le visite che provengono dai dispositivi mobili, gli utenti sono sempre più impazienti e si aspettano di ricevere i risultati cercati in un tempo molto ridotto.

Google assegna un trattamento preferenziale per i siti che caricano velocemente, più veloce sarà il caricamento e tanto minore sarà il bounce rate. Inoltre se un sito è veloce si avrà maggiore possibilità di raggiungere il posizionamento in prima pagina rispetto a siti lenti che hanno un bounce rate elevato. Per avere una possibilità concreta di posizionarsi in prima pagina nei risultati di ricerca di Google, il sito deve avere un tempo di caricamento inferiore ai 3 secondi.

Per fortuna esiste un tool gratuito messo a disposizione direttamente da Google per poter evidenziare eventuali problemi da risolvere e i miglioramenti necessari per aumentare la velocità e le prestazioni del proprio sito web, si tratta di Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
Il test di Google PageSpeed genera un report sulle performance di una pagina sia per i dispositivi mobili che desktop e fornisce consigli riguardo ai vari aspetti che dovrebbero essere migliorati. Alla base di tutto, c'è un punteggio assegnato alla pagina valutando le performance ottenute, un vero e proprio grado di classificazione.
Questo punteggio viene determinato tramite Lighthouse che è un software open-source di Google in grado di analizzare velocemente qualsiasi indirizzo URL e produrre un dettagliato report. Il punteggio si suddivide in 3 categorie:

  • Oltre 90: la pagina è considerata veloce
  • Tra 50 e 90: la pagina è considerata nella media
  • Al di sotto di 50: la pagina è considerata lenta

Quindi il nostro obiettivo sarà quello di evitare pagine che ricadono nella terza categoria con un punteggio al di sotto di 50, se staremo al di sopra di questa soglia il nostro sito non verrà etichettato come lento.

Per chi fosse interessato ad approfondire l'utilizzo di questo strumento, segnalo che il noto componente JSitemap Pro include già un'integrazione specifica tramite le API di Google per fornire i risultati del test PageSpeed Insights comodamente nel backend di Joomla!, in maniera semplificata e con l'aggiunta di informazioni specifiche per la SEO:

pagespeed.jpg

Ma facciamo un pò di chiarezza sui principali indici del report in modo da capire cosa significano:

  • First Contentful Paint (FCP) misura il tempo che intercorre tra la navigazione e il momento in cui il browser esegue il rendering del primo bit di contenuto dal DOM. Questo è un valore medio calcolato negli ultimi 30 giorni
  • First Input Delay (FID) misura il tempo che intercorre tra la prima volta in cui un utente interagisce con il tuo sito (ovvero quando fa clic su un collegamento, tocca un pulsante o utilizza un controllo personalizzato basato su JavaScript) e il momento in cui il browser è effettivamente in grado di rispondere a tale interazione
  • L'indice di velocità mostra la velocità con cui i contenuti di una pagina sono visibilmente popolati
  • First Meaningful Paint misura quando il contenuto principale di una pagina è visibile
  • First CPU Idle segna la prima volta in cui il thread principale della pagina è libero di gestire l'input
  • Il tempo di interazione è il tempo necessario affinché la pagina diventi completamente interattiva
  • Il massimo potenziale First Input Delay che i tuoi utenti potrebbero sperimentare è la durata, in millisecondi, dell'attività più lunga
  • Tempo di esecuzione del JavaScript include il tempo impiegato per l'analisi, la compilazione e l'esecuzione degli script

Fin qui tutto bene, ma la domanda sorge spontanea... come faccio a migliorare i valori di questi indici e le performance della pagina? Google PageSpeed fornisce una serie di tecniche e suggerimenti atti a risolvere potenziali riduzioni nelle prestazioni di caricamento tra i quali:

  • Elminare le risorse che bloccano la visualizzazione dei contenuti, le cosiddette Render Blocking Resources, quindi file JS o CSS che bloccano l'analisi del DOM
  • Utilizzare immagini ottimizzate, l'impiego di immagini pesanti e non compresse in modo adeguato rappresenta il fattore più comune di eccessivo dimensionamento di una pagina web
  • Caricare le immagini in modalità lazy-load, ovvero fare in modo che le immagini fuori schermo vengano caricate soltanto quando l'utente scorre la pagina per visualizzarle
  • Minimizzare i file JS e CSS, in modo da ridurre le dimensioni dei dati scaricati e il tempo di analisi degli script
  • Minimizzare il codice HTML, in modo da ridurre le dimensioni totali dei dati scaricati
  • Combinare più file JS e CSS in un file singolo in modo da ridurrre il numero di richieste HTTP
  • Precaricare alcune risorse grazie al protocollo HTTP/2 o all'attributo rel=preload
  • Evitare redirect tra pagine
  • ... e ovviamente avere un buon server con ottime performance e tempi di risposta molto brevi!

Se dovessimo gestire un sito statico in HTML probabilmente non avremmo altra scelta se non occuparci di tutte queste ottimizzazioni 'a mano', fortunatamente utlizzando Joomla! esistono una serie di estensioni in grado di automatizzarle e permetterci di raggiungere un punteggio più alto in modo molto semplice.

Il plugin più conosciuto è sicuramente JCH Optimize reperibile a questo indirizzo: https://www.jch-optimize.net che è distribuito in 2 versioni differenti, una gratuita e una versione PRO a pagamento. Per siti professionali e per ottenere risultati migliori si consiglia la versione PRO che include funzionalità molto più avanzate come la gestione del protocollo HTTP/2.

jch_optimize.jpg

Segnalo inoltre il nuovissimo plugin JSpeed del noto sviluppatore JExtensions Store reperibile a questo indirizzo: https://storejextensions.org/extensions/jspeed.html che è molto completo e potente. Viene distribuito in un'unica versione a pagamento che include tutte le funzionalità necessarie a gestire i vari miglioramenti, in particolare ha una gestione avanzata dell'ottimizzazione delle immagini che è di più facile utilizzo rispetto a JCH Optimize, infatti le immagini vengono ricampionate e ridimensionate automaticamente 'al volo' quando la pagina è richiesta per la prima volta per poi essere memorizzate nella cache. Inoltre il plugin è in grado di creare automaticamente un srcset HTML5 per ogni immagine, infatti per ciascuna immagine da ottimizzare JSpeed può generare fino a 4 immagini con diversa risoluzione e qualità.

jspeed.jpg

Esistono anche altri plugin gratuiti che implementano singole funzionalità rispetto a soluzioni già complete di tutto come JCH Optimize PRO e JSpeed, segnalo ad esempio:

In questo articolo abbiamo fatto una panoramica su ciò che ci aspetta nel corso dei prossimi mesi e su quali sono gli strumenti a disposizione per monitorare e migliorare le performance dei nostri siti. Così come è accaduto per il passaggio al mobile-friendly e al protocollo HTTPS, dobbiamo entrare nell'ottica che anche la velocità di caricamento diventerà un aspetto assolutamente fondamentale e necessario per mettere online siti visti di buon occhio da Google.