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

Кэти Хемпениус
Katie Hempenius

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

Установить Маяк

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

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

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

Беги Маяк

Запустите Lighthouse, используя флаг --budget-path . Этот флаг сообщает Lighthouse расположение вашего файла бюджета.

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

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

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

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

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

,

Кэти Хемпениус
Katie Hempenius

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

Установить Маяк

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

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

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

Беги Маяк

Запустите Lighthouse, используя флаг --budget-path . Этот флаг сообщает Lighthouse расположение вашего файла бюджета.

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

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

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

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

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

,

Кэти Хемпениус
Katie Hempenius

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

Установить Маяк

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

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

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

Беги Маяк

Запустите Lighthouse, используя флаг --budget-path . Этот флаг сообщает Lighthouse расположение вашего файла бюджета.

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

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

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

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

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

,

Кэти Хемпениус
Katie Hempenius

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

Установить Маяк

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

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

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

Беги Маяк

Запустите Lighthouse, используя флаг --budget-path . Этот флаг сообщает Lighthouse расположение вашего файла бюджета.

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

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

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

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

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