AMIMOTO AMIで運用しているWordPressサイトでHTTP2 Server Pushを実装する

PRPLパターンについて調べていて気になったので早速試してみました。 HTTP2 Server Pushを使うとなにがいいの？ PRPLパターンについてのGoogleのドキュメントをみると、以下のように紹介されています。 […]

PRPLパターンについて調べていて気になったので早速試してみました。

HTTP2 Server Pushを使うとなにがいいの？

PRPLパターンについてのGoogleのドキュメントをみると、以下のように紹介されています。

HTTP/1:
・ブラウザが HTML ファイルを要求します。
・サーバーが HTML ファイルを返し、ブラウザは解析を開始します。
・ブラウザが <link rel="stylesheet"> タグを見つけて、スタイルシートの新しいリクエストを開始します。
・ブラウザがスタイルシートを受信します。

HTTP/2 プッシュ:
・ブラウザが HTML ファイルを要求します。
・サーバーが HTML ファイルを返し、同時にスタイルシートをプッシュします。
・ブラウザが HTML の解析を開始します。
・ブラウザが <link rel="stylesheet"> タグを見つけるまでに、スタイルシートはすでにキャッシュに読み込まれています。

https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja

いままではlinkタグやscriptタグを定義している場所が読まれるまで外部ファイルのロードができなかったけれども、サーバー側からファイルをプッシュしてくることで読み込み時間を効率化できるよ。というところでしょうか。

Nginx側の対応

まずはNginxをHTTP2 Server Pushに対応しているバージョンにアップデートする必要があります。AMIMOTOではプロビジョンスクリプトを走らせるだけで対応できます。

$ sudo /opt/local/provision
$ nginx -v
nginx version: nginx/1.13.9

その後/etc/nginx/conf.d/ディレクトリへ移動して、YOURDOMAIN.COM.confファイルを開いて以下の１行を追記します。

server {
  <略>
    http2_push_preload on;
  <略>
}

最後にsudo service nginx restartでNginxを再起動しましょう。

WordPress側の対応

WordPress側でServer Pushしたいファイルをレスポンスヘッダーに含める必要があります。NginxやApacheで設定する方法もありますが、それだとテーマの変更やプラグインの追加・削除時などに手動で更新しないといけないのでかなりめんどくさいです。

ここについてはテーマで読み込んでいるファイルをみて、Linkヘッダーに出力するというやり方で実現可能です。プラグインも何種類かありましたので、開発環境などで試してみると良いかなと思います。

方法１：[WordPress][Nginx] Nginx 1.13.9 に実装された http2pushpreload を使って HTTP/2 push してみるにあるサンプルコードをプラグインとして保存する
方法２：HTTP/2 Server Push for WordPressプラグインをGitHubからDLして利用する
方法３：HTTP/2 Server Pushプラグインを利用する

3つ目のプラグインは最近メンテナンスがされていない（する必要がないだけかもですが）様子なのがちょっと気がかりかもです。宮内さんの作られている方法２のプラグインがテストやCIなどもかなりしっかり実装されていますので、個人的にはおすすめです。

動作確認

Chromeなどのdeveloper toolsでNetworkをみるとInitiatorがPush / Otherになっているかで確認ができます。

レスポンスヘッダーに正しくLinkが追加されているかを確認したい場合は、curlを使ってチェックすることもできます。

$ curl --verbose https://example.com 1> /dev/null 
<中略>
< Link: </wp-content/plugins/vk-all-in-one-expansion-unit/css/vkExUnit_style_in_bs.css?ver=5.8.2>; rel=preload; as=style,  </wp-content/plugins/vk-all-in-one-expansion-unit/libraries/font-awesome/css/font-awesome.min.css?ver=4.7.0>; rel=preload; as=style,  </wp-content/themes/admiral/style.css?ver=1.3>; rel=preload; as=style,  </wp-content/plugins/jetpack/_inc/genericons/genericons/genericons.css?ver=3.1>; rel=preload; as=style,  <//fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C700%2C700italic%7CMontserrat%3A400%2C400italic%2C700%2C700italic&subset=latin%2Clatin-ext?ver=4.9.4>; rel=preload; as=style
< Link: </wp-content/js/devicepx-jetpack.js?ver=201812>; rel=preload; as=script,  </js/gprofiles.js?ver=2018Maraa>; rel=preload; as=script,  </wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.9.4>; rel=preload; as=script,  </wp-content/themes/admiral/js/html5shiv.min.js?ver=3.7.3>; rel=preload; as=script,  </wp-content/themes/admiral/js/navigation.js?ver=20160719>; rel=preload; as=script,  </wp-content/plugins/jetpack/_inc/build/widgets/milestone/milestone.min.js?ver=20160520>; rel=preload; as=script

rel=preload; as=styleとrel=preload; as=scriptがそれぞれ追加されているのがわかります。

参考にした記事

なお

※このブログはAPIバックエンドにWordPressを置いてるだけなので未対応です。
Netlify側の設定でいけた記憶だけあるので、そのうちやります。