Aumenta la velocità del tuo sito web con Google Lighthouse
Hai un ecommerce e il tuo visitatore scappa?
Hai un blog con un bounce rate molto alto?
Il tempo medio di permanenza sul tuo sito è di 10 secondi? Dobbiamo fare qualcosa.
Vediamo: qual’è la situazione del tuo sito in quanto a prestazioni, accessibilità e SEO?
Non lo sai ancora? Scopriamolo insieme…
Perché il mio visitatore se ne va e non torna più?
I motivi per cui un utente scappa (per non tornare) possono essere riassunti in 3 macro-sezioni:
- Il sito è lento, incomprensibile o presenta problemi di accessibilità: ha una pessima user experience
- Non trova ciò che cerca
- Non si fida di acquistare da te.
Per quanto riguarda la velocità, abbiamo a disposizioni vari tool per monitorarla. Uno dei migliori è sicuramente GTmetrix, ma ce ne sono anche altri come, ad esempio, Pingdom che potrebbe darti molte indicazioni sulla velocità del tuo sito. Tutte le informazioni che otterrai saranno molto utili per colmare le carenze e per dare ai problemi la giusta priorità.
Google presta sempre più attenzione alla velocità di caricamento di un sito web ed è ormai diventata un fattore di posizionamento determinante. Oggi concentreremo la nostra analisi su un plugin gratuito per Chrome: Google Lighthouse.
Google Lighthouse per Chrome: cos’è? E a cosa serve?
Lighthouse è un utile strumento che permette di analizzare aspetti molto importanti di un sito web (ma spesso trascurati) , come ad esempio:
- Le performance
- La conformità agli standard
- L’accessibilità
- Le migliorie necessarie
- L’ottimizzazione lato SEO di testi e contenuti
Inoltre Lighthouse ha 3 grandi vantaggi: è uno strumento molto completo, non necessita di registrazione o installazione ed è gratis.
Come utilizzare Google Lighthouse?
Bene, iniziamo subito. Come abbiamo detto, Lighthouse è un’estensione di Google Chrome, pertanto è necessario installare sul nostro computer il browser di BigG. Poi? Ecco i passaggi da seguire per attivarlo:
- Fai click sui 3 puntini alla destra della barra degli indirizzi
- Seleziona “Altri strumenti” → poi “Strumenti per sviluppatori”
- Dal menù (vedi foto) seleziona la scheda “Audits”
Ecco come si presenterà la tua schermata. 
Consiglio n.1: imposta i controlli come vedi nell’immagine
Consiglio n.2: utilizza una finestra di navigazione anonima per non “falsare” la verifica.
Per aprire una finestra di navigazione anonima, clicca sui 3 puntini a destra della barra degli indirizzi e seleziona “Nuova finestra di navigazione in incognito”.Come effettuare la scansione di un sito?
Digita sulla barra degli indirizzi l’url del sito da analizzare, una volta caricato, clicca su RUN AUDITS presente nella scheda Audits di Lightbox e attendi 🙂 Passeranno circa 30 secondi in cui il plugin analizzerà la nostra richiesta, dopodiché la parte alta della schermata sarà molto simile a quella nella foto.
Performance: le prestazioni del tuo sito
La voce Performance si divide in 3 sotto-menù: Metrics, Opportunities, Diagnostics. Vediamoli nel dettaglio.
Sezione Metrics
Nel blocco metrics sono racchiuse le misurazioni legate al caricamento del sito:
- quanti secondi sono necessari al caricamento del primo elemento
- quanto tempo passa prima che il sito sia correttamente caricato
- il tempo necessario prima che il sito possa interagire con il visitatore
- quanto ci vuole per visualizzare correttamente il primo elemento
- il tempo necessario prima che la pagina sia “minimamente interattiva
- quanto intercorre tra l’azione del tuo visitatore e la risposta del sito
La voce Metrics ci da lo specchio della situazione: più spunte verdi avremo e più il punteggio sarà prossimo a 100. Un punteggio alto è un ottimo indice di efficienza, pertanto il nostro obiettivo è quello di raggiungere un punteggio superiore a 90. Difficile, ma non impossibile. Vediamo come.
Sezione Opportunities
In questo blocco troviamo utili consigli per ottimizzare le prestazioni e rendere il nostro sito più vicino alle esigenze degli utenti e a Google.
- Rimanda il caricamento delle immagini che non sono immediatamente visibili
- Rimanda il caricamento dei css non necessari ai contenuti above the fold
E i contenuti Javascript? Purché siano “thin” e non bloccanti per il rendering della pagina.
Consiglio n.3: segui le indicazioni di Google: chi meglio di lui può dirti cosa gradisce?
Sezione Diagnostics
In questo blocco vediamo altre indicazioni per incrementare la rapidità di risposta del nostro sito.
E quindi:
- riduci le chiamate esterne per caricare i font dei tuoi css
- riduci e ottimizza, “minificandoli”, javascript e css
- fai uso della cache e comprimi finché puoi le immagini
- abilita la compressione dei testi
- riduci le GIF per i contenuti animati
- usa poca rete
I vantaggi di avere una home page “leggera” con un basso numero di chiamate esterne, non solo riduce il tempo di caricamento, ma anche il consumo di banda da parte del visitatore. Che sempre più avviene in mobilità, con copertura altalenante e un numero limitato (seppur ampio) di dati a disposizione.
Ogni voce contiene un link “Learn more” con un’utile guida per approfondire la problematica e far rientrare il problema.
Consiglio n.4: riduci al minimo le chiamate esterne al tuo sito, soprattutto se non strettamente necessarie.
Ok, fine primo tempo. Nella prossima puntata analizzeremo le voci di conformità e accessibilità, intanto ci lasciamo con una perla di saggezza:
Per il tuo sito preferisci sempre un caricamento rapido ad un layout che stupisce.
HAI GIÀ UN ECOMMERCE?RICHIEDI LA NOSTRA ANALISI
Riceverai consigli per:
- migliorare la tua presenza online
- semplificare il processo di vendita
- aumentare il numero dei clienti
Richiedila ora, è gratis!
POTREBBE INTERESSARTI
Gestire ordini e fatture su Prestashop
20 Giugno 2019
Importare prodotti in PrestaShop con ImporterONE
29 Gennaio 2016
