- Сціск і аптымізацыя малюнкаў
- 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
заключэнне
Зніжэнне прадукцыйнасці можа ўплываць на ўцягванне карыстальніка і яго ўражанні ад узаемадзеяння з рэсурсам. Надасце час на эксперыменты з ўбудовамі для аптымізацыі прадукцыйнасці - даведайцеся, якія практычныя выгады яны могуць даць вашым праектах.
Наведвальнікі вашых сайтаў будуць больш шчаслівым у выніку імгненнага водгуку, ды і наогул, хуткі вэб - лепш для ўсіх.