После того как вы определили бюджет производительности, пришло время настроить процесс сборки, чтобы отслеживать его. Существует ряд инструментов, которые позволяют вам определять пороговые значения для выбранных показателей производительности и предупреждать вас, если вы превысите бюджет. Узнайте, как выбрать тот, который лучше всего соответствует вашим потребностям и текущей настройке. 🕵️♀️
Бюджеты производительности маяка
Lighthouse — это инструмент аудита, который тестирует сайты по нескольким ключевым параметрам: производительность, доступность, передовые методы и эффективность вашего сайта как прогрессивного веб-приложения.
Версия Lighthouse для командной строки (v5+) поддерживает настройку бюджетов производительности на основе:
- размер ресурса
- количество ресурсов
Вы можете установить бюджеты для любого из следующих типов ресурсов:
-
document
-
font
-
image
-
media
-
other
-
script
-
stylesheet
-
third-party
-
total
Бюджеты задаются в файле JSON, и после их определения новый столбец «Превышение бюджета» сообщает вам, превышаете ли вы какие-либо ограничения.
![Раздел «Бюджеты» в отчете Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=00&hl=ru)
Советы по производительности Webpack
Webpack — это мощный инструмент сборки, позволяющий оптимизировать доставку вашего кода пользователям. Он также поддерживает настройку бюджетов производительности в зависимости от размера активов .
Включите подсказки по производительности в webpack.config.js
, чтобы получать предупреждения или ошибки командной строки, когда размер пакета превышает лимит. Это отличный способ помнить о размерах активов на протяжении всего процесса разработки.
После этапа сборки веб-пакет выводит список ресурсов с цветовой кодировкой и их размерами. Все, что выходит за рамки бюджета, выделяется желтым цветом.
![Вывод вывода веб-пакета с подсветкой Bundle.js](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=00&hl=ru)
Предел по умолчанию для активов и точек входа составляет 250 КБ . Вы можете установить свои собственные цели в файле конфигурации.
![Предупреждение о размере пакета веб-пакета](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=00&hl=ru)
Бюджеты сравниваются с размерами несжатых активов . Размер несжатого JavaScript связан со временем выполнения , а выполнение больших файлов может занять много времени, особенно на мобильных устройствах.
![Рекомендации по оптимизации производительности Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=00&hl=ru)
Размер пакета
Bundlesize — это простой пакет npm, который проверяет размер ресурса на соответствие установленному вами порогу. Он может работать локально и интегрироваться с вашим CI.
Размер пакета CLI
Запустите CLI Bundlesize, указав пороговое значение и файл, который вы хотите протестировать.
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize выводит результаты теста с цветовой кодировкой в одну строку.
![Неудачный тест CLI размера пакета](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=00&hl=ru)
![Прохождение теста CLI на размер пакета](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=00&hl=ru)
Размер пакета для CI
Вы получите максимальную отдачу от размера пакета, если интегрируете его с CI для автоматического соблюдения ограничений размера для запросов на включение. Если проверка размера пакета не удалась, этот запрос на извлечение не будет объединен. Он работает для запросов на извлечение на GitHub с Travis CI , CircleCI , Wercker и Drone .
![Статус проверки размера пакета на GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=00&hl=ru)
Сегодня у вас может быть быстрое приложение, но добавление нового кода часто может изменить это. Проверка пул-реквестов с размером пакета поможет вам избежать снижения производительности. Bootstrap, Tinder, Trivago и многие другие используют его, чтобы контролировать свой бюджет.
С помощью Bundlesize можно установить пороговые значения для каждого файла отдельно. Это особенно полезно, если вы разделяете пакет в своем приложении.
По умолчанию он проверяет размеры ресурсов, сжатых с помощью gzip . Вы можете использовать опцию сжатия, чтобы переключиться на сжатие Brotli или полностью отключить его.
Маяк Бот
![Маяк Бот](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=00&hl=ru)
Lighthouse Bot интегрируется с Travis CI и обеспечивает соблюдение бюджетов на основе любой из пяти категорий аудита Lighthouse. Например, бюджет 100 для вашего показателя производительности Lighthouse. Иногда проще следить за одной цифрой, чем бюджеты отдельных активов и оценки Lighthouse учитывают множество факторов.
![Очки маяка 💯](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=00&hl=ru)
Lighthouse Bot проводит аудит после развертывания сайта на промежуточном сервере. В .travis.yml
установите бюджеты для определенных категорий Lighthouse с опциями --perf
, --a11y
, --bp
, --seo
или --pwa
. Стремитесь остаться в зеленой зоне, набрав не менее 90 очков.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
Если рейтинг запроса на включение на GitHub падает ниже установленного вами порога, Lighthouse Bot может предотвратить объединение запроса на включение . ⛔
![Статус проверки бота Lighthouse на GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=00&hl=ru)
Затем бот Lighthouse Bot комментирует ваш запрос на включение обновленными оценками. Это изящная функция, которая побуждает к разговору о производительности по мере внесения изменений в код.
![Оценки отчетов маяка по запросу](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=00&hl=ru)
Если вы обнаружите, что ваш запрос на включение заблокирован из-за плохой оценки Lighthouse, запустите аудит с помощью Lighthouse CLI или Dev Tools . Он генерирует отчет с подробной информацией об узких местах и советами по простой оптимизации.
Краткое содержание
Инструмент | интерфейс командной строки | КИ | Краткое содержание |
---|---|---|---|
Маяк | ✔️ | ❌ |
|
веб-пакет | ✔️ | ❌ |
|
размер пакета | ✔️ | ✔️ |
|
Маяк Бот | ❌ | ✔️ |
|