Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compact Web - Remind "web compression" -
Search
Tomokazu Kiyohara
April 07, 2012
Technology
2
170
Compact Web - Remind "web compression" -
WCAF Vol.8 (2012/04/07) の発表資料。
Web に関する圧縮技術についてのお話。
Tomokazu Kiyohara
April 07, 2012
Tweet
Share
More Decks by Tomokazu Kiyohara
See All by Tomokazu Kiyohara
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
260
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.5k
Algolia in CAMPFIRE
kiyohara
0
3.2k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
220
Web to macOS native app
kiyohara
0
290
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
190
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
400
ベッドで技術書を快適に読むただひとつの方法
kiyohara
19
23k
JavaScript で OS X を自動操作
kiyohara
1
440
Other Decks in Technology
See All in Technology
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
DMM.com アルファ室採用案内資料
hsugita
1
160
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
170
On Your Data を超えていく!
hirotomotaguchi
2
690
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
310
Building Dashboards as a Hobby
egmc
0
230
本当のAWS基礎
toru_kubota
0
520
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
ServiceNow Knowledge Learning Rise up
manarobot
0
210
Azureの基本的な権限管理の勉強会
yhana
0
590
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Adopting Sorbet at Scale
ufuk
68
8.6k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
The Mythical Team-Month
searls
216
42k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Faster Mobile Websites
deanohume
299
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Designing the Hi-DPI Web
ddemaree
276
33k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Transcript
Compact Web Remind “web compression” 2012.04.07 WCAF vol.8
Good Response, Good Conversion vs 1 sec
High Performance Technique
Smart Phone Narrow band + Big contents
ࡉ͍ճઢͰ ϨεϙϯεΑ͘ ଟ͘ͷίϯςϯπΛಧ͚͍ͨ
web compression overview & trend Today’s Focus
ίϯςϯπͦͷ··ʹ σʔλྔίϯύΫτʹ͢Δ͜ͱͰ ϨεϙϯεΛ্ͤ͞Δ
DEMO
࡞Δͷʮ͍ͭͱҰॹʯ ެ։લʹͪΐͬͱҰखؒ
Target Image files ( jpg, png ) Text files (
html, style sheet, javascript ) Transport (http)
Target Image files ( jpg, png ) Text files (
html, style sheet, javascript ) Transport (http)
Image files Quality VS File Size
Application
ImageOptim jpg, png ( +gif ) http://imageoptim.com
JPEGmini jpg http://www.jpegmini.com
advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP
advpng png http://advancemame.sourceforge.net/comp-readme.html AdvanceCOMP $ brew install advancecomp
ѹॖઐ༻ͷπʔϧΛ͑ 1IPUPTIPQ *MMVTUSBUPS 'JSFXPSLT ͷग़ྗͬͱѹॖͰ͖Δ
Target Image files ( jpg, png ) Text files (
html, style sheet, javascript ) Transport (http)
Text files Delete sentence for developer ( Indent Space and
Comments ) + High context minify
html
html
html
style sheet
style sheet
style sheet
style sheet
style sheet
style sheet
style sheet
style sheet
javascript
javascript
javascript
javascript
javascript
javascript
javascript
javascript
Application
Smaller HTML, JavaScript, CSS http://smallerapp.com/ $20 ( free trial 30
days )
CodeKit JavaScript http://incident57.com/codekit/ Beta ( beta : free / release
: $20 )
HTMLCompressor.com HTML http://htmlcompressor.com/
CLEAN CSS CSS http://www.cleancss.com/
Online YUI Compressor JavaScript, CSS http://www.refresh-sf.com/yui/
htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/
htmlcompressor HTML ( + php ) http://code.google.com/p/htmlcompressor/ $ brew install
htmlcompressor
YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/
YUI Compressor JavaScript, CSS Yahoo! UI Library http://developer.yahoo.com/yui/compressor/ $ brew
install yuicompressor
clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css
clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css $ npm install clean-css
clean-css CSS node.js - npm https://github.com/GoalSmashers/clean-css $ npm install clean-css
+α(node.js)
UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS
UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS $ npm install uglify-js
UglifyJS JavaScript node.js - npm https://github.com/mishoo/UglifyJS $ npm install uglify-js
+α(node.js)
Recommend Programmer htmlcompressor YUI Compressor Designer ImageOptim Smaller
Don’t delete JavaScript Copyright !
ѹॖઐ༻ͷπʔϧΛ͑ %SFBNXFBWFS ͷग़ྗͬͱѹॖͰ͖Δ
Target Image files ( jpg, png ) Text files (
html, style sheet, javascript ) Transport (http)
Transport http1.1 Accept-Encoding: gzip, deflate + Content-Encoding: gzip
Normal transport
Normal transport
Normal transport
Normal transport
Zipped transport
Zipped transport COMPRESS
Zipped transport COMPRESS
Zipped transport COMPRESS EXPAND
LoadModule deflate_module libexec/apache22/mod_deflate.so <Directory "/your-server-root/manual"> AddOutputFilterByType DEFLATE text/html application/javascript text/css
</Directory> Apache keyword : “DEFLATE” (mod_deflate) Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html Sample : httpd.conf
server { gzip on; gzip_types text/css application/javascript # text/html default
included } nginx keyword : “gzip” (HttpGzipModule) Reference : http://wiki.nginx.org/HttpGzipModule Sample : nginx.conf
Check server performance !
ίϯϑΟάΛॻ͖͑Δ͚ͩͰ αʔόʔ ͷग़ྗͬͱѹॖͰ͖Δ
Conclusion Good response for Smart Phone ( Narrow band &
Big contents ) “Web Compression” Many Techniques Image Files, Text Files → Use software Transport → Setup server
ͪΐͬͱͷҰखؒ ͡ΊΔ͚ͩ
thank you Tomokazu Kiyohara http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara
one more thing
Let’s delete CSS Vender Prefix
When can I use ... http://caniuse.com/
When can I use ...
photo credit http://www.flickr.com/photos/julianlim/4598412264/ http://www.flickr.com/photos/intelfreepress/6722296265/ http://www.flickr.com/photos/scobleizer/4697192856/