Grunt- і Gulp-таски для оптимізації продуктивності

  1. Стиснення і оптимізація зображень
  2. Grunt
  3. Gulp
  4. Генерація чуйних зображень для елемента <picture>
  5. Grunt
  6. Мініфікація SVG зображень
  7. Grunt
  8. Grunt
  9. Збірка SVG спрайтів з підтримкою для різних браузерів
  10. Мініфікація CSS
  11. Grunt
  12. Grunt
  13. вбудований CSS
  14. Grunt
  15. Grunt
  16. Grunt
  17. Вбудовування CSS критичного шляху
  18. Asset pipeline (авто-обробка всіх оптимізацій)
  19. Grunt
  20. Порівняльний аналіз
  21. Framework Optimization

# 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

Чому два плагіна? Ок, ось вам відмінний аналіз відмінностей між ними. Можете вибрати один, найбільш відповідний для вас.

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

висновок

Зниження продуктивності може впливати на залучення користувача і його враження від взаємодії з ресурсом. Приділіть час на експерименти з плагінами для оптимізації продуктивності - дізнайтеся, які практичні вигоди вони можуть дати вашим проектам.

Відвідувачі ваших сайтів будуть щасливіші в результаті миттєвого відгуку, та й взагалі, швидкий веб - краще для всіх.

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

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

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

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

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

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

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

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