Что такое performance budget
Это набор пороговых значений для метрик: размер JS-бандла, LCP, общее время загрузки. Преступив бюджет — нельзя мержить.
С чего начать
Самый простой бюджет — на размер бандла:
// next.config.js
module.exports = {
experimental: {
bundlePagesRouterDependencies: true,
},
performance: {
hints: "error",
maxAssetSize: 250000, // 250 KB
maxEntrypointSize: 350000,
},
};Что мерять
Минимальный набор:
- LCP — главный визуальный элемент должен появиться за 2.5 сек
- CLS — кумулятивный сдвиг макета не больше 0.1
- INP — отклик на ввод не больше 200мс
- JS Total — суммарный размер JS под лимитом
Где теряется скорость
В нашей практике — три главных источника:
- Третьи скрипты — аналитика, чаты, рекомендательные системы
- Ленивые компоненты, загруженные сразу — забываем
dynamic() - Картинки без оптимизации — особенно на блоге, где их много
Автоматизация
Lighthouse CI в GitHub Actions с пороговыми значениями. PR не пройдёт, если бюджет превышен:
- uses: treosh/lighthouse-ci-action@v10
with:
budgetPath: ./performance-budget.jsonИтог
Бюджет — не ограничение, а инструмент дисциплины. Команда знает, на что можно потратить «50 KB», и осознанно делает trade-off.