- Стиснення і оптимізація зображень
- Grunt
- Gulp
- Генерація чуйних зображень для елемента <picture>
- Grunt
- Мініфікація SVG зображень
- Grunt
- Grunt
- Збірка SVG спрайтів з підтримкою для різних браузерів
- Мініфікація CSS
- Grunt
- Grunt
- вбудований CSS
- Grunt
- Grunt
- Grunt
- Вбудовування CSS критичного шляху
- Asset pipeline (авто-обробка всіх оптимізацій)
- Grunt
- Порівняльний аналіз
- Framework Optimization
# 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. Ми рекомендуємо:
grunt-pagespeed - чудовий для автоматичного визначення ваших кількості очок PageSpeed як частина безперервної інтеграції.
grunt-topcoat-telemetry - отримання гладкості, часу завантаження і інший статистики з Telemetry, як частина процесу безперервної інтеграції. Це може допомогти вам налаштувати панель порівняльного аналізу продуктивності, схожу на ту, що використовують в TopCoat .
grunt-wpt - безперервна інтеграція з окулярами WebPageTest.
grunt-phantomas - час відповіді на запити, на відповіді, час завантаження першого зображення / CSS / JS, час події готовності DOM і інше.
Framework Optimization
Grunt
Gulp
Misch
висновок
Зниження продуктивності може впливати на залучення користувача і його враження від взаємодії з ресурсом. Приділіть час на експерименти з плагінами для оптимізації продуктивності - дізнайтеся, які практичні вигоди вони можуть дати вашим проектам.
Відвідувачі ваших сайтів будуть щасливіші в результаті миттєвого відгуку, та й взагалі, швидкий веб - краще для всіх.