El page speed, ese que nos trae de cabeza cuando desarrollamos proyectos webs, y que tanto odiamos.

Ese que cuando se te ha ido al carajo te enteras un mes más tarde porque alguien te ha avisado o si tienes suerte en tu empresa han “implementado un proceso de vigilancia” que se trata de que una vez al mes el junior del equipo haga un informe.

Ese es al que vamos a atacar hoy, y con el que pretendo hacer un dashboard que me permita no sólo ver su evolución en el tiempo para tener un histórico, sino montar algún sistema de alerta que me avise cuando algo no va como debería.

¿Y un histórico para qué Antonio? Pues por ejemplo, si sabes que el día 2 de Febrero las métricas se piraron al espacio exterior y que ese día hicisteis una subida a producción de la feature X, pues blanco y en botella, por ejemplo.

Manos a la obra

Esto va a constar de:

1. Un cron que se ejecute cada X días.
2. Ese proceso, que me consulte Google PageSpeed Insights via API para traerme el Score y las Core Vitals, que serán las métricas que vamos a monitorizar.
3. Las revisamos, y si algo no nos gusta, notificación que enviamos.
4. Las guardamos en base de datos para poder tener el histórico.
5. Creamos un dashboard con la info.

Paso 1

Podríamos usar Zapier o Microsoft Power Automate, pero pagar por esto es tontería, así que un simple cron en el servidor, que nos ejecute un fichero PHP (prácticamente todos los hosting ofrecen esto), así que en este paso no me entretengo más.

Paso 2

En la página de PageSpeed Insights tenemos cómo crear nuestra API KEY y la url de la llamada que tendremos que hacer:

https://developers.google.com/speed/docs/insights/v5/get-started?hl=es

Ahora nos vamos a nuestro código PHP.

El código lo pongo en Gist:

La parte interesante del código son los campo del json una vez convertido a array, ya que la verdad es que hay poca info en la documentación de Google.

Con esto ya lo tendríamos mostrando en pantalla, algo como:

Paso 3

Ahora miramos si los core vitals tienen valor “SLOW”, en cuyo caso notificaremos por el método que acordemos.// Notificamos? Core vitals

// Notificamos?
if ( $data['loadingExperience']['metrics']['CUMULATIVE_LAYOUT_SHIFT_SCORE']['category'] == 'SLOW' ) {
    echo "<p>Notificar a los desarrolladores</p>";
}

// Notificamos si la performance es menor a 0.5
if ( $data['lighthouseResult']['categories']['performance']['score'] < 0.5 ) {
    echo "<p>Notificar a los desarrolladores</p>";
}

Con esto ya tenemos nuestro watchdog de performance web disponible.

Paso 4

¿Histórico? Para esto tiramos de base de datos y guardamos las métricas.

// guardamos en base de datos
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "pagespeed";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Fallo de conexión: " . $conn->connect_error);
}

// core vitals
if ( $metrics ) {
    foreach ( $metrics as $key=>$metric ) {
        $sql = "INSERT INTO pagespeed (url, strategy, name, value)
        VALUES ('" . $url_destino . "', '" . $strategy . "', '" . $key . "', '" . $metric['category'] . "')";
        if ($conn->query($sql) === TRUE) {
            echo "Datos guardados correctamente";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
    }
}

// performance
$audits = $data['lighthouseResult']['categories'];
if ( $audits ) {
    foreach ( $audits as $key => $value ) {
        $sql = "INSERT INTO pagespeed (url, strategy, name, value)
        VALUES ('" . $url_destino . "', '" . $strategy . "','" . $key . "', '" . $value . "')";
        if ($conn->query($sql) === TRUE) {
            echo "Datos guardados correctamente";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
    
    }
}

Ya lo tenemos en nuestra base de datos 🥳

Paso 5

Tenemos la data, tenemos el proceso que se encarga de obtenerla, it’s time to draw !!

Y si me conoces, este paso es el que me falta, primero porque no tengo data histórica aún, pero a eso le sumamos que soy más de diseñar motor que chapa y pintura.

Actualizaré el post cuando tengo algo más de data para pintar un dashboard … o no 🥹

De esta forma tan sencilla y completamente gratuito tenemos no sólo un dashboard para ver la evolución de los core vitals y performance de nuestras webs, pudiendo asociarlos a releases y analizar posibles impactos. Amén de tener un chivato que nos informe cuando nuestras métricas se vayan de los parámetros “razonables” que consideremos.

🚀🚀🚀🚀🚀🚀