Buscar

Automatización de informes de Lighthouse

Xabier Lameiro · 24 ene 2023

Una manera fácil de tener automatizados los informes de Lighthouse es manejar desde un script la herramienta de Google Lighthouse: pasar la auditoría a una web y guardar los resultados para poder compararlos con los de otras ejecuciones.

Conviene ser preciso con el nombre, porque los dos se confunden: esto usa Lighthouse, el motor de auditoría. Lighthouse CI es otro proyecto — los paquetes @lhci/cli y @lhci/server, que existen para almacenar ejecuciones y compararlas contra un presupuesto. Si lo que quieres son aserciones y un servidor de histórico en vez de un script que controlas tú, esa es la herramienta.

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.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. 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.