Lighthouse report automation

Tue, Jan 24, 2023

An easy way to have automated Lighthouse reports is using the Google tool called Lighthouse CI that allows us to pass the ligthouse test to a website and save the results on a server to compare them with the results of other executions.

You can see the improvements in performance, accessibility, SEO, etc. of your website. You can even add new rules with custom plugins, for example, to check that no html has been added that does not comply with the accessibility rules.

In a future post the idea is to create a lighthouse plugin from scratch to check some unwritten SEO "rules" in each of my posts.

To always have a current snapshot of the sitemap of my site I use playwright to check the sitemap, have the link tree and create a flowchart using Treant.js as you can see here lighthouse report.

How did I do it?

1. Get all urls from your sitemap

main.js

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://xabierlameiro.com/sitemap.xml');
// get site map inside a body
const sitemap = await page.$eval('body', (el) => el.innerHTML);
// get all urls inside sitemap
const urls = sitemap.match(/<loc>(.*?)<\/loc>/g).map((url) => url.replace(/<\/?loc>/g, ''));
// split urls in locales bearing in mind that 'en' is the default locale and it's not included in the url
let locales = urls.reduce((acc, url) => {
    let locale = url.split('/')[3];
    if (locale !== 'gl' && locale !== 'es') {
        locale = 'en';
    }
    if (!acc[locale]) {
        acc[locale] = [];
    }
    acc[locale].push(url);
    return acc;
}, {});
const index = locales.en.indexOf('https://xabierlameiro.com');
locales.en[index] = 'https://xabierlameiro.com/home';
await browser.close();

2. Run lighthouse on each of the urls and save the report.

main.js

for (const url of locales[lang]) {
    // Report
    const result = await launchChromeAndRunLighthouse(
        url === 'https://xabierlameiro.com/home' ? 'https://xabierlameiro.com' : url,
        options
    );
    let fileName = url.split('/').pop();
    if (fileName === 'es' || fileName === 'gl') {
        fileName = 'home';
    }
    // write report in output folder
    fs.writeFileSync(lang === 'en' ? `output/${fileName}.html` : `output/${lang}/${fileName}.html`, result.report);
}

3. Create an organisation chart using Treant.js

Example of the first level of the tree only

main.js

const chart = {
    chart: {
        container: '#OrganiseChart-big-commpany',
        levelSeparation: 40,
        siblingSeparation: 20,
        subTeeSeparation: 30,
        rootOrientation: 'NORTH',
        nodeAlign: 'BOTTOM',
        connectors: {
            type: 'step',
            style: {
                'stroke-width': 2,
            },
        },
        node: {
            HTMLclass: 'big-commpany',
        },
    },
};

All the code is available in my github repository

Run your script and deploy the files to a static server like Vercel.

node main.js

If you want to see the results just click on "Lightouse" in the top navigation bar.