ページ速度最適化

ページの表示速度を最適化するために、Snow Monkey には実験的にいくつかの機能を仕込んでいます。

使用中のプラグインによっては不具合が起きたり、環境によっては逆に遅くなったりする可能性もありますので、オンオフしながら都度計測して、必要なものを使用するようにしてください。

カスタマイザー > ページ速度最適化とすすみ、設定パネルを開いてください。

Snow Monkey の JavaScript 読み込みの最適化

JavaScript が非同期で読み込み/実行されるようにする設定です。JavaScript は通常、読み込みの都度ページの描画が止まるのですが、非同期読み込みにすることでページの描画を止めることなく実行させることができるようになります。

適用されるのは Snow Monkey が持つ JavaScript だけで、サードパーティーのプラグインなどの JavaScript には適用されません。

HTTP2 Server Push を使用する

ページを表示する前に、そのページの描画に必要な CSS や画像などを先読みさせることで表示の高速化を図ります。

サーバーや閲覧者のブラウザが対応していないと無視されてしまうため、まずはご自身のサーバーが対応しているか確認が必要です。

CSS を head に出力する

通常外部読み込みされる CSS を、ページに埋め込んで表示することで表示の高速化を図ります。

適用されるのは Snow Monkey が持つ CSS だけで、サードパーティーのプラグインなどの CSS には適用されません。

ブラウザキャッシュを使用する

画像などをブラウザにキャッシュさせ、2回目以降はサーバーまで読み込みにいかないようにすることで表示の高速化を図ります。

.htaccess ファイルを自動的に改変して実現するので、お使いの Web サーバーの種類や権限によっては利用できない場合があります。サーバー側で同様の機能が提供されている場合は、そちらの使用をおすすめします。

メニューをキャッシュ

グローバルナビゲーション、ドロワーナビゲーションなどのメニューをまるごとキャッシュする機能です。

通常、メニューは表示の都度、メニューに割り当てたページの情報をとってくるため負荷がかかりますが、まるごとキャッシュして2回目以降は情報をとりにいかないようにすることで表示の高速化を図ります。

一定の時間が経過するか、メニューの管理画面で更新することでキャッシュがリセットされます。

画像の非同期読み込み

画像に decoding="async" の属性を追加します。

軽量な FontAwesome を使用する

Snow Monkey はアイコンに FontAwesome を利用しているのですが、FontAwesome は全部で1MB超の容量があるため、ページの表示速度やモバイルでの通信量に結構な影響を与えてしまっていました。そこで、カスタマイザーに「軽量な FontAwesome を使用する」という設定を追加しました(カスタマイザー > ページ速度最適化 > 軽量な FontAwesome を使用する)。

これを有効化すると、Snow Monkey テーマで使用している FontAwesome アイコンのデータだけをロードするようになるため、読み込むファイルサイズが83KBと超軽量になります。反面、自由に全てのアイコンを使用することはできなくなるため、フッター固定ナビゲーションなどにアイコンを入れている方はご注意ください。

参考サイト

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

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