WCAF Vol.8 (2012/04/07) の発表資料。 Web に関する圧縮技術についてのお話。
Compact WebRemind “web compression”2012.04.07 WCAF vol.8
View Slide
Good Response, Good Conversionvs 1 sec
High Performance Technique
Smart PhoneNarrow band + Big contents
ࡉ͍ճઢͰϨεϙϯεΑ͘ଟ͘ͷίϯςϯπΛಧ͚͍ͨ
web compressionoverview & trendToday’s Focus
ίϯςϯπͦͷ··ʹσʔλྔίϯύΫτʹ͢Δ͜ͱͰϨεϙϯεΛ্ͤ͞Δ
DEMO
࡞Δͷʮ͍ͭͱҰॹʯެ։લʹͪΐͬͱҰखؒ
TargetImage files ( jpg, png )Text files ( html, style sheet, javascript )Transport (http)
Image filesQuality VSFile Size
Application
ImageOptimjpg, png ( +gif )http://imageoptim.com
JPEGminijpghttp://www.jpegmini.com
advpngpnghttp://advancemame.sourceforge.net/comp-readme.htmlAdvanceCOMP
advpngpnghttp://advancemame.sourceforge.net/comp-readme.htmlAdvanceCOMP$ brew install advancecomp
ѹॖઐ༻ͷπʔϧΛ͑1IPUPTIPQ *MMVTUSBUPS 'JSFXPSLTͷग़ྗͬͱѹॖͰ͖Δ
Text filesDelete sentence for developer( Indent Space and Comments )+High context minify
html
style sheet
javascript
SmallerHTML, JavaScript, CSShttp://smallerapp.com/$20 ( free trial 30 days )
CodeKitJavaScripthttp://incident57.com/codekit/Beta ( beta : free / release : $20 )
HTMLCompressor.comHTMLhttp://htmlcompressor.com/
CLEAN CSSCSShttp://www.cleancss.com/
Online YUI CompressorJavaScript, CSShttp://www.refresh-sf.com/yui/
htmlcompressorHTML ( + php )http://code.google.com/p/htmlcompressor/
htmlcompressorHTML ( + php )http://code.google.com/p/htmlcompressor/$ brew install htmlcompressor
YUI CompressorJavaScript, CSSYahoo! UI Libraryhttp://developer.yahoo.com/yui/compressor/
YUI CompressorJavaScript, CSSYahoo! UI Libraryhttp://developer.yahoo.com/yui/compressor/$ brew install yuicompressor
clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css
clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css$ npm install clean-css
clean-cssCSSnode.js - npmhttps://github.com/GoalSmashers/clean-css$ npm install clean-css+α(node.js)
UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS
UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS$ npm install uglify-js
UglifyJSJavaScriptnode.js - npmhttps://github.com/mishoo/UglifyJS$ npm install uglify-js+α(node.js)
RecommendProgrammerhtmlcompressorYUI CompressorDesignerImageOptimSmaller
Don’t deleteJavaScript Copyright!
ѹॖઐ༻ͷπʔϧΛ͑%SFBNXFBWFSͷग़ྗͬͱѹॖͰ͖Δ
Transporthttp1.1Accept-Encoding: gzip, deflate+Content-Encoding: gzip
Normal transport
Zipped transport
Zipped transportCOMPRESS
Zipped transportCOMPRESS EXPAND
LoadModule deflate_module libexec/apache22/mod_deflate.soAddOutputFilterByType DEFLATE text/html application/javascript text/cssApachekeyword : “DEFLATE” (mod_deflate)Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.htmlSample : httpd.conf
server {gzip on;gzip_types text/css application/javascript # text/html default included}nginxkeyword : “gzip” (HttpGzipModule)Reference : http://wiki.nginx.org/HttpGzipModuleSample : nginx.conf
Checkserver performance!
ίϯϑΟάΛॻ͖͑Δ͚ͩͰαʔόʔͷग़ྗͬͱѹॖͰ͖Δ
ConclusionGood response for Smart Phone ( Narrow band & Big contents )“Web Compression”Many TechniquesImage Files, Text Files → Use softwareTransport → Setup server
ͪΐͬͱͷҰखؒ͡ΊΔ͚ͩ
thank youTomokazu Kiyoharahttp://twitter.com/kiyoharahttp://facebook.com/tomokazu.kiyohara
one more thing
Let’s deleteCSS Vender Prefix
When can I use ...http://caniuse.com/
When can I use ...
photo credithttp://www.flickr.com/photos/julianlim/4598412264/http://www.flickr.com/photos/intelfreepress/6722296265/http://www.flickr.com/photos/scobleizer/4697192856/
kiyohara
mixi_engineers
oracle4engineer
shohei1029
okuzawats
microcms
yujisoftware
x_ttyszk
andpad
okada_fuutass
interu
lamrongol
akosma
kneath
speakerdeck
lauravandoore
panda_program
jeffersonlam
afnizarnur
dotmariusz
shlominoach
productmarketing
hursman
cassininazir