Qualche settimana fa ti ho parlato dell'importanza delle performance (misurate tramite i segnali Core Web Vitals) nel definire la posizione di un sito web all'interno dei risultati di ricerca di Google.
Nell'articolo dicevo che uno degli strumenti principali per l'analisi delle performance di un sito web in sviluppo è proprio Lighthouse che, per ogni pagina del sito, permette di eseguire tutta una serie di test da mobile e da desktop in modo da ottenere istantaneamente un report con le criticità da sistemare.
Poiché fare una scansione completa di un sito web richiede di far girare l'analisi di Lighthouse due volte (mobile e desktop) per ogni pagina i tempi necessari a compiere lo studio possono allungarsi notevolmente. Proprio per evitare di dover fare a mano questo lavoro macchinoso ti spiego come automatizzare il processo utilizzando poche righe di JavaScript.
Ma prima di addentrarci nel codice mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!
Creazione del report con JavaScript #
La prima cosa da fare per iniziare è chiaramente quella di installare da npm il package di Lighthouse (è richiesta la versione di Node 12 o superiore):
npm install --save lighthouseUna volta completata l'installazione del pacchetto puoi creare lo script che dovrà prendere in ingresso una lista di URL da analizzare e, per ognuno di essi, salvare il report generato da Lighthouse sia con la simulazione di navigazione da un dispositivo mobile che da uno desktop.
Questo è lo script che mi sono creato:
const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
// L'elenco delle pagine da analizzare
const pages = [
'https://lorenzomillucci.it/',
'https://lorenzomillucci.it/lorenzo-millucci-chi/',
'https://lorenzomillucci.it/2021/01/19/core-web-vitals-cosa-sono-a-cosa-servono-e-come-si-misurano/',
];
// Carica le stesse configurazioni usate da lighthouse web per il test da mobile e da desktop
const desktopConfig = require('lighthouse/lighthouse-core/config/lr-desktop-config.js');
const mobileConfig = require('lighthouse/lighthouse-core/config/lr-mobile-config.js');
(async () => {
// Avvio di Chrome headless
const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
// Opzioni specifiche per lighthouse
const options = {
logLevel: 'silent',
output: 'html',
port: chrome.port
};
for (page of pages) {
console.log('Testing mobile...');
const runnerResultMobile = await lighthouse(page, options, mobileConfig);
fs.writeFileSync(`mobile_${new Date().toUTCString()}.html`, runnerResultMobile.report);
console.log('Testing desktop...');
const runnerResultDesktop = await lighthouse(page, options, desktopConfig);
fs.writeFileSync(`desktop_${new Date().toUTCString()}.html`, runnerResultDesktop.report);
}
await chrome.kill();
})();Eseguendo questo script verranno salvati come file HTML i due report completi (performance, PWA, SEO, accessibilità e best practices) che lighthouse avrebbe generato per desktop e mobile per ogni pagina elencata.
Se avessi la necessità di fare delle analisi più dettagliate e ti servisse avere i risultati del report in formato machine-readable puoi esportare il report in formato CSV o JSON. Per farlo basta cambiare l'opzione output come segue:
const options = {
logLevel: 'silent',
output: 'csv', // Oppure json
port: chrome.port
};Ottenere solo i punteggi globali di ogni categoria di test #
Nelle fasi di sviluppo di una pagina web può essere utile valutare solo l'impatto di ogni singola modifica sul punteggio globale senza la necessità di avere tutti i dati contenuti nel report. Per ottenere gli score assegnati ad ogni categoria puoi accedere direttamente alle seguenti proprietà del report:
console.log("Performances", runnerResultMobile.lhr.categories['performance'].score * 100);
console.log("Accessibilità", runnerResultMobile.lhr.categories['accessibility'].score * 100);
console.log("Best-practices", runnerResultMobile.lhr.categories['best-practices'].score * 100);
console.log("SEO", runnerResultMobile.lhr.categories['seo'].score * 100);
console.log("PWA", runnerResultMobile.lhr.categories['pwa'].score * 100);Velocizzare l'analisi di Lighthouse #
Un altro caso che può succedere in fase di sviluppo di un sito web è quello di avere la necessità di focalizzare l'attenzione solo su una certa tipologia di dati tra quelli contenuti nel report di Lighthouse (es. solo le performance) senza prendere in considerazione tutti gli altri test svolti dallo strumento. In casi come questo può essere utile configurare Lighthouse in modo da limitare la categoria di test effettuati in modo da guadagnare anche un po' di tempo nel tempo di generazione del report.
Ad esempio, per limitare l'analisi alle sole performance ti basta è modificare l'oggetto options aggiungendo onlyCategories: ['performance'] nel seguente modo:
const options = {
logLevel: 'silent',
output: 'html',
onlyCategories: ['performance'],
port: chrome.port
};Naturalmente è possibile limitare il report ad una qualunque altra categoria di test o, addirittura, personalizzare il report combinando più categorie. Tutto ciò di cui hai bisogno è modificare opportunamente la chiave onlyCategories.
Conclusioni #
Conosci la storia dei due boscaioli che si sfidano in una gara per determinare chi fosse riuscito a tagliare prima un albero? Se non la conosci la trovi qui.
In pratica alla fine della sfida non vince il boscaiolo che d'impegno si era messo a tagliare l'albero senza mai fermarsi ma vince l'altro che nonostante si fosse riposato 10 minuti dopo ogni ora si era preso la briga di affilare l'ascia ad ogni pausa.
Analizzare un sito web con Lighthouse è un po' come la sfida tra i due boscaioli in cui ci si può buttare a capofitto nel generare a mano i report per ogni pagina oppure ci si può fermare e "affilare l'ascia" creando uno script che esegua tutti i test in successione in una sola volta.
In questo articolo ti ho mostrato come fare a generare esattamente lo stesso report che è possibile ottenere con Lighthouse da Google Chrome. Naturalmente il modulo Node ha molte altre opzioni di cui non ho parlato che ti consentono di generare dei report su misura per il tuo caso specifico. Per saperne di più ti lascio il link diretto alla documentazione ufficiale del modulo.
Se questo post ti è piaciuto e ti è stato utile ti invito ad iscriverti al mio canale Telegram. Se invece hai domande o vuoi lasciare un commento puoi contattarmi direttamente su Telegram o su Twitter. A presto!