Google Lighthouse – lo strumento per la Seo Tecnica

Google Lighthouse è uno strumento open source e automatizzato per misurare la qualità delle pagine web. Può essere eseguito su qualsiasi pagina web, pubblica o che richiede l’autenticazione.

Indice

• Cos’e’ Google LightHouse
• Come funziona Google Lighthouse?
  • Prestazioni
  • Accessibilità
  • Best Practice
  • SEO
  • Progressive Web App
• Come usare Google Lighthouse
  • Chrome dev tools
  • Pagespeed
• Domande frequenti su Lighthouse

Cos’e’ Google LightHouse

Google Lighthouse è uno strumento software che verifica le prestazioni, l’accessibilità e i fattori di ottimizzazione dei motori di ricerca delle pagine web, questa è la differenza principale rispetto a Google PageSpeed, Google Lighthouse fornisce informazioni più dettagliate.

Google Lighthouse include anche la possibilità di testare le applicazioni web progressive per la conformità con gli standard e le best practice. Google Lighthouse è sviluppato da Google e mira ad aiutare gli sviluppatori web, questo strumento può essere eseguito utilizzando l’apposita estensione del browser Chrome o utilizzando il terminale (comando) per l’audit in batch di un elenco di URL. La raccomandazione di Google è di utilizzare la versione online di Page Speed ​​Insights a partire dal 15 maggio 2015.

Google Lighthouse [nella versione 10 – maggio 2023] include una metrica per le applicazioni web progressive per garantire che le PWA (Web App progressive) siano veloci e affidabili, installabili e ottimizzate per la moderna tecnologia mobile di settima e ottava generazione. Google Lighthouse può verificare le pagine web nella versione desktop e nella versione mobile. In modalità comando (cmd in Windows), lo sviluppatore è in grado di selezionare i fattori che devono essere verificati e altre opzioni utilizzando la riga di comando. Le versioni recenti di Google Lighthouse offrono spunti su come ottimizzare le metriche Core Web Vitals (che è uno dei segnali utilizzati dall’algoritmo di Google per classificare le pagine), come annunciato dall’ingegnere di Google Addy Osmani nel 2021. Ad oggi, Google utilizza tre parametri per misurare la conformità Core Web Vitals, che sono:

• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Total Blocking Time (TBT) come proxy per First Input Delay (FID)

Il 10 maggio 2023, Google ha annunciato che ha INP sostituito FID come metrica che misura la reattività di una pagina. La mossa mira a ottenere una migliore gestione del tempo totale impiegato per le interazioni dell’utente, piuttosto che solo della prima interazione. Queste modifiche inizieranno a interessare i risultati delle pagine a partire da marzo 2024.  

Come funziona Google Lighthouse?

Google Lighthouse funziona eseguendo audit per cinque categorie principali di ottimizzazione dei siti web.

1. Prestazioni

In questo audit, Lighthouse misura la velocità di caricamento di un sito web e la velocità con cui gli utenti possono accedervi. Segnala le tue prestazioni per cinque metriche di velocità, ciascuna delle quali misura un aspetto di pagespeed:

• First Contentful Paint (FCP): misura il momento in cui il primo testo o immagine diventa visibile agli utenti
• Largest Contentful Paint (LCP): calcola il tempo impiegato da una pagina per caricare il suo elemento più grande per gli utenti
• Total Blocking Time (TBT): misura la quantità di tempo in cui una pagina è bloccata dal reagire all’input dell’utente, come un clic del mouse
• Cumulative Layout Shift (CLS): misura gli spostamenti di layout che si verificano quando gli utenti accedono a una pagina
• Speed ​​Index (SI): mostra la velocità con cui viene caricato il contenuto di una pagina

Lighthouse assegna un punteggio di prestazioni complessivo a una pagina in base alle prestazioni della pagina per tutte queste metriche. Il punteggio può essere compreso tra 0 e 100 Se il tuo punteggio è compreso tra 90 e 100, indica che la tua pagina è ben ottimizzata per l’esperienza utente. Qualsiasi valore inferiore a 90 indica che un numero significativo di risorse sulla tua pagina sta rallentando le cose, influenzando l’esperienza complessiva della pagina. Lighthouse offre anche dei suggerimenti. Che puoi implementare per migliorare le tue prestazioni.

2. Accessibilità

Il test di accessibilità di Lighthouse analizza quanto bene le persone che utilizzano tecnologie assistive possono usare il tuo sito web. In particolare, esamina elementi come pulsanti e link per vedere se sono descritti bene. Analizza anche le immagini per vedere se è specificato il testo alternativo. Quindi, quando gli utenti con una vista limitata o assente utilizzano lettori di schermo, capiscono di cosa tratta l’immagine. Simile a un report di controllo delle prestazioni, il report di accessibilità fornisce un punteggio su 100. Più alto è il punteggio, meglio è. Lo strumento evidenzia anche le opportunità per migliorare l’accessibilità complessiva.

3. Best Practice

L’audit delle best practice in Lighthouse verifica se la tua pagina è basata sui moderni standard di sviluppo web. Lighthouse esamina se:

• Le risorse vengono caricate da server sicuri con HTTPS.
• Tutte le immagini vengono visualizzate con le proporzioni corrette e nella risoluzione appropriata.
• Tutte le librerie JavaScript sono sicure e prive di vulnerabilità.
• La pagina ha il doctype HTML.
• La Content Security Policy (CSP) è efficace contro gli attacchi cross-site scripting (XSS).
• La ​​pagina è priva di tutti gli errori del browser.
• La pagina è priva di framework e API deprecati.
• La pagina ha mappe sorgente valide.
• La pagina è priva di problemi che compaiono nel pannello Chrome DevTools, come errori di richiesta di rete, misure di sicurezza
• insufficienti e altri problemi del browser.
• La codifica dei caratteri della pagina è impostata con il tag meta charset.
• La pagina consente agli utenti di incollare la password nel campo password.
• La pagina crea una buona esperienza utente bloccando le richieste di autorizzazione di geolocalizzazione e notifica al caricamento della pagina.

Tutti questi fattori determinano il tuo punteggio su 100. Il rapporto Lighthouse sulle best practice evidenzia anche elementi specifici che richiedono la tua attenzione. Il che può migliorare il tuo punteggio.

4. SEO

Lighthouse esegue un test per analizzare la tua pagina web per alcuni aspetti tecnici della SEO. In particolare, controlla se:

• La tua pagina web è ottimizzata per i dispositivi mobili
• La pagina ha dati strutturati validi
• I link interni sono scansionabili
• La pagina ha un attributo hreflang valido
• I tag title e meta description sono impostati
• La pagina è indicizzabile
• Robots.txt è valido
• La pagina restituisce un codice di risposta di stato HTTP 200 (OK)
• La pagina ha un tag “rel=canonical” valido impostato
• Il contenuto della pagina è indipendente dai plugin
• I link su una pagina sono introdotti con testo descrittivo
• Le immagini su una pagina hanno testi alt specificati
• La pagina ha un meta tag viewport con larghezza o scala iniziale impostata

E quindi assegna un punteggio su 100. Evidenzia anche eventuali problemi SEO rilevati durante l’esecuzione di un audit. Ma lo strumento non fornisce un quadro completo della SEO. Se vuoi che il tuo sito web abbia un posizionamento migliore su Google, devi assicurarti che sia ottimizzato per tutti gli aspetti della SEO. Assicurati che nessun problema influenzi la tua classifica. È qui che gli strumenti di di Google Search Console possono venirti incontro. Con questo strumento, otterrai una panoramica di alto livello dello stato di salute della SEO del tuo sito web. La diagnostica di lighthouse ti spiega tutti i problemi che affliggono la performance del tuo sito web singolarmente Per ogni problema rilevato, lo strumento offre consigli su come risolverlo.

Per maggiori approfondimenti su questo argomento segui la nostra sezione diagnostiche di pagespeed

Risolvi ogni problema che lo strumento rileva per il tuo sito. In questo modo la SEO del tuo sito web rimarrà  in uno stato di salute ottimale.

5. Progressive Web App (PWA)

L’audit PWA in Lighthouse convalida se la tua applicazione web utilizza funzionalità web moderne per fornire un’esperienza utente ottimale. Img Controlla se la tua app web è:

• Veloce e affidabile sulle reti mobili e offre funzionalità offline
• Installabile su più tipi di dispositivi e ha funzionalità come funzionalità offline e notifiche push
• Ottimizzata per PWA reindirizzando il traffico HTTP a HTTPS, configurando una schermata iniziale personalizzata, ridimensionando il contenuto della pagina web per adattarlo agli schermi mobili e implementando tutte le altre best practice elencate da Lighthouse

Il test esegue la tua app web in base a questi fattori e assegna uno dei badge PWA. Ciò significa che, a differenza dei primi quattro report, ti viene assegnato un badge (non un punteggio di 100) quando esegui un audit PWA in Lighthouse. In questo modo: Il report di audit fornirà anche suggerimenti per migliorare le prestazioni complessive della tua PWA. Inclusi problemi specifici che devono essere affrontati.

Come usare Google Lighthouse

Ora che sai cos’è Google Lighthouse e come funziona, diamo un’occhiata ai diversi modi in cui puoi usarlo per controllare le tue pagine.

Usare Lighthouse con Chrome DevTools

Nel tuo browser Chrome, puoi eseguire un controllo di Google Lighthouse con Chrome DevTools.

1. Apri la pagina web che vuoi controllare.
2. Quindi fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e seleziona “Ispeziona”.
3. La funzione Ispeziona aprirà un pannello DevTools sul lato destro della pagina web.
4. Seleziona “Lighthouse” dalla barra degli strumenti del pannello. (Se non riesci a trovare l’opzione Lighthouse, fai clic sulle due frecce alla fine della barra degli strumenti. La vedrai lì.) Da qui, puoi selezionare una, più o tutte le categorie, a seconda degli aspetti del tuo sito web che vuoi analizzare. E fai clic su “Analizza caricamento pagina“.
5. Quindi lo strumento genererà un report per te. Troverai i punteggi di controllo per ciascuna categoria in alto.

Puoi fare clic su una categoria specifica per saperne di più. In questo esempio, abbiamo cliccato su “Performance” audit.

Nota: noterai che Lighthouse misura le tue prestazioni per sei metriche di velocità (invece di cinque) quando esegui un audit delle prestazioni con DevTools.

Quella metrica extra è Time to Interactive (TTI). Che calcola il tempo necessario affinché una pagina diventi completamente interattiva per gli utenti. Questa metrica è una delle metriche ritirate. Non è chiaro perché venga ancora presa in considerazione quando esegui gli audit Lighthouse in DevTools. Dopo aver eseguito l’audit, la tua pagina riceverà il suo punteggio su 100 e vedrai un elenco degli attuali problemi di accessibilità. Seguendo i suggerimenti di Google ed eseguendo i restanti controlli manuali elencati nella checklist di accessibilità, il tuo punteggio Lighthouse dovrebbe aumentare a 100. In uno scenario in cui hai completato tutti i controlli di accessibilità e il tuo punteggio Lighthouse è ancora inferiore a 100, dovresti sollevare il/i problema/i con il Digital Channel Management Team.

Come si utilizza Lighthouse su PageSpeed ​​Insights ?

Per utilizzare lo strumento PSI di Google:

1. Vai sulla pagina di PSI
2. Inserisci l’URL da analizzare nella barra degli strumenti, e
3. Premi  il pulsante Analizza e PageSpeed Insight si metterà al lavoro.

LightHouse, misurerà  le prestazioni della tua pagina tramite l’API Lighthouse. Google questo lo chiama “Lab Data” perché misura la velocità della pagina web in un ambiente simulato e controllato utilizzando: rete mobile 4G e un dispositivo di livello intermedio. Questo aiuta a eliminare alcune variabili che possono influire sulla velocità e sulle prestazioni di una pagina web.

Come funziona lighthouse su Google PageSpeed?

Google Pagespeed attribuisce al tuo sito Web un punteggio tra 0 e 100 punti; un punteggio di 90 o superiore, indica una pagina ben funzionante, questo strumento può darti delle informazioni dettagliate sulle prestazioni del tuo sito web.

Grazie all’aggiornamento più recente, lo strumento ora produce risultati diversi rispetto a quanto i webmaster si sono abituati a vedere. Il vecchio test ha dato molte delusioni, fornendo troppo spesso risultati frustranti e difficili da raggiungere.

Ora sarà tutto basato su come il tuo sito sta effettivamente performando e sul miglioramento dell’esperienza utente e dei tassi di conversione sul tuo sito web.

Domande frequenti su Lighthouse

In che modo Lighthouse è diverso da PageSpeed ​​Insights?

Lighthouse è diverso da PageSpeed ​​Insights in quanto Lighthouse utilizza solo dati di laboratorio per misurare le prestazioni delle tue pagine. Mentre PageSpeed ​​Insights utilizza sia dati di laboratorio che dati di campo. I dati di laboratorio riflettono il modo in cui gli utenti ipotetici potrebbero sperimentare il tuo sito. Al contrario, i dati di campo riflettono il modo in cui gli utenti reali hanno sperimentato il tuo sito web.

Perché i miei punteggi sono diversi ogni volta che eseguo un test?

I punteggi che vedi in Lighthouse possono variare ogni volta che esegui il test. Le condizioni di rete, le estensioni del browser che modificano le richieste di rete e gli annunci visualizzati sulla pagina specifica influenzano il tuo punteggio ogni volta che esegui il test.

I report Lighthouse includono le metriche Core Web Vitals?

Sì. L’audit delle prestazioni in Lighthouse analizza il tuo sito web per le seguenti metriche Core Web Vitals:

• Largest Contentful Paint (LCP)
• Total Blocking Time (TBT) (che funge da proxy per la metrica originale First Input Delay (FID))
• Cumulative Layout Shift (CLS)