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
210
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
読めるかな?ちょっとレアなRubyの記法
kiyohara
0
60
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
53
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
370
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.6k
Algolia in CAMPFIRE
kiyohara
0
3.6k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
310
Web to macOS native app
kiyohara
0
400
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
270
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
510
Other Decks in Technology
See All in Technology
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
720
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
240
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
3
1k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
本が全く読めなかった過去の自分へ
genshun9
0
700
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
1
150
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
580
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
120
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
BBQ
matthewcrist
89
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Visualization
eitanlees
146
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Building Adaptive Systems
keathley
43
2.6k
Side Projects
sachag
455
42k
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/