Google Lighthouse sta velocemente diventando, per me, uno strumento essenziale ogni volta che mi trovo a lavorare ad un sito web.
Preliminari
Date un’occhiata al rapporto di esempio che ho caricato a questo indirizzo per avere un riferimento interattivo mentre leggete questo articolo.
Cos’è Lighthouse?
Lighthouse è un potente strumento automatizzato targato Google, in grado di analizzare velocemente qualsiasi indirizzo URL e produrre uno soddisfacente report. Quest’ultimo è suddiviso in 5 categorie principali:
Performance
Il rapporto sulle prestazioni del sito (performance) è, a mio avviso, la sezione più interessante offerta da Lighthouse. In questa categoria, infatti, trovate una vera e propria scheda tecnica delle prestazioni del sito analizzato.
In questa categoria trovate informazioni riguardanti: il tempo impiegato per il primo rendering significativo nella pagina; il tempo per interagire con il sito; lo speed index; e molto altro ancora.
Un’altra cosa che troverete in questa sezione è un, estremamente utile e dettagliato, time-lapse composto da diverse miniature. Lo scopo è di mostrare, attraverso dei piccoli screenshot del sito, come la pagina è stata creata nel tempo, e quanto ha impiegato ogni singolo fotogramma chiave, per essere renderizzato nel browser.
Progressive Web App
Non sempre si realizzano siti web destinati a divenire vere o proprie applicazioni web. Ciò nonostante, questa sezione identifica anche altri aspetti del sito, che possono contribuire ad aumentare la qualità dell’esperienza offerta a visitatori utilizzanti dispositivi mobili (cellulari o tablet).
Per generare il punteggio finale, Google analizza certi aspetti della pagina esaminata. Ad esempio la possibilità di ruotare lo schermo, su un dispositivo mobile, senza danneggiare la funzionalità del sito. Inoltre, un fattore importante, per avere uno “score” più alto in questa categoria, sta nel tempo impiegato dalla pagina, per essere utilizzabile da un utente con connessione 3G.
Utilizzare service workers, logicamente, farà impennare il punteggio ottenuto in questa categoria. Questa tecnologia infatti, è stata realizzata appositamente per aumentare le prestazioni di siti internet visualizzati da dispositivi mobile. Se volete saperne di piì sui service workers, date un’occhiata a questo articolo di @Diego Phares.
Accessibility
Nella sezione dedicata all’accessibilità trovate tutte le informazioni necessarie per rendere il vostro sito accessibile.
E’ importante che un sito sia visualizzabile in dispositivi come screen-readers e soprattutto che sia in grado di essere visualizzato da persone con disabilità. La cecità e l’ipovisione, la sordità e la perdita di udito, limitazioni cognitive e dell’apprendimento, ridotte capacità di movimento, disabilità della parola, fotosensibilità e combinazioni di queste vengono esaminate in questa categoria.
Ottenere un buon punteggio in questa categoria, quindi, garantisce che il vostro sito possa venir navigato da persone in possesso di alcune delle menzionate disabilità. In questo modo sarete sempre sicuri di poter ricevere un maggior numero di utenti capaci di interagire con il vostro sito senza penalizzare nessuno.
Best Practices
Come dice già il titolo, in questa sezione trovate tutti gli accorgimenti a cui dovete prestare attenzione, per aumentare le prestazioni finali del vostro sito.
Questa è una categoria a parte, raggruppante vari accorgimenti a cui è bene prestare attenzione prima di lanciare un sito “Live”.
Questa sezione vi penalizzaerà, ad esempio, se il vostro sito è hostato su un dominio HTTP anzichè HTTPS in quanto considerata un’alternativa poco sicura.
Google, in fatti, sta iniziando a penalizzare siti sprovvisti di un certificato SSL. All’interno dei risultati del suo motore di ricerca, quindi, se volete ottenere più visibilità per il vostro sito, è “buona prassi” munirsi di un dominio web con certificazione SSL.
Se volete saperne di più sull’argomento, leggetevi questo articolo di tekapp.it
SEO
Ultimo, ma non meno importante, è il punteggio SEO. Per molte compagnie, infatti, questo è il punteggio su cui vengono spesi più soldi e risorse al fine di aumentare la visibilità del loro prodotto, in quanto questo risultato è direttamente proporzionale alla visibilità del sito all’interno dei maggiori motori di ricerca.
Questo tool quindi, va a controllare i cosidetti meta-tag all’interno della vostra pagina, per confermare che il sito disponga delle informazioni necessarie per venir tracciato e categorizzato, dai motori di ricerca, nel miglior modo possibile. Titolo, descrizione, parole chiave e molto ancora, sono le componenti che vi faranno ottenere un buon “score” in quest’ultima sezione del rapporto Google.
Perchè Lighthouse?
La risposta veloce è perchè Google è il motore di ricerca più utilizzato nel pianeta e Lighthouse è uno strumento creato dalla medesima compagnia.
Inoltre, a differnza di servizi simili, le informazioni ottenute sono da considerarsi in relazione ad utente medio che voglia visualizzare il vostro sito utilizzando una connessione Internet 3G. Il che significa che il “report” generato di Lighthouse non aumenta di punteggio se usate una connessione Internet super-veloce, ma Google utilizza i suoi strumenti dotati di intelligenza artificiale per garantire che il rapporto non venga condizionato dalla qualità della connessione Internet dell’utente.
Come usare Lighthouse?
Lighthouse è disponibile in un’infinità di diverse soluzioni in modo da non lasciarvi scuse per non usarlo ?.
Il modo più veloce per iniziare ad utilizzare Lighthouse subito, è di installare il plug-in per Chrome che potete ottenere da questo link.
Quindi, raggiungete il sito che volete analizzare, e cliccate sull’icona con il logo del faro per generare un rapporto al volo.
A partire da Chrome versione 69, Lighthouse 3.0 sarà nativamente integrato all’interno del Chrome DevTools, quindi potrete analizzare in modo semplice e veloce tutti i siti che volete e senza bisogno di intallare assolutamente nulla.
Quindi, semplicemente raggiungendo la scheda Audits, in Chrome, potrete avere accesso all’ultima versione del tool marchiato Google.
Continuous integration
Per terminare in bellezza, non mi resta che parlarvi di Continuous Integration (CI).
Avendo a disposizione uno strumento così potente, non posso non pensare ad una sua implementazione all’interno di un sistema di integrazione continua. In questo modo le performance del mio sito possono venir approvate prima di procedere con il deployment, così da impedire il rilascio della nuova versione nel caso in cui il risultato sia di pessima qualità (perchè non vogliamo pubblicare Live un sito con pessime prestazioni).
Al momento sono solo riuscito a trovare dei plug-ins piuttosto scadenti e con solo supporto per TraviCI o CircleCI, quindi ho deciso di crearne una mia versione.
Vi introduco LighthouseCI, uno strumento creato attorno al progetto Lighthouse, per essere facilmente integrato in qualsiasi soluzione CI.
Una volta installato con npm, lighthouse-ci può venir lanciato direttamente da qualsiasi terminale con il comando lighthouse-ci seguito dall’indirizzo del sito da analizzare:
$ lighthouse-ci https://italiancoders.it
Dopo una decina di secondi, una tabella vi mostrerà i punteggi ottenuti nelle 5 categorie chiave.
Ora, per integrare lighthouse all’interno della vostra soluzione CI preferita (TravisCI, CircleCI, Jenkins, Chef.io o simili), quello che dovete fare e lanciare questo comando prima del rilascio della nuova versione del vostro sito. Per impedire la pubblicazione di una nuova versione, nel caso uin cui lo “score” sia insoddisfacente, potete utilizzare le varie “flag” disponibili nel tool:
Opzioni disponibili
–score=<punteggio-minimo>
Lanciando lighthouse-ci con questo flag, lo script fallirà nel caso in cui uno o più dei 5 punteggi riportati, è inferiore al punteggio specificato.
Es.
$ lighthouse-ci -r http://example.com/ --score=80
Facendo riferimento al punteggio ottenuto nello screenshot precedente, questo comando ritornerà un errore poichè lo score di PWA (per http://example.com) è di 36, che non soddisfa il target minimo specificato di 80.
–performance=<punteggio-minimo>
Lanciando lighthouse-ci con questo flag, lo script fallirà nel solo caso in cui il punteggio ottenuto nella categoria performance, sarà inferiore al punteggio-minimo specificato.
–pwa=<punteggio-minimo>
–accessibility=<punteggio-minimo>
–best-practice=<punteggio-minimo>
–seo=<punteggio-minimo>
In modo analogo al precedente, questi altri 4 flag, possono venir utilizzati individuamente oppure in combinazione, per settare un punteggio minimo richiesto nelle singole categorie.
–report
Questo ultimo flag, se specificato, genererà un rapporto interattivo HTML all’interno di una cartella generata, chiamata lighthouse.
La configurazione che uso al momento su un job in Jenkins, è la seguente:
$ lighthouse-ci http://localhost:4200 –accessibility=75 –seo=80 –report
Questo comando eseguirà lighthouse su una applicazione Angular, eseguita all’interno di Jenkins stesso sulla porta 4200. Questo comando farà fallire l’intero processo di test, nel caso in cui il punteggio di accessibilità sia inferiore a 75%, e quello SEO inferiore a 80%.
That’s all folks!
Grazie della lettura, e non esitate a commentare l’articolo.
Link utili
https://developers.google.com/web/tools/lighthouse/ Il sito del progetto Lighthouse.
https://developers.google.com/web/updates/2018/05/lighthouse3 Per conoscere le novità introdotte in Lighthouse versione 3.
https://github.com/andreasonny83/lighthouse-ci Il progetto GitHub del mio lighthouse-ci.
https://about.me/andreasonny83 Per saperne di più su di me.
