Веб-производительность может оказать огромное влияние на весь ваш пользовательский опыт. Если вы в последнее время задумывались над улучшением производительности своего сайта, вы, вероятно, слышали о PageSpeed Insights — инструменте, который анализирует страницы и предлагает советы о том, как сделать их быстрее, основываясь на лучших практиках производительности мобильных и настольных компьютеров.
Оценки PageSpeed основаны на ряде факторов, в том числе на том, насколько хорошо ваши скрипты свернуты, оптимизированы изображения, сжат контент в сжатом виде, правильный размер таргетов и отсутствие перенаправлений на целевую страницу.
Поскольку 40% людей потенциально отказываются от страниц, загрузка которых занимает более 3 секунд, забота о том, как быстро ваши страницы загружаются на устройствах пользователей, становится все более важной частью нашего рабочего процесса разработки.
Показатели производительности в процессе сборки
Несмотря на то, что некоторые разработчики вручную обращаются к PageSpeed Insights , чтобы узнать, насколько хороши ваши оценки, многие разработчики задаются вопросом, можно ли получить аналогичные оценки производительности в процессе сборки.
Ответ: абсолютно.
Представляем PSI для Node
Сегодня мы рады представить PSI для Node — новый модуль, который отлично работает с Gulp , Grunt и другими системами сборки, а также может подключаться к сервису PageSpeed Insights и возвращать подробный отчет о вашей веб-производительности. Давайте посмотрим на предварительный просмотр типа отчетов, которые он позволяет:
Приведенные выше результаты хороши для понимания того, какие улучшения можно внести. Например, значение 5,92 для размера контента в области просмотра означает, что «некоторая» работа все еще может быть выполнена, тогда как значение 24 для минимизации ресурсов, блокирующих рендеринг, может указывать на необходимость отложить загрузку JS с использованием атрибута async .
Снижение барьера входа в PageSpeed Insights
Если вы пытались использовать API PageSpeed Insights в прошлом или пытались использовать любой из инструментов, которые мы создали на его основе, вам, вероятно, пришлось зарегистрироваться для получения специального ключа API. Мы знаем, что, хотя это занимает всего несколько минут, это может помешать вам получать статистику в рамках вашего обычного рабочего процесса.
Мы рады сообщить вам, что служба PageSpeed Insights поддерживает отправку запросов без ключа API до 1 запроса каждые 5 секунд (много для всех). Для более регулярного использования или серьезных производственных сборок вам, вероятно, захочется зарегистрироваться для получения ключа.
Модуль PSI поддерживает как опцию nokey , позволяющую настроить его менее чем за несколько минут, так и опцию key , требующую немного большего времени. Подробности о том, как зарегистрироваться для получения ключа API, документированы.
Начиная
У вас есть два варианта интеграции PSI в ваш рабочий процесс. Вы можете либо интегрировать его в свой процесс сборки, либо запустить как глобально установленный инструмент в вашей системе.
Процесс сборки
Использование PSI в процессе сборки Grunt или Gulp довольно просто. Если вы работаете над проектом Gulp, вы можете установить и использовать PSI напрямую.
Установить
Установите PSI с помощью npm и укажите --save-dev , чтобы сохранить его в файл package.json.
npm install psi --save-dev
Затем определите для него задачу Gulp в своем gulpfile следующим образом (также описано в нашем примере проекта Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Для вышеизложенного вы можете запустить задачу, используя:
gulp psi
А если вы используете Grunt, вы можете использовать grunt-pagespeed от Джеймса Крайера, который теперь использует PSI для создания отчетов.
Установить
npm install grunt-pagespeed --save-dev
Затем загрузите задачу в свой Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
и настройте его для использования:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Затем вы можете запустить задачу, используя:
grunt pagespeed
Установка как глобальный инструмент
Вы также можете установить PSI в качестве глобально доступного инструмента в вашей системе. Еще раз, мы можем использовать npm для установки инструмента:
$ npm install -g psi
И через любое окно терминала запросите отчеты PageSpeed Insights для сайта (с опцией nokey или специальным key API, как показано ниже):
psi http://www.html5rocks.com --nokey --strategy=mobile
или для тех, у кого есть зарегистрированный ключ API:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
Вот и все!
Идите вперед и сделайте производительность частью своей культуры.
Нам нужно начать больше думать о влиянии наших проектов и реализаций на пользовательский опыт.
Такие решения, как PSI, позволяют отслеживать производительность вашего веб-сайта на настольных и мобильных устройствах и полезны при использовании в рамках обычного рабочего процесса после развертывания.
Мы с нетерпением ждем ваших отзывов и надеемся, что PSI поможет улучшить культуру производительности в вашей команде.