Incorporar presupuestos de rendimiento en el proceso de compilación

Milica Mihajlija

Una vez que hayas definido un presupuesto de rendimiento, es momento de configurar el proceso de creación para hacer un seguimiento de ellos. Hay varias herramientas que te permiten definir umbrales para las métricas de rendimiento elegidas y advertirte si superas el presupuesto. Descubrir cómo elegir la que mejor se adapte a tus necesidades y a tu configuración actual. 🕵️‍♀️

Presupuestos de rendimiento de Lighthouse

Lighthouse es una herramienta de auditoría que prueba sitios en algunas áreas clave: rendimiento, accesibilidad, prácticas recomendadas y qué tan bien funciona 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, establece el nuevo indica si estás excediendo algún límite.

.

Sugerencias de rendimiento del paquete web

Webpack es una potente herramienta de compilación 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 del recurso.

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 tener en cuenta el tamaño de los recursos durante el desarrollo.

Después del paso de compilación, webpack genera una lista de elementos codificada por colores y sus tamaños. Todo lo que supere el presupuesto se destaca en amarillo.

.

El límite predeterminado para los recursos y los puntos de entrada es 250 KB. Puedes establecer tus propios objetivos 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 en función del umbral que estableciste. Puede ejecutarse de forma local y, además, integrarse a tu CI.

CLI de tamaño de paquete

Ejecuta la CLI de tamaño de paquete especificando un umbral y el archivo que quieras probar.

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

Bundlesize genera los resultados de las pruebas codificados por 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 con una CI para aplicar automáticamente los límites de tamaño en las solicitudes de extracción. Si la prueba de tamaño de paquete falla, esa solicitud de extracción no se combina. Funciona para las solicitudes de extracción en GitHub con Travis CI, CircleCI, Wercker y Drone.

.

Es posible que hoy tengas una app rápida, pero agregar código nuevo puede cambiar esta situación. Verificar las solicitudes de extracción con bundlesize te ayudará a evitar las regresiones de rendimiento. Bootstrap, Tinder, Trivago y muchos otros lo usan para controlar sus presupuestos.

Con el tamaño del paquete, es posible establecer umbrales para cada archivo por separado. Esto es especialmente útil si estás dividiendo un paquete en tu aplicación.

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

bot de Lighthouse

El bot de Lighthouse se integra en 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 recursos individuales y las puntuaciones de Lighthouse tienen muchas cosas en cuenta.

.

Lighthouse Bot 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 particulares de Lighthouse con las opciones --perf, --a11y, --bp, --seo o --pwa. Procura permanecer 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 ves que tu solicitud de extracción está 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 los cuellos de botella y sugerencias para optimizaciones simples.

Resumen