Mais conteúdo relacionado Semelhante a 2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会 (20) Mais de tama200x Kobayashi (6) 2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会4. 性能改善...その前に
● サーバが原因?
○ 安いレンタルサーバだから?
○ 実はサーバが海外?
● WordPressが遅い?
○ プラグインが原因?
○ テーマが原因?
● それ以外に原因は?
○ 回線が遅い?
○ 実はPCが古くて遅い?
5. 原因はどこに?
Web DB
WP MySQL
い い
が多 ズが多
スト数 サイ
リ クエ ァイル サーバの性能不足
フ
転送
WPによる遅延
ブラウザレンダリング
が
最適化されていない
6. 原因を調べるには
<ブラウザで調べる>
● Firebug (Firefox)
● Chrome Developer Tools (Chrome)
● Yslow (Firefox/Chrome)
● PageSpeed (Firefox/Chrome)
<サービスで調べる>
● Pingdom Tools
● GTmetrix etc
8. ダウンロードの流れ①
1. DNSルックアップ
ホスト名からIPアドレスを検索
2. 接続
1. DNSルックアップ Webサーバへ接続
DNSサーバ 3. 送信
CookieやPOSTの内容を送信
PC 4. 待機
Webサーバ側の処理待ち
5. 受信
2. 接続 Webサーバ サーバからデータを受信
3. 送信
5. 受信
10. ダウンロードの流れ③
http://php-ninja.com/
300msec のウオーターフローの一部
html
stylesheet
stylesheet
stylesheet HTMLファイルのダウンロード時間が全体
script のダウンロードに占める割合は約7%
stylesheet
script
script
script
script 複数ファイル同時にダウンロードされる
script ● 1ホストあたり2 (RFC2616 8.1.4)
stylesheet
image ● 1ホストあたり6 (主要なブラウザの
image 実装)
image
image
image
image
image
script
image
ファイル読みだし完了4.25sec
11. 解決策
CDN/別サイト
Web DB
WP MySQL
CDN/別サイト使用
=リクエスト数/
転送ファイルサイズ
の削減
削減 削減
ス ト数 サイズ
リクエファイル サーバの性能改善
転送
WP固有の対策
ブラウザレンダリングの
最適化
12. 改善方法(フロントエンド)
● ブラウザレンダリングが最適化されていない
→ ブラウザレンダリング最適化
● リクエスト数が多い
→ リクエスト数削減
→ CDNや別サイト利用
→ キャッシュの利用
● 転送ファイルサイズが多い
→ 転送ファイルサイズの削減
→ CDNや別サイト利用
→ キャッシュ利用
● WPによる遅延
→ WordPressプラグインによる改善
14. 改善方法 ~ブラウザレンダリング最適化~
● CSSの記述位置は先頭
→ CSSファイルは同時ダウンロードされる
→ プログレッシブレンダリング
● HEADタグ内でのJavaScriptの記述位置は最後に
→ レンダリングやダウンロードを止める
● CSSの効率化
→ 不要なスタイルを書かない
→ CSS記述方法を見直す
● 文字セットの指定
● イメージサイズの指定
15. 改善方法 ~リクエスト数削減~
● DNSルックアップの抑制
→ 応答時間の削減
● リダイレクトの抑制
→ リクエスト数、応答時間の削減
● 誤りのあるリクエストの抑制(ステータスコード404等)
● CSSスプライトによる
画像リクエスト数削減 (後述)
● 重複するリソースを単一URLで提供
→ キャッシュ/ステータスコード304を活用し
リクエスト数/転送ファイルを削減する
17. クエスト数削減の例:リダイレクトの影響
redirect
html
stylesheet
stylesheet
stylesheet リクエスト数の増
script
image 大
redirect
redirect
image
image
image
html
転送にかかる時
stylesheet
stylesheet
間が増大
stylesheet
script
image
image
image
image
18. 改善方法 ~CDNや別サイト利用~
● ホスト毎の同時ダウンロード数上限
○ yimg.jpの例
● CDNの利用
● 外部のjQuery、html5.jsを利用するメリット
リクエスト数削減
jQuery
https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-x.x.x.min.js
http://code.jquery.com/jquery-x.x.x.min.js
HTML5.js
http://html5shiv.googlecode.com/svn/trunk/html5.js
21. 改善方法 ~ブラウザキャッシュ利用~
● キャッシュ設定
→ HTTP Cache-Control Header
○ metaタグ内の Expire属性
<meta http-equiv="expires" content="秒数またはGMT" />
○ header set Cache-Control (Apache)
● 有効期限設定
→ HTTP Expires Header
○ metaタグ内の Cache-Control属性
<meta http-equiv="Cache-Control" content="秒数またはGMT" />
○ ExpiresDefalut / ExpiresByType (Apache)
※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
22. ブラウザキャッシュ利用:キャッシュの流れ
No
ファイルが要求される ブラウザキャッシュに
格納されている?
Yes
期限内 Cache-Control/
Expiresを評価
期限外/no-cache
LastModufy/ETagを サーバ側が新しい
評価
同じか、ブラウザ側が新しい
ブラウザキャッシュから サーバからファイルを提
サーバから304で応答
ファイルを提供 供(200で応答)
※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
29. 参考書籍
ハイパフォーマンスwebサイト
続・ハイパフォーマンスwebサイト
WordPress高速化&スマート運用ガイド
30. 参考資料
● Web Performance Best Practices - Make the Web Faster — Google
Developers
https://developers.google.com/speed/docs/best-practices/rules_intro
● 効率の良いcssを書くための7箇条 | Screw-Axis
http://screw-axis.com/2009/06/15/css-good-7-practices/
● Browserscope (ブラウザ毎の同時ダウンロード数)
http://www.browserscope.org/?category=network