Análisis automático con Lighthouse de las Core Web Vitals de todas las páginas de un sitio web

El próximo mes de mayo las «nuevas»métricas Core Web Vitals se convertirán en un factor de ranking oficial en las SERPs de Google junto con otras señales previamente ya anunciadas en torno a UX y WPO. Por esta razón, más que nunca, el análisis de rendimiento de cada una de nuestras páginas se va a convertir en algo imprescindible.

Ya no sirven más excusas, es el momento de acometer las mejoras necesarias. Pero ¿por dónde empiezo? Ya se ha escrito mucho sobre cuáles son las CWV, así que hoy simplemente me detendré en algo que va a ser de gran utilidad para cualquier sitio web: cómo generar un script que realice un análisis automático del estado de cada una de las páginas (bulk) de nuestro sitio web usando Lighthouse.

Qué es Lighthouse

Es una librería de código abierto centrada en la generación de propuestas para la mejora del rendimiento y la calidad de un sitio web. Consta de varios informes:

• Performance. Medición del rendimiento con el objetivo de encontrar oportunidades que permitan acelerar la carga de nuestras páginas.
• Progressive Web App. Planteamiento de acciones a acometer para convertir un sitio web en una PWA.
• Best practices. Optimización del código según las prácticas de desarrollo estándar.
• Accessibility. Implementaciones necesarias para que nuestro contenido sea accesible a cualquier persona.
• SEO. Insights básicos que podrían ayudar a mejorar nuestra visibilidad en los motores de búsqueda (esencialmente Google).

Este tipo de informes se pueden configurar para ser virtualizados según diferentes opciones: mobile/desktop, tipo de conexión (throttling), etc.

Unido a esto, una de las principales ventajas de Lighthouse es que puede ser utilizada desde diferentes lugares: navegador (inspector), node.js, …; y distintos lenguajes de programación: php, python, …

Valga como ejemplo de el gran número de posibilidades existentes esta «pequeña» implementación de un análisis bulk con Lighthouse (a partir del minuto 1:30 del vídeo) que desarrollé en mayo de 2019 a través de Google Apps Script, cuando muy poca gente realizaba este tipo de cosas. Ahora con la democratización de la tecnología y el aprendizaje gratuito cada vez somos más lo que nos involucramos en este tipo de cuestiones. Lo cual es una muy buena noticia. 

Sin embargo, en este caso concreto, el script que presento a continuación se ha generado en Python y Node.js. El lenguaje, sin lugar a dudas, más en boga (quizás hay algo de hype en este sentido).

Script para analizar múltiples urls con Lighthouse

Como ya he comentado, existen numerosas formas de generar un script que a través de Lighthouse analice las urls de un sitio web. Seguramente la forma más sencilla, ya que es evidente que Google está apostando por este lenguaje, sea a través de Python. Así que sin más dilación, vayamos a ello …

1. Abrir nuestro cliente de Python. En mi caso he usado PyCharm.
2. Crear un nuevo proyecto (probado sobre la versión 3.8 de Python).
3. Instalar Node.js y abrir su consola.
4. Escribir el comando ‘npm install -g lighthouse‘ y esperar a que se instale la librería Lighthouse.
5. Abrir Screaming Frog y crawlear las páginas a analizar de nuestro sitio web (elegir como se ve en la imagen de abajo las páginas HTML).
6. Exportar en un CSV las páginas mostradas y agregarlo al directorio donde hayamos guardado el proyecto de python (por defecto en Users/MyName/PycharmProjects).
7. Añadir el siguiente código al fichero main.py de nuestro proyecto en Python. No te olvides de modificar las siguientes variables dentro del código: path y csv.

import json
import pandas as pd
import os.path
import time


path = "[RUTA DONDE SE CARGARÁN O GUARDARÁN LOS FICHEROS NECESARIOS]"
csv = "[FICHERO CREADO PREVIAMENTE EN SCREAMING FROG CON LAS URLS A ANALIZAR]"


df = pd.DataFrame([], columns=['URL', 'FCP', 'LCP', 'CLS'])
bulk = pd.read_csv(csv)[["Address"]].values.tolist()


cont = 0
for url in bulk:
        stream = os.popen('lighthouse --quiet --output=json --output-path=' + path + str(cont) + '.json --chrome-flags="--headless" ' + str(url[0]))
        timer = 1
        while not os.path.exists(path + str(cont) + '.json'):
                print('\r' + str(timer) + ' segundos', end='')
                time.sleep(1)
                timer += 1


        json_file = path + str(cont) + '.json'
        with open(json_file, encoding="utf8") as json_data:
                data = json.load(json_data)
                fcp = str(round(data["audits"]["first-contentful-paint"]["score"] * 100))
                lcp = str(round(data["audits"]["largest-contentful-paint"]["score"] * 100))
                cls = str(round(data["audits"]["cumulative-layout-shift"]["score"] * 100))
                print('\n' + "FCP:" + fcp + ", LCP:" + lcp + ", CLS:" + cls + " (" + str(url[0]) + ")")


        schema = {"URL": url, "FCP": fcp, "LCP": lcp, "CLS": cls}
        df = df.append(schema, ignore_index=True)
        cont += 1


df.to_csv(path + 'lighthouse.csv')

Una vez ejecutado el código, en el mismo directorio donde habíamos guardado nuestro CSV con las urls a analizar, veremos que se han generado dos tipos de ficheros: un JSON por cada url analizada (0, 1, 2, …) con los datos de Lighthouse y un CSV (lighthouse.csv) con la información final que previamente hemos indicado en el código del script (en el código de ejemplo serían: url, fcp, lcp y cls).