WordBench Saitama vol.6

3,235 views
3,126 views

Published on

WordBench 埼玉 vol.6 こもりの資料

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,235
On SlideShare
0
From Embeds
0
Number of Embeds
266
Actions
Shares
0
Downloads
41
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

WordBench Saitama vol.6

  1. 1. できることから始めるWordPress高速化 Performance Optimization for WordPress こもりまさあき
  2. 2. 自己紹介を…こもりまさあき http://blog.gaspanik.com  http://protean.im1972年生まれのフリーランス。Webをはじめネットワーク関連業務のほか、テクニカルライティングや講師などの活動が中心。時と場合によって職種が変わるため、職域的な肩書きはなし仕事にプライベートにと、実はWordPress歴は長い。一昨年開催されたWordCamp Yokohamaでは「WordPressをより高速に」、昨年のWordCamp Tokyoでは「レスポンシブ・パブリッシング」というお題で登壇。WordPress界で著名な「をかもと」さんとWordPressの高速化本を出しました近著に『WordPress 高速化&スマート運用必携ガイド(共著・MdN刊)』、『スマートフォンサイト制作の教科書(共著・MdN刊)』などTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. 今日の概要はこちら• サイトが遅くなる原因ってなんだろう?• ボトルネックを探してみよう• サイトの高速化に効くアレコレ
  4. 4. サ トが遅くなる原因ってなんだろう? イ
  5. 5. どうしてサイトの表示が遅くなるのか?• バックエンドのサーバや回線の状態がよろしくない• WordPressの処理に時間がかかっている• サイトに画像がいっぱい• 外部のサービスからデータを拾っている
  6. 6. いろいろな条件が重なって遅くなる• 共用サーバだったら特定時間に重くなる、など• PHPの処理が遅いのはマシンスペックのせいだけ?• コンテンツの容量が多ければ、転送時間がかかる• ソーシャルメディア系のボタン、バナー画像…
  7. 7. まずは、どこに問題があるのかを確かめることが大事
  8. 8. ボトルネックを探してみよう
  9. 9. 表示のボトルネックを探して対策する流れ• 原因を探らないことには、対処のしようがない• 専用のツールやWebサービスを使って調べる• 秒数が何秒よりも、何が起こっているのかを調べる• 原因を見つけたら、そこを潰していく• できるだけ、ね
  10. 10. 代表的なオンラインの計測サービス• WebPage test (http://webpagetest.org)• Pingdom Tools(http://tools.pingdom.com/fpt/)• Loads.in(http://loads.in/)• Web Wait(http://webwait.com/)
  11. 11. データが転送される様子、ちゃんと見てる?
  12. 12. Webブラウザのアドオンや拡張機能• Firebug(http://getfirebug.com/) *1• YSlow!(http://yslow.org/)• Page Speed(http://bit.ly/HW0vjj)• GTmetrix(http://gtmetrix.com/)*1: FirefoxでYSlow!やPage Speedを動かすために必要。と、同時にNetパネルも使える
  13. 13. 改善点は、ツールの指標を参考に
  14. 14. わかった。じゃ、WordPress側の問題点を調べるには?
  15. 15. WordPress内部の処理を調べるには• Debug Bar(http://bit.ly/HW3DMa)• Debug Bar Extender(http://bit.ly/HW3uZ5)プラグインのインストール後、wp-config.phpに以下を追加してアクティベートdefine(WP_DEBUG, true);define(SAVEQUERIES, true);define(WP_DEBUG_DISPLAY, false);※一通りチェックが終わったら、ディアクティベートしてインストール前の状態に戻しておきましょう
  16. 16. WordPressの処理を眺めてみると…
  17. 17. いろいろな角度から問題点を探りましょう
  18. 18. DEMO
  19. 19. サイトの高速化に効くアレコレ ©asidemag.com
  20. 20. ボトルネックが見つかったら潰しましょう
  21. 21. プラグインが原因かも?• 便利なプラグインも多用は禁物 気付かないうちに、それがネックになっていることも• Debug Bar とにらめっこして減らせるものは減らす• プラグインじゃなくて、手動でできることもあるし…
  22. 22. 変更のないものはキ ッ ュ ャ シ 対象に• WordPressの高速化といえば「キャッシュ」• キャッシュ対象は、HTMLだけじゃない• 画像やCSS、JSのような変更の少ないものや DBに対するクエリーをキャッシュしてしまう →ファイルタイプ別に有効期限を設定(W3 Total Cacheやサーバサイド) →オブジェクトキャッシュの有効化 (WP File Cacheなど) →DBへのクエリーをキャッシュ (DB Cache Reload Fix)
  23. 23. サーバサイドでファイルに有効期限を設定• Apache の mod_expires モジュールの場合 <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/x-icon "access plus 1 years" ExpiresByType image/vnd.microsoft.icon "access plus 1 years" ExpiresByType image/jpeg "access plus 10 years" ExpiresByType image/png "access plus 10 years" ExpiresByType image/gif "access plus 10 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType application/x-javascript "access plus 1 years" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>
  24. 24. 転送サイズを少なくする工夫を• いまどきスマートフォンなどでのアクセスも多い• 転送サイズそのものを小さくすることを考える →テキストファイルのMinify(Head CleanerやW3 Total Cacheなど) →テキストファイルをGzipで圧縮(W3 Total Cacheやサーバサイドで) →画像から余分なデータをぬいて最適化(WP Smush.it)
  25. 25. サーバサイドでテキストを圧縮するには• Apache の mod_deflate モジュールの場合 <IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary </IfModule> ※Nginxでの設定例は wokamotoさんのスライドに記載されています コンポーネントを圧縮しよう!: http://dogmap.jp/wckobe2011/#slide-125
  26. 26. HTTPリクエストを少しでも減らす• できるだけHTTPリクエストを減らしていく →CSSやJavaScriptの結合(Head Cleaner) →画像のCSSスプライト化• 1サーバにかかる負荷を分散させてみる →JavaScriptをCDN経由で読み込ませる →画像は別サーバ(別ドメイン)にわけてみる
  27. 27. たとえば、jQueryとかCDN経由で• jQueryをGoogleから読み込ませる場合 <?php wp_deregister_script(jquery); wp_enqueue_script( jquery, http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js, array(), 1.7.1); ?> ※jQueryのようにそれなりのサイズがあるファイルは、自サイトから配信するよりCDN経由にした方が速い Google Libraries API: https://developers.google.com/speed/libraries/devguide Microsoft Ajax Content Delivery Network: http://www.asp.net/ajaxlibrary/cdn.ashx cdn js(CloudFlare): http://www.cdnjs.com/
  28. 28. そういえば、html5.jsとかも• html5.js をGoogleから読み込むには <!--[if lt IE 9]> <script type="text/javascript">document.write(unescape(%3Cscript src=" + (https: == document.location.protocol ? https:// : http://) + html5shiv.googlecode.com/svn/trunk/html5.js" %3E%3C/script %3E));</script> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> ※現在、html5.jsはGitHubでメンテナンスされており、最新版はそちらからダウンロードできます aFarkas/html5shiv · GitHub: https://github.com/aFarkas/html5shiv
  29. 29. 外部サイトに起因する問題への対処• Google Analyticsのコードの非同期化• ソーシャルメディア系のボタンの非同期化• JavaScriptのロードや実行を遅らせる• 不要な外部サービスを減らす(DNSの問い合わせを減らす)• DNSのプリフェッチを試してみる
  30. 30. DNSのプリフェッチを埋め込む• link 要素を使って、ドメインを指定 <link rel="dns-prefetch" href="//wcdn.gaspanik.com"> <link rel="dns-prefetch" href="//content.gaspanik.com"> <link rel="dns-prefetch" href="//connect.facebook.net"> <link rel="dns-prefetch" href="//platform.twitter.com"> <link rel="dns-prefetch" href="//static.chartbeat.com"> 頻繁に参照されるような外部ドメインがある場合は指定してみるといいかも ※サーバサイドでの有効化の方法は以下のサイトが詳しいです DNS プリフェッチの制御 - MDN: https://developer.mozilla.org/Ja/Controlling_DNS_prefetching
  31. 31. サーバ側の処理の問題なら• 自由度の高いホスティングへの移行を考える• PHPアクセラレータの導入を考える• Webサーバのチューニング、リプレイス(Apache / Nginx)• MySQLのチューニング(mysqltuner.pl) ※マルチサイトでの高速化、PHPアクセラレータ、MySQLのチューニングは wokamotoさんのスライドが詳しいです WordPress を極力動かさない: http://dogmap.jp/wckobe2011/#slide-39 MySQL サーバのチューニング: http://dogmap.jp/wckobe2011/#slide-113
  32. 32. では、いくつかやってみましょう
  33. 33. DEMO
  34. 34. 最後に。正直な話、ネ ク ッ は画像だったり外部のデータw
  35. 35. まとめ• なにはともあれ、ボトルネックがどこかを探しましょう• WordPressの問題なのか、実装の問題なのかをはっきり• 秒数よりも問題点を発見し、できる対処をしていく• 環境によってできることできないことがあるので、 できることから順番に適用していきましょう
  36. 36. ありがとうございました

×