Типы бюджетов

Lighthouse предоставляет возможность оценивать веб-приложения по различным метрикам производительности, доступности, SEO и прогрессивного веб-приложения (PWA). Одним из ключевых инструментов для контроля показателей являются бюджеты, которые позволяют задавать ограничения на ресурсы, загружаемые страницей, и отслеживать их соблюдение.

Структура бюджетов

Бюджеты описываются в формате JSON и могут быть подключены к проекту либо через CLI, либо через конфигурационные файлы Lighthouse. Основные элементы бюджета:

  • resourceSizes – ограничения на размер загружаемых ресурсов, например CSS, JS, изображения.
  • resourceCounts – ограничения на количество ресурсов определенного типа.
  • timings – ограничения по времени загрузки ключевых элементов страницы.
  • scriptMetrics – метрики исполнения JavaScript (например, общее время выполнения скриптов).

Пример базовой структуры бюджета:

{
  "resourceSizes": [
    {
      "resourceType": "script",
      "budget": 250
    },
    {
      "resourceType": "image",
      "budget": 500
    }
  ],
  "resourceCounts": [
    {
      "resourceType": "stylesheet",
      "budget": 5
    }
  ],
  "timings": [
    {
      "metric": "first-contentful-paint",
      "budget": 2000
    }
  ]
}

Основные типы бюджетов

  1. Resource Sizes (Размер ресурсов) Позволяет ограничивать общий размер определенного типа ресурсов. Основные поля:

    • resourceType – тип ресурса (script, stylesheet, image, document, font, other).
    • budget – максимальный размер ресурса в килобайтах.

    Пример ограничения для изображений:

    {
  "resourceType": "image",
  "budget": 300
}

    Это ограничивает суммарный размер всех изображений на странице до 300 КБ.

  2. Resource Counts (Количество ресурсов) Позволяет контролировать количество подключаемых файлов определенного типа. Например, ограничение количества стилей до 3 файлов:

    {
  "resourceType": "stylesheet",
  "budget": 3
}

  3. Script Metrics (Метрики скриптов) Позволяет отслеживать время выполнения JavaScript на странице. Поля:

    • metric – тип метрики (scriptBootupTime, totalByteWeight).
    • budget – лимит в миллисекундах или килобайтах.

    Пример:

    {
  "metric": "scriptBootupTime",
  "budget": 200
}

    Это ограничивает время загрузки и выполнения скриптов до 200 мс.

  4. Timings (Временные метрики) Позволяет задавать ограничения на ключевые показатели производительности. Поля:

    • metric – название метрики (first-contentful-paint, interactive, largest-contentful-paint и др.).
    • budget – лимит времени в миллисекундах.

    Пример:

    {
  "metric": "largest-contentful-paint",
  "budget": 2500
}

Подключение бюджетов в Lighthouse

Бюджеты можно использовать в двух основных сценариях:

  • Через CLI: Для этого используется флаг --budgets-path, указывающий путь к JSON-файлу с бюджетами:

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

  • Через Node API: Конфигурация бюджета передается как часть объекта настроек:

    const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, budgets: require('./budgets.json')};
  const results = await lighthouse('https://example.com', options);
  console.log(results.lhr.audits);
  await chrome.kill();
})();

Практические рекомендации по типам бюджетов

  • Resource Sizes стоит использовать для контроля крупных ресурсов, таких как скрипты и изображения, чтобы предотвратить замедление загрузки.
  • Resource Counts помогает избегать чрезмерного дробления кода на множество маленьких файлов.
  • Timings необходим для отслеживания пользовательского опыта и удержания ключевых показателей производительности на приемлемом уровне.
  • Script Metrics особенно полезны для приложений с большим объемом JavaScript, чтобы не допустить падения интерактивности страницы.

Бюджеты в Lighthouse позволяют формализовать требования к производительности и ресурсам, превращая субъективные оценки скорости и размера страницы в конкретные количественные показатели, легко интегрируемые в CI/CD процессы и автоматическое тестирование.

Оглавление