2012/6/10 webのパフォーマンスを考える @...
DESCRIPTION
2012/6/10の勉強会で使用したスライドです。 2012/5/19の内容を一部更新したものになります。TRANSCRIPT
Webのパフォーマンスを考える
～WordPressと付き合うために～ @ 【第三回】初心者向けホームページ勉強会 2012/6/10
こばやし たけし / @tama200x
プロフィール
こばやし たけし プログラマ－から、インフラエンジニア・ネットワークエンジニアを経て、現在はWeb部門・DTP部門のマネージャー
Twitter: tama200xFacebook: http://www.facebook.com/tama200x
本日のテーマ
Webのフォーマンス改善 (WordPressのパフォーマンス改善も少しだけ...)
● パフォーマンスが悪い原因
● フォーマンスの改善方法
性能改善...その前に
● サーバが原因？○ 安いレンタルサーバだから？○ 実はサーバが海外？
● WordPressが遅い？○ プラグインが原因？○ テーマが原因？
● それ以外に原因は？○ 回線が遅い？○ 実はPCが古くて遅い？
原因はどこに？
サーバの性能不足
WPによる遅延
リクエスト数が多い
転送ファイルサイズが多い
ブラウザレンダリングが最適化されていない
Web DB
WP MySQL
原因を調べるには
<ブラウザで調べる>
● Firebug (Firefox)● Chrome Developer Tools (Chrome)● Yslow (Firefox/Chrome)● PageSpeed (Firefox/Chrome)
<サービスで調べる>
● Pingdom Tools● GTmetrix etc
原因を調べるには
DEMO
ダウンロードの流れ①
PC
DNSサーバ
Webサーバ
1. DNSルックアップ
1. DNSルックアップホスト名からIPアドレスを検索
2. 接続Webサーバへ接続
3. 送信CookieやPOSTの内容を送信
4. 待機Webサーバ側の処理待ち
5. 受信サーバからデータを受信
2. 接続
3. 送信
5. 受信
ダウンロードの流れ②
Firebugのネットタブ 例：http://php-ninja.com/
ダウンロードの流れ③
htmlstylesheetstylesheetstylesheet
scriptstylesheet
scriptscriptscriptscriptscript
stylesheetimageimageimageimageimageimageimagescript
image
300msec
http://php-ninja.com/ のウオーターフローの一部
ファイル読みだし完了4.25sec
HTMLファイルのダウンロード時間が全体のダウンロードに占める割合は約7%
複数ファイル同時にダウンロードされる● 1ホストあたり2 (RFC2616 8.1.4)● 1ホストあたり6 (主要なブラウザの
実装)
解決策
サーバの性能改善
WP固有の対策
リクエスト数削減
転送ファイルサイズ削減
ブラウザレンダリングの最適化
Web DB
WP MySQLCDN/別サイト使用＝リクエスト数/ 転送ファイルサイズ の削減
CDN/別サイト
改善方法（フロントエンド）
● ブラウザレンダリングが最適化されていない
→ ブラウザレンダリング最適化● リクエスト数が多い
→ リクエスト数削減 → CDNや別サイト利用 → キャッシュの利用
● 転送ファイルサイズが多い → 転送ファイルサイズの削減 → CDNや別サイト利用 → キャッシュ利用
● WPによる遅延 → WordPressプラグインによる改善
改善方法（バックエンド）
● サーバの性能不足
→ サーバ側の改善
改善方法 ～ブラウザレンダリング最適化～
● CSSの記述位置は先頭
→ CSSファイルは同時ダウンロードされる → プログレッシブレンダリング
● HEADタグ内でのJavaScriptの記述位置は最後に
→ レンダリングやダウンロードを止める● CSSの効率化
→ 不要なスタイルを書かない → CSS記述方法を見直す
● 文字セットの指定● イメージサイズの指定
● DNSルックアップの抑制
→ 応答時間の削減
● リダイレクトの抑制 → リクエスト数、応答時間の削減
● 誤りのあるリクエストの抑制(ステータスコード404等)
● CSSスプライトによる 画像リクエスト数削減 (後述)
● 重複するリソースを単一URLで提供 → キャッシュ/ステータスコード304を活用し リクエスト数/転送ファイルを削減する
改善方法 ～リクエスト数削減～
● 複数のイメージを一つのファイルに統合し、
各イメージをCSSのbackground-potitionで位置指定して表示する
● 画像のリクエスト数が大幅に削減できる
リクエスト数削減の例：CSSスプライト
http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png
クエスト数削減の例：リダイレクトの影響
htmlstylesheetstylesheetstylesheet
scriptimageimageimageimage
リクエスト数の増大
htmlstylesheetstylesheetstylesheet
scriptimage
redirectredirect
image
redirect
imageimage
転送にかかる時間が増大
改善方法 ～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.jsHTML5.js http://html5shiv.googlecode.com/svn/trunk/html5.js
CDNとは
大阪 東京 アメリカ西海岸
100ms～150ms10ms～20ms
CDN CDN CDNサーバ サーバサーバ
改善方法 ～転送ファイルサイズ削減～
● 画像ファイルサイズの最適化
○ Smush.It
● テキストファイルのminification(縮小)化
● gzipでファイルサイズを縮小○ mod_deflate (Apache 2.x)○ mod_gzip (Apache 1.x)
改善方法 ～ブラウザキャッシュ利用～
● キャッシュ設定
→ 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を上書きする
ブラウザキャッシュ利用：キャッシュの流れ
ファイルが要求される ブラウザキャッシュに格納されている？
サーバからファイルを提供(200で応答)
ブラウザキャッシュからファイルを提供
Cache-Control/Expiresを評価
LastModufy/ETagを評価
Yes
No
期限内
サーバから304で応答
期限外/no-cache
※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
サーバ側が新しい
同じか、ブラウザ側が新しい
ブラウザキャッシュ利用：キャッシュ利用の効果
http://php-ninja.com/ (YSlow)
http://php-ninja.com/ (２回目)10リクエスト (+キャッシュから19リクエスト)16.1KB (+キャッシュから295.7KB)
http://php-ninja.com/ (初回)54リクエスト421.4KB
改善方法 ～WordPressプラグイン～
● プラグインの数を最小限にする● Head Cleaner
→ CSS/JSの再配置、統合に効果● WP Smush.It
→ 画像サイズ削減● キャッシュ系プラグイン
○ WP SuperCache○ W3 Total Cache○ Quick Cache○ DB Cache Reloaded Fix
WordPressの404エラーについて
● 404.phpが存在しない場合には/index.php?error=404が呼び出される
● 404.phpの先頭部分に以下の記述が必要。 → 検索エンジンにコンテンツが 存在しないことを通知(codex)<?php header("HTTP/1.1 404 Not Found"); ?>
● .htaccessにErrorDocumentを記述し静的ファイルを指定 → 404.phpよりもサーバ側の処理は少ない(codex)
改善方法 ～サーバ側の改善～
● Webサーバソフトウェアの入れ替え
○ nginx
● サーバ側キャッシュ
● php高速化
● MySQL高速化
改善方法 ～その他～
● ソーシャル連携の課題
● モバイルへの対応
まとめ
● 自分ができることから手をつける
● 簡単なところから手をつける
参考書籍
ハイパフォーマンスwebサイト
WordPress高速化&スマート運用ガイド
続・ハイパフォーマンスwebサイト
参考資料
● Web Performance Best Practices - Make the Web Faster — Google
Developershttps://developers.google.com/speed/docs/best-practices/rules_intro
● 効率の良いcssを書くための7箇条 | Screw-Axishttp://screw-axis.com/2009/06/15/css-good-7-practices/
● Browserscope (ブラウザ毎の同時ダウンロード数)http://www.browserscope.org/?category=network