Cos’è Lighthouse di Google
Essere nelle prime posizioni nella ricerca Google è il sogno di qualunque proprietario di un sito web, sappiamo quanto a Google piacciano i siti web ben ottimizzati, con una velocità di caricamento ottimale e dei buoni contenuti che soddisfino gli utenti. Proprio per questa ragione è Google stesso a fornire strumenti importanti che possono aiutarci ad analizzare e migliorare le performance del nostro sito. Una delle soluzioni più innovative attualmente, è quella che presentiamo oggi: Google Lighthouse.
Si tratta di un tool open source che permette di misurare la qualità delle pagine web dal punto di vista della velocità di caricamento e dell’esperienza di navigazione. La versione più recente offre approfondimenti e consigli sull’ottimizzazione delle metriche Core Web Vitals.
L’analisi delle prestazioni può essere fatta su qualsiasi sito web, blog e ecommerce.
L’obiettivo principale è riuscire ad ottenere un audit completo del tuo sito come base per ottimizzazioni future.
Come analizzare un sito web
Esistono più modi di accedere a Lighthouse per realizzare degli audit: è possibile accedervi attraverso tool come Chrome DevTools e con un’estensione di Chrome. Per poterlo fare è fondamentale utilizzare come browser Google Chrome.
Chrome DevTools
1. Accedi, attraverso la ricerca Google, al sito che ti interessa analizzare.
2. Con il tasto destro del mouse fai clic in qualunque punto della pagina e seleziona inspector (ispeziona).
3. Seleziona la voce lighthouse nella barra in alto. (in alternativa puoi cliccare i tre puntini verticali in alto a destra della finestra e alla voce altri strumenti → strumenti per sviluppatori, aprire il pannello DevTools e selezionare “Lighthouse”).
4. Prima di far partire l’analisi spuntare le checkbox di tutte e 5 le voci presenti sotto categories.
5. Premi Genera report e la schermata inizierà a reperire informazioni sul sito in analisi.
Estensione Chrome
Un altro modo per accedere a Lighthouse è attraverso l’estensione Chrome, molto comoda se si utilizza spesso questo strumento.
1. Su Chrome Web Store cerca ed installa l’estensione “Lighthouse Google Extension“.
2. Clicca sull’icona del puzzle in alto a destra della finestra e attiva il pin per visualizzare lighthouse nella barra delle estensioni.
3. Cerca il sito che vuoi analizzare e clicca l’icona nella barra di Chrome per far partire l’analisi.
Al termine otterrai un report suddiviso per colori e per valori, le performance da migliorare saranno contrassegnate dal rosso, quelle buone dal verde.
Viene considerato un buon punteggio quando è compreso tra 50 e 89, ottimo invece se compreso tra 90 e 100.
La schermata che appare è molto simile a quella di PageSpeed Inisghts.
La prima versione di PageSpeed non forniva tutte le voci sulle prestazioni del sito che invece analizza adesso, inizialmente infatti PSI, restituiva solamente i punteggi riguardanti le performance. Ma adesso ha integrato gli stessi parametri di lighthouse.
Ma, quindi, qual è la differenza tra Pagespeed Insights e Lighthouse?
La differenza tra questi due tool però sta nel fatto che PSI restituisce due tipologie di dati: i data lab (dati simulati in laboratorio) e dati RUM (dati basati su utenti reali). Lighthouse invece fa riferimento solo alla prima tipologia.
Quando conviene utilizzare l’uno o l’altro?
Se si desidera ad esempio:
- Eseguire controlli al livello di codice
- Valutare altri aspetti oltre i tempi di caricamento della pagina
- Sapere quanto velocemente il nostro sito carica dal punto di vista degli utenti
Allora è bene utilizzare Lighthouse, consapevoli però che i risultati si basano su dati simulati.
Se invece si desidera un resoconto accurato dei tempi di caricamento basato su esperienza di utenti reali allora in questo caso PagSpeed Insights è la scelta più ragionevole.
Consiglio: dal momento che i risultati del test potrebbero variare per via della cache, consigliamo di testare l’analisi anche con la navigazione in incognito.
Come utilizzare i dati
Dopo aver dato in pasto a Lighthouse l’url della propria pagina, verrà restituirà attraverso un rapporto nel quale vengono elencate nel dettaglio le prestazioni della nostra pagina assieme ad alcuni suggerimenti su come migliorarle.
Le voci che restituisce l’analisi sono 5:
Performance: questa voce analizza la velocità di caricamento del sito; i parametri che analizza sono gli stessi che troveremo in Pagespeed Insights:
- Speed Index: ossia la velocità di caricamento dei contenuti della pagina
- First Contentful Paint (FCP): il tempo che intercorre tra l’apertura della pagina e l’apparizione di qualunque contenuto al suo interno
- Largest Contentful Paint (LCP): il tempo di caricamento dell’elemento che viene considerato più grande all’interno del viewport
- Cumulative Layout Shift (CLS): misura lo spostamento complessivo degli elementi visibili in pagina durante la fase di caricamento fino al suo completamento.
- Time to Interactive: tempo che intercorre da quando l’utente atterra nel sito web prima fino a quando può effettivamente fare la prima interazione con la pagina.
- Total Blocking Time: misura il tempo totale nel quale una pagina rimane bloccata in seguito ad un’interazione fino al suo completamento.
Anche qui è possibile visualizzare sia la performance mobile che quella desktop.
SEO: Il secondo parametro riguarda la SEO e restituisce consigli dal punto di vista dei fattori on-page, ossia quei fattori che puoi trovare effettivamente all’interno della pagina; tra cui Tag title, Meta description, tag alt per le immagini, indicizzazione, HTTPS e anchor text.
Best Practices: questa voce analizza gli aspetti relativi alla sicurezza del sito, anche a livello di database, controlla se le risorse provengono da fonti sicure e se sono presenti librerie Javascript obsolete o contenenti errori.
Accessibility: una voce a cui viene data solitamente meno importanza delle altre, ma è fondamentale per rendere un sito ben navigabile. L’Accessibility esamina il sito dal punto di vista di una persona con disabilità. Analizza se siano presenti descrizioni agli elementi di interazione (bottoni o collegamenti esterni) e se ad ogni immagine sia stato applicato l’attributo “alt” per identificarne con più precisione il contenuto. In questo modo gli screen reader hanno la possibilità di descrivere la pagina ad utenti ipovedenti.
I consigli che vengono dati riguardano: il contrasto tra font e colore di fondo che può alle volte limitare la leggibilità, stessa cosa sulla descrizione inerente ai bottoni.
- Alternative text, ossia il testo dato ad un’immagine per descriverne il contenuto di modo che sia più facile essere descritta agli utenti ipovedenti.
- Titolo univoco per la pagina: il titolo della pagina è il primo testo che un utente leggerà pertanto è importante che descriva in maniera concisa il contenuto al suo interno, quindi coerente con ciò che troveremo scorrendo la pagina web.
- Testo descrittivo per i collegamenti: è essenziale che i contenuti e le call to action della tua pagina siano leggibili separatamente dal testo per facilitare la navigazione di utenti ipovedenti che utilizzano screen reader.
Progressive web app: Una web app è, appunto, un’applicazione che non necessita di essere scaricata per poter essere utilizzata ma vi si può accedere direttamente da browser, basta pensare a quando facciamo accesso ad applicazioni come instagram o facebook, cercandole nel motore di ricerca e potendole tranquillamente navigare come qualsiasi app installata direttamente su mobile.
Differenza tra PWA e sito web:
Per creare un sito web è necessario unire diverse più pagine web sotto un unico dominio e vi si accede tramite internet. Una PWA, come già specificato, è un software accessibile da browser.
Questa voce, quindi, analizza l’accessibilità e la navigazione di una web app.
Inizialmente questa sezione era il fulcro di lighthouse.
Oltre a queste analisi possiamo trovare anche spunti di miglioramento per ottimizzare al meglio il sito, ne elenchiamo alcune:
- Salvare le immagini con le dimensioni corrette e utilizzare formati più moderni come webp, che hanno grosse capacità di compressione ma non perdono qualità.
- Comprimere, ove possibile, gli script Js
- Ottimizzare la cache
- Caricare nella fase iniziale le richieste più importanti per consentire al server di avere tempi di risposta più brevi possibili
- Utilizzare contenuti video con formati moderni e poco ingombranti
- Utilizzare in modo corretto i tag per consentire un buon monitoraggio
Per saperne di più PageSpeed Insights.
Conclusioni
Riassumendo, i vantaggi principali di lighthouse sono:
- l’analisi è suddivisa in aree specifiche
- consente di migliorare le prestazioni di un sito in termini di velocità e usabilità
- consente di comprendere i problemi principali che possiamo trovare alla base di un posizionamento di un sito
Lighthouse fornisce un’anteprima di come Google analizza le tue pagine web. Restituisce dati sull’esperienza di navigazione che il tuo sito offre, indipendentemente da come gli utenti vi accedano.
Fornisce informazioni necessarie ad apportare migliorie alle tue pagine per garantire un posizionamento migliore in ricerca.
Lighthouse viene costantemente aggiornato per garantire l’analisi di metriche sempre più specifiche e recenti.
