Google Lighthouse è uno strumento open source per l’esecuzione di audit tecnici di siti web. Lo strumento è stato sviluppato da Google e analizza i seguenti aspetti di un URL: prestazioni, web app progressiva, accessibilità, best practice e SEO.
Il framework Lighthouse Google è già stato integrato negli altri strumenti di analisi delle prestazioni di Google, come l’analisi di PageSpeed Insights e gli audit basati sul browser tramite gli strumenti di sviluppo del browser Chrome.
Cos’è Google Lighthouse: definizione
Google Lighthouse consente di controllare le prestazioni dei siti web. Lighthouse 1.0 è stato inizialmente sviluppato come strumento di controllo per le web app progressive (PWA). La versione 2.0 includeva quindi anche un’analisi delle prestazioni e SEO per i normali siti web. La terza iterazione, Lighthouse versione 3.0, è stata rilasciata all’inizio del 2018 e ha fornito un nuovo layout e l’integrazione diretta negli strumenti di sviluppo del browser Chrome di Google. Lighthouse resta un framework di analisi open source che funziona a livello di URL.
Quali controlli può eseguire Google Lighthouse?
Gli audit offerti da Lighthouse sono raggruppati in cinque categorie di ottimizzazione: Performance, Best Practices, Accessibility, SEO e Progressive web Apps.
Gli utenti possono selezionare una, più o tutte e cinque le categorie, a seconda degli aspetti del loro sito web che desiderano analizzare.
Prestazioni
In questa categoria, Google Lighthouse analizza la velocità di caricamento di un sito web o di un’app e la velocità con cui gli utenti possono accedere o visualizzare il contenuto. Qui, Lighthouse analizza sei parametri di velocità:
- First Contentful Paint: indica il tempo prima che il primo testo o immagine diventi visibile agli utenti.
- First Meaningful Paint: indica il momento in cui il contenuto principale di una pagina diventa visibile agli utenti.
- Speed Index: l’indice di velocità fornisce una metrica uniforme per esprimere la velocità di caricamento del contenuto di una pagina.
- Time to Interactive: indica il tempo prima che l’utente sia in grado di interagire completamente con la pagina e il suo contenuto.
- First CPU Idle: il valore in questa categoria restituisce il tempo in cui l’attività del thread principale della pagina è sufficientemente bassa da consentire l’elaborazione degli input.
- Latenza di input stimata: il risultato precedente è una stima (in millisecondi) di quanto tempo un’app deve reagire agli input dell’utente durante la finestra di 5 secondi di calcolo massimo durante il caricamento della pagina. Se la latenza è superiore a 50 ms, gli utenti potrebbero percepire un’app o un sito web troppo lenti.
L’analisi delle prestazioni di Lighthouse include anche consigli per miglioramenti. Questi mostrano opportunità per ridurre i tempi di caricamento, ad esempio comprimendo immagini, pulendo JavaScript o CSS o riducendo le risorse che bloccano il rendering, come JavaScript, richieste esterne o regole CSS. Anche la memorizzazione nella cache correttamente implementata, i tempi di risposta del server e evitare (o limitare) i redirect sono metodi consigliati per migliorare le prestazioni del sito.
I consigli sulle prestazioni di Google Lighthouse sono i seguenti:
- Riduci le risorse che bloccano il rendering
- Offri immagini in formati di nuova generazione
- Abilita la compressione del testo
- Rimanda CSS inutilizzato
- Assicurati che il testo rimanga visibile durante il caricamento del carattere web
- Utilizza criteri di cache efficienti sugli asset statici
- Migliora il Critical Rendering Path (CRP)
- Evita immagini di grandi dimensioni
- Ritarda il caricamento delle immagini fuori schermo
- Minimizza / comprimi CSS
- Minimizza / comprimi JavaScript
- Ottimizza le immagini
- Abilita la pre-connessione del server
- Mantenere bassi il tempo di risposta del server (Time To First Byte, TTFB)
- Evita i reindirizzamenti
- Precarica le richieste di chiavi
- Usa formati video per contenuti animati
- Riduci il peso totale dei byte
- Evita dimensioni DOM eccessive
- Misura le prestazioni con indicatori e misure di temporizzazione dell’utente
- Riduci il tempo di avvio di JavaScript
- Riduci il carico utile del thread principale
Best Practices
Le 16 best practice testate da Lighthouse si concentrano principalmente sugli aspetti di sicurezza dei siti web e sui moderni standard di sviluppo web. Google Lighthouse analizza se vengono utilizzati HTTPS e HTTP/2, controlla se le risorse provengono da fonti protette e valuta la vulnerabilità delle librerie JavaScript. Altre best practice guardano alle connessioni di database sicure e all’evitare l’uso di comandi non sicuri, come document.write (), o che incorporano API antiquate.
SEO
Lighthouse esegue vari test per stabilire la capacità di scansione di un sito web o di un’app da parte dei motori di ricerca e di visualizzarlo nei risultati di ricerca. Questi test Lighthouse che Google descrive come “SEO” sono estremamente limitati; chiunque abbia un sito web o un’app che non raggiunge un punteggio massimo dovrebbe apportare le correzioni richieste. Una volta apportate queste modifiche, l’ottimizzazione dei motori di ricerca offre un enorme potenziale per altri miglioramenti, che dovrebbero essere sicuramente esplorati.
Lighthouse attualmente esegue 14 audit nella categoria di ottimizzazione dei motori di ricerca. Questi riguardano principalmente l’ottimizzazione per i dispositivi mobili o PWA, la corretta applicazione di dati strutturati e tag come canonical, hreflang, titoli e meta descrizioni e se una pagina può essere scansionata dai bot dei motori di ricerca.
Accessibilità
Gli audit di accessibilità di Google Lighthouse esaminano il modo in cui un sito web o un’app può essere utilizzata da persone con disabilità. Ciò include test su elementi importanti come pulsanti o collegamenti, per vedere se sono sufficientemente ben descritti o se alle immagini è stato assegnato un attributo alt in modo che il contenuto visivo possa essere descritto anche da lettori di schermo per utenti con problemi di vista.
Progressive web app
Questa sezione era originariamente il fulcro di Google Lighthouse: l’analisi delle Progressive web Apps, o PWA. Il sito web registra un service worker? Funziona offline con l’accesso a Internet? Restituisce un errore 200? Questi audit erano l’inizio di Lighthouse, ma ora sono solo una delle cinque categorie di audit e quella che è di reale importanza solo per i fornitori di Progressive web App.
Come si può accedere a Google Lighthouse?
- PageSpeed Insights: PageSpeed Insights di Google restituiva solo un singolo punteggio, ma ora questo strumento si basa sulle funzioni di analisi di Lighthouse. Qualsiasi URL può essere testato per un’analisi di sei valori di prestazioni e dei risultati di numerosi controlli e raccomandazioni aggiuntivi. Dalle sei metriche delle prestazioni viene anche compilato un punteggio di velocità complessivo. Puoi accedere a PageSpeed Insights qui .
- Strumenti per sviluppatori nel browser Chrome: da aprile 2018, Google Lighthouse è disponibile anche tramite gli strumenti per sviluppatori nel browser Chrome di Google. Qui, gli utenti possono selezionare in quale delle cinque categorie principali ed eseguire i controlli. Sono disponibili anche opzioni per i dispositivi, come la scelta di dispositivi mobile o desktop e una gamma di velocità Internet simulate da utilizzare per l’analisi. Ecco come trovare i controlli Lighthouse in Chrome DevTools.
- Plugin di Chrome: è possibile eseguire audit completi di Lighthouse anche utilizzando il plugin di Chrome. Puoi trovare Lighthouse Chrome Plugin qui (se utilizzi il browser Chrome).
- Gli audit delle prestazioni di Google Lighthouse possono essere eseguiti anche tramite il portale web.dev di Google . Qui puoi trovare gli audit più importanti con tutti i risultati e le raccomandazioni.
Come posso controllare un sito web completo?
Google Lighthouse è un potente strumento per analizzare le prestazioni di siti web e PWA. Tuttavia, lo strumento ha uno svantaggio principale: può essere eseguito solo a livello di URL.
Google Lighthouse: come usare i dati?
Una riflessione utile per concludere la panoramica legata a questo tool. Ora hai un’analisi completa del sito web, come sfruttarla? L’idea è quella di non limitarsi a seguire le istruzioni una tantum ma usare le informazioni di questo strumento per avviare un processo di analisi e ottimizzazione costante.
Buon lavoro!
