Monitoriza el rendimiento de tu sitio con Speedlify

Cuando estamos trabajando en el desarrollo de un sitio web, la optimización en rendimiento del mismo debería ser uno de los pilares fundamentales sobre los que trabajar.

A veces el proyecto en sí puede ser optimizar el rendimiento de un sitio ya creado.

En ambas situaciones solemos tirar de herramientas tipo GTmetrix, Lighthouse, PageSpeed, Pingdom Tools, etc… para asegurarnos de que nuestro sitio es rápido y sigue las mejores prácticas para conseguirlo.

Creo que es un error que se suele producir con frecuencia, que estas actuaciones y mediciones se hacen de manera puntual. La realidad es que los sitios web con el paso del tiempo, crecen y evolucionan, se realizan modificaciones y/o añadidos cada cierto tiempo, etc…

Estas mediciones deberían ser continuas, para asegurarnos que con el paso del tiempo nuestro sitio sigue optimizado. En este punto es donde herramientas como Speedlify pueden echarnos una mano.

Instala Speedlify en local y monitoriza el rendimiento de tu sitio

Descarga o clona su repo desde GitHub. Una vez descargado, elimina todos los archivos .js de la ruta _data/sites/*.js . Quédate con uno a modo de plantilla (por ejemplo netlify.js, renómbralo con el nombre de tu sitio y configúralo a tu antojo:

module.exports = {
    name: "Desarrollo WP", // optional, falls back to object key
    description: "Blog sobre desarrollo en WordPress en Español",
    options: {
        frequency: 60 * 11 + 30, // 11h, 30m
        // Use "run" if the sites don’t share assets on the same origin and we can reset
        // chrome with each run instead of each site in every run (it’s faster)
        // Use "site" if sites are all on the same origin and share assets.
        freshChrome: "site",
    },
    urls: [
        "https://desarrollowp.com/",
        "https://desarrollowp.com/tag/wpo/",
    ]
};

Puedes establecer todas las URLs de tu sitio que quieras monitorizar.

Para el siguiente paso, necesitarás tener instalado node (>12). A continuación ejecuta los siguientes comandos:

npm install
npm run test-pages
npm run start

Como verás, nos ofrece las URLs de acceso para poder ver las estadísticas de rendimiento de nuestro sitio. Accediendo a http://localhost:8080/ veremos un listado de nuestros sitios, y haciendo click en uno de ellos, obtendremos las métricas:

En esta página podremos consultar los tests a través del tiempo, y ver las métricas que tiene nuestro sitio en Lighthouse, Core Web Vitals, y los pesos de los diferentes assets de nuestro sitio (HTML, CSS, JS, Images, Fonts, 3rd Party)

• « Deja a un lado los…
• Comparte tu desarrollo en local… »