Auditoría de Performance Web con Github Actions y Lighthouse

¿Cómo asegurar que las optimizaciones de rendimiento se mantengan en el tiempo?

Optimizar el rendimiento de un sitio web es crucial para mejorar la experiencia del usuario y asegurar que las aplicaciones funcionen eficientemente. Sin embargo, es igualmente importante asegurarse de que estas optimizaciones perduren a lo largo del tiempo y no se vean afectadas por futuras actualizaciones o cambios en el código. Aquí es donde entra en juego el "performance budget". Este concepto nos ayuda a garantizar que los sitios web se ajusten a unos parámetros de rendimiento establecidos, mediante auditorías constantes.

¿Qué es un Performance Budget?

Un "performance budget" es una metodología que nos ayuda a definir, seguir y mantener los objetivos de rendimiento para nuestro sitio web. Se basa en tres componentes principales:

1. Elegir métricas importantes: Identificar qué métricas son críticas para el rendimiento de tu aplicación. Estas métricas pueden variar dependiendo del tipo de negocio y de los usuarios.

2. Establecer un límite: Definir los valores máximos que pueden alcanzar estas métricas, como podría ser el tamaño máximo de un archivo JavaScript, por ejemplo, 300 kilobytes.

3. Auditorías automáticas: Implementar auditorías automáticas para asegurarse de que el sitio se mantenga dentro de los límites establecidos.

¿Cómo implementar auditorías automáticas?

Las auditorías automáticas nos permiten controlar los cambios en el sitio web y asegurar que ninguna actualización rompa los parámetros de rendimiento pre-establecidos. Una herramienta efectiva para esto es Lighthouse, que puede ser integrada en tu flujo de trabajo usando herramientas de desarrollo como Webpack, npm scripts, o servidores de integración continua (CI).

Usar Lighthouse con GitHub Actions

Para automatizar las auditorías con Lighthouse en un proyecto, podemos aprovechar GitHub Actions. A continuación se muestra un ejemplo de cómo configurar una auditoría automatizada:

name: Performance Audit

on: 
  pull_request:
    branches: [master]

jobs:
  lighthouse:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '12'
    - run: npm install
    - run: npm run build
    - name: Run Lighthouse
      uses: treosh/lighthouse-ci-action@v8

¿Cómo establecer un presupuesto de rendimiento?

Para definir los valores base para las métricas de rendimiento, debes realizar un análisis inicial de tu sitio web usando Lighthouse y utilizar esos valores como referencia para establecer tus objetivos mínimos. Por ejemplo, si tu métrica de First Contentful Paint actualmente es de 1.2 segundos, podrías establecer tu valor objetivo en no más de 1.5 segundos.

¿Qué herramientas pueden facilitar las auditorías?

Puppeteer es otra herramienta poderosa que se utiliza junto con Lighthouse. Permite realizar operaciones automatizadas en un navegador Chrome headless, facilitando así la recopilación de datos críticos sin la complejidad de la manipulación manual.

¿Cómo sacar el máximo provecho de los informes de Lighthouse?

Lighthouse genera informes detallados con información valiosa sobre la manera en la que tu sitio se desempeña. Estos informes proporcionan:

• Calificaciones de rendimiento: Como el puntaje general de rendimiento del sitio, que es invaluable para evaluar mejoras continuas.
• Audits: Métricas específicas, como First Paint Times y tamaño de JavaScript, que pueden ser ajustadas para mejorar la eficiencia.

¿Qué sigue después?

A medida que integres más métricas y ajustes tus auditorías, sigue experimentando e incorporando mejoras basadas en los resultados obtenidos. En la próxima etapa del aprendizaje, puedes llevar cambios a un pull request y ver cómo GitHub Actions con Lighthouse se comporta, asegurando que cada actualización mantenga o eleve los estándares de rendimiento previamente establecidos. ¡Sigue aprendiendo y mejorando!