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 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

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

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