Integre Lighthouse CI en su flujo de trabajo para automatizar pruebas de rendimiento frontend. Mejore la velocidad, accesibilidad y SEO de su web con cada commit.
Pruebas de Rendimiento Frontend: Integrando Lighthouse CI para la Mejora Continua
En el panorama digital actual, el rendimiento de los sitios web es primordial. Los tiempos de carga lentos, los problemas de accesibilidad y un SEO deficiente pueden afectar significativamente la experiencia del usuario y, en consecuencia, los resultados comerciales. Las pruebas de rendimiento frontend se han convertido en una parte esencial del ciclo de vida del desarrollo de software moderno, garantizando que los sitios y aplicaciones web sean rápidos, fiables y fáciles de usar para una audiencia global. Este artículo profundiza en la integración de Lighthouse CI, una potente herramienta de código abierto, en su canal de integración continua (CI) para automatizar las pruebas de rendimiento frontend e impulsar la mejora continua.
¿Por qué son importantes las pruebas de rendimiento frontend?
Antes de sumergirnos en Lighthouse CI, entendamos por qué las pruebas de rendimiento frontend son cruciales:
- Experiencia de Usuario: Un sitio web rápido y receptivo proporciona una mejor experiencia de usuario, lo que conduce a un mayor compromiso y a una reducción de las tasas de rebote. Imagine a un cliente potencial en Tokio, Japón, intentando comprar un producto en un sitio de comercio electrónico de carga lenta. Es probable que abandone el sitio y busque alternativas.
- Clasificación SEO: Los motores de búsqueda como Google consideran la velocidad y el rendimiento del sitio web como factores de clasificación. Los sitios web más rápidos tienden a clasificarse más alto en los resultados de búsqueda, atrayendo más tráfico orgánico. La iniciativa Core Web Vitals de Google enfatiza la importancia de factores como Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS) para el SEO.
- Accesibilidad: Las mejoras de rendimiento a menudo conducen a una mejor accesibilidad para los usuarios con discapacidades. El código y las imágenes optimizadas pueden mejorar la experiencia para los usuarios que dependen de lectores de pantalla o aquellos con un ancho de banda limitado.
- Tasas de Conversión: Un sitio web más rápido puede impactar directamente en las tasas de conversión. Los estudios han demostrado que incluso un retraso de un segundo en el tiempo de carga de la página puede llevar a una disminución significativa en las conversiones. Piense en un usuario en Bombay, India, tratando de reservar un vuelo. Un proceso de reserva lento podría llevarlo a abandonar la compra y elegir a un competidor.
- Optimización de Recursos: Las pruebas de rendimiento ayudan a identificar áreas donde se pueden optimizar los recursos, lo que conduce a ahorros de costos en términos de infraestructura de servidores y uso de ancho de banda.
Presentando Lighthouse CI
Lighthouse CI es una herramienta automatizada de código abierto diseñada para integrarse perfectamente con su canal de CI/CD. Ejecuta Lighthouse, una popular herramienta de auditoría desarrollada por Google, y proporciona información sobre el rendimiento, la accesibilidad, el SEO, las mejores prácticas y el cumplimiento de la Progressive Web App (PWA) de su sitio web. Lighthouse CI le ayuda a:
- Automatizar Auditorías de Rendimiento: Ejecutar auditorías de Lighthouse automáticamente con cada commit o pull request.
- Seguimiento del Rendimiento a lo Largo del Tiempo: Monitorear las métricas de rendimiento a lo largo del tiempo e identificar regresiones de forma temprana.
- Establecer Presupuestos de Rendimiento: Definir presupuestos de rendimiento y hacer que las compilaciones fallen si se exceden.
- Integrarse con Sistemas CI/CD: Integrarse con sistemas populares de CI/CD como GitHub Actions, GitLab CI, CircleCI y Jenkins.
- Colaborar en Problemas de Rendimiento: Compartir informes de Lighthouse y colaborar con su equipo para resolver problemas de rendimiento.
Configurando Lighthouse CI
Aquí tiene una guía paso a paso para configurar Lighthouse CI en su proyecto:
1. Instalar Lighthouse CI
Instale la CLI de Lighthouse CI globalmente usando npm o yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Configurar Lighthouse CI
Cree un archivo lighthouserc.js en el directorio raíz de su proyecto para configurar Lighthouse CI. Aquí tiene un ejemplo de configuración:
module.exports = {
ci:
{
collect:
{
url: ['http://localhost:3000', 'http://localhost:3000/about'],
startServerCommand: 'npm start',
numberOfRuns: 3,
},
assert:
{
assertions:
{
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 1 }],
'categories:best-practices': ['warn', { minScore: 0.9 }],
'categories:seo': ['warn', { minScore: 0.9 }],
'categories:pwa': ['off'],
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
'total-blocking-time': ['warn', { maxNumericValue: 200 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
},
},
upload:
{
target: 'temporary-redirect',
},
},
};
Desglosemos esta configuración:
collect.url: Un array de URLs para auditar. Este ejemplo audita la página de inicio y la página "acerca de". Debería incluir todas las páginas críticas de su sitio web, considerando diferentes casos de uso. Por ejemplo, un sitio de comercio electrónico podría incluir la página de inicio, las páginas de listado de productos, las páginas de detalle de productos y el proceso de pago.collect.startServerCommand: El comando para iniciar su servidor de desarrollo. Esto es necesario si Lighthouse CI necesita ejecutarse en un entorno de desarrollo local.collect.numberOfRuns: El número de veces que se ejecutarán las auditorías de Lighthouse para cada URL. Ejecutar múltiples auditorías ayuda a mitigar las variaciones en las condiciones de la red y otros factores.assert.assertions: Un conjunto de aserciones para validar los resultados de la auditoría de Lighthouse. Cada aserción especifica una métrica o categoría y un umbral. Si no se cumple el umbral, la compilación fallará. Este ejemplo establece umbrales para las categorías de rendimiento, accesibilidad, mejores prácticas y SEO. También establece umbrales para métricas específicas como First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) y Cumulative Layout Shift (CLS).upload.target: Especifica dónde subir los informes de Lighthouse.temporary-redirectsube los informes a una ubicación de almacenamiento temporal y proporciona una URL para acceder a ellos. Otras opciones incluyen usar el servidor de Lighthouse CI o soluciones de almacenamiento en la nube como Google Cloud Storage o Amazon S3.
3. Integrar con su Sistema CI/CD
El siguiente paso es integrar Lighthouse CI en su canal de CI/CD. Aquí hay un ejemplo de cómo integrarlo con GitHub Actions:
Cree un archivo .github/workflows/lighthouse.yml en su repositorio:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install Dependencies
run: npm ci
- name: Run Lighthouse CI
run: | npm run build
lhci autorun
Este flujo de trabajo realiza los siguientes pasos:
- Hace checkout del código.
- Configura Node.js.
- Instala las dependencias.
- Ejecuta Lighthouse CI. Este paso primero compila la aplicación (
npm run build), luego ejecutalhci autorun, que ejecuta las auditorías de Lighthouse y compara los resultados con los umbrales configurados.
Adapte este flujo de trabajo a su sistema CI/CD y a los requisitos de su proyecto específicos. Por ejemplo, si está usando GitLab CI, configuraría un archivo .gitlab-ci.yml con pasos similares.
4. Ejecutar Lighthouse CI
Haga commit de sus cambios y súbalos a su repositorio. El canal de CI/CD ejecutará automáticamente Lighthouse CI. Si alguna de las aserciones falla, la compilación fallará, proporcionando retroalimentación valiosa a los desarrolladores. Los informes de Lighthouse CI estarán disponibles en la URL proporcionada por el sistema CI/CD.
Configuración y Personalización Avanzada
Lighthouse CI ofrece una amplia gama de opciones de configuración y posibilidades de personalización. Aquí hay algunas características avanzadas:
1. Usando el Servidor de Lighthouse CI
El servidor de Lighthouse CI proporciona un panel centralizado para realizar un seguimiento de las métricas de rendimiento a lo largo del tiempo, gestionar proyectos y colaborar en problemas de rendimiento. Para usar el servidor de Lighthouse CI, necesita configurar una instancia y configurar su archivo lighthouserc.js para subir los informes al servidor.
Primero, despliegue el servidor. Hay varias opciones de despliegue disponibles, incluyendo Docker, Heroku y proveedores de nube como AWS y Google Cloud. Consulte la documentación de Lighthouse CI para obtener instrucciones detalladas sobre cómo desplegar el servidor.
Una vez que el servidor esté en funcionamiento, actualice su archivo lighthouserc.js para que apunte al servidor:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000'],
startServerCommand: 'npm start',
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 0.9 }],
},
},
upload:
{
target: 'lhci',
serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
token: 'YOUR_LHCI_SERVER_TOKEN',
},
},
};
Reemplace YOUR_LHCI_SERVER_URL con la URL de su servidor de Lighthouse CI y YOUR_LHCI_SERVER_TOKEN con un token generado por el servidor. El token autentica su canal de CI con el servidor.
2. Estableciendo Presupuestos de Rendimiento
Los presupuestos de rendimiento definen umbrales aceptables para métricas específicas. Lighthouse CI le permite establecer presupuestos de rendimiento y hacer que las compilaciones fallen si se exceden esos presupuestos. Esto ayuda a prevenir regresiones de rendimiento y asegura que su sitio web se mantenga dentro de los límites de rendimiento aceptables.
Puede definir presupuestos de rendimiento en su archivo lighthouserc.js utilizando la propiedad assert.assertions. Por ejemplo, para establecer un presupuesto de rendimiento para First Contentful Paint (FCP), puede agregar la siguiente aserción:
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
Esta aserción hará que la compilación falle si el FCP es superior a 2500 milisegundos.
3. Personalizando la Configuración de Lighthouse
Lighthouse CI le permite personalizar la configuración de Lighthouse para adaptarla a sus necesidades específicas. Puede configurar varios ajustes de Lighthouse, como:
onlyAudits: Especificar una lista de auditorías para ejecutar.skipAudits: Especificar una lista de auditorías para omitir.throttling: Configurar los ajustes de limitación de red para simular diferentes condiciones de red.formFactor: Especificar el factor de forma (escritorio o móvil) a emular.screenEmulation: Configurar los ajustes de emulación de pantalla.
Para personalizar la configuración de Lighthouse, puede pasar una bandera --config-path al comando lhci autorun, apuntando a un archivo de configuración de Lighthouse personalizado. Consulte la documentación de Lighthouse para obtener una lista completa de las opciones de configuración.
4. Auditando Páginas Autenticadas
Auditar páginas autenticadas requiere un enfoque ligeramente diferente. Debe proporcionar a Lighthouse CI una forma de autenticarse antes de ejecutar las auditorías. Esto se puede lograr usando cookies o creando un script para el proceso de inicio de sesión.
Un enfoque común es usar la bandera --extra-headers para pasar las cookies de autenticación a Lighthouse CI. Puede obtener las cookies de las herramientas de desarrollador de su navegador después de iniciar sesión en el sitio web.
Alternativamente, puede usar un script de Puppeteer para automatizar el proceso de inicio de sesión y luego ejecutar las auditorías de Lighthouse en las páginas autenticadas. Este enfoque proporciona más flexibilidad y le permite manejar escenarios de autenticación complejos.Mejores Prácticas para Pruebas de Rendimiento Frontend con Lighthouse CI
Para maximizar los beneficios de Lighthouse CI, siga estas mejores prácticas:
- Ejecutar Lighthouse CI Regularmente: Integre Lighthouse CI en su canal de CI/CD para ejecutar auditorías automáticamente con cada commit o pull request. Esto asegura que las regresiones de rendimiento se detecten temprano y se aborden rápidamente.
- Establecer Presupuestos de Rendimiento Realistas: Defina presupuestos de rendimiento que sean desafiantes pero alcanzables. Comience con presupuestos conservadores y ajústelos gradualmente a medida que mejore el rendimiento de su sitio web. Considere establecer diferentes presupuestos para diferentes tipos de páginas, dependiendo de su complejidad e importancia.
- Enfóquese en las Métricas Clave: Priorice las métricas de rendimiento clave que tienen el mayor impacto en la experiencia del usuario y los resultados comerciales. Los Core Web Vitals de Google (LCP, FID y CLS) son un buen punto de partida.
- Investigar y Abordar Problemas de Rendimiento: Cuando Lighthouse CI identifique problemas de rendimiento, investíguelos a fondo e implemente las soluciones adecuadas. Utilice los informes de Lighthouse para identificar las causas raíz de los problemas y priorizar las correcciones más impactantes.
- Monitorear el Rendimiento a lo Largo del Tiempo: Realice un seguimiento de las métricas de rendimiento a lo largo del tiempo para identificar tendencias y patrones. Utilice el servidor de Lighthouse CI u otras herramientas de monitoreo para visualizar los datos de rendimiento e identificar áreas de mejora.
- Eduque a su Equipo: Asegúrese de que su equipo comprenda la importancia del rendimiento frontend y cómo usar Lighthouse CI de manera efectiva. Proporcione capacitación y recursos para ayudarlos a mejorar sus habilidades y conocimientos.
- Considere las Condiciones de la Red Global: Al establecer presupuestos de rendimiento, considere las condiciones de la red en diferentes partes del mundo. Los usuarios en áreas con velocidades de internet más lentas pueden tener una experiencia diferente a la de los usuarios en áreas con velocidades más rápidas. Use herramientas para simular diferentes condiciones de red durante las pruebas.
- Optimizar Imágenes: La optimización de imágenes es un aspecto crítico del rendimiento frontend. Use herramientas como ImageOptim, TinyPNG o convertidores en línea para comprimir y optimizar imágenes sin perder calidad. Use formatos de imagen modernos como WebP, que ofrecen mejor compresión y calidad que los formatos tradicionales como JPEG y PNG. Implemente la carga diferida (lazy loading) para las imágenes que no son visibles inmediatamente en el viewport.
- Minificar y Comprimir Código: Minifique su código HTML, CSS y JavaScript para reducir el tamaño de los archivos. Use herramientas como UglifyJS, Terser o minificadores en línea. Habilite la compresión Gzip o Brotli en su servidor para reducir aún más el tamaño de los archivos transferidos.
- Aprovechar el Caché del Navegador: Configure su servidor para establecer las cabeceras de caché apropiadas para los activos estáticos como imágenes, archivos CSS y JavaScript. Esto permite a los navegadores almacenar en caché estos activos y evitar descargarlos repetidamente.
Conclusión
Integrar Lighthouse CI en su flujo de trabajo de desarrollo es un paso crucial hacia la creación de sitios web de alto rendimiento, accesibles y amigables con el SEO. Al automatizar las pruebas de rendimiento frontend y realizar un seguimiento del rendimiento a lo largo del tiempo, puede identificar y abordar los problemas de rendimiento de forma temprana, mejorar la experiencia del usuario e impulsar los resultados comerciales. Adopte Lighthouse CI y haga de la mejora continua del rendimiento un valor fundamental en su proceso de desarrollo. Recuerde que el rendimiento del sitio web no es un esfuerzo de una sola vez, sino un proceso continuo que requiere atención y optimización constantes. Considere los factores culturales y regionales para garantizar una experiencia fluida para todos sus usuarios, independientemente de su ubicación o dispositivo. Siguiendo las mejores prácticas descritas en este artículo, puede asegurarse de que su sitio web ofrezca una experiencia rápida, fiable y agradable a los usuarios de todo el mundo.