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.
![Sección Presupuestos del informe de Lighthouse](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=5&hl=es)
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.
![Resultado del paquete web en el que se destaca bundle.js](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=5&hl=es)
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.
![Advertencia sobre el tamaño del paquete de Webpack](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=5&hl=es)
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.
![Recomendación de optimización del rendimiento de Webpack](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=5&hl=es)
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.
![Falla la prueba de CLI de tamaño de paquete](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=5&hl=es)
![Pasa la prueba de la CLI de tamaño de paquete](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=5&hl=es)
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.
![Estado de verificación de tamaño de paquete en GitHub](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=5&hl=es)
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
![Bot de faro](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=5&hl=es)
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.
![Puntuación de Lighthouse ✅](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=5&hl=es)
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. ⛔
![Estado de verificación del bot de Lighthouse en GitHub](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=5&hl=es)
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.
![Lighthouse informa las puntuaciones a las solicitudes de extracción](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=5&hl=es)
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
Herramienta | CLI | CI | Resumen |
---|---|---|---|
Faro | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
tamaño del paquete | ✔️ | ✔️ |
|
Bot de faro | ❌ | ✔️ |
|