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
190
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
310
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.6k
Algolia in CAMPFIRE
kiyohara
0
3.4k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
260
Web to macOS native app
kiyohara
0
340
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
230
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
470
ベッドで技術書を快適に読むただひとつの方法
kiyohara
19
23k
JavaScript で OS X を自動操作
kiyohara
1
470
Other Decks in Technology
See All in Technology
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
310
Fargateを使った研修の話
takesection
0
110
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
620
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
APIテスト自動化の勘所
yokawasa
7
4.1k
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Code Reviewing Like a Champion
maltzj
519
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Language of Interfaces
destraynor
154
24k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Music & Morning Musume
bryan
46
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
How to train your dragon (web standard)
notwaldorf
88
5.7k
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/