Guide

Tag:, , ,

Lighthouse per Google Chrome: ottimizza il tuo ecommerce - IMPRIMIS e-commerce Capitolo 1

Hai un ecommerce e il tuo visitatore scappa?
Hai un blog con un bounce rate del 100mila%?
Il tempo medio di permanenza sul tuo sito è di 10 secondi?
Dobbiamo fare qualcosa.
Vediamo: il tuo sito come sta 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:

  1. Il sito è lento, incomprensibile o presenta problemi di accessibilità → pessima user experience
  2. Il visitatore non trova ciò che cerca
  3. Non si fida di acquistare da te

Oggi concentreremo la nostra analisi sul punto 1 e lo faremo tramite un plugin gratuito per Google Chrome: Lighthouse.
Cos’è? E dove lo trovo?

Lighthouse per Google 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:

  1. E’ uno strumento molto completo
  2. Non necessita di registrazione o installazione
  3. E’ gratis

Come utilizzarlo?

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:

  1. Fai click sui 3 puntini alla destra della barra degli indirizzi
  2. Seleziona “Altri strumenti” → poi “Strumenti per sviluppatori”
  3. Dal menù (vedi foto) seleziona la scheda “Audits”

Menu LightHouse per Google Chrome

Ed ecco come si presenterà la tua schermata
Configurazione LightHouse per Google Chrome

   Consiglio n.1: imposta i controlli come vedi nell’immagine
   Consiglio n.2: utilizza una finestra di navigazione anonima per non “falsare” la verifica
P.S. – 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?

Vediamolo subito, punto per punto:

  1. Digita sulla barra degli indirizzi l’url del sito da analizzare
  2. Una volta caricato, clicca su RUN AUDITS presente nella scheda Audits di Lightbox
  3. Attendi 🙂

Passeranno circa 30 secondi in cui il plugin analizzerà la nostra richiesta, dopodiché la parte alta della schermata sarà molto simile a quella che vedi qui (nella forma, non nei valori)

Risultati scansione LightHouse per Google Chrome

Molto bene, scansione terminata. Procediamo insieme all’analisi dei risultati:

Punto 1: Performance

La voce Performance si divide in 3 sotto-menù:

  1. Metrics
  2. Opportunities
  3. Diagnostics

 

Metrics

Nel blocco metrics sono racchiuse le misurazioni legate al caricamento del sito.

Metrics LightHouse per Google Chrome

E quindi:

  • 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.

 

Opportunities

In questo blocco troviamo utili consigli per ottimizzare le prestazioni e rendere il nostro sito più vicino alle esigenze degli utenti (e quindi più gradito a Google)

Opportunities LightHouse per Google Chrome

Vediamo:

  • 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?

 

Diagnostics

In questo blocco vediamo altre indicazioni per incrementare la rapidità di risposta del nostro sito.

Diagnostics LightHouse per Google Chrome

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

Alla prossima puntata!

Articoli correlati

Il catalogo CSV per l’importazione dei prodotti su... Cosa si intende per catalogo CSV? CSV è l’acronimo di Comma Separated Value ed è sostanzialmente un file testuale cor...
Ecommerce e storytelling: 5 consigli per un sito c... Se segui il nostro blog (lo segui, vero?) avrai capito che le fortune di un ecommerce non derivano solo dagli aspetti ...
Black Friday: vendi un’esperienza, non un pr... Hai un ecommerce e sei alla frenetica ricerca di una strategia vincente per il Black Friday? Un’idea rivoluzionaria p...

Scrivi un commento all'articolo

avatar
  Subscribe  
Notificami