Ottimizzare il caricamento dei siti su smartphone: le linee guida di Google

In concomitanza con il rilascio di alcune modifiche al servizio PageSpeed Insights, Google ha anche lanciato una sorta di sfida: caricare la pagina di un sito, su smartphone, in meno di un secondo.

Il vostro sito ce la fa?

Partiamo da due concetti:

  • Gli utenti usano sempre di più lo smartphone per cercare informazioni perchè lo ritengono comodo e veloce.
  • Secondo alcune ricerche (questa ad esempio), aspettare più di un secondo per il caricamento di un contenuto spezza il flusso della navigazione e rischia di far scendere il coinvolgimento dell’utente. In casi di estrema lentezza si corre il rischio che l’utente abbandoni la navigazione e rinunci.

Caricare una pagina in meno di un secondo

Il presupposto tecnico è che si parli una rete 3G con dei tempi di risposta di circa 200 ms.

A questo punto possiamo dividere il nostro prezioso secondo in 2 parti: una di connessione, sulla quale non possiamo agire  ed una di risposta sulla quale possiamo ottimizzare.

Il primo secondo di caricamento

Qunidi la partita si gioca in 400 millisecondi, divisi in risposta del server e rendering client-side.
Vediamo cosa si può fare.

La risposta del server

Per rispettare queste tempistiche il server deve quindi rispondere in 200 millisecondi o meno.

Per far sì che il server risponda con questi tempi è opportuno rispettare qualche regola di buon senso:

  • Le risorse del server devono essere sufficenti a sostenere le richieste senza creare sovraccarichi
  • Il sistema operativo deve essere aggiornato: nelle ultime versioni ( ad es. kernel 2.6.39 per Linux ) il TCP è stato aggiornato per velocizzare il primo caricamento e adesso supporta fino a 14KB alla prima richiesta.
  • Evita il più possibile, se non elimina del tutto, i redirect: ogni volta che il server deve re-indirizzare è costretto a fare una chiamata in più (due se ha bisogno di un nuovo DNS lookup).
  • Cura tutte gli aspetti, configurazioni e ottimizzazioni possibili a tutti i livelli. Se necessario usa sistemi di monitoraggio per individuare eventuali colli di bottiglia.

I servizi Netsons

Per quanto riguarda il mondo Netsons, sia i Server che le VPS sono aggiornate e, se scalate adeguatamente, offrono le risorse necessarie a raggiungere l’obiettivo.
Se invece non avete la possibilità di gestire un server autonomamente, offriamo soluzioni di Server managed e VPS managed, dove la parte sistemistica è gestita dallo staff Netsons, oppure raccomandiamo profili di hosting di livello professionale, come Hosting Semidedicato, Hosting Dedicato e Hosting Fast.

Il rendering client-side

Per quanto riguarda la parte del rendering, Google parla di contenuto Above The Fold, letteralmente “sopra la piega”, ovvero tutto quello che è visibile quando la pagina viene caricata e i consigli di ottimizzazione sono tutti rivolti a questa parte del contenuto, vediamo:

Tutto nella prima chiamata

Nel paragrafo precedente abbiamo detto che su un server aggiornato, la prima richiesta TCP può arrivare a 14KB. Se il nostro contenuto ATF sta tutto in quei 14KB sarà necessaria un a sola richiesta per visualizzare la parte visibile del sito, dando all’utente un contenuto immediato e regalando agli sviluppatori millisecondi importanti per completare il caricamento.

Evitare i roundtrip

La raccomandazione più forte è quella sulle chiamate esterne: ogni caricamento sincrono di file esterni costringe il server a fare una chiamata ed attendere una risposta prima di mostrare il contenuto.

Google consiglia quindi di non collegare fogli di stile e file javascript in modo sincrono, ma di inserire il css e le funzioni javascript necessarie al funzionamento del contenuto ATF direttamente inline all’interno del tag <head>. Una volta caricati i primi contenuti, in modo asincrono, possiamo caricare tutto il necessario al funzionamento della pagina.

N.B. Se andate a spulciare il codice sorgente di molti servizi Google, troverete il tag <style> con tutta una serie di classi CSS.

Altri suggerimenti

Google si limita ad elencare alcune ottimizzazioni possibili, ma non sono le uniche, anzi, ogni programmatore e sistemista può trovare soluzioni su misura che meglio si adattano al proprio contesto.

Da parte nostra, alla luce dell’esperienza che maturiamo assistendo i nostri utenti, possiamo consigliarvi di:

  • Tenere sotto controllo le Query che si fanno al database: in alcuni casi diventano pesanti, aumentando il carico del server e rallentando la risposta
  • Scegliere con cura la struttura e il motore dei DB: se non si hanno esigenze particolari un database più efficente e leggero può fare la differenza
  • Usare soluzioni come Litespeed o Nginx
  • Minificare il codice, per stare dentro gli ormai famosi 14KB
  • Programmare tenendo in mente anche la velocità di esecuzione di funzioni e query
  • Ottimizzare le immagini, ridurne il numero se possibile, usare sprite
  • Usare sistemi di lazy-loading dove necessario

Conclusioni

Fare di tutto per caricare le pagine in meno di un secondo non è obbligatorio, probabilmente non porterà neppure risultati esaltanti in termini di visite e successo del proprio sito, ma mette in evidenza una certa mentalità:

Un sito che funziona non è fatto solo di una grafica accattivante e di contenuti: un sito che funziona è curato nei minimi dettagli, anche quelli che l’utente medio ignora completamente: è fatto di grafica, contenuti, velocità e semplicità di fruizione, è fatto di piccole ottimizzazioni e di tanta, tanta progettazione, fatta prima ancora di scrivere una sola riga di codice.

Insomma, un sito che funziona è fatto di creativi, grafici, programmatori e sistemisti che hanno studiato, studiano e lavorano per migliorare ogni giorno la fruizione dei contenuti e dei servizi, la famosa User Experience.

La fonte di ispirazione di questo articolo è questa: http://googlewebmastercentral.blogspot.it/2013/08/making-smartphone-sites-load-fast.html

P.S.

Per quanto riguarda Netsons, come abbiamo detto qui, WE’RE WORKIN’ ON IT!