Grunt- и Gulp-таски для оптимизации производительности
#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
- grunt-contrib-imagemin
- grunt-imageoptim (только для OSX)
Почему два плагина? Ок, вот вам отличный анализ различий между ними. Можете выбрать один, наиболее подходящий для вас.
Gulp
- gulp-imagemin
На момент написания статьи ещё не существовало плагина для Gulp, использующего ImageOptim.
Примечание: Ребята из Etsy выяснили, что добавление всего лишь 160 Kб изображений на их страницы увеличивает отказ пользователей мобильных устройств на 12%. Если вы не можете сократить количество изображений на страницах, хотя бы оптимизируйте их.
Генерация отзывчивых изображений для элемента
<picture>Если у вас сайт с RWD, адаптирующийся под различные устройства, вы также можете делать отзывчивыми и изображения.
Отдача излишне больших изображений браузеру может влиять на
производительность загрузки и отображения страницы, и это не единственные
характеристики, которые могут от этого пострадать.
Это одна из причин, по которой нам нужно использовать отзывчивые изображения, и в связи с этим
мы рады приветствовать srcset — то, что, как мы надеемся, приведёт к
полному внедрению элемента <picture>.
Существует несколько Grunt-плагинов, помогающих генерировать несколько изображений с различными разрешениями в рамках вашего процесса сборки проекта.
Grunt
- grunt-responsive-images — используйте вместе с
Imager.js, элементом
<picture>или полифилом picturefill. - grunt-clowncar
Кроме того, если вам нужно изменить размер больших изображений, можете воспользоваться grunt-image-resize.
Примечание: Исследование Тима Кадлека в области отзывчивых изображений
привело к выводу, что их использование может
привести к экономии до 72% на размере изображений.
Несмотря на то, что пока ещё рано делать выбор в пользу отзывчивости, BBC и
Guardian используют Imager.js в качестве кросс-браузерного решения.
Минификация SVG изображений
SVG файлы, созданные в редакторах, обычно содержат большое количество избыточной информации (мета-данные, комментарии, скрытые элементы и т.д.). Всё это может быть совершенно безвредно удалено или сконвертировано в более компактное представление, не влияя на отрисовку.
Grunt
- grunt-svgmin
Gulp
- gulp-svgmin
Генерация спрайтов
Grunt
- grunt-spritesmith
Gulp
- gulp-sprite
Конвертация изображений в WebP
WebP это современный формат изображений, который предлагает сжатие изображений для веба с потерями и без. Изображения WebP со сжатием без потерь по размеру на 26% меньше, чем PNG и со сжатием с потерями на 25-34% меньше, чем JPEG. Это достаточно экономично и, к счастью, существуют Grunt- и Gulp-плагины кодирования WebP.
Grunt
- grunt-webp
Gulp
- gulp-webp
Примечание: Тест, проведённый WebPageTest, говорит, что в
сравнении с JPEG загрузка изображений WebP происходит гораздо быстрее, благодаря их
маленькому размеру.
В Chrome Web Store выяснили, что использование WebP дало в среднем 30%
экономии, что сохраняет им несколько терабайт трафика в день.
Сборка SVG спрайтов с поддержкой для различных браузеров
Grunt
- grunticon
Gulp
- gulp-svgmin
Мы считаем, что встраивание изображений используя Data URI сейчас стало анти-паттерном, влекущим за собой низкую производительность на мобильных устройствах.
Минификация CSS
Минификация устраняет лишние пробелы, переносы строк, отступы и символы, которые обычно не нужны в релизной версии вашего продукта. Сжатие HTML-, CSS- и JS-файлов может улучшить парсинг, выполнение и время загрузки. Касательно CSS мы рекомендуем:
Grunt
- grunt-contrib-cssmin
Gulp
- gulp-cssmin
Удаление неиспользуемого CSS
В проектах, основанных на CSS-фреймворках вроде Bootstrap, Foundation и т.д. вы
обычно не используете всё разнообразие доступных стилей.
Вместо того, чтобы включать весь фреймворк в релиз, используйте UnCSS для
удаления неиспользуемых вашими страницами стилей. Таким образом, некоторые
разработчики облегчают свои таблицы стилей до 85% от исходного размера.
Grunt
- grunt-uncss
Gulp
- gulp-uncss
Примечание: Наиболее часто задаваемый разработчиками вопрос по поводу UnCSS или процесса удаления неиспользуемого CSS это может ли он также работать со стилями, внедряемыми в страницу динамически. Наш ответ — «да». Это стало возможным благодаря тому, что UnCSS работает в паре с PhantomJS. Разработчики получают от 10 до 120 Кб экономии на типовой Bootstrap-странице, и настолько же хорошо UnCSS работает и с другими фреймворками.
Встроенный CSS
Если внешние CSS-ресурсы для конкретной страницы небольшие, вы можете
встроить их в вашу разметку, экономя при этом на дополнительных запросах к
серверу. Встраивание небольшого количества CSS позволяет браузеру мгновенно
приступить к отрисовке страницы.
Grunt
- grunt-inline-css
Gulp
- gulp-inline-css
Комбинирование медиа-выражений
Хоть это и не является рекомендацией команды PageSpeed, но вы имеете возможность комбинировать медиа-выражения в единые определения. Мы сочли эти плагины полезными для обработки CSS, генерируемого препроцессорами, которые могут использовать вложенные определения медиа-запросов.
Grunt
- grunt-combine-media-queries
Gulp
- gulp-combine-media-queries
JavaScript
Минификация, сжатие JS
Grunt
- grunt-contrib-uglify
- grunt-closure-compiler
Gulp
- gulp-uglify
- gulp-closure-compiler
RequireJS (оптимизация с r.js)
Grunt
- grunt-requirejs
Gulp
- RequireJS
Минификация HTML
Grunt
- grunt-contrib-htmlmin
Gulp
- gulp-htmlmin
Простая конкатенация
Grunt
- grunt-contrib-concat
Gulp
- gulp-concat
Общее сжатие для файлов/папок
Grunt
- grunt-contrib-compress
Gulp
- gulp-zip
Сжатие Zopfli
Алгоритм сжатия Zopfli — это библиотека сжатия с открытым исходным кодом,
которая генерирует выходные данные на 3-8% меньше в сравнении с zlib при
максимальном уровне сжатия.
Grunt
- grunt-zopfli
Gulp
- gulp-zopfli
Примечание: Когда в 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
- grunt-reduce
Gulp
Пользователи Gulp должны использовать непосредственно AssetGraph.
Сравнительный анализ
Приведённые ниже бенчмарк-плагины полезны для использования в качестве части реализации подхода непрерывной интеграции (Continuous Integration). Несмотря на то, что в настоящее время они доступны только для Grunt, вы можете использовать gulp-grunt для запуска Grunt-тасков через Gulp. Мы рекомендуем:
grunt-pagespeed — превосходен для автоматического определения ваших количества очков PageSpeed как часть непрерывной интеграции.
grunt-topcoat-telemetry — получение гладкости, времени загрузки и другой статистики из Telemetry, как часть процесса непрерывной интеграции. Это может помочь вам настроить панель сравнительного анализа производительности, похожую на ту, что используют в TopCoat.
grunt-wpt — непрерывная интеграция с очками WebPageTest.
grunt-phantomas — время ответа на запросы, на ответы, время загрузки первого изображения/CSS/JS, время события готовности DOM и другое.
Framework Optimization
Grunt
- grunt-ngmin
- grunt-react
- grunt-vulcanize — хорош для конкатенации веб-компонентов
Gulp
- gulp-ngmin
- gulp-react
- gulp-vulcanize
Misch
- gulp-google-cdn
- gulp-size
Заключение
Снижение производительности может влиять на вовлечение пользователя и его впечатления от взаимодействия с ресурсом. Уделите время на эксперименты с плагинами для оптимизации производительности — узнайте, какие практические выгоды они могут дать вашим проектам.
Посетители ваших сайтов будут счастливее в результате мгновенного отклика, да и вообще, быстрый веб — лучше для всех.
Обзор полезных gulp плагинов — Rukoder.
ru18 АПР 2015
1
Обзор полезных gulp плагинов
gulp — таск менеджер для автоматизации рутинных задач работает под node.js
gulp-autoprefixer — автоматически расставляет префиксы к CSS свойствам
gulp-useref — парсит специфичные блоки и конкатенирует описанные в них стили и скрипты
gulp-uncss — анализирует HTML код и находит все неиспользуемые и продублированные стили.
gulp-jscpd — для поиска дубликатов в коде
gulp-notify — выводит ошибки при сборке Gulp в виде системных сообщений
gulp-jshint — проверяет js код
gulp-fixmyjs — исправляет js код после jshint
gulp-minify-css — сжимает css
gulp-uglify — сжимает js
gulp-concat — обьеденяет файлы в один
gulp-imagemin — сжимает изображения
— imagemin-jpeg-recompress — пережимает jpg изображения
— imagemin-pngquant — сжатие PNG с потерями https://pngquant.
org/
gulp-zip — архивирует папки и файлы
gulp-gzip — создание gzip архива
gulp-csscomb — облагораживает структуру ваших CSS
gulp-htmlhint — HTML валидатор
gulp-load-plugins — автоматическая загрузка gylp плагинов из вашего package.json
gulp-size — выводит в лог размер файла
gulp-inline-css — выводит весь css в inline
gulp-grunt — позволяет запускать Grunt плагины для Gulp
gulp-sprite — создание спрайтов изображений
gulp-rev-mtime — создание временной метки для js css
gulp-rsync — rsync, для деплоя файлов на сервер
gulp-rimraf — удаление файлов и директорий
gulp-git — для работы с git
gulp-changed — обработка только измененых файлов
gulp-cat — выводит файл в консоль
gulp-svgmin — минимизация svg файлов
gulp-image-embed — конвертирует img в стилях в data-URI
gulp-ssh — для работы с SSH и SFTP
gulp-css-base64 — конвертация данных в стилях в base64 data URI
gulp-jscs — проверяет ваш js на правильность javascript Code Style http://jscs.
info/
gulp-strip-debug — Strip console, alert, and debugger statements from javascript code
gulp-ruby-sass — sass препроцессор
gulp-jade — html препроцессор
gulp-bower — менеджер пакетов
gulp-rigger — позволяет импортировать один файл в другой простой конструкцией
gulp-plumber — ловим ошибки, чтобы не прервался watch
gulp.spritesmith — создание спрайтов изображений
browser-sync — прокручиваете, кликаете, обновляете и заполняете формы в различных тестируемых браузерах одновременно, браузеры автоматически обновляются с каждым изменением вашего HTML, CSS, изображений и других файлов проекта
gulp-git-deploy — деплоит гит проект в удаленный репозиторий
gulp-rev — добавляет хэш к статическому файлу, например unicorn.css ? unicorn-d41d8cd98f.css
gulp-rev-rep — используеться в связке с gulp-rev и заменяет стандартные имена на имена с хэшем
gulp-mocha — галп обертка для тест фреймверка js
gulp-coverage — инструмент определяет покрытие кода тестами работает в связке с gulp-mocha
gulp-phpunit — обертка для управления phpunit
gulp-phpspec — обертка для управления phpspec
gulp-codeception — обертка для управления codeception
gulp-selectors — плагин для gulp сокращает имена классов и id
Черный список gulp-плагинов http://gulpjs.
com/plugins/blackList.json
Репозиторий gulp-плагинов http://gulpjs.com/plugins/
Добавить комментарий
Категории:
Оставить на заметку в:
gulp-uncss-task — Анализ работоспособности пакетов npm
Все уязвимости безопасности принадлежат производственных зависимостей прямых и косвенных пакеты.
Риск безопасности и лицензии для важных версий
Все версии
Ваш проект подвержен уязвимостям?
Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного
исправления.
Начните работу со Snyk бесплатно.
Начните бесплатно
Еженедельные загрузки (17)
Скачать тренд
- Иждивенцы
- 1
- Звезды GitHub
- 64
- Вилки
- 8
- Авторы
- 4
Популярность прямого использования
Пакет npm gulp-uncss-task получает всего 17 загрузок в неделю. Таким образом, мы забили Уровень популярности gulp-uncss-task будет ограничен.
На основе статистики проекта из репозитория GitHub для
npm package gulp-uncss-task мы обнаружили, что
снялся 64 раза, и это еще 1 проект
в экосистеме зависят от него.
Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.
Частота фиксации
Нет последних коммитов
- Открытые задачи
- 3
- Открытый PR
- 0
- Последняя версия
- 9 лет назад
- Последняя фиксация
- 8 лет назад
Дальнейший анализ состояния обслуживания gulp-uncss-task на основе
каденция выпущенных версий npm, активность репозитория,
и другие точки данных определили, что его обслуживание
Неактивный.
Важным сигналом обслуживания проекта для gulp-uncss-task является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.
За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.
- Совместимость с Node.js
- не определено
- Возраст
- 9 лет
- Зависимости
- 3 прямых
- Версии
- 5
- Размер установки
- 0 Б
- Распределенные теги
- 1
- Количество файлов
- 0
- Обслуживающий персонал
- 1
- Типы TS
- Нет
gulp-uncss-task имеет более одного и последнего тега по умолчанию, опубликованного для
пакет нпм.
Это означает, что для этого могут быть доступны другие теги.
пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать
стабильные релизы.
Глубокая оптимизация CSS в Magento 2
Слияние и минимизация CSS — это стандартная практика в мире оптимизации производительности, которая может помочь значительно ускорить работу сайта, а также повысить оценку страницы. Они помогают уменьшить размер полезной нагрузки и свести к минимуму количество запросов к серверу, что всегда будет иметь положительное влияние на общую производительность. Magento предлагает эти инструменты «из коробки», и они действительно должны быть включены по умолчанию («Конфигурация»> «Дополнительно»> «Разработчик»> «Настройки CSS») на любом рабочем сайте Magento.
Небольшой размер активов
Хотя использование встроенных инструментов Magento определенно помогает, даже в довольно простых проектах размер минимизированного и объединенного CSS может составлять не менее пары сотен килобайт, что.
Поскольку CSS по умолчанию загружается до рендеринга страницы с большими ресурсами, это не идеально с точки зрения производительности, потому что, хотя он и не так важен, как неоптимизированные изображения, он все же может оказать существенное влияние на скорость загрузки страницы и показатель скорости страницы. Page Score Insights сообщает об этой проблеме в разделе «Устранение ресурсов, блокирующих рендеринг», и предлагает поддерживать низкое количество запросов и небольшие размеры передачи за счет использования бюджетов производительности.
Линтинг вашего CSS во время разработки
Создание строгих бюджетных ограничений для ваших активов действительно является лучшей практикой, но это определенно непросто в случае более сложных проектов, над которыми работают многие разработчики с разным уровнем опыта. По этой причине у каждой команды должен быть набор правил, помогающих разработчикам придерживаться стандартов, которые помогут поддерживать высокое качество кода и одновременно уменьшать размер ресурсов.
В Rocket Web мы используем собственный процесс проверки кода CSS в режиме реального времени после каждого сохранения файла, чтобы выявить любые потенциальные проблемы, нарушающие наши правила. Этот процесс называется linting, и мы используем его как задачу gulp в нашем рабочем процессе разработки FED, который определен в локальном файле gulp. Чтобы запустить его, мы просто запускаем задачу разработки, используя:
$ gulp dev
Когда мы изменяем любой из файлов CSS в папке темы, линтер запускается до компиляции LESS в CSS с предупреждением о любых проблемах. Такие правила, как отступ, максимальная глубина вложенности или максимальный идентификатор селектора, могут быть определены в одном из файлов конфигурации.
Вы также можете активировать специальный инструмент linting, запустив:
$ gulp less:lint
Расширенный метод оптимизации
Если производительность является главным приоритетом в вашем проекте, и вы хотите получить Устранение ресурсов, блокирующих рендеринг Вы должны начать с асинхронной загрузки основных файлов css (styles-m, styles-l).
Есть несколько способов сделать это, но нам нравится использовать метод Filament Group, который не зависит от какой-либо внешней библиотеки:
assetRepo->getUrl('css/styles-m.css') ?>" media="print" onload="this.media='all' " />
assetRepo->getUrl('css/styles-l.css') ?>" media="print" onload="this.media='(min -ширина: 768px)'" /> Вам также необходимо удалить эти два файла CSS из глобального макета в default_head_blocks.xml :
<удалить src="css/styles-m.css" />
Следующим шагом является определение общих точек входа для вашего веб-сайта (HP, PDP, страница со списком продуктов и т. д.) и создание отдельных файлов CSS для тех страниц, которые содержат только правила, которые используются на этих страницах, и ничего больше. Эти файлы могут занимать всего 10-20% от объединенного CSS-файла, что дает довольно существенную экономию, когда речь идет об уменьшении полезной нагрузки.
Эту задачу можно выполнить вручную, но, как обычно, есть инструменты, которые помогают нам автоматизировать этот процесс, что сэкономит много времени. В наших проектах мы используем другую задачу gulp, определенную в локальном файле gulp, которая принимает значения конфигурации (базовый URL-адрес и точки входа) из uncss.js и основные стили из папки pub/static в качестве входных данных и генерирует соответствующие файлы CSS. Эти файлы сохраняются в папке web/css темы с именами, соответствующими заданным точкам входа (например, styles-l-hp.css, styles-m-hp.css) и автоматически копируются в папку pub/static после статического содержимого. регенерация (например, во время развертывания в рабочей среде). Все это запускается с помощью простой команды:
$ gulp css:uncss
Все, что вам нужно сделать, это загрузить эти недавно сгенерированные файлы CSS в соответствующие файлы макета страницы:
<голова>
css" />
Когда вы загружаете HP с оптимизированными таблицами стилей в первый раз, все должно выглядеть одинаково, но если проверить вкладку «Сеть» в Dev Tools, вы увидите основные таблицы стилей (styles-m.css, styles-l. css) не блокируют отрисовку страницы, так как загружаются асинхронно. Увеличение скорости загрузки страницы может быть или не быть заметным в зависимости от размера ваших ресурсов, но вы определенно получите лучший показатель скорости страницы.
Заключение
Несмотря на то, что Magento предлагает некоторые базовые инструменты для оптимизации CSS, поиск более эффективных способов оптимизации ресурсов всегда окупается. В нашем случае линтинг нашего CSS и использование комбинации асинхронной загрузки и uncss для уменьшения размера основных таблиц стилей работает лучше всего. Существуют и другие способы дальнейшей оптимизации CSS, такие как замена инструментов минимизации Magento на собственные (например, cssnano) или встраивание CSS-кода в верхней части документа в .