キタジマ タカシ ページ高速化の機能として、以下の機能を追加しました。それぞれカスタマイザーから ON/OFF できます。どれくらい効果があるのか実際に試してみたくて追加した感じで、一応ベータ機能としています。
追加した機能
- Snow Monkey の JavaScript 読み込みを最適化する
- HTTP2 Server Push を使用する
- CSS を非同期読込する
- CSS を head に出力する
Snow Monkey の JavaScript 読み込みを最適化する
Snow Monkey のメイン JavaScript と、WordPress が自動的に読み込む JavaScript 類に async/defer 属性を付与、また、いくつかの JavaScript については読み込みタグ自体を動的生成するように変更します。
通常、ページ読み込み中に JavaScript の読み込みタグがあるとそこで一旦ページの読み込み待ちが発生します。async/defer 属性を付与することで、その読み込み待ちを発生させず、ページの表示が高速化されます。
inc2734_wp_page_speed_optimization_defer_scripts、inc2734_wp_page_speed_optimization_async_scripts、inc2734_wp_page_speed_optimization_builded_scripts というフィルターフックを仕込んでおり、どの JavaScript 読み込みタグに適用させるかカスタマイズさせることができます。
参考：
HTTP2 Server Push を使用する
通常、CSS や JavaScript の読み込みはページの読み込みが始まってから順番に処理されますが、ページの読み込み前に CSS、JavaScript をブラウザに送りつけることで読み込みの高速化を図ります。
サーバーが HTTP2 Server Push を行える＆ブラウザが HTTP2 Server Push されたデータの受信に対応している必要があり、適用範囲はまだそんなに多くないかもしれません。
inc2734_wp_page_speed_optimization_http2_server_push_handles というフィルターフックを仕込んでおり、どの CSS、JavaScript に適用させるかカスタマイズすることができます。
参考：
CSS を非同期読込する
CSS の読み込みタグに rel="preload" を付与します。
通常、ページ読み込み中に CSS の読み込みタグがあるとそこで一旦ページの読み込み待ちが発生します。rel="preload" を付与するとページの読み込み待ちを発生させず、ページ表示の高速化が期待できます。
preload による CSS の読み込みの場合は「CSS を読み込み終わったときに CSS を適用する」という実装が一般的なようなのですが、IE が非対応な都合上、Snow Monkey では「ページの読み込み完了時に CSS を適用する」という処理にしています。
そのとき、そのままだと「CSS が適用されていない素の HTML が一瞬表示されたあと CSS が適用される」という表示になってしまうため「まずページを非表示にしておいてから CSS が適用されたらページが表示される」という処理にしたのですが、そのため体感速度はそれほど向上されない…かもしれません…。良い実装があればぜひ教えてください。
inc2734_wp_page_speed_optimization_preload_stylesheets というフィルターフックを仕込んでおり、どの CSS の読み込みにタグに適用させるかカスタマイズすることができます。
参考：
CSS を head に出力する
通常、ページ読み込み中に CSS の読み込みタグがあるとそこで一旦ページの読み込み待ちが発生します。そこで、CSS を読み込むのではなく、HTML に直接記述してしまうことで表示を高速化することができます。
これ、いくつかのテーマで似たような処理が実装されているのを拝見していて、でも「どっちにしろページ読み込み前に PHP で CSS を読み込んでから HTML に付け足す処理を実行するわけだから、そんなに効果ないだろー」と思って敬遠していました。でも前述した rel="preload" が思ったほど効果を感じれなかったので、物は試しに実装してみたところ、普通に速くなりました。理屈はよくわかりませんが、同サーバーのファイルをローカルで読み込むからとか、HTML にブラウザキャッシュが効くとかそういうことなんですかね？詳しい方いらっしゃったらぜひ理屈を教えてください…。
inc2734_wp_page_speed_optimization_output_head_styles というフィルターフックを仕込んでおり、どの CSS の読み込みを head 記述に変更するかカスタマイズすることができます（デフォルトはメインの CSS（ハンドル名が get_template()） のみ）
おまけ：PageSpeed Insights の点数は上がるのか
この Snow Monkey のサイトと僕の事業サイトにも上記の高速化設定を適用させまして、たしかに体感速度はあがったし、読み込み時間も短縮されました。が、PageSpeed Insights の点数はそこまで変化ありませんでした。
WordPress のテーマについて日々検索していると、「このテーマは速い」「このテーマは遅い」という記事やツイートをよく見かけます。で、気になって覗いてみると PageSpeed Insights の点数だけをみて速い/遅いと論じてあり、実際の読み込み時間についてまで記述されいる記事は極端に少ないです。PageSpeed Insights の点数は「高速化のためには一般的にこういう対策があるよ、それがこれくらい達成されてますね」という指標なので、表示がめちゃくちゃ速くてもその指標を満たせてないとそんなに点数は高くない、ということが普通にありえると思うんですよね。だから個人的には「PageSpeed Insights の点数をあげるための対策」を Snow Monkey に組み込もうとは特に考えていません。
最近 PageSpeed Insights は点数だけじゃなくて実測でスコアがでる機能が追加されましたね。アクセスが少ないサイトだとスコアが表示されない、とか確実にチェックできるわけではないですが、こちらのスコアで「Fast」となっていれば問題ないというのが個人的な考えです。
ブラウザのデベロッパーツールなんかでも読み込み時間は確認できますので、Snow Monkey をお使いの方は、上記高速化設定を ON/OFF しながらどれくらい効果があるか確認されてみてください（そして効果があったかぜひ教えてくだし！）。
