Presupuestos de rendimiento: Aplicar la velocidad en CI/CD

Presupuestos de rendimiento: Establecer límites de velocidad para su sitio web

Un presupuesto de rendimiento es un conjunto de límites que se imponen a los recursos de su sitio web. Es como un límite de velocidad para su código. Usted decide que su bundle de JavaScript no puede exceder los 200 KB, que sus imágenes no pueden totalizar más de 1 MB y que su página debe cargarse en menos de 2 segundos. Estos límites ayudan a mantener su sitio rápido a medida que crece.

Por qué necesita un presupuesto

Sin un presupuesto, el rendimiento tiende a degradarse con el tiempo. Alguien agrega una nueva biblioteca, luego otra, luego una imagen grande, luego un script de terceros. Cada adición parece pequeña por sí sola, pero juntas ralentizan el sitio. Un presupuesto detecta estas adiciones antes de que se conviertan en un problema.

Los presupuestos también crean un entendimiento compartido de lo que es aceptable. Cuando un desarrollador quiere agregar una nueva biblioteca, puede verificar si cabe dentro del presupuesto. Si no es así, necesita encontrar una alternativa más pequeña u optimizar otra cosa. Esto evita el lento crecimiento de la hinchazón.

Qué presupuestar

Comience con los recursos más impactantes: el tamaño total de JavaScript, el tamaño total de CSS, el tamaño total de imágenes y el número total de solicitudes. Estos afectan directamente la velocidad de carga de la página. También puede presupuestar métricas específicas: Largest Contentful Paint en menos de 2.5 segundos, First Input Delay en menos de 100 milisegundos, Cumulative Layout Shift en menos de 0.1.

Los presupuestos más avanzados pueden incluir el número de solicitudes de terceros, el tamaño de las fuentes web o la cantidad de JavaScript ejecutado en la carga de la página. La clave es medir lo que importa a sus usuarios y establecer límites en consecuencia.

Aplicar el presupuesto

Un presupuesto solo es útil si se aplica. La mejor manera es integrarlo en su pipeline de CI. Cuando alguien envía una solicitud de extracción, la CI verifica si los cambios excederían el presupuesto. Si es así, la compilación falla. Herramientas como Lighthouse CI, bundlesize y los consejos de rendimiento de webpack pueden automatizar esto.

Esto crea un ciclo de retroalimentación: los desarrolladores ven el impacto de sus cambios de inmediato y pueden hacer ajustes antes de fusionar. Con el tiempo, esto construye una cultura de conciencia de rendimiento.

Establecer límites realistas

Comience midiendo su rendimiento actual. ¿Dónde está ahora? Luego establezca un objetivo ambicioso pero alcanzable. Un punto de partida común es apuntar a una mejora del 30%. Una vez que lo alcance, establezca un nuevo objetivo. La meta es una mejora gradual y sostenible, no una optimización única.

Para un sitio de contenido típico, un presupuesto razonable podría ser: 200 KB de JavaScript (comprimido), 100 KB de CSS, 1 MB de imágenes y menos de 20 solicitudes. Para una aplicación web más compleja, los números podrían ser más altos. Lo importante es establecer el presupuesto, cumplirlo y revisarlo periódicamente.