Используйте Lighthouse для расчета бюджета производительности
Теперь Lighthouse поддерживает бюджеты производительности. Эта функция, LightWallet, предоставляет информацию о показателях производительности, размерах и количестве ресурсов страницы, а настроить ее можно всего за пять минут.
Установите Lighthouse #
LightWallet доступен в версии Lighthouse v5 и выше для командной строки.
Для начала установите Lighthouse:
npm install -g lighthouse
Создайте бюджет #
Создайте файл с именем budget.json
. В этот файл добавьте следующий JSON:
[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]
В показанном файле budget.json
задаются пять отдельных бюджетов:
- Бюджет Time to Interactive (времени до интерактивности) составляет 3000 мс.
- Бюджет First Meaningful Paint (первой значимой отрисовки) составляет 1000 мс.
- Бюджет на общий объем JavaScript на странице равен 125 КБ.
- Бюджет общего размера страницы равен 300 КБ.
- Бюджет на количество запросов к сторонним источникам равен 10 запросам.
Полный список поддерживаемых показателей производительности и типов ресурсов см. в разделе «Бюджеты производительности» документации Lighthouse.
Запустите Lighthouse #
Запустите Lighthouse с флагом --budget-path
. Этот флаг сообщает Lighthouse местонахождение вашего файла бюджета.
lighthouse https://example.com --budget-path=./budget.json
Посмотрите результаты #
Если LightWallet настроен правильно, отчет Lighthouse будет содержать раздел «Бюджеты» в категории «Производительность».

В версии отчета Lighthouse в формате JSON результаты Lightwallet можно найти в результатах аудита performance-budget
.