Compact Web - Remind "web compression" -

Compact Web
Remind “web compression”

2012.04.07 WCAF vol.8

Good Response, Good Conversion
vs 1 sec

Smar t Phone
Narrow band + Big contents

細い回線でも

レスポンスよく

多くのコンテンツを届けたい

Today’s Focus

web compression
over view & trend

コンテンツはそのままに

データ量はコンパクトにすることで

レスポンスを向上させる

作るものは「いつもと一緒」

公開前にちょっと一手間

Target

Image files ( jpg, png )

Text files ( html, style sheet, javascript )

Transport (http)

Image files

Quality VS File Size

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

圧縮専用のツールを使えば

Photoshop, Illustrator, Fireworks

の出力はもっと圧縮できる

Text files

Delete sentence for developer
( Indent Space and Comments )

+
High context minify

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


$ npm install clean-css

clean-css

CSS

node.js - npm


+α(node.js)

$ npm install clean-css

UglifyJS

JavaScript

node.js - npm

https://github.com/mishoo/UglifyJS

UglifyJS

JavaScript

node.js - npm


$ npm install uglify-js

UglifyJS

JavaScript

node.js - npm


+α(node.js)

$ npm install uglify-js

Recommend

Designer Programmer
ImageOptim htmlcompressor

Smaller YUI Compressor

!
Don’t delete
JavaScript Copyright

圧縮専用のツールを使えば

Dreamweaver


Transpor t

http1.1

Accept-Encoding: gzip, deflate
+
Content-Encoding: gzip

Zipped transpor t

COMPRESS

Zipped transpor t

COMPRESS EXPAND

Apache

keyword : “DEFLATE” (mod_deflate)

Reference : http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html

Sample : httpd.conf

LoadModule deflate_module libexec/apache22/mod_deflate.so

<Directory "/your-server-root/manual">
AddOutputFilterByType DEFLATE text/html application/javascript text/css
</Directory>

nginx

keyword : “gzip” (HttpGzipModule)

Reference : http://wiki.nginx.org/HttpGzipModule

Sample : nginx.conf

server {
gzip on;
gzip_types text/css application/javascript # text/html default included
}

!
Check
ser ver 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

Let’s delete
CSS Vender Prefix

When can I use ...

http://caniuse.com/

photo credit

http://www.flickr.com/photos/julianlim/4598412264/

http://www.flickr.com/photos/intelfreepress/6722296265/

http://www.flickr.com/photos/scobleizer/4697192856/

Compact Web - Remind "web compression" -

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a Compact Web - Remind "web compression" -

Semelhante a Compact Web - Remind "web compression" - (20)

Mais de Tomokazu Kiyohara

Mais de Tomokazu Kiyohara (15)

Último

Último (20)

Compact Web - Remind "web compression" -

Notas do Editor