Automatización de informes de Lighthouse

mar, 24 ene 2023

Una manera fácil de tener automatizados los informes de Lighthouse es usando la herramienta de Google llamada Lighthouse CI que nos permite pasar el test de ligthouse a una web y guardar los resultados en un servidor para poder compararlos con los resultados de otras ejecuciones.

Puedes ir viendo las mejoras en performance, accesibilidad, SEO, etc. de tu web. Inclusive puedes añadir reglas nuevas con plugins personalizados, por ejemplo, para comprobar que no se ha añadido html que no cumpla con las reglas de accesibilidad.

En un próximo post la idea es crear un plugin para lighthouse desde cero pra comprobar algunas "normas" no escritas de SEO en cada uno de mis post.

Para tener siempre una foto actual del sitemap de mi web utilizo playwright para revisar el sitemap, tener el arbol de enlaces y crear un organigrama usando Treant.js como puedes ver aquí reporte de lighthouse.

¿Cómo lo hice?

1. Consigue todas las urls de tu 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. Ejecuta lighthouse en cada una de las urls y guarda el 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

Ejemplo solo del primer nivel del 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 el código esta disponible en mi respositoro de github

4. Ejecuta tu script y despliega los archivos en un servidor estático como Vercel

node main.js

Si quieres ver los resultados solo haz click en "Lightouse" en la barra de navegación superior.