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

Jun 14, 2019 — Обновлено Apr 3, 2020

Available in: English, Español, Português, 中文, 日本語, and 한국어

Теперь 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.

Последнее обновление

Apr 3, 2020 — Улучшить статью

Return to all articles