Sapevi che le performance tecniche del tuo sito impattano molto sul posizionamento?

Come abbiamo già accennato in altri articoli, lo scopo di Google è mostrare ai propri utenti il risultato migliore per ogni ricerca. Al di là di questioni legate ad autorevolezza del dominio e qualità dei contenuti, uno degli elementi fondamentali di ogni sito è la velocità di caricamento delle sue pagine.

Gli utenti infatti desiderano una navigazione rapida, così da ottenere la risposta alla propria query - qualunque essa sia - nel minor tempo possibile. Tempi di caricamento lenti spesso portano l'utente ad abbandonare la pagina in favore di un sito più rapido, il che porta quasi necessariamente a un minor tasso di conversione.

Ecco perché, se vuoi ottimizzare il tuo sito, devi prestare attenzione ad alcuni importanti aspetti di technical SEO legati alle performance tecniche.

Oltre alla velocità di caricamento delle pagine, dovrai tener conto di altri elementi quali:

  • esperienza utente percepita da Google, ovvero quanto le pagine sono facilmente fruibili e navigabili dall'utente;
  • responsiveness, cioè il fatto che un sito sia mobile friendly o meno (quando un utente raggiunge una pagina da mobile, la probabilità di "rimbalzo" è molto maggiore qualora la pagina non sia mobile-friendly).

Nell'ambito del technical SEO, quindi, assieme alle tematiche riguardanti la leggibilità di un sito da parte dei motori di ricerca (che abbiamo approfondito in questo articolo sulla crawlability) vanno considerate anche quelle riguardanti l'esperienza utente, che impattano sull'interazione diretta tra utente e pagina.

Fortunatamente Google offre due strumenti con cui potrai misurare le performance del tuo sito: PageSpeed Insights e Test di compatibilità con dispositivi mobili, tool fondamentali per condurre una analisi SEO di qualità. 

Sei pronto per scoprire a cosa servono e come utilizzarli? Si comincia!

Google PageSpeed Insights

PageSpeed Insights offre una panoramica piuttosto dettagliata sulle prestazioni tecniche del tuo sito.

Inserendo l’indirizzo URL nell’apposito campo, otterrai un risultato simile al seguente:

google-pagespeed

Come accennato prima, se l’esperienza utente su dispositivi mobili e desktop è lenta agli occhi di Google, il tuo sito rischia di essere sfavorito nei risultati di ricerca e quindi di non portare ad alcuna conversione.

Infatti, un alto bounce rate, cioè la percentuale di utenti che esce dal tuo sito subito dopo aver visitato una delle sue pagine, è percepito da Google come un segnale negativo.

La maggior parte dei problemi rilevati da PageSpeed Insights si può quindi riassumere nei seguenti punti:

  • Codici HTML, CSS e/o JavaScript non compressi
  • Cache del browser non impostata
  • Risorse JavaScript o CSS che bloccano la visualizzazione di contenuti above-the-fold
  • Immagini di grandi dimensioni
  • Compressione Gzip non attiva

Come risolvere i problemi rilevati da PageSpeed Insights

Siti su piattaforme CMS

I siti realizzati con i CMS più noti (ad esempio Wordpress o Joomla) non sempre consentono di intervenire sul codice per correggere le problematiche rilevate da Google. 

Dall'altro lato, esistono decine di plugin pronti all'uso che permettono di risolvere in parte questi problemi. Basta cercare su Google il problema rilevato accompagnandolo a una chiave come "wordpress plugin", e il gioco è fatto (una tipica ricerca può essere: "compress css and js wordpress plugin").

Dai un'occhiata ai plugin disponibili e scegline uno che sia compatibile con la versione del tuo CMS e che sia valutato positivamente dagli utenti. A questo punto, installa il plugin sulla tua piattaforma e seleziona le impostazioni che ritieni più appropriate; se hai fatto un buon lavoro, noterai fin da subito un miglioramento delle prestazioni del tuo sito.

N.B: prima di aggiungere un nuovo plugin, l'ideale sarebbe testarlo in locale onde evitare di causare malfunzionamenti sul tuo sito.

In generale, comunque, cerca di non installare sul tuo sito decine di plugin superflui. Questi infatti possono causare un notevole aumento dei tempi di caricamento ed impattare negativamente sulle performance del tuo sito.

Siti sviluppati su piattaforme proprietarie

Diversamente, siti sviluppati da zero (es. plain php) o su framework necessitano di un lavoro manuale, atto a minimizzare i problemi presenti sulla piattaforma. Sono comunque presenti diversi tool online in grado di ottimizzare i tempi di questo lavoro.

Ecco qualche consiglio su come migliorare le prestazioni di un sito sviluppato su piattaforme proprietarie.

