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
220
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
67
Lightning Talk イベント運営を いいがにやりたい
kiyohara
0
70
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
390
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.7k
Algolia in CAMPFIRE
kiyohara
0
3.7k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
320
Web to macOS native app
kiyohara
0
410
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
280
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
510
Other Decks in Technology
See All in Technology
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
180
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
990
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
390
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
240
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
データ分析エージェント Socrates の育て方
na0
7
2.5k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Code Review Best Practice
trishagee
71
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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/