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
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
220
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
170
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
180
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
500
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3.3k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
690
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Code Review Best Practice
trishagee
69
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
For a Future-Friendly Web
brad_frost
179
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
RailsConf 2023
tenderlove
30
1.1k
Building an army of robots
kneath
306
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Fireside Chat
paigeccino
37
3.5k
We Have a Design System, Now What?
morganepeng
53
7.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/