2018年3月13日火曜日

【備忘録】nginx 1.13.9 で実装された http2_push_preload を WordPress で使ってみよう！

WP-CLI チームメンバーとして有名な宮内氏が作成した

についての情報をキャッチしたので、実際に試してみました。
ちょっと戸惑った点もあったので、本ブログにて備忘録として残しておきます。

準備


  • nginx 1.13.9（CHANGE LOG）
  • PHP 7 以降
  • WordPress 4.9 以降
  • https://◯◯ なサイト
です。準備については割愛します。
また、macOS のターミナルからチェックする方法として、Homebrew をインストールしているなら
  • brew install nghttp2 
として nghttp コマンドをインストールしておくと便利です。

Server PUSH の概要


情報は古いですが、
にわかりやすく解説されているかなぁと思います。
また、
も分かりやすいかも。ようするに、リクエストされたファイル内で別ファイルを読み込んでいると、１ファイルずつやりとりせずに、一括でやってしまえという考え方。

HTTP2_PUSH で動作確認


まずは 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 の場合もあるので、サイトまるごとでなくてもいけるとは思います。

いずれも Chrome の Developer Toolsを開いて、Networkにて確認しています。
その際、キャッシュを無効にするために「Disable cache」にチェックをいれています。


設定前
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 を見てみると
  1. wp_enqueue_style と wp_enqueue_script で読み込まれた CSS と JavaScript を読み取って Link ヘッダーを出す
  2. フィルタフック「http2_server_preload_items」で指定したファイル
    ※ https://github.com/tarosky/http2-server-push-preload の Customizing 参照
を読み取って LINK ヘッダーを吐き出すようです。
なので、テーマによって style.css に @import とかで CSSを読み込ませていると、「１」には引っかからないので、「２」で個別指定する必要があります。

HTTP/2 Server Push プラグインのインストール


  1. https://github.com/tarosky/http2-server-push-preload/releases より  http2-server-push-preload.zip をダウンロードする
  2. 展開したフォルダを、WordPress のプラグインフォルダへ入れる
  3. 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

なんかで、ソースをダウンロードしてインストールして 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）。
すると、下図のように CSSやJavaScript ファイルの Intiator が「Push」となっていたらOK。


そして、http2-server-push-preload プラグインを無効にすると下図のように、Push ではないことが確認できるはずです。


ただし、テーマによって style.css に直書きとか、@import を使ってCSSを読み込んでいると、このプラグインの対象外になります。その場合には、管理画面で試してみて下さい。大抵のプラグインは、CSSやJavaScriptを読み込む時に、正しい手順をしていると思うので、うまくいくはずです。まぁ最悪サイトそのものには適用できなくても、管理画面は適用できて速くなる！ってことはあるかもしれませんね。

2018年3月13日 @kimipooh

投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)