ハイパフォーマンスWordPress...HTMLページのロード時間をFirebugのネットタブで確認する...

ハイパフォーマンスWordPress

スライドURL http://goo.gl/rRwrvj

プライム・ストラテジー株式会社

代表取締役中村けん牛

http://goo.gl/rRwrvj

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 F u l l y M a n a g e d S e r v i c e D i v i s i o n

１．今日お話しすること

2

「WordPressとサーバをチューニングして

どこまで高速化できるのか？」

をテーマに高速化の技術と考え方をお話しします。

3

「まずは証拠」

をお見せします。

4

お手数ですが、

「KUSANAGI WordPress」と検索して

http://kusanagi.tokyo/

にアクセスしてみていただけますか？

5

http://kusanagi.tokyo/


7

２．自己紹介

中村けん牛自己紹介

8

WordPressのフルマネージドサービスを

提供するプライム･ストラテジー株式会社

の代表をしています。

おもに東京とジャカルタで働いています。

t @kengyu_n f Kengyu.Nakamura

月間１億PV超のメディアサイトなどの構築、サーバ運用

9

テレビ朝日様番組ブログポータル

マイナビ様「マイナビウーマン」

Adobe Systems 様事例サイト

超高速WordPress仮想マシン「KUSANAGI」の開発

10

・WordPress 実行時間3 ミリ秒

台

・1000 リクエスト／秒

をページキャッシュ非使用で実

現する仮想マシン

（4vCPU、最大性能時）

WordPressプラグインの開発

11

・Prime Timeline

＝＞ランタイムプロファイラ

・001 Prime Strategy Translate

Accelerator

＝＞翻訳アクセラレータ

WordPress関連書籍の執筆など

12

（出版社：SBクリエイティブ株式会社他）

『WordPressの教科書』シリーズ

（出版社：株式会社オライリー・ジャパン）

『詳解 WordPress』

『WordPressによるWebアプリケーション開発』


13

３．WordPressの高速化

なぜWordPressの高速化が必要とされるのか？

14

１．WordPressはPHP+MySQLの動的なシステム

＝＞

静的なHTMLページに比べて動作速度の点で不利


15

２．CPUの開発ロードマップは動作クロック（周波数）よ

りもコア数重視の流れ

＝＞

ハードの進化による処理速度向上を期待しづらい


16

３．このような背景の中でオウンドメディアやサービス

サイトでは

（１）PV獲得の機会を失わないという観点

（２）ユーザーエクスペリエンス向上の観点

（３）検索エンジン最適化の観点

（４）Webサイトの信頼性、安定性の観点

WordPressの高速化とは？

17

１．サーバサイドでの高速化＜＝本日のテーマ

（サーバ、WordPress）

２．フロントエンドの高速化

（HTML、CSS、JavaScript）

サーバサイドの高速化とは？

18

HTMLページのロード時間を短くして

サーバサイドの高速化とは？

19

HTMLページのロード時間を短くして

１秒あたりのリクエスト数を増やすこと

WordPressの高速化

20

HTMLページのロード時間を短くする＝①＋②＋③を短縮する

ブラウザサーバ（WordPress）

①HTTPリクエスト送信

②実行

③HTTPレスポンス受信


21

HTMLページのロード時間をFirebugのネットタブで確認する

ページのロード時間


22

1秒あたりのアクセス数を増やすとは？

ココ


23

ページのロード時間と１秒あたりのリクエスト数の関係

クイズ１（注：通信時間など無視しておおざっぱに考えます）

1vCPU（1コア）でページのロード時間が500ms

だった場合、

１秒あたりのリクエスト数はいくつになりますか？


24


クイズ２（注：通信時間など無視しておおざっぱに考えます）

1vCPU（1コア）でページのロード時間を100msにチューニ

ングできた場合、



25


クイズ３（注：通信時間など無視しておおざっぱに考えます）

1vCPU（1コア）でページのロード時間が100msの場合、

2vCPU（2コア）にスケールアップすると



26


クイズ４（注：通信時間など無視しておおざっぱに考えます）

2vCPU（2コア）でページのロード時間が100msの場合、

4vCPU（4コア）にスケールアップするとページのロード時

間はいくつになりますか？


27

HTMLページのロード時間を分解すると

ブラウザサーバ（WordPress）

①リクエスト送信

ブラウザ

②実行

③レスポンス受信

通信時間

通信時間

PHPの実行

MySQLの実行

翻訳処理


28

4．ページキャッシュを使わずに

WordPressを高速化する


29

あるサーバを利用してデフォルトの状態だと

WordPress

１．ロード時間 246ms

２．リクエスト数 4.9リクエスト/秒


30

ページキャッシュを使わないでどこまでいけるか

WordPress

APC（PHPアクセラレータ）導入で約1.85倍

246ms→133ms


31

PHP実行の仕組み

PHPのソースコード


32

PHP実行の仕組み

中間コード

←これをZend Engine

（VM）が実行


33


WordPress


246ms→133ms

けっこう簡単に導入できます。

たとえば、Centos 6の場合、最短rootで次のコマンドを打つだけ

yum install -y php-pecl-apc;

service httpd restart;


34


WordPress


246ms→133ms

PHP5.4まではAPC

APC=PHPアクレラレータ+

ユーザーキャッシュ

PHP5.5からはOPcache（+20%）ユーザーキャッシュはAPCu拡張

PHP5.3、5.4はOPcacheとAPCuをPHP拡張として利用可能


35


WordPress

MySQLのクエリキャッシュ導入で約1.15倍

133ms→115ms


246ms→133ms


36


WordPress


133ms→115ms


246ms→133ms

簡単に導入できます。

たとえば、my.cnfのmysqldセクションに次の１行を追加してMySQLサーバを

restartすればOK

query_cache_size = 64M


37


WordPress


133ms→115ms

翻訳キャッシュ（001 Prime

Strategy Translate Accelarator）導入で約1.6倍115ms→72ms


246ms→133ms


38


WordPress


133ms→115ms




246ms→133ms

WordPressのプラグインなので簡単に導入できます。


39


WordPress


133ms→115ms




246ms→133ms

Apache（mod_php）からNginx+HHVM構成に変更で

約2.2倍72ms→33ms


40

HHVM実行の仕組み

PHPのソースコード


41


中間コード

←これをHHVMが実行


42


何度も利用される部分をJITでコンパイルしてネイティブコー

ドへ

ネイティブコードをCPUが実行


43


WordPress


133ms→115ms




246ms→133ms

Apache（mod_php）からNginx+HHVM構成に変更で

約2.2倍72ms→33ms

ページ圧縮（gzip）導入で約1.1倍

33ms→30ms


44






ロード時間約8倍リクエスト数約11.6倍に向上


45




このサーバのCPUの周波数とコア数を変更すると

どのような影響があるのか？


46

5．（おまけ）ページキャッシュとトランジェント

ページキャッシュを導入する（ WP SiteManager、WP Super Cache、Nginx、Varnishなど）

47

ページキャッシュを導入する

48

WP SiteManagerの場合


２．リクエスト数 260リクエスト/秒



ロード時間約16.4倍リクエスト数約53.1倍に向上

トランジェントを導入する

49

トランジェントとは？

WordPerss内部の値を一

時的にDB（wp_optionsテ

ーブル）に保存して、異な

るプロセスで再利用する

ためのWordPressの機能

＝＞

部分キャッシュとして利用

可能

トランジェントを導入する

50

トランジェントの具体例（footer.php）<?php

if ( ! $footer_cache = get_transient(

'footer_cache' ) ) {

ob_start();

?>

<footer id="colophon" class="site-footer"

role="contentinfo">

<?php get_sidebar( 'footer' ); ?>

<div class="site-info">

<?php do_action(

'twentyfourteen_credits' ); ?>

<a href="<?php echo esc_url( __(

'http://wordpress.org/', 'twentyfourteen' ) );

?>"><?php printf( __( 'Proudly powered by

%s', 'twentyfourteen' ), 'WordPress' ); ?></a>

</div>

</footer>

<?php

$footer_cache = ob_get_clean();

set_transient( 'footer_cache',

$footer_cache, 60 * 5 );

}

echo $footer_cache;

?>

ということで

51

ぜひ実践して

快適なWordPressライフをお過ごしください！

52

53

ご清聴ありがとうございました。

ハイパフォーマンスWordPress...HTMLページのロード時間をFirebugのネットタブで確認する...

Documents

Transcript of ハイパフォーマンスWordPress...HTMLページのロード時間をFirebugのネットタブで確認する...