Frontender Magazine

Grunt- и Gulp-таски для оптимизации производительности

Снижение производительности может влиять на вовлечённость пользователей, на их ощущения от взаимодействия с сайтом и его доходность. К счастью, команда проекта «Make The Web Faster» из Google предложила набор наилучших практик для поддержания ваших страниц лёгкими, быстрыми и привлекательными. Они включают минификацию ресурсов вроде CSS и JavaScript, оптимизацию изображений, встраивание CSS в разметку, удаление неиспользуемых стилей и т.д.

Если вы имеете полный доступ к вашему серверу, отличным вариантом для вас будет использование модуля PageSpeed для Apache и Nginx с фильтрами для многих из этих задач. Тем не менее, если же доступа нет, или вы понимаете, что модуля будет не достаточно, существует достаточно плагинов для систем сборок, использование которых, пожалуй, позволит восполнить пробелы с более точным контролем производительности.

Ниже представлены Grunt- и Gulp-плагины, которые команда Yeoman регулярно использует в своих проектах. Мы постарались сохранить список целенаправленным и исключить прежние рекомендации, которые не представляют такой большой ценности, но того, что представлено здесь достаточно, чтобы помочь вам поддерживать страницы и их ресурсы настолько компактными, насколько это возможно.

Примечание: Генератор webapp для Grunt и Gulp от команды Yeoman уже включает плагины для оптимизации изображений, конкатенации и минификации HTML/CSS/JS. Мы считаем, webapp — отличная основа, а настоящая статья охватывает плагины, выходящие за пределы этих процессов.

Сжатие и оптимизация изображений

Средняя веб-страница сейчас занимает чуть больше 1.5 Мб, включая изображения, составляющие большую часть от этого объёма. Мы стремимся поддерживать размеры наших изображений настолько малыми, насколько это возможно, чтобы сократить время ожидания их загрузки пользователем.

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

Grunt

Почему два плагина? Ок, вот вам отличный анализ различий между ними. Можете выбрать один, наиболее подходящий для вас.

Gulp

На момент написания статьи ещё не существовало плагина для Gulp, использующего ImageOptim.

Примечание: Ребята из Etsy выяснили, что добавление всего лишь 160 Kб изображений на их страницы увеличивает отказ пользователей мобильных устройств на 12%. Если вы не можете сократить количество изображений на страницах, хотя бы оптимизируйте их.

Генерация отзывчивых изображений для элемента <picture>

Если у вас сайт с RWD, адаптирующийся под различные устройства, вы также можете делать отзывчивыми и изображения.

Отдача излишне больших изображений браузеру может влиять на производительность загрузки и отображения страницы, и это не единственные характеристики, которые могут от этого пострадать.

Это одна из причин, по которой нам нужно использовать отзывчивые изображения, и в связи с этим мы рады приветствовать srcset — то, что, как мы надеемся, приведёт к полному внедрению элемента <picture>.

Существует несколько Grunt-плагинов, помогающих генерировать несколько изображений с различными разрешениями в рамках вашего процесса сборки проекта.

Grunt

Кроме того, если вам нужно изменить размер больших изображений, можете воспользоваться grunt-image-resize.

Примечание: Исследование Тима Кадлека в области отзывчивых изображений привело к выводу, что их использование может привести к экономии до 72% на размере изображений. Несмотря на то, что пока ещё рано делать выбор в пользу отзывчивости, BBC и Guardian используют Imager.js в качестве кросс-браузерного решения.

Минификация SVG изображений

SVG файлы, созданные в редакторах, обычно содержат большое количество избыточной информации (мета-данные, комментарии, скрытые элементы и т.д.). Всё это может быть совершенно безвредно удалено или сконвертировано в более компактное представление, не влияя на отрисовку.

Grunt

Gulp

Генерация спрайтов

Grunt

Gulp

Конвертация изображений в WebP

WebP это современный формат изображений, который предлагает сжатие изображений для веба с потерями и без. Изображения WebP со сжатием без потерь по размеру на 26% меньше, чем PNG и со сжатием с потерями на 25-34% меньше, чем JPEG. Это достаточно экономично и, к счастью, существуют Grunt- и Gulp-плагины кодирования WebP.

Grunt

Gulp

Примечание: Тест, проведённый WebPageTest, говорит, что в сравнении с JPEG загрузка изображений WebP происходит гораздо быстрее, благодаря их маленькому размеру. В Chrome Web Store выяснили, что использование WebP дало в среднем 30% экономии, что сохраняет им несколько терабайт трафика в день.

Сборка SVG спрайтов с поддержкой для различных браузеров

Grunt

Gulp

Мы считаем, что встраивание изображений используя Data URI сейчас стало анти-паттерном, влекущим за собой низкую производительность на мобильных устройствах.

Минификация CSS

Минификация устраняет лишние пробелы, переносы строк, отступы и символы, которые обычно не нужны в релизной версии вашего продукта. Сжатие HTML-, CSS- и JS-файлов может улучшить парсинг, выполнение и время загрузки. Касательно CSS мы рекомендуем:

Grunt

Gulp

Удаление неиспользуемого CSS

В проектах, основанных на CSS-фреймворках вроде Bootstrap, Foundation и т.д. вы обычно не используете всё разнообразие доступных стилей. Вместо того, чтобы включать весь фреймворк в релиз, используйте UnCSS для удаления неиспользуемых вашими страницами стилей. Таким образом, некоторые разработчики облегчают свои таблицы стилей до 85% от исходного размера.

Grunt

Gulp

Примечание: Наиболее часто задаваемый разработчиками вопрос по поводу UnCSS или процесса удаления неиспользуемого CSS это может ли он также работать со стилями, внедряемыми в страницу динамически. Наш ответ — «да». Это стало возможным благодаря тому, что UnCSS работает в паре с PhantomJS. Разработчики получают от 10 до 120 Кб экономии на типовой Bootstrap-странице, и настолько же хорошо UnCSS работает и с другими фреймворками.

Встроенный CSS

Если внешние CSS-ресурсы для конкретной страницы небольшие, вы можете встроить их в вашу разметку, экономя при этом на дополнительных запросах к серверу. Встраивание небольшого количества CSS позволяет браузеру мгновенно приступить к отрисовке страницы.

Grunt

Gulp

Комбинирование медиа-выражений

Хоть это и не является рекомендацией команды PageSpeed, но вы имеете возможность комбинировать медиа-выражения в единые определения. Мы сочли эти плагины полезными для обработки CSS, генерируемого препроцессорами, которые могут использовать вложенные определения медиа-запросов.

Grunt

Gulp

JavaScript

Минификация, сжатие JS

Grunt

Gulp

RequireJS (оптимизация с r.js)

Grunt

Gulp

Минификация HTML

Grunt

Gulp

Простая конкатенация

Grunt

Gulp

Общее сжатие для файлов/папок

Grunt

Gulp

Сжатие Zopfli

Алгоритм сжатия Zopfli — это библиотека сжатия с открытым исходным кодом, которая генерирует выходные данные на 3-8% меньше в сравнении с zlib при максимальном уровне сжатия. Он лучше всего подходит для приложений, в которых данные сжимаются только один раз, а затем передаются по сети большое количество раз.

Grunt

Gulp

Примечание: Когда в Google Fonts начали использовать Zopfli, шрифты стали легче в среднем на 6%, а в некоторых случаях на 15%. По словам Ильи Григорика, для Open Sans уменьшение размера было более чем на 10%, что сказалось на уменьшении времени на отрисовку и загрузку. Однако, изображения сжатые с Zofli декодируются дольше, чем обычные JPG. Эти показатели можно использовать для принятия решения о целесообразности использования WebP.

Встраивание CSS критического пути

Критический путь представляет собой код и ресурсы, необходимые для отрисовки контента, расположенного в верхней части страницы (прим. пер.: дословно «above-the-fold» — до сгиба, т.е. первый экран страницы) — то есть то, что ваши пользователи увидят в первую очередь, когда они станут загружать вашу страницу. PageSpeed рекомендует встраивать ваши необходимые стили для улучшения производительности. В то время, как инструменты вроде mod_pagespeed достаточно высоко эффективны для достижения этого, оптимизировать необходимые стили другими инструментами гораздо сложнее.

Вы можете использовать PhantomJS со скриптами speedreport, чтобы получить представление о том, какие стили отвечают за верхушку страницы и затем вручную оптимизировать их.

Примечание: Пол Кинлэн написал букмарклет для оценки стилей верхушки страницы, который тоже стоит посмотреть.

Asset pipeline (авто-обработка всех оптимизаций)

Одним из инструментов, на которые стоит обратить внимание является AssetGraph.

AssetGraph смотрит на проекты как на набор задач на графах, где узлами считаются наборы ресурсов (HTML, CSS, изображения, JS), а рёбрами — отношения между ними (теги img, a, script и т.д.).

Если AssetGraph определит, как проектные наборы ресурсов связаны друг с другом, он может автоматически выполнить большинство оптимизаций производительности. Это работает, в частности, на маленьких проектах и в данный момент идёт работа над поддержкой для больших проектов.

Grunt

Gulp

Пользователи Gulp должны использовать непосредственно AssetGraph.

Сравнительный анализ

Приведённые ниже бенчмарк-плагины полезны для использования в качестве части реализации подхода непрерывной интеграции (Continuous Integration). Несмотря на то, что в настоящее время они доступны только для Grunt, вы можете использовать gulp-grunt для запуска Grunt-тасков через Gulp. Мы рекомендуем:

Framework Optimization

Grunt

Gulp

Misch

Заключение

Снижение производительности может влиять на вовлечение пользователя и его впечатления от взаимодействия с ресурсом. Уделите время на эксперименты с плагинами для оптимизации производительности — узнайте, какие практические выгоды они могут дать вашим проектам.

Посетители ваших сайтов будут счастливее в результате мгновенного отклика, да и вообще, быстрый веб — лучше для всех.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Addy Osmani
Автор:
Addy Osmani
GitHub:
addyosmani
Twitter:
@addyosmani
Google Plus:
+AddyOsmani
Сайт:
addyosmani.com/
Денис Демченко
Переводчик:
Денис Демченко
GitHub:
lancedikson
Twitter:
@lancedikson

Комментарии (7 комментариев, если быть точным)

Автар пользователя
ai

Вдогонку к grunt-webp есть grunt-webpcss, который добавит ссылки на webp-картинки в CSS для тех браузеров, которые понимают WebP, для остальных оставив оригинальные картинк.

Автар пользователя
radist2s

При использовании r.js так же имеет смысл инклудить не полностью RequireJS, а облегченную прослойку-лоадер https://github.com/jrburke/almond У almond есть ряд ограничений, но использую его на всех проектах.

Автар пользователя
iboozyvoozy

Для генерации svg спрайтов использую grunt-svgsprite Он генерирует .css файл, в котором будут классы .svg-file_name для позиционирования на спрайте и .svg-file_name-dims

Автар пользователя
iboozyvoozy

.svg-file_name-dims для исходных размеров картинки

Автар пользователя
P3trovichUA

Для оптимизации CSS есть еще CSSO — https://github.com/t32k/grunt-csso Вот только у меня он не делает структурные оптимизации. Если у кого-то есть предположения, где я мог сделать ошибку — напишите.

Автар пользователя
Beefeater84

Сделайте, пожалуйста, чтобы ссылки на сторонние ресурсы, открывались в новом окне. А то очень неудобно

Автар пользователя
iamstarkov

@Beefeater84 попробуйте зажимать ctrl или cmd при клике на ссылку