Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPress「超」スピードアップ術 ~のろまなカメと呼ばれないために~
Search
Hitoshi Omagari
May 27, 2017
Technology
1
310
WordPress「超」スピードアップ術 ~のろまなカメと呼ばれないために~
2017/5/27 に開催されたSaCSS Special Vol.11 の登壇資料です。
Hitoshi Omagari
May 27, 2017
Tweet
Share
More Decks by Hitoshi Omagari
See All by Hitoshi Omagari
君はパーマリンク沼を知っているか?
jim912
0
9.6k
Rewrite Endpoint活用のススメ - WordPressで作る食べ○グ系サイト-
jim912
1
530
夜のハンズオン資料
jim912
3
250
Other Decks in Technology
See All in Technology
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
260
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
2
460
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
250
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
200
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
480
Understanding and Optimising INP
akshayysharma
0
150
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
2
460
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
13k
ORM と向き合う
hoto17296
7
5.9k
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
550
Renovate ではじめる運用レスなライブラリ更新 / 令和最新版 他人に自慢したいヤバいCI/CD LT会 @ yabaibuki.dev #2
ponkio_o
PRO
1
130
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
Web Components: a chance to create the future
zenorocha
310
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
403
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
KATA
mclloyd
27
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
94
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Transcript
WordPress「超」スピードアップ術 ~のろまなカメと呼ばれないために~ プライム・ストラテジー株式会社 執行役員CTO 大曲 仁
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 t @jim0912 f hitoshi.omagari • WordCamp
Yokohama 2010 実行委員長 • WordPress 日本語フォーラム 世話役 • WordCamp スピーカー
大曲 仁 自己紹介 4
主なWordPress開発実績 5 読売新聞様 「yomiDr(ヨミドクター)」 マイナビ 様 「マイナビウーマン」
執筆書籍 6 翔泳社 一歩先にいく WordPressのカスタマイズがわかる本 現場でかならず使われている WordPressデザインのメソッド エムディエヌコーポレーション;
WordPressに最適化したサーバ作ってます 7
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.スピードアップの必要性と考え方
9
1. ユーザー体験の向上 → 回遊率の向上 → 成約率の向上 2. サーバ負荷の軽減 → サーバ構成やスペックの縮小
→ コスト削減 3. 微SEO WordPressスピードアップの必要性と考え方 10 いいことずくめ
11 ハードウェア/OS Apache Nginx PHP MySQL WordPress WordPressスピードアップの必要性と考え方
スピードアップは掛け算 WordPressをスピードアップさせるためには、様々なレ イヤーに対して、それぞれ適正化を行い、掛け合わせるこ とで、圧倒的なスピードアップが実現できます。 対策を行わない場合 :1×1×1×1×1=1 20%ずつ高速化した場合 :0.8×0.8×0.8×0.8×0.8 =0.328 約3倍の高速化
WordPressスピードアップの必要性と考え方 12
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.ハードウェアによるスピードアップ
サーバスペックの選択 サーバのCPU周波数が高い方が高速。 単純計算で周波数が2倍になれば、2倍のスピードアップ ただし、CPU周波数の向上は頭打ち。 コア数の増加は、負荷耐性の向上にはつながるが、1アク セスあたりのスピードアップにはならない。 ハードウェアによるスピードアップ 14
サーバの記憶媒体 HDDに比してデータの読み出しが圧倒的に速いSSDは ディスクアクセスが発生するデータベース処理のスピード アップに効果的 ハードウェアによるスピードアップ 15
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実行環境によるスピードアップ
PHP実行環境によるスピードアップ PHPを動作させる環境に よって明確な性能差が発生。 PHP 5とPHP 7は約2.5倍 PHP 5とHHVMでは約3倍 HHVMとはFacebookが独自に 開発したPHP互換の実行環境
PHP実行環境によるスピードアップ 17
処理速度 信頼性 将来性 × ◎ × ◦ ◎ ◎ ◎
△ △ PHP実行環境によるスピードアップ PHP実行環境によるスピードアップ 18 HHVMでの動作検証は次バージョンから実施しないと明言
中間コードキャッシュ(OPcache) PHP5.5以上で利用可能 PHPのスクリプトをバイトコード状態でメモリに保持 PHP実行環境によるスピードアップ 0/1 PHPスクリプト バイトコード バイナリ 0/1 PHPスクリプト
バイトコード 中間コードキャッシュ なし 中間コードキャッシュ あり バイトコードへの変換を アクセス毎に実施 バイトコードへの変換は 初アクセス時のみ実施 バイナリ
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.データベースによるスピードアップ
データベースのスピードアップ手法 WordPressの処理におけるデータベースのスピードアッ プには、 • データベースへのリクエスト数自体を少なくする • リクエストあたりの処理自体を短縮させる の両面を考える必要がある。 データベースへのリクエスト数の削減は、WordPressの 実装で対処する。
データベースによるスピードアップ 21
リクエストあたりの処理時間短縮化 MySQLの2つの設定により、データベースへのリクエスト あたりの処理時間短縮が可能 • innodb_buffer_pool_size • query_cache_size データベースによるスピードアップ 22
リクエストあたりの処理時間短縮化 innodb_buffer_pool_size メモリ上にデータベースのデータをキャッシュする上限サ イズ。メモリ上にデータをキャッシュすることで、データ ベースへの取り合わせをスピードアップ データベースのスピードアップ 23 HDD上のデータを メモリにキャッシュ メモリ上のデータに
リクエストし高速に処理
リクエストあたりの処理時間短縮化 query_cache_size メモリ上にデータベースへの問い合わせ結果をキャッシュ する上限サイズ。 データベースのスピードアップ 24 メモリ上に問い合わせ結果の キャッシュがあれば再利用
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の実装によるスピードアップ
翻訳ファイル読み込み WordPressの基本言語は英語。日本語用の対訳ファイル を読み込み変換することで日本語での表示にしている。 「001 Prime Strategy Translate Accelerator」プラグイ ンでは、この対訳ファイルの読み込み結果をキャッシュし 、再利用することで、翻訳ファイルの読み込みにかかる時
間を30ms程度短縮することが可能。 WordPressの実装によるスピードアップ 26
オブジェクトキャッシュ データベースからの取得結果などをメモリ上に保持し再利 用する機能。データベースへのリクエスト数削減につなが る。 通常は、アクセス単位でキャッシュは削除。プラグインに より、memcachedやAPCuなど用いて、リクエストを超 えてキャッシュを持続させることも可能。 WordPressの実装によるスピードアップ 27
WP_Queryのお作法 • fieldsパラメータ 投稿のIDのみ取得したい場合に指定。余分なデータ転 送が発生しないようになる • no_found_rowsパラメータ ページングの必要ないサブクエリーなどで指定 データベースの処理時間を短縮できる •
posts_per_pageパラメータ 過度な負荷をかけないよう-1の指定は行わないように WordPressの実装によるスピードアップ 28
某出版社の雑誌メディアサイトでの残念事例 必要なのは、スライダー用に用いる複数の投稿タイプから の最新5記事のID なぜか、posts_per_page => -1 で全記事読み込み、ソ ートした上で、post IDのみ利用 結果、3000以上の記事データを読み込み、メモリの異常
消費とデータ転送遅延が発生 WordPressの実装によるスピードアップ 29
リビジョン数の制限 リビジョン機能自体は、フェイルセーフのために有用。 ただし、多すぎるリビジョンは、データの肥大化につなが りデータベースの性能劣化を招くこととなるため、投稿ご との最大リビジョン数を制限しておく。 例) Revision Control WordPressの実装によるスピードアップ 30
カスタムフィールドの用法 カスタムフィールドのデータを保存するデータベースには 、データの検索、ソートに適したインデックスがないため 、データ量の増加に伴い急激に性能劣化を伴う。 データを検索する必要があるならば、タクソノミーで代替 できるか検討すべき。 「Search Everything」プラグインの利用は、パフォーマ ンス重視のサイトでは回避すべき。 WordPressの実装によるスピードアップ
31
Transients APIの利用 Transients APIは、データ、もしくはHTMLのコードなど 、コードの実行による結果をデータベースに保存し一定時 間再利用する機能。再利用することで、本来のコード実行 時間を短縮可能。 適用例) • Web
APIの取得結果 • 複雑で重い処理のPHP実行結果 WordPressの実装によるスピードアップ 32
Transients APIの利用 保存時 取得時 WordPressの実装によるスピードアップ <?php $ranking_data = get_transient( 'ranking'
); ?> Transientの取得結果が入る Transientがない、もしくは 期限切れの場合はfalse Transientの名前 保存時と同一にする <?php set_transient( 'ranking', $ranking_data, 3600 ); ?> Transientの名前を指定。 他のTransient名前と重複し ないように注意 Transientに保存するデータ 有効期限(秒数)
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; ?>
Transients APIの利用 1. Transientを取得、有効なTransientの有無を判定 2. 出力バッファリングの開始 3. Transient対象コードの実行 4. 出力バッファリングを終了しデータを取得
5. Transientへのデータ保存 6. 表示の出力 WordPressの実装によるスピードアップ
某ファッションメディアサイトでの残念事例 複数のブログサイトデータを表示するためにRSSを取得し てサイドバーに表示。 表示毎に数回のネットワークリクエストが発生し、処理に 1秒以上かかっていた。 WordPressの実装によるスピードアップ 36
某アニメ系メディアでの残念事例 管理画面でWordPress、テーマ、プラグインの更新表示 を停止 ただし、管理画面の表示ごとに、更新チェック( wordpress.orgへのリクエスト)が発生し、管理画面が重 くなってしまっていた。 WordPressの実装によるスピードアップ 37
ページキャッシュ 表示するHTMLコードをファイルなどに保存しておき、一 定時間再利用する機能。 数十ms程度までスピードアップが可能。 プラグイン例) • WP Super Cache •
W3 Total Cache WordPressの実装によるスピードアップ 38
某恋愛系メディアでのお話 Twitter, Facebookシェア数取得のために、毎回リクエス トが発生 対策として、独自のキャッシュ機能を実装していたが、実 装方法にまずい点があり、データベースの肥大化と肥大化 したデータ読み込みに伴う帯域圧迫が発生していた。 WordPressの実装によるスピードアップ 39
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 <?php echo __LINE__ . ' | ';
timer_stop( 1 ); echo "¥n"; ?> コードを書き込んだファイルの行番号 コードを書き込んだ時点での WordPressの処理時間(秒) 改行コードの出力
ボトルネック処理の切り分け テンプレートの最初に記述し、 テンプレートでの問題か、 それ以前の処理かの切り分け ボトルネックの見つけ方 42
ボトルネック処理の切り分け テンプレートの区間ごとに記述。 区間ごとの処理時間を把握し、 ボトルネックが存在する区間を 把握。 例) ・get_header(); 前後 ・get_sidebar(); 前後
・get_footer(); 後 ボトルネックの見つけ方 43
ボトルネック処理の切り分け 区間内でさらに、記述箇所を 増やして、ボトルネックと なっている処理を特定する。 ボトルネックの見つけ方 44
45 ご清聴ありがとうございました。