Lighthouse è diventato il nostro tool preferito, ma che cos’è e come si usa?
Partiamo prima da un’altra considerazione. Quali caratteristiche deve avere un buon sito? Sicuramente deve essere veloce, responsive e ottimizzato per la SEO. Abbiamo anche detto in qualche articolo precedente, che un buon sito deve rispettare le nuove metriche di Google, i Core Web Vitals.
Ma come si misurano questi fattori? Semplice, utilizzando Lighthouse. Nei prossimi paragrafi vi spieghiamo che cos’è e come si usa per monitorare la velocità del sito e la SEO.
Che cos’è Lighthouse?
Lighthouse è uno strumento che misura la page experience creato da Google e inizialmente destinato a monitorare le Progressive Web App (PWA).
Questo strumento analizza vari aspetti della pagina e fornisce cinque tipi di report: per l’accessibilità, le prestazioni, la SEO, le Progressive Web App e un elenco esteso di best practice. Con anche i nuovi Core Web Vitals, questi report insieme offrono una panoramica eccellente della qualità e delle prestazioni del sito mobile e desktop.
La velocità del sito dipende dalla percezione e dalla user experience. La velocità numerica non significa nulla se il tuo sito sembra lento. Per questo il test di Lighthouse simula la visita del sito mobile con una connessione 3G su un dispositivo medio; nel tentativo di ricreare le condizioni del mondo reale nel modo più autentico possibile. Dopo aver eseguito il test, si riceve un rapporto con un punteggio e consigli pratici su come migliorare.
Page Speed Insights vs. Google Lighthouse
PageSpeed Insights è probabilmente lo strumento di analisi di velocità dei siti più utilizzato. Fornisce indicazioni su quali sono le possibili modifiche per migliorare le prestazioni.
PageSpeed Insights e Lighthouse erano due strumenti separati. Ora, con l’avvento di Web Vitals e l’aggiornamento della page experience, Google ha migliorato le metriche su entrambi. Non solo sono diventati più facili da capire, ma hanno anche metriche condivise.
Naturalmente, ogni strumento è realizzato per un’attività specifica e offre metriche specifiche. Utilizziamo PageSpeed quando:
- ci concentriamo unicamente sulle prestazioni;
- vogliamo avere una vera comprensione dei tempi di caricamento che gli utenti sperimentano sul sito;
- è necessario condividere il report.
Lighthouse estende gli aspetti sopra elencati e permette di analizzare altro oltre alle prestazioni, ci fornisce ad esempio report più specifici sulla qualità del codice.
Come si usa Lighthouse?
Abbiamo approfondito bene che cos’è Lighthouse, ma come si usa? E’ molto utile e facile da utilizzare sia per verificare la velocità del sito web, sia per analizzare i miglioramenti da fare lato SEO e accessibilità.
I test possono essere fatti sia per il sito versione desktop che versione mobile.
1. Performance: Verificare la velocità del sito web
L’intero concetto di accelerare il sito mobile è duplice: il sito deve essere veloce e deve sembrare veloce. Pertanto, è necessario che i contenuti vengano visualizzati sullo schermo il più rapidamente possibile. Inoltre, gli utenti devono essere in grado di interagire con i contenuti il prima possibile. Poiché Google ha annunciato che la velocità della pagina e la page experience saranno fattori di classificazione per la SEO, è necessario risolvere questi problemi.
Durante la misurazione delle prestazioni del tuo sito, Lighthouse utilizza le seguenti metriche:
- First Paintful Content (FCP): misura quanto tempo impiega il browser per eseguire il rendering del primo contenuto DOM dopo che un utente accede alla pagina. Ciò include, immagini, elementi <canvas> non bianchi e SVG ma esclude elementi all’interno di un iframe.
- Indice di velocità: misura la velocità con cui i contenuti vengono visualizzati visivamente durante il caricamento della pagina.
- Largest Contentful Paint (LCP): riguarda il tempo necessario per caricare l’oggetto più grande (ad esempio un’immagine o un blocco di testo). Questa è una delle nuove metriche più importanti. Qui, avere un buon punteggio significa che gli utenti percepiscono il tuo sito come veloce.
- Time to Interactive (TTI): misura in quanto tempo la pagina è in grado di rispondere rapidamente agli input dell’utente.
- Tempo di blocco totale (TBT): misura il tempo tra FCP e TTI in cui possono verificarsi blocchi, impedendo la risposta.
- Spostamento cumulativo del layout (CLS): esamina il numero di spostamenti del layout che si verificano durante l’intero processo di caricamento della pagina. Ogni volta che un elemento salta sullo schermo da un fotogramma all’altro, ciò conta come un cambiamento di layout.
Lighthouse offre anche alcune indicazioni su come migliorare il tempo di caricamento. Come la riduzione dei fogli di stile per il blocco del rendering, gli script per il blocco del rendering, il corretto dimensionamento delle immagini e il fissaggio delle immagini fuori schermo.
2. SEO: Verificare l’ottimizzazione SEO onpage
Un’altra interessante funzionalità di Lighthouse è il controllo SEO di base. Con questo controllo Lighthouse ci suggerisce come risolvere i problemi SEO di base di un sito.
Attualmente, i controlli riguardano:
- Se il sito è responsive e utilizzabile da mobile
- Se i dati strutturati sono validi
- Ha un tag <meta name=”viewport”> con larghezza o scala iniziale
- Il documento ha un elemento <title>?
- C’è una meta descrizione?
- La pagina ha un codice di stato HTTP corretto?
- I collegamenti hanno un anchor text descrittivo?
- Il documento utilizza dimensioni dei caratteri leggibili?
- La pagina non è bloccata dall’indicizzazione?
- Robots.txt è valido?
- Le immagini hanno attributi alt?
- Il documento ha un’implementazione hreflang valida?
- Il documento ha una configurazione rel=canonical valida?
- Ci sono plugin indesiderati come Java o Flash?
3. Best practice: i consigli base di sicurezza
Qui vengono indicate tutte le buone pratiche che un sito web dovebbre seguire, in particolare lato sicurezza, per essere conforme agli standard come ad esempio:
- presenza del protocollo SSL
- presenza di HTTP/2
- rel=nooper sui link in uscita
- non ci devono essere errori in console
- se sono presenti librerie Javascript obsolete o contenenti errori
- se sono presenti API obsolete
4. Accessibilità: il sito deve essere consultabile per tutti
Questi controlli evidenziano cosa può essere migliorato lato accessibilità, ovvero se il sito è consultabile anche, per esempio, da utenti ipovedenti.
Esegue, infatti, controlli sui colori del vostro sito per essere sicuri che sia facilmente leggibile e valuta se il testo deve essere ingrandito, se i bottoni sono sufficientemente grandi per essere cliccati con facilità, se le immagini hanno nomi accessibili (alt text) o se i link hanno nomi accessibili (aria-label) e molto altro. In più segnala anche cose da controllare manualmente poichè non è possibile esaminare tutto con i test automatici.
5. PWA: le progressive web app
Il termine PWA, Progressive Web App, si riferisce ad applicazioni web che vengono sviluppate e caricate come normali pagine web, ma che si comportano in modo simile alle applicazioni native quando utilizzate su un dispositivo mobile. Sono quindi un ibrido tra le normali pagine web (o siti web) e le applicazioni mobili.
La scansione PWA controlla se le pagine del sito possono essere facilmente scaricate sul dispositivo mobile e accessibili offline.
Utilizziamo sempre Lighthouse insieme a Page Speed, GTmetrix o Pingdom. Ogni report va analizzato e interpretato per capire dove il sito può essere migliorato.
Non va però dimenticata la cosa più importante: un sito deve essere gradevole da vedere, facile da consultare e deve comunicare. L’ottimizzazione della velocità e della SEO non deve mai essere a discapito di queste caratteristiche.
Il tuo sito è veloce e ottimizzato? Ti aiutiamo noi!
Leggi come strutturiamo i nostri siti per renderli veloci e ottimizzati.
Foto di Joshua Hibbert da Unsplash
Fonte Yoast SEO