ページの表示速度高速化設定を追加した Snow Monkey v3.2 をリリースしました

ページ高速化の機能として、以下の機能を追加しました。それぞれカスタマイザーから ON/OFF できます。どれくらい効果があるのか実際に試してみたくて追加した感じで、一応ベータ機能としています。

追加した機能

  • Snow Monkey の JavaScript 読み込みを最適化する
  • HTTP2 Server Push を使用する
  • CSS を非同期読込する
  • CSS を head に出力する
inc2734/wp-page-speed-optimization というライブラリとしてつくっていますので、Snow Monkey 以外のテーマやプラグインにも比較的簡単に追加できます。Packagist で配布しています。詳しくは GitHub で。

Snow Monkey の JavaScript 読み込みを最適化する

Snow Monkey のメイン JavaScript と、WordPress が自動的に読み込む JavaScript 類に async/defer 属性を付与、また、いくつかの JavaScript については読み込みタグ自体を動的生成するように変更します。

通常、ページ読み込み中に JavaScript の読み込みタグがあるとそこで一旦ページの読み込み待ちが発生します。async/defer 属性を付与することで、その読み込み待ちを発生させず、ページの表示が高速化されます。

inc2734_wp_page_speed_optimization_defer_scriptsinc2734_wp_page_speed_optimization_async_scriptsinc2734_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 しながらどれくらい効果があるか確認されてみてください(そして効果があったかぜひ教えてくだし!)。

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!