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

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

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

Appears in: Ускорение загрузки

Katie Hempenius

TwitterGitHubGlitchHomepage

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