Buscar

Automatización dos informes de Lighthouse

Xabier Lameiro · 24 de xan. de 2023

Unha maneira fácil de ter automatizados os informes de Lighthouse é manexar desde un script a ferramenta de Google Lighthouse: pasar a auditoría a unha web e gardar os resultados para poder comparalos cos doutras execucións.

Convén ser preciso co nome, porque os dous confúndense: isto usa Lighthouse, o motor de auditoría. Lighthouse CI é outro proxecto — os paquetes @lhci/cli e @lhci/server, que existen para almacenar execucións e comparalas contra un orzamento. Se o que queres son asercións e un servidor de histórico en vez dun script que controlas ti, esa é a ferramenta.

Podes ir vendo as melloras en performance, accesibilidade, SEO, etc. da túa web. Inclusive podes engadir regras novas con plugins personalizados, por exemplo, para comprobar que non se engadiu html que non cumpra coas regras de accesibilidade.

Nun próximo post a idea é crear un plugin para lighthouse desde cero pra comprobar algunhas "normas" non escritas de SEO en cada un dos meus post.

Para ter sempre unha foto actual do sitemap da miña web utilizo playwright para revisar o sitemap, ter o arbol de ligazóns e crear un organigrama usando Treant.js como podes ver aquí reporte de lighthouse

Como o fixen?

1. Consegue todas as urls da túa 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.locator('body').innerHTML();
// get all urls inside sitemap - Fixed: Use safer regex pattern
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. Executa lighthouse en cada unha das urls e garda o reporte

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. Crea un organigrama usando Treant.js

Exemplo só do primeiro nivel do arbol

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',
        },
    },
};

Todo o código esta dispoñible na miña respositoro de github

4. Executa o teu script e desprega os arquivos nun servidor estático como Vercel

node main.js

Se queres ver os resultados só feixe click en "Lightouse" na barra de navegación superior.