Incorporar presupuestos de rendimiento en el proceso de compilación

Milica Mihajlija

Una vez que hayas definido un presupuesto de rendimiento, deberás configurar el proceso de compilación para hacer un seguimiento. Existen varias herramientas que te permiten definir umbrales para las métricas de rendimiento elegidas y te advierten si superas el presupuesto. Descubre cómo elegir la que mejor se adapte a tus necesidades y configuración actual. 🕵️ ♀️

Presupuestos de rendimiento de Lighthouse

Lighthouse es una herramienta de auditoría que prueba los sitios en algunas áreas clave: rendimiento, accesibilidad, prácticas recomendadas y el rendimiento de tu sitio como aplicación web progresiva.

La versión de línea de comandos de Lighthouse (v5 y versiones posteriores) admite la configuración de presupuestos de rendimiento en función de lo siguiente:

• tamaño del recurso
• recuento de recursos

Puedes establecer presupuestos para cualquiera de los siguientes tipos de recursos:

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

Los presupuestos se establecen en un archivo JSON y, después de definirlos, la nueva columna "Excedente" te indica si se están excediendo los límites.

Sugerencias de rendimiento de webhook

Webpack es una herramienta de compilación potente para optimizar la forma en que se entrega tu código a los usuarios. También permite establecer presupuestos de rendimiento en función del tamaño de los recursos.

Activa las sugerencias de rendimiento en webpack.config.js para recibir advertencias o errores de la línea de comandos cuando el tamaño del paquete supere el límite. Es una excelente manera de estar atentos a los tamaños de los recursos durante el desarrollo.

Después del paso de compilación, webpack genera una lista de elementos y tamaños codificada por colores. Si se supera ese presupuesto, se destacará en amarillo.

El límite predeterminado para los recursos y los puntos de entrada es de 250 KB. Puedes establecer tus propios destinos en el archivo de configuración.

Los presupuestos se comparan con los tamaños de recursos sin comprimir. El tamaño de JavaScript sin comprimir está relacionado con el tiempo de ejecución y los archivos grandes pueden demorar mucho tiempo en ejecutarse, especialmente en dispositivos móviles.

Tamaño del paquete

Bundlesize es un paquete de npm simple que prueba el tamaño de los elementos con respecto al umbral que estableciste. Puede ejecutarse de forma local y, también, integrarse en tu CI.

CLI de Bundlesize

Especifica un umbral y el archivo que quieres probar para ejecutar la CLI de tamaño de paquete.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize muestra los resultados de pruebas con código de color en una línea.

Tamaño del paquete para CI

Obtendrás el máximo valor del tamaño del paquete si lo integras a una CI para aplicar automáticamente los límites de tamaño en las solicitudes de extracción. Si falla la prueba de tamaño del paquete, esa solicitud de extracción no se combina. Funciona para solicitudes de extracción en GitHub con Travis CI, CircleCI, Wercker y Drone.

Quizás ya tengas una app rápida, pero agregar código nuevo podría cambiar esta situación. Verificar las solicitudes de extracción con el tamaño de paquete te ayudará a evitar regresiones de rendimiento. Bootstrap, Tinder, Trivago y muchos otros lo utilizan para mantener sus presupuestos bajo control.

Con el tamaño del paquete, es posible establecer umbrales para cada archivo por separado. Esto resulta muy útil si divides un paquete en tu aplicación.

De forma predeterminada, prueba los tamaños de los elementos comprimidos en gzip. Puedes usar la opción de compresión para cambiar a la compresión brotli o desactivarla por completo.

Bot de faro

El bot de Lighthouse se integra con Travis CI y aplica presupuestos en función de cualquiera de las cinco categorías de auditoría de Lighthouse. Por ejemplo, un presupuesto de 100 para tu puntuación de rendimiento de Lighthouse. A veces, es más sencillo supervisar un solo número que los presupuestos de activos individuales, y las puntuaciones de Lighthouse toman en cuenta muchos factores.

El bot de Lighthouse ejecuta una auditoría después de que implementas un sitio en el servidor de etapa de pruebas. En .travis.yml, establece presupuestos para categorías de Lighthouse específicas con las opciones --perf, --a11y, --bp, --seo o --pwa. Intenta mantenerte en la zona verde con puntuaciones de al menos 90.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Si las puntuaciones de una solicitud de extracción en GitHub son inferiores al umbral que estableciste, el bot de Lighthouse puede evitar que se combine la solicitud de extracción. ⛔

El bot de Lighthouse luego comenta tu solicitud de extracción con las puntuaciones actualizadas. Esta es una función genial que fomenta la conversación sobre el rendimiento a medida que se producen cambios en el código.

Si encuentras tu solicitud de extracción bloqueada por una puntuación baja de Lighthouse, ejecuta una auditoría con la CLI de Lighthouse o en las Herramientas para desarrolladores. Genera un informe con detalles sobre cuellos de botella y sugerencias para optimizaciones simples.

Resumen