Diamo un’occhiata a quali interventi si possono implementare.
La performance è un fattore importante
Una buona performance del tuo sito web è essenziale. Un moderno sito web non consiste solo in qualche file statico di html e css ma è fatto di una sacco di librerie e framework come la famosa Bootstrap. E così i vari client devono scaricare molti file per visualizzare correttamente l’intera pagina. Ma più una pagina è lenta a caricarsi peggiore sarà il ranking attribuito da Google
L’impatto degli smartphone (sito mobile)
Un altro fattore, che è la chiave di un buon posizionamento, è la compatibilità del sito con i dispositivi mobili. Non solo perchè i siti mobile friendly sono più veloci da caricare ma anche perchè possono fornire una grande user experiences.
Un framework molto popolare che si può implementare facilmente per ottenere un sito web responsive è la Bootstrap e anche se è molto facile da usare, richiede almeno due file statici per poter lavorare correttamente. Questo significa che stiamo puntando sulla usabilità a scapito delle prestazioni. C’è quindi un modo per compensare questo gap?
Google PageSpeed Insights ci aiuta ad incrementare le perfomance del nostro sito web
Con Page Speed Insights by Google, è possibile controllare e identificare le aree di intervento per migliorare il comportamento (maggior velocità) del tuo sito web per renderlo più veloce e compatibile con gli smartphone.
Puoi ottimizzare il tuo sito studiando queste linee guida di Google
Comprendere le raccomandazioni di PageSpeed Insights
1. Evitare inutili reindirizzamenti
I reindirizzamenti possono causare un sensibile ritardo se la richiesta viene reindirizzata più volte fino al punto finale dal quale i client prelevano i dati che servono. Ogni richiesta che richiede una nuova azione HTTP (con possibili ricerche DNS) possono ridurre drammaticamente le peformance del sito specialmente su un dispositivo mobile o con una connessione lenta.
Un buon esempio per evitare il redirect è quello di usare un template moderno e responsive, evitando così il reindirizzamento verso altre istanze, magari su domini di terzo livello.
Inoltre assicurati di reindirizzare correttamente in un unico passaggio da https://esempio.com a https://www.esempio.com. Le persone tendono a digitare la forma più breve del tuo dominio nella barra degli indirizzi, ma il tuo sito web dovrebbe funzionare sia solo con https (così ottieni migliore sicurezza e migliore ranking) e molto probabilmente usare il www come sottodominio.
SEO: 301 redirects da HTTP a HTTPS
HTTPS è diventato un importante fattore di successo per un buon ranking in Google. I motori di ricerca preferiscono i siti internet che usano il protocollo HTTPS per rendere la comunicazione tra due endpoints sicura (client-server). Bisogna considerare anche l’attivazione di una opzione di redirect 301 sul tuo dominio una volta che hai installato il certificato SSL.
2. Attiva la compressione
Invia sempre contenuti compressi con GZIP o DEFLATE dal server al client. Questa regola controlla se i dati sorgenti sono comprimibili (come HTML, immagini o JS/CSS). La compressione riduce il numero di byte trasferiti sulla rete di oltre il 90%. Attenzione alla compatibilità dei vari browser. I più recenti browser già supportano la compressione e lato server potrai utilizzare moduli speciali tipo mod_deflate (Apache) oppure ngx_http_gzip_module (Nginx).
Attenzione: la compressione dinamica può avere un impatto importante sulle prestazioni della CPU del dispositivo client.
3. Sfrutta la cache del browser
Il caricamento di file statici richiede tempo e il browser avrà già scaricato i dati nella sua cache. Il server può definire una politica di caching ben specifica con intestazioni speciali. La cache locale deve fornire le risorse necessarie al browser invece che richiederne di nuove al server.
E’ possibile utilizzare due campi di intestazione nella risposta: cache-control e Etag, per definire per quanto tempo il browser può memorizzare nella cache le riposte individuali e creare un token di rinnovo con il quale il browser può riconoscere facilmente le modifiche del file.
Il browser deve conservare in cache i file statici per almeno una settimana. Se si dispone di file che non cambiano regolarmente, allora si può aumentare il tempo di cache fino a un anno.
4. Riduzione dei tempi di risposta del Server
Page Speed Insights innesca questa regola se il server non risponde entro un certo lasso di tempo (> 200 ms).
La ragione di un tempo di risposta lento non è di facile soluzione senza la giusta analisi. Possibili fattori per il ritardo potrebbero essere causati dal server, come ad esempio una CPU lenta o poca memoria, o a livello dell’applicazione, una logica di script lento o query di DataBase pesanti ed infine troppe librerie incluse.
Per trovare questi colli di bottiglia non è facile ma Novamind ha la giusta competenza.
5. Minimizza HTML, CSS & JavaScript
Il server può ridurre al minimo le risorse consegnate come il codice HTML, gli Script Java e i fogli di stile (CSS) prima di spedirli al browser. Questo fa risparmiare molti bytes di dati.
Tali ottimizzazioni contengono ad esempio la rimozione dei commenti, di codice non utilizzato e spazi bianchi non necessari.
Nota: Se si dovesse guardare il codice minimizzato si potrebbe pensare a qualcosa di poco leggibile, ma per il computer non fa differenza.
6. Eliminate il “render blocking” in JavaScript e CSS
Page Speed Insights innesca la regola del blocco del rendering. Per impostazione predefinita, CSS viene trattato come risorsa di blocco del rendering, il che significa che il browser sospenderà il rendering di qualsiasi contenuto elaborato fino alla costruzione di CSSOM. Assicurarsi di mantenere il CSS snello, di fornirlo il più rapidamente possibile e di utilizzare i tipi di supporti e le query supporti per sbloccare il rendering
7. Ottimizza le immagini
Se si dispone di un sacco di immagini sul vostro sito web, allora questo potrebbe rappresentare uno dei punti più importante per l’ottimizzazione del sito. Si possono ottimizzare le immagini senza impattare negativamente sulla qualità visiva ma riducendo notevolmente le loro dimensione e così beneficiare di un consumo inferiore di banda.
Ci sono molte strumenti per ottimizzare le immagini che lavorano sulla risoluzione o sul formato o sulla impostazione della qualità. Page Speed Insights elenca questi file dopo un controllo accurato, fornendo in percentuale il possibile risparmio di memoria.
Un gestore di Content Delivery come CloudFlare può ottimizzare le immagini automaticamente, ma è un servizio a pagamento.
Leggi questa guida fornita da Google: Ottimizzare le immagini.
8. Dare priorità al contenuto visibile
Nel web un testo, un banner o un messaggio pubblicitario è da considerarsi above the fold se viene visualizzato come primo (o tra i primi) della pagina, o comunque se risulta visibile senza che l’utente debba utilizzare la barra di scorrimento o la rotellina del mouse
Questa regola viene attivata quando PageSpeed Insights rileva la necessità di ulteriori tempi di round trip a livello di rete per visualizzare i contenuti “above the fold” della pagina.
Panoramica
Se la quantità di dati richiesta supera la finestra di congestione iniziale, saranno necessari ulteriori tempi di round trip tra il tuo server e il server dell’utente. Per gli utenti che utilizzano reti con latenze elevate come le reti per dispositivi mobili, questo può generare ritardi significativi nel caricamento della pagina.
Vuoi un sito che superi il test di Google Page Speed Insights?
Contattaci.