1. Puoi risparmiare parecchi Kb di dati minimizzando CSS e JavaScript mediante tool come CSS Minifier. In questo modo il sito potrà servire agli utenti le risorse CSS e JavaScript già compresse.

E' possibile comprimere anche l'HTML aggiungendo, prima dello streaming di dati, un apposito script nell’index.php. Le risorse che non è possibile caricare in asincrono possono essere concatenate e compresse all’interno di un unico JavaScript o CSS, utilizzando tool online come Shrinker.

2. Imposta il browser caching in maniera che il browser dell'utente possa salvare in locale alcune risorse del sito.

Chi ha il proprio sito su server Apache può prendere spunto da queste impostazioni per il file .htaccess: https://varvy.com/pagespeed/leverage-browser-caching.html. 

Nel caso in cui il server sia Nginx, invece, è possibile seguire la guida presente a questo link: https://www.howtoforge.com/make-browsers-cache-static-files-on-nginx.

3. Aggiungi l'attributo async a quelle risorse JavaScript che impediscono la rapida visualizzazione della pagina.

Limitare il pre-rendering della pagina agli script strettamente necessari comporta tempi di caricamento più rapidi e, quindi, un rating migliore del sito da parte dei motori di ricerca. Attento però a fare i dovuti controlli prima di mettere in produzione: controlla quali JavaScript possono essere caricati in asincrono e quali invece è necessario caricare prima del rendering della pagina.

4. Ricordati di comprimere sempre le immagini.

File pesanti incidono notevolmente sui tempi di caricamento, per cui è importante effettuare l'upload di immagini già compresse. Idealmente, un file in alta risoluzione non dovrebbe superare i 100 Kb.

Test di compatibilità con dispositivi mobili

Da aprile 2015 Google privilegia i siti mobile-friendly. La rapidissima crescita nell'uso di smartphone e tablet ha imposto agli sviluppatori di creare siti fruibili anche su dispositivi mobile. Questo perché le pagine web devono essere in grado di adattare la disposizione dei propri contenuti su display più piccoli dei comuni monitor, senza però inficiare la semplicità di navigazione o l'esperienza utente.

Verifica che anche il tuo risponda ai più moderni standard inserendo l’URL nel tool, e attendi qualche secondo per ottenere i risultati dell’analisi. Se il tuo sito è responsive allora non devi preoccuparti. In caso contrario, lo strumento di Google provvederà a segnalarti gli eventuali problemi da risolvere, come in questo caso:

test-di-compatibilià

Se ti trovi in una situazione simile, chiedi subito al tuo sviluppatore di lavorare ad una versione mobile-friendly del tuo sito, perché potresti aver già perso dei potenziali clienti.

2 metodi per creare un sito mobile-friendly

La maggior parte delle piattaforme CMS propone ormai solo temi in grado di adattarsi automaticamente a qualunque dispositivo. Tuttavia, i professionisti che sviluppano siti da zero di solito realizzano siti mobile-friendly seguendo una di queste metodologie:

1. Dynamic serving: permette di destinare HTML e CSS diversi per un'unica URL, a seconda dello user agent del browser. Si tratta di una modifica lato server, quindi - in base al dispositivo che viene identificato - il server farà visualizzare il sito web pensato per smartphone o quello per destop, tablet, ecc.

*Pro: fornisce a chi naviga un sito disegnato appositamente per il dispositivo utilizzato.

*Contro: più complesso e meno economico da sviluppare (necessità di scrivere HTML e CSS diversi per ogni dispositivo).

2. Responsive design: utilizzando questo metodo al browser viene servito un solo codice per singola URL, indipendentemente dal dispositivo utilizzato per navigare. Il contenuto delle pagine si adatta in maniera fluida grazie alla presenza di fogli di stile che modificano il layout in base alle esigenze dell’utente.

*Pro: più semplice da costruire e facile da mantenere.

*Contro: non offre una piena mobile-centric user experience.

NB: anche PageSpeed Insights presenta una sezione in cui specifica se un sito sia responsive o meno.

Qual è allora la differenza fra i due tool?

Il Test di compatibilità viene eseguito da un Googlebot che segue i comandi del file robots.txt, mentre PageSpeed Insights simula l’esperienza di un utente reale. Ciò significa che, se la pagina che desideri analizzare contiene risorse bloccate dal file robots, il Test di compatibilità potrebbe non riuscire a determinare se sia effettivamente mobile-friendly.

Utilizza questi preziosi tool messi a disposizione da Google: scopri subito come migliorare gli aspetti tecnici del tuo sito, e scrivici eventuali considerazioni e suggerimenti sull'argomento!