Contattaci

Google Lighthouse, cos'è e a cosa serve - La Guida per Ottimizzare il tuo Sito Web

Google Lighthouse
Argomenti

Cos'è Google Lighthouse

Google Lighthouse è un software gratuito open source che misura le performance di una pagina web per aiutarti a migliorare la qualità del tuo sito in fatto di velocità e User Experience, illustrandoti anche le basi per una corretta SEO.

Puoi utilizzare Lighthouse da un sito web, come estensione di Google Chrome o dal menu Ispeziona degli strumenti per gli sviluppatori di Chrome.

A cosa serve Google Lighthouse?

Google Lighthouse ti da una panoramica della pagina web che analizzi, fornendoti dati circa le performance, l'usabilità, l'esperienza utente, le best practices e le basi di SEO.

I feedback che ti fornisce sono preziosi per migliorare le performance, l'usabilità e l'UX del tuo sito dal momento che ti suggerisce proprio gli aspetti sui quali intervenire.

Come utilizzare Google Lighthouse

Puoi usare Google Lighthouse gratuitamente in vari modi. Queste sono le modalità più semplici per utilizzare Lighthouse:

  • Installare l'estensione di Chrome
  • Utilizzarlo da Web.dev
  • Utilizzare gli strumenti per gli sviluppatori di Google Chrome
  • Utilizzare il sito di Google PageSpeed Insights

Estensione di Chrome per Google Lighthouse

Google Lighthouse estensione Chrome

Nel Chrome Web Store è presente un'estensione chiamata Lighthouse. Ti basterà installarla per averla sempre a portata di mano quando navighi utilizzando il browser Chrome.

Google Lighthouse su Web.dev

Google Lighthouse Web Dev

Collegandoti a Web.dev, il sito di Google dedicato agli sviluppatori, ti basterà inserire il link della pagina da monitore nel campo di ricerca e poi premere il tasto Run audit

Lighthouse negli strumenti per gli sviluppatori di Google Chrome

Google Lighthouse strumenti per gli sviluppatori Chrome

Se utilizzi Google Chrome per navigare sul web ti basta aprire la pagina che vuoi analizzare e accedere agli strumenti per gli sviluppatori premendo il tasto destro su un'area vuota della pagina e cliccando Ispeziona. In alternativa vai su Opzioni per sviluppatori nel menu Visualizza e poi premi Ispeziona elementi

Un altro modo per raggiungere questi strumenti è premendo contemporaneamente sulla tastiera Command+Option+C per se usi Mac o Control+Shift+C per altri sistemi operativi.

Quando la finestra di Chrome ti si dividerà in due, premi sulla tab Lighthouse.

Per aprire la tab di Google Lighthouse direttamente dalla tastiera ti basta premere CMD+Option+I.

Lighthouse in Google PageSpeed Insights

Google Lighthouse da PageSpeed Insights

PageSpeed Insights è uno strumento importante di Google che ti permette di verificare le performance di una pagina web. Qui troverai il solito campo di ricerca in cui inserire l'url e dopo pochi secondi otterrai i risultati.

Nel primo riquadro troverai i dati sul campo basati sull'esperienza di utenti reali che hanno visitato il tuo sito web, chiamati Core Web Vitals, mentre nel secondo riquadro vedrai i risultati dell'analisi della tua pagina web effettuata in tempo reale da Google basandosi su una simulazione di dispositivi desktop e mobile ottenuta proprio con Lighthouse.

Impostazioni di Google Lighthouse

Io preferisco utilizzare Google Lighthouse dagli strumenti per gli sviluppatori di Chrome (CMD+Option+I) o dall'estensione.

In entrambi i casi puoi decidere se effettuare l'analisi simulando un dispositivo mobile o uno desktop e puoi scegliere tra i tipi di report che vuoi ottenere:

  • Performances
  • Accessibility
  • Best Practices
  • SEO
  • Progressive Web App

Per accedere a queste opzioni dall'estensione di Chrome clicca l'ingranaggio presente nella tendina di Lighthouse.

Se utilizzi Lighthouse dagli strumenti per gli sviluppatori di Chrome avrai a disposizione tre modalità di analisi:

  • Navigation
  • Timespan
  • Spanshot

La modalità classica Navigation è selezionata di default e si riferisce all'analisi della singola pagina web.

Timespan avvia l'analisi in un tempo arbitrario deciso da te in cui ti permette di effettuare delle interazioni.

Snapshot analizza la pagina in uno stato particolare.

Analisi dei risultati di Google Lighthouse

Google Lighthouse analisi report

I risultati dell'analisi di Google Lighthouse riguardano le seguenti aree:

  • Performances
  • Accessibility
  • Best Practices
  • SEO
  • Progressive Web App

Per ciascuna di queste categorie viene assegnato un punteggio alla pagina web che arriva fino a 100 e che varia in base a molti parametri.

Sotto a ogni sezione infatti se scorri la pagina vedrai il punteggio principale e tutti i fattori che l'hanno determinato. Le voci contrassegnate da un triangolo rosso sono da migliorare. Come fare? Te lo dice Lighthouse stesso, basta leggere.

Le indicazioni che ti vengono fornite per apportare miglioramenti sono generiche e quindi bisogna valutare caso per caso se sono attuabili anche nel tuo sito.

Vediamo nel dettaglio a cosa si riferiscono i cinque report di Lighthouse

Google Lighthouse Performance

La categoria Performance basa il punteggio su sei metriche: First Contentful Paint, Time to Interactive, Speed Index, Total Blocking Time, Largest Contentful Paint e Cumulative Layout Shift. In questa categoria si cerca di analizzare quindi la velocità della pagina web e alcuni aspetti legati al miglioramento dell'esperienza utente, come il Layout Shift, ovvero lo spostamento del layout durante il caricamento della pagina.

Accessibility

Il report relativo all'accessibilità misura alcuni aspetti legati all'esperienza utente come ad esempio il contrasto tra alcuni elementi presenti nella pagina come tra caratteri tipografici e sfondo, la presenza dei testi alternativi nelle immagini, del titolo della pagina web, ecc.

Best Practices

Il report best practices misura la presenza o meno di alcuni elementi fondamentali a livello di codice web e server. Verifica la presenza di errori di codice, alcune impostazioni sulla geolocalizzazione, verifica la possibilità di incollare una password nei relativi campi se presenti, ecc.

SEO

In questo report Lighthouse verifica la presenza e la correttezza di alcuni elementi di base della SEO come i meta tag Title, i meta Description, il file robots.txt, che i link siano scansionabili e la pagina sia indicizzabile, che il tag hreflang sia impostato, che la dimensione dei caratteri tipografici sia adeguata, che la pagina abbia un tag canonical adeguato, che il sito sia mobile friendly, ecc.

PWA Progressive Web App

Questo report è dedicato alle progressive web app, ovvero quelle applicazioni ibride tra una classica applicazione web come un sito e un'app nativa vera e propria.

Google Lighthouse e SEO

Google Lighthouse può quindi esserti di grande aiuto per capire quali sono gli aspetti migliorabili del tuo sito ed è uno strumento che utilizziamo anche noi quando lavoriamo a una strategia SEO per incrementare il traffico di un sito web.

Hai bisogno di incrementare le vendite del tuo sito, di aumentare la lead generation o la tua brand awareness online? Contattaci e il nostro consulente SEO ti illustrerà tutte le opportunità del tuo sito web. Migliorando il posizionamento del tuo sito su Google potrai infatti incrementare il traffico organico proveniente dai motori di ricerca in modo da farti trovare dal tuo target. Contattaci per una consulenza o un preventivo.

Igor Biagi - Consulente SEO - Designer della Comunicazione - Art Director
Articolo di Igor Biagi
SEO Manager, Designer della Comunicazione e Fotografo a Chef Studio

Qui a Chef Studio mi occupo di SEO, Art Direction, User Interface Design e Fotografia. Dal 2013 sono Fotografo Certificato Google Maps Street View. Nel tempo libero amo viaggiare e fare un sacco di altre cose che se le elenco non finiamo più. Sono curioso, molto. Mi piace documentarmi e imparare sempre cose nuove.

Leggi tutti gli articoli