Presupuesto de Rendimiento
Herramienta gratuita online de seguimiento de presupuesto de rendimiento
Que es un presupuesto de rendimiento?
Un presupuesto de rendimiento establece limites en el tamano y temporizacion de los recursos web (bundles de JavaScript, imagenes, fuentes, CSS). Hacer seguimiento de estos presupuestos ayuda a prevenir la regresion del rendimiento a medida que crece un proyecto. Los presupuestos comunes incluyen un peso total de pagina inferior a 1MB y JavaScript inferior a 200KB.
Como rastrear presupuestos de recursos
Agrega recursos con sus tamanos reales y establece limites presupuestarios. La herramienta rastrea el tamano total y marca los recursos que exceden sus presupuestos. Usa esto durante el desarrollo para detectar problemas de rendimiento temprano.
▶Cual es un buen presupuesto de rendimiento?
Recomendaciones comunes: Peso total de pagina < 1MB, JavaScript < 200KB (comprimido), CSS < 50KB, Imagenes < 500KB, Time to Interactive < 5 segundos en 3G.
▶Como mido los tamanos reales de los recursos?
Usa la pestana Network de Chrome DevTools para ver los tamanos de transferencia. Para aplicaciones empaquetadas, usa webpack-bundle-analyzer o herramientas similares para inspeccionar la composicion del bundle.