Auditoría de Performance Web con Github Actions y Lighthouse

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:55

Auditoría de Performance Web con Github Actions y Lighthouse

Curso de Optimización Web

Clase 35 de 38

Clase 35 / 38

Recursos

¿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:

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

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Auditoría de Performance Web con Github Actions y Lighthouse