Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | koji-ishimoto |
View: | 102 times |
Download: | 0 times |
Coding Web Performance~Webパフォーマンス最適化のためのコーディング手法~
Koji IshimotoWeb Designer
April 17, 2010CSS Nite LP, Disk 9
Twitter:#cssnitelp9
CSS Nite LP, Disk 9 : Coder's Higher
Agendaビジネスインパクトとスタンス
ボトルネックはどこか?
とあるサイトの改善事例
今日のまとめ
ビジネスインパクトとスタンス
Business Impact and Stance
CSS Nite LP, Disk 9 : Coder's Higher
Google Ranking Algorithm2010.04.09
CSS Nite LP, Disk 9 : Coder's Higher
Google AdWords
CSS Nite LP, Disk 9 : Coder's Higher
Google Webmaster Tools
CSS Nite LP, Disk 9 : Coder's Higher
高速サイトがもたらす利益
再訪問数の増加
セッションあたりのPV数増加
コンバージョン率の改善
収益増加
顧客満足度の向上
インフラコスト・帯域幅の節約
CSS Nite LP, Disk 9 : Coder's Higher
Before After
Coder Coder + Performance
->
CSS Nite LP, Disk 9 : Coder's Higher
コーダー/デザイナーは忙しい
HTML5 / CSS3
JavaScript (jQuery)
Accessibility
Usability
Information Architecture
Web Analytics
etc.
CSS Nite LP, Disk 9 : Coder's Higher
Web Performance?
CSS Nite LP, Disk 9 : Coder's Higher
最小限の対策で最大限の効果
ボトルネックはどこか?
Where is the time spent?
CSS Nite LP, Disk 9 : Coder's Higher
HTTPWatch 7.0
CSS Nite LP, Disk 9 : Coder's Higher
Waterfall Chart
CSS Nite LP, Disk 9 : Coder's Higher
リクエストの各段階
Blocking - ブロッキング
DNS Lookup - DNSルックアップ
Connect - 接続
Send - 送信
Wait - 待機
Receieve - 受信
Cashe Read - キャッシュ読み込み
CSS Nite LP, Disk 9 : Coder's Higher
リクエストの各段階
Server
Client
接続の確立 データ送信 送信完了
最初の接続
最初のHTTPリクエスト
DNSルックアップ
ISP
DNS Lookup Connect
データ受信
Wait
受信完了
Receive
CSS Nite LP, Disk 9 : Coder's Higher
Waterfall Chart
CSS Nite LP, Disk 9 : Coder's Higher
Wait Time!待機時間
CSS Nite LP, Disk 9 : Coder's Higher
Wait Time!
CSS Nite LP, Disk 9 : Coder's Higher
Internet Explorer 6
CSS Nite LP, Disk 9 : Coder's Higher
Firefox 3.6
CSS Nite LP, Disk 9 : Coder's Higher
ホスト名毎の同時接続数
HTTP/1.1 の仕様では「ひとつのホスト名に対して
同時接続できるコンポーネント数は2つまで」と制限
IE6 IE7 IE8 Fx3.6 Chrome4 Safari4 Opera10
2 2 6 6 6 5 42 2
CSS Nite LP, Disk 9 : Coder's Higher
Waterfall Chart
Fx3.6
2
6
IE6
CSS Nite LP, Disk 9 : Coder's Higher
Internet Explorer 6
CSS Nite LP, Disk 9 : Coder's Higher
Internet Explorer 6 (Blocking)
CSS Nite LP, Disk 9 : Coder's Higher
Blocking Time!ブロッキング
CSS Nite LP, Disk 9 : Coder's Higher
Blocking Time!
HTTPリクエストはコストが高い
とあるサイトの改善事例
Recommend Practice
CSS Nite LP, Disk 9 : Coder's Higher
とあるサイトの改善事例
CSS スプライト
データ URI スキーム
CSS, JS ファイルを結合する
CSS3 プロパティ
奥の手
CSS Nite LP, Disk 9 : Coder's Higher
CSS スプライト
複数の画像を1つの合成画像としてグループ化し
背景の位置指定を使って表示する方法
#globalNav ul li a { display: block; height: 28px; background-image: url(/img/common/hd/bg_globalnav.png);}
#globalNav #home.on a { background-position: 0 -60px;}
#globalNav #info.on a { background-position: -108px -60px;}
#globalNav #news.on a { background-position: -219px -60px;}
#globalNav #business.on a { background-position: -375px -60px;}
...
CSS Nite LP, Disk 9 : Coder's Higher
Before
CSS Nite LP, Disk 9 : Coder's Higher
After
CSS Nite LP, Disk 9 : Coder's Higher
CSS スプライト効果
{-150ms
CSS Sprites Non Sprites
CSS Nite LP, Disk 9 : Coder's Higher
スプライトのジレンマ
Pages - ページ数
Maintenance - 保守性
Optimization - 最適化
Pages
Maintenance Optimization
CSS Nite LP, Disk 9 : Coder's Higher
HTTP Requests 11-> 3 CSS Sprites
CSS Nite LP, Disk 9 : Coder's Higher
データURIスキーム
外部の画像ファイルを参照することなく
画像をマークアップ中に直接埋め込むことができる
書式 - data:[メディアタイプ][;base64],データ
.pageTop a { background: url(/img/common/ico_arrow.png) no-repeat;}
!.pageTop a { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAqCAMAAAC0q5rDAAAABGdBTUEAAKINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADAUExURenp6fLw7/b29vT09NjY2NPT05u20/7+/u3t7e/v7/Hw7/Pz8+/v7v39/fj4+Ofn5/Dv7/Hx8fLy8uXl5UF6tODg4Dl1sfz8Nvb2n5+ePj49ra2vv73gCMTEL32budBhC9TCv6i99Ftv3yaTB3IVufu8lTTkclSooenfZBBKpMzgPv3GrgrZHLTpldn4H2PYpnU7+zGd+WgNZtc...) no-repeat;}
CSS Nite LP, Disk 9 : Coder's Higher
データURIスキームの問題点
IE5 - 7 非対応
サイズ制限
Opera 7.2: 4.1KBまで
Internet Explorer 8: 32KBまで
Firefox 2: 100KBまで
CSS Nite LP, Disk 9 : Coder's Higher
HTTP Requests 1-> 0Data URI Scheme
(Non IE5-7)
CSS Nite LP, Disk 9 : Coder's Higher
CSS, JS ファイルを結合する
複数の外部CSS,JavaScriptファイルを
1つのCSS, JavaScriptファイルにまとめる
<link rel="stylesheet" type="text/css" href="file/css/reset-min.css" /><link rel="stylesheet" type="text/css" href="file/css/fonts-min.css" /><link rel="stylesheet" type="text/css" href="file/css/structure.css" />
!<link rel="stylesheet" type="text/css" href="file/css/common.css" />
<script type="text/javascript" src="file/js/jquery-min.js"></script><script type="text/javascript" src="file/js/jquery-plugin1.js"></script><script type="text/javascript" src="file/js/jquery-plugin2.js"></script>
!<script type="text/javascript" src="file/js/common.js"></script>
CSS Nite LP, Disk 9 : Coder's Higher
HTTP Requests 6 -> 2 Combined Scripts and Stylesheets
CSS Nite LP, Disk 9 : Coder's Higher
CSS3 プロパティ
Box Shadow.hoge { box-shadow: 5px 5px 5px #666666; }
Border Radius.hoge { border-radius: 20px; }
Opacity / RGBA / HSLA.hoge {opacity:0.5; color:rgba(255,255,0,0.5); color:hsla(120,100%,50%,0.5);}
Gradient.hoge { background-image: linear-gradient(top, #000000, #cccccc); }
etc.
CSS Nite LP, Disk 9 : Coder's Higher
HTTP Requests ? -> 0 CSS Level 3
(Non IE)
CSS Nite LP, Disk 9 : Coder's Higher
(‘・ω・ )`コマッタピョン....
CSS Nite LP, Disk 9 : Coder's Higher
Change Design!
CSS Nite LP, Disk 9 : Coder's Higher
デザインを考えなおしてみる
SmoothScroll機能って必要?-> ページ高とクリック数を調査し、廃止
検索ボタン画像って必要?
->
-> 検索数を調査し、Submitボタンに変更
CSS Nite LP, Disk 9 : Coder's Higher
HTTP Requests 2 -> 1+αChange Design!
CSS Nite LP, Disk 9 : Coder's Higher
Google Site Performance
CSS Nite LP, Disk 9 : Coder's Higher
Google Site Performance
HTTPリクエスト数は 32 ->17
平均読み込み時間は 0.5 秒
全体の上位 2 %に入る高速サイト
2010/4/8 現在
今日のまとめ
Today’s Conclusion
CSS Nite LP, Disk 9 : Coder's Higher
今日のまとめ
ビジネスインパクトとスタンス
-> パフォーマンスを武器に効率よく対策すべし
ボトルネックはどこか?
-> HTTPリクエストはコストが高い
CSS Nite LP, Disk 9 : Coder's Higher
今日のまとめ
とあるサイトの改善事例
-> リクエスト数を減らす簡単な方法はないCSS スプライトデータ URI スキームCSS, JS ファイルを結合するCSS3 プロパティ
-> それは本当に必要なのか?
Thank you!
Blog: http://t32k.com/mol/Twitter : http://twitter.com/t32k/
CSS Nite LP, Disk 9 : Coder's Higher
Books
CSS Nite LP, Disk 9 : Coder's Higher
URLshttp://t32k.com/mol/2010/04/using-site-speed-in-web-search-ranking/
http://t32k.com/mol/2010/04/data-uri-scheme/
http://t32k.com/mol/2010/04/httpwatch-6-2-basic-edtion/
http://t32k.com/mol/2010/03/performance-business/
http://t32k.com/mol/2009/11/introduction-to-web-performance/
http://t32k.com/mol/2009/11/high-performance-web-design/
http://www.slideshare.net/sigwyg/css3-for-tomorrow
http://www.phpied.com/css-performance-ui-with-fewer-images/
http://www.google.com/webmasters/tools/
http://adwords.google.com/support/aw/bin/answer.py?hl=jp&answer=93112
http://www.findmebyip.com/litmus/
CSS Nite LP, Disk 9 : Coder's Higher
Photo Creditshttp://www.flickr.com/photos/kkoshy/4035720581/
http://www.flickr.com/photos/38446022@N00/2940461586/
http://www.flickr.com/photos/38446022@N00/2940461918/
http://www.flickr.com/photos/lcledward/3600542728/
http://www.flickr.com/photos/nostri-imago/3582034044/
http://www.flickr.com/photos/consumerist/614750305/
http://www.flickr.com/photos/consumerist/614655989/
http://www.flickr.com/photos/mah_aaah/3660470519/