В возрасте 2 МБ веб-страниц бюджеты производительности становятся необходимой частью нашего процесса веб-разработки. Работая с заинтересованными сторонами вашего проекта, каждый становится ответственным, как дизайнерами, так и разработчиками, — устанавливать цели для эффективности вашего веб-сайта.
Вы можете установить бюджеты для ряда различных показателей: например, целевого веса страницы в 500 килобайт, который не может превышать ни одна страница в вашем проекте. Элементы, которые будут добавлены на страницу размером более 500 КБ, необходимо будет сравнить с другими элементами на странице, чтобы определить их включение в дизайн. Как описывает Тим Кадлец , ваше решение должно идти по одному из трех путей:
- Оптимизируйте существующую функцию или ресурс на странице
- Удалить существующую функцию или ресурс со страницы
- Не добавляйте новую функцию или актив
Вы также можете установить бюджеты для общего количества загруженных изображений в килобайтах, количества изображений продуктов на запрос или среднего времени загрузки для вашего сайта в соответствии с WebPageTest.org .
После того, как вы установили свой бюджет, стоит совсем дополнительная задача — просто измерить производительность вашего сайта на этапе разработки. Как вы можете достичь этого, не добавляя обременительного ручного тестирования к процессу контроля качества? Войдите в Grunt.js!
Grunt.js + WebPageTest.org = Автоматическое тестирование производительности Bliss
Хотя существует ряд плагинов Grunt, которые помогают вам измерить производительность вашего сайта , я остановлюсь на самом точном из найденных: Grunt Perfbudget . Эта замечательная задача Grunt использует API WebPageTest.org, чтобы измерить ваш сайт по тонне полезных метрик, таких как вес страницы, размеры изображений, вес скрипта и время рендеринга. Вы также можете установить явные бюджеты для этих показателей, по которым плагин будет измерять ваш сайт!
Получить ключ API
Прежде чем вы сможете настроить задачу Grunt, вам нужно отправить электронное письмо на WebPageTest.org, чтобы получить ключ API для включения в ваш Gruntfile. (Хорошие новости: в процессе есть альтернатива этому процессу !)
Установите плагин Grunt Perfbudget
Если вы впервые используете Grunt, ознакомьтесь с моим руководством по началу работы с Grunt .
Если у вас уже установлен Grunt на вашем компьютере, вам просто нужно установить плагин Perfbudget перед тем, как мы настроим наши тесты производительности. Перейдите в папку вашего проекта через командную строку и запустите:
npm install grunt-perfbudget --save-dev Или, если вы хотите, чтобы пример проекта работал, раскройте мой репозиторий Github, grunt-perfbudget-demo и запустите npm install
Настройте задачу Perfbudget
После того, как вы установили плагин, вам нужно настроить его параметры и создать задачу в вашем Gruntfile.js. Я создал демонстрационный Gruntfile, который запускает задачу perfbudget как часть команды Grunt по умолчанию, с минимальным набором параметров для начала — URL-адрес для тестирования и ваш ключ API:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY'
}
}
}
});
grunt.registerTask('default', ['perfbudget']);
};
Когда я запускаю задачу grunt
Почему моя задача провалилась? Потому что мой сайт не прошел бюджет по умолчанию: сделать менее чем за 1000 мс. Также произошел сбой в метрике « SpeedIndex» . Как узнать больше о производительности моей веб-страницы? К счастью, у WebPageTest есть очень подробный URL-адрес, на который я могу сослаться, связанный напрямую с консоли в моем тесте Perfbudget!
Чтобы заставить мой веб-сайт проходить и не вызывать сбой задачи Grunt (следовательно, останавливать любые сборки веб-сайтов в среде автоматической сборки), у меня есть два варианта: я могу редактировать свои бюджеты, пока не уйду (полезно для тестирования, не так уж много). для производительности!) или я могу следовать моим правилам бюджета производительности: оптимизировать, удалять вещи или прекратить добавлять вещи, пока я не передам показатели по умолчанию. А пока давайте поиграем с нашей задачей Grunt, чтобы увидеть, как выглядит проходной тест.
Параметры Perfbudget и Метрики WebPageTest
Как и большинство задач Grunt, задача Perfbudget позволяет мне настраивать ряд параметров. А благодаря удивительно подробным показателям, измеряемым с помощью WebPageTest, я могу протестировать все виды показателей для моего бюджета производительности, чтобы определить, прошел я или нет.
Во-первых, я собираюсь изменить свои параметры, чтобы мой веб-сайт перестал работать с ошибками, а задача Grunt сообщает, что у меня ограничен бюджет. Это требует дополнительного свойства в моей задаче перфбюджета под названием «бюджет»:
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY',
budget: {
render: '3000',
SpeedIndex: '5500'
}
}
}
}
Мой сайт довольно медленный на этом этапе, поэтому мои значения высоки, чтобы пройти тест.
Результаты? Я ПРОШЕЛ!
Это означает, что задача Grunt не терпит неудачу, и если у меня есть другие задачи в моем Gruntfile, они будут выполняться как обычно — успех!
Помимо показателей по умолчанию, что еще мы можем измерить? Все виды вещей , в том числе:
- loadTime: общее время загрузки в миллисекундах
- запросов: общее количество запрошенных файлов
- bytesIn: общий вес страницы в байтах
Последний показатель, о котором я чаще всего сообщаю, и который я хочу отслеживать для целей составления бюджета, давайте посмотрим, как его измерить:
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY',
budget: {
render: '3000',
SpeedIndex: '5500',
bytesIn: '2000000'
}
}
}
}
Я выбрал общий бюджет в 2 миллиона байтов, поскольку средний вес страницы в это время колеблется чуть менее 2 мегабайт. После того, как я отредактирую параметры бюджета, я могу увидеть, как я это делаю, снова выполнив задачу grunt
Мой веб-сайт занимает 3+ мегабайта, что значительно превышает бюджет! Похоже, у меня есть работа. Но иметь эту информацию под рукой невероятно полезно для меня как разработчика. Ни один другой плагин Grunt не предоставляет информацию об общем весе страницы таким легким и простым в тестировании способом. Измерение этих важных метрик позволяет мне увидеть реальное влияние решений по разработке, когда я пишу код, и в результате помогает улучшить производительность.