Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Установите Lighthouse
  • Создайте бюджет
  • Запустите Lighthouse
  • Посмотрите результаты
  • Home
  • All articles

Используйте Lighthouse для расчета бюджета производительности

Jun 14, 2019 — Обновлено Apr 3, 2020
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Содержание
  • Установите Lighthouse
  • Создайте бюджет
  • Запустите 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
Примечание: файл бюджета не обязательно должен называться budget.json.

Посмотрите результаты #

Если LightWallet настроен правильно, отчет Lighthouse будет содержать раздел «Бюджеты» в категории «Производительность».

Раздел «Бюджеты» отчета Lighthouse

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

Производительность
Последнее обновление: Apr 3, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.