WordPress「超」スピードアップ術 ～のろまなカメと呼ばれないために～

2017/5/27 に開催されたSaCSS Special Vol.11 の登壇資料です。

Transcript

1. WordPress「超」スピードアップ術 ～のろまなカメと呼ばれないために～ プライム・ストラテジー株式会社 執行役員CTO 大曲 仁
2. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 2 1．自己紹介
3. 大曲 仁 自己紹介 3 t @jim0912 f hitoshi.omagari • WordCamp Yokohama 2010 実行委員長 • WordPress 日本語フォーラム 世話役 • WordCamp スピーカー
4. 大曲 仁 自己紹介 4
5. 主なWordPress開発実績 5 読売新聞様 「yomiDr（ヨミドクター）」 マイナビ 様 「マイナビウーマン」
6. 執筆書籍 6 翔泳社 一歩先にいく WordPressのカスタマイズがわかる本 現場でかならず使われている WordPressデザインのメソッド エムディエヌコーポレーション;
7. WordPressに最適化したサーバ作ってます 7
8. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 8 2．スピードアップの必要性と考え方
10. 1. ユーザー体験の向上 → 回遊率の向上 → 成約率の向上 2. サーバ負荷の軽減 → サーバ構成やスペックの縮小 → コスト削減 3. 微SEO WordPressスピードアップの必要性と考え方 10 いいことずくめ
11. 11 ハードウェア/OS Apache Nginx PHP MySQL WordPress WordPressスピードアップの必要性と考え方
12. スピードアップは掛け算 WordPressをスピードアップさせるためには、様々なレ イヤーに対して、それぞれ適正化を行い、掛け合わせるこ とで、圧倒的なスピードアップが実現できます。 対策を行わない場合 ：1×1×1×1×1=1 20%ずつ高速化した場合 ：0.8×0.8×0.8×0.8×0.8 =0.328 約3倍の高速化 WordPressスピードアップの必要性と考え方 12
13. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 13 3．ハードウェアによるスピードアップ
14. サーバスペックの選択 サーバのCPU周波数が高い方が高速。 単純計算で周波数が2倍になれば、2倍のスピードアップ ただし、CPU周波数の向上は頭打ち。 コア数の増加は、負荷耐性の向上にはつながるが、１アク セスあたりのスピードアップにはならない。 ハードウェアによるスピードアップ 14
15. サーバの記憶媒体 HDDに比してデータの読み出しが圧倒的に速いSSDは ディスクアクセスが発生するデータベース処理のスピード アップに効果的 ハードウェアによるスピードアップ 15
16. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 16 4．PHP実行環境によるスピードアップ
17. PHP実行環境によるスピードアップ PHPを動作させる環境に よって明確な性能差が発生。 PHP 5とPHP 7は約2.5倍 PHP 5とHHVMでは約3倍 HHVMとはFacebookが独自に 開発したPHP互換の実行環境 PHP実行環境によるスピードアップ 17
18. 処理速度 信頼性 将来性 × ◎ × ◦ ◎ ◎ ◎ △ △ PHP実行環境によるスピードアップ PHP実行環境によるスピードアップ 18 HHVMでの動作検証は次バージョンから実施しないと明言
19. 中間コードキャッシュ（OPcache） PHP5.5以上で利用可能 PHPのスクリプトをバイトコード状態でメモリに保持 PHP実行環境によるスピードアップ 0/1 PHPスクリプト バイトコード バイナリ 0/1 PHPスクリプト バイトコード 中間コードキャッシュ なし 中間コードキャッシュ あり バイトコードへの変換を アクセス毎に実施 バイトコードへの変換は 初アクセス時のみ実施 バイナリ
20. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 20 5．データベースによるスピードアップ
21. データベースのスピードアップ手法 WordPressの処理におけるデータベースのスピードアッ プには、 • データベースへのリクエスト数自体を少なくする • リクエストあたりの処理自体を短縮させる の両面を考える必要がある。 データベースへのリクエスト数の削減は、WordPressの 実装で対処する。 データベースによるスピードアップ 21
22. リクエストあたりの処理時間短縮化 MySQLの2つの設定により、データベースへのリクエスト あたりの処理時間短縮が可能 • innodb_buffer_pool_size • query_cache_size データベースによるスピードアップ 22
23. リクエストあたりの処理時間短縮化 innodb_buffer_pool_size メモリ上にデータベースのデータをキャッシュする上限サ イズ。メモリ上にデータをキャッシュすることで、データ ベースへの取り合わせをスピードアップ データベースのスピードアップ 23 HDD上のデータを メモリにキャッシュ メモリ上のデータに リクエストし高速に処理
24. リクエストあたりの処理時間短縮化 query_cache_size メモリ上にデータベースへの問い合わせ結果をキャッシュ する上限サイズ。 データベースのスピードアップ 24 メモリ上に問い合わせ結果の キャッシュがあれば再利用
25. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 25 6．WordPressの実装によるスピードアップ
26. 翻訳ファイル読み込み WordPressの基本言語は英語。日本語用の対訳ファイル を読み込み変換することで日本語での表示にしている。 「001 Prime Strategy Translate Accelerator」プラグイ ンでは、この対訳ファイルの読み込み結果をキャッシュし 、再利用することで、翻訳ファイルの読み込みにかかる時 間を30ms程度短縮することが可能。 WordPressの実装によるスピードアップ 26
27. オブジェクトキャッシュ データベースからの取得結果などをメモリ上に保持し再利 用する機能。データベースへのリクエスト数削減につなが る。 通常は、アクセス単位でキャッシュは削除。プラグインに より、memcachedやAPCuなど用いて、リクエストを超 えてキャッシュを持続させることも可能。 WordPressの実装によるスピードアップ 27
28. WP_Queryのお作法 • fieldsパラメータ 投稿のIDのみ取得したい場合に指定。余分なデータ転 送が発生しないようになる • no_found_rowsパラメータ ページングの必要ないサブクエリーなどで指定 データベースの処理時間を短縮できる • posts_per_pageパラメータ 過度な負荷をかけないよう-1の指定は行わないように WordPressの実装によるスピードアップ 28
29. 某出版社の雑誌メディアサイトでの残念事例 必要なのは、スライダー用に用いる複数の投稿タイプから の最新5記事のID なぜか、posts_per_page => -1 で全記事読み込み、ソ ートした上で、post IDのみ利用 結果、3000以上の記事データを読み込み、メモリの異常 消費とデータ転送遅延が発生 WordPressの実装によるスピードアップ 29
30. リビジョン数の制限 リビジョン機能自体は、フェイルセーフのために有用。 ただし、多すぎるリビジョンは、データの肥大化につなが りデータベースの性能劣化を招くこととなるため、投稿ご との最大リビジョン数を制限しておく。 例） Revision Control WordPressの実装によるスピードアップ 30
31. カスタムフィールドの用法 カスタムフィールドのデータを保存するデータベースには 、データの検索、ソートに適したインデックスがないため 、データ量の増加に伴い急激に性能劣化を伴う。 データを検索する必要があるならば、タクソノミーで代替 できるか検討すべき。 「Search Everything」プラグインの利用は、パフォーマ ンス重視のサイトでは回避すべき。 WordPressの実装によるスピードアップ 31
32. Transients APIの利用 Transients APIは、データ、もしくはHTMLのコードなど 、コードの実行による結果をデータベースに保存し一定時 間再利用する機能。再利用することで、本来のコード実行 時間を短縮可能。 適用例） • Web APIの取得結果 • 複雑で重い処理のPHP実行結果 WordPressの実装によるスピードアップ 32
33. Transients APIの利用 保存時 取得時 WordPressの実装によるスピードアップ <?php $ranking_data = get_transient( 'ranking' ); ?> Transientの取得結果が入る Transientがない、もしくは 期限切れの場合はfalse Transientの名前 保存時と同一にする <?php set_transient( 'ranking', $ranking_data, 3600 ); ?> Transientの名前を指定。 他のTransient名前と重複し ないように注意 Transientに保存するデータ 有効期限（秒数）
34. Transients APIの利用 保存時 WordPressの実装によるスピードアップ <?php wpp_get_mostpopular(); ?> <?php if ( false !== ( $ranking_data = get_transient( 'ranking' ) ) ) { ob_start(); wpp_get_mostpopular(); $ranking_data = ob_get_clean(); set_transient( 'ranking', $ranking_data, 3600 ); } echo $ranking_data; ?>
35. Transients APIの利用 1. Transientを取得、有効なTransientの有無を判定 2. 出力バッファリングの開始 3. Transient対象コードの実行 4. 出力バッファリングを終了しデータを取得 5. Transientへのデータ保存 6. 表示の出力 WordPressの実装によるスピードアップ
36. 某ファッションメディアサイトでの残念事例 複数のブログサイトデータを表示するためにRSSを取得し てサイドバーに表示。 表示毎に数回のネットワークリクエストが発生し、処理に 1秒以上かかっていた。 WordPressの実装によるスピードアップ 36
37. 某アニメ系メディアでの残念事例 管理画面でWordPress、テーマ、プラグインの更新表示 を停止 ただし、管理画面の表示ごとに、更新チェック（ wordpress.orgへのリクエスト）が発生し、管理画面が重 くなってしまっていた。 WordPressの実装によるスピードアップ 37
38. ページキャッシュ 表示するHTMLコードをファイルなどに保存しておき、一 定時間再利用する機能。 数十ms程度までスピードアップが可能。 プラグイン例） • WP Super Cache • W3 Total Cache WordPressの実装によるスピードアップ 38
39. 某恋愛系メディアでのお話 Twitter, Facebookシェア数取得のために、毎回リクエス トが発生 対策として、独自のキャッシュ機能を実装していたが、実 装方法にまずい点があり、データベースの肥大化と肥大化 したデータ読み込みに伴う帯域圧迫が発生していた。 WordPressの実装によるスピードアップ 39
40. P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n 40 7．ボトルネックの見つけ方
41. 処理時間の表示 ボトルネックの見つけ方 41 <?php echo __LINE__ . ' | '; timer_stop( 1 ); echo "¥n"; ?> コードを書き込んだファイルの行番号 コードを書き込んだ時点での WordPressの処理時間（秒） 改行コードの出力
42. ボトルネック処理の切り分け テンプレートの最初に記述し、 テンプレートでの問題か、 それ以前の処理かの切り分け ボトルネックの見つけ方 42
43. ボトルネック処理の切り分け テンプレートの区間ごとに記述。 区間ごとの処理時間を把握し、 ボトルネックが存在する区間を 把握。 例） ・get_header(); 前後 ・get_sidebar(); 前後 ・get_footer(); 後 ボトルネックの見つけ方 43
44. ボトルネック処理の切り分け 区間内でさらに、記述箇所を 増やして、ボトルネックと なっている処理を特定する。 ボトルネックの見つけ方 44
45. 45 ご清聴ありがとうございました。