Как использовать Lighthouse для бюджетов производительности

Katie Hempenius
Katie Hempenius
X

Lighthouse теперь поддерживает бюджеты производительности. Эта функция, известная как LightWallet, настраивается менее чем за пять минут и предоставляет данные о показателях эффективности, а также о размере и количестве ресурсов страницы.

Установите Lighthouse

LightWallet доступен в версии Lighthouse 5 и более поздних версиях для командной строки.

Чтобы начать работу, установите 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 задано пять отдельных бюджетов:

  • Бюджет 3000 мс для Time to Interactive.
  • Бюджет в 125 КБ для общего объема JavaScript на странице.
  • Бюджет 300 КБ для общего размера страницы.
  • Бюджет в 10 запросов для количества запросов, отправленных сторонним источникам.

Полный список поддерживаемых показателей эффективности и типов ресурсов можно найти в разделе Бюджеты производительности документации Lighthouse.

Запустить Lighthouse

Запустите Lighthouse с флагом --budget-path. Этот флаг сообщает Lighthouse, где находится файл бюджета.

lighthouse https://example.com --budget-path=./budget.json

Как посмотреть результаты

Если LightWallet настроен правильно, в отчете Lighthouse появится раздел Budgets (Бюджеты) в категории Performance (Производительность).

Раздел "Бюджеты" в отчете Lighthouse

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