- HTTP/2 Server Push plugin for WordPress (miya.io）
ちょっと戸惑った点もあったので、本ブログにて備忘録として残しておきます。
準備
- nginx 1.13.9（CHANGE LOG）
- PHP 7 以降
- WordPress 4.9 以降
- https://◯◯ なサイト
また、macOS のターミナルからチェックする方法として、Homebrew をインストールしているなら
- brew install nghttp2
として nghttp コマンドをインストールしておくと便利です。
Server PUSH の概要
情報は古いですが、
- 初めてのHTTP/2サーバプッシュ（Gree Engineers' Blog)
にわかりやすく解説されているかなぁと思います。
また、
また、
も分かりやすいかも。ようするに、リクエストされたファイル内で別ファイルを読み込んでいると、１ファイルずつやりとりせずに、一括でやってしまえという考え方。
HTTP2_PUSH で動作確認
まずは WordPress 内の１ファイルを対応してみましょう。
別に WordPress 内である必要はありません。
別に WordPress 内である必要はありません。
server{
listen 443 ssl http2;
...
location / {
...
...
...
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
http2_push_preload on;
http2_push /wp-content/themes/△△/top_bg.jpg;
...
...
}
}
nginx の server 直下か、location 内に、ファイルごとに http2_push で指定します。
※ この技術は https かつ HTTP/2.0 を有効にしたサイトじゃないとダメです。
※ WordPress だと管理画面だけ https の場合もあるので、サイトまるごとでなくてもいけるとは思います。
※ WordPress だと管理画面だけ https の場合もあるので、サイトまるごとでなくてもいけるとは思います。
いずれも Chrome の Developer Toolsを開いて、Networkにて確認しています。
その際、キャッシュを無効にするために「Disable cache」にチェックをいれています。
設定前
Intiator = (index)
Intiator = (index)
設定後
Intiator = Push / (index)
もし nghttp をインストールしてしているなら
nghttp -nv https://◯◯/ | grep PUSH_PROMISE
のように、サイトトップで読み込まれる https://◯◯/wp-content/themes/△△/top_bg.jpg について、Server Push に対応している表示がされます。
なおディスクキャッシュが優先されるようで、キャッシュされていたら Push は出てきませんね。
ということで、１ファイルごとの設定は使えたので Server Push は使えてるということになります。あとは、 http2_push_preload のほうを利用できるように WordPress に組み込みます。http2_push_preload のほうは、適切な Link ヘッダーを出せばいいので、それをやってくれるプラグイン「HTTP/2 Server Push」（宮内氏作成）をインストールします。
HTTP/2 Server Push プラグインの概要
このプラグインは、ソースの lib/function.php を見てみると
- wp_enqueue_style と wp_enqueue_script で読み込まれた CSS と JavaScript を読み取って Link ヘッダーを出す
- フィルタフック「http2_server_preload_items」で指定したファイル
※ https://github.com/tarosky/http2-server-push-preload の Customizing 参照
を読み取って LINK ヘッダーを吐き出すようです。
なので、テーマによって style.css に @import とかで CSSを読み込ませていると、「１」には引っかからないので、「２」で個別指定する必要があります。
なので、テーマによって style.css に @import とかで CSSを読み込ませていると、「１」には引っかからないので、「２」で個別指定する必要があります。
HTTP/2 Server Push プラグインのインストール
- https://github.com/tarosky/http2-server-push-preload/releases より http2-server-push-preload.zip をダウンロードする
- 展開したフォルダを、WordPress のプラグインフォルダへ入れる
- WordPress 管理画面より、「Http2 Server Push」 プラグインを「有効化」する
とまぁこれが一般的かと思いますが、composer と WP-CLI が導入されているサーバーだと（※注意：下記の方法だと、 nightly バージョンになりました。管理画面のプラグインやテーマの更新から安定版への更新 0.5.0 が出来ました）
cd WordPressのインストールフォルダ
cd wp-content/plugins
git clone https://github.com/tarosky/http2-server-push-preload
cd http2-server-push-preload
composer install
cd ../../../
wp plugin activate http2-server-push-preload
cd wp-content/plugins
git clone https://github.com/tarosky/http2-server-push-preload
cd http2-server-push-preload
composer install
cd ../../../
wp plugin activate http2-server-push-preload
なんかで、ソースをダウンロードしてインストールして WP-CLI でプラグインを有効化するまでをコマンドラインで出来ます。
動作確認
※ここでは、macOS 10.13.3 にいれた valet 環境を使って WordPress をインストールし、試しています（ https://demo.test ）。
brew upgrade nginx
sudo brew services restart nginx
として、nginx 1.13.9 をインストールして nginx を再起動しておいてください。
そして、 $HOME/.valet/Nginx/demo.test の server セクションに
のように、
のように、
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
http2_push_preload on;
を追加しておきます。
そして
sudo brew services restart nginx
をして nginx を再起動しておきます。
※ valet については【備忘録】 wp valet new コマンドで Error establishing a database connection が出る あたりを参考にしてみてください。
Chromeで サイトにアクセスして、Developer Tools を開きます。
Network タグで「Disable cache」にチェックをいれて、サイトを読み込み直します（Command+r）。
Network タグで「Disable cache」にチェックをいれて、サイトを読み込み直します（Command+r）。
すると、下図のように CSSやJavaScript ファイルの Intiator が「Push」となっていたらOK。
そして、http2-server-push-preload プラグインを無効にすると下図のように、Push ではないことが確認できるはずです。
ただし、テーマによって style.css に直書きとか、@import を使ってCSSを読み込んでいると、このプラグインの対象外になります。その場合には、管理画面で試してみて下さい。大抵のプラグインは、CSSやJavaScriptを読み込む時に、正しい手順をしていると思うので、うまくいくはずです。まぁ最悪サイトそのものには適用できなくても、管理画面は適用できて速くなる！ってことはあるかもしれませんね。
関連情報
- HTTP/2 Server Push plugin for WordPress (miya.io）
- Introducing HTTP/2 Server Push with NGINX 1.13.9（NGINX）
- [WordPress][Nginx] Nginx 1.13.9 に実装された http2_push_preload を使って HTTP/2 push してみる（Qiita）
- How do I enable HTTP/2 Server Push in WordPress（Cloudflare Support）
- 初めてのHTTP/2サーバプッシュ（Gree Engineers' Blog)
- ServerPush 完成かな？（ネットワークエンジニアの居酒屋）
2018年3月13日 @kimipooh
