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.
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, i Server sono aggiornati e, se scalati adeguatamenti, 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.
P.S.
Per quanto riguarda Netsons, WE’RE WORKIN’ ON IT!