WordPressテーマ「JIN」の表示速度を高速化するため、CSSやJavaScriptなどのアセットファイルを遅延読み込みするためのプラグインを作りました。
もくじ
PageSpeed Insightsでひどい数字を叩き出すJIN
JINは綺麗で使いやすいですよね。でも、表示速度についてはあまり考えられていない印象です。
Googleの公式のツールであるPageSpeed Insightsで以下の記事のURLを入力して計測してみました。
パソコンの方の数字は90以上なのですが、モバイルの方は以下のように46。昨今多くのユーザーがスマホで読んでいると考えると看過できません。
私や誰かが発表している数値と比較したくなるかもしれません。
でも、PageSpeed Insightsの数値は、そのURLの文字量、画像数にもよるので、単純な比較はできません。コンテンツを全く同じにして、比較する必要があります。
アセットファイルを遅延読み込みすると改善
PageSpeed Insightsで示してくれる対応策や、ネット上の様々な情報を元に対策をしました。基本的に、最初に読み込まれるHTMLが指定する外部ファイル（アセットファイル）をすぐに読み込もうとしてしまい、初期表示が遅くなってしまうのが大きな原因でした。
アセットファイルには種類がいくつかあり、CSS、JavaScript、画像などがあります。画像については、昨今のWordPressでは遅延読み込みされるようになっていますが、CSSやJavaScriptはテーマの作者に委ねられています。
なので、CSSやJavaScriptのファイルを遅延読み込みするプラグインを作りました、すると以下のように82まで改善しました。
グリーンの数値にもっていくには他の対応もする必要がありそうですが、それについては改めてやります。
具体的にどんなことをしているプラグインか？
JavaScriptは全部遅延読み込み。不要なのは削除。
基本的にファーストビュー（開いた時に最初に出てくる部分）に影響しないファイルは遅延読み込みで問題ありません。ということは、JavaScriptは見た目ではなく機能面にかかわるので、全て遅延読み込みにします。
また、スワイプ系の機能で使うJavaScriptファイルは個人的に使っていないので、削除してしまいました。（なので、スワイプ系が動かなくなると困る方は、連絡ください。対応考えます）
ファーストビューで使われるCSSを抜き出しHTMLに直接記載
CSSファイルも全て遅延読み込みにします。とはいえ、JINのメインのCSS（親テーマのstyle.css）を完全に遅延読み込みしてしまうと、ファーストビューの色やレイアウトがおかしくなってしまいます。なので、ファーストビューを構成するCSSだけメインのCSSファイルから抜き出し、HTMLに直接記載しました。
パソコンの場合はメインCSSの遅延読み込みしない
正直、パソコンでの数値は悪くないし、モバイルよりもネット回線が高速のケースが多いです。なので、あまり気にしなくても大丈夫です。
なので、メインのCSSについては遅延読み込みせずに、CSSを切り出してHTMLに直接記載する、ということもしません。ただ、JavaScriptとメイン以外のCSSは同じように遅延読み込みします。
スポンサーリンク
記事ページ以外はメインCSSの遅延読み込みしない
JINで想定する読者は基本的に、検索エンジンやSNSから来る読者です。なので、どれか特定の記事のURLに最初に訪れるはずです。トップページやカテゴリーページなどを最初に開く人は稀です。最初に開くページさえ表示速度が速ければ、そこで基本的なアセットファイルはブラウザにキャッシュされるので、そこからトップページやカテゴリーページに移動しても改めてサーバーからダウンロードしなくていいので表示速度は速いはずです。
また、トップページやカテゴリーページはデザインが人それぞれ違う可能性が高いです。なので、メインのCSSファイルからファーストビューに関わるCSSを抜き出す際に漏れが出ると、デザインが崩れる可能性が高まります。結局、一部ではなく全部切り出してHTMLに記載すれば漏れはなくなりますが、HTML自体のファイルサイズが重くなってしまいます。
それに対し、モバイルで見る記事ページはJINを使っているサイトならほぼほぼ同じようなデザインだと思います。ヘッダー、記事タイトル、アイキャッチ画像、目次、というような要素は同じはずです。なので、CSSの切り出しが最小限で済みます。
本プラグインは私のサイトのデザインではうまく動きますが、違ったレイアウトを採用していたり、使っている他のプラグインによってはうまく動かない可能性があります。
その場合は、プラグインを無効にすればすぐに元に戻せます。
JINバージョン: 2.650で動作確認。
zipファイルをアップロードしてインストール
通常のWordPressプラグインは、WordPressの管理画面でプラグインの新規追加画面で検索してボタン一つか二つ押すだけでインストールできます。しかし、このプラグインはまだ公式のWordPressプラグインとして申請していません。
なので、zipファイルになっているプラグインを入手していただき、それをWordPressの管理画面からアップロードしてインストールする、という方法になります。
zipファイルは以下のボタンから無料でダウンロードできます。
ダウンロードしたzipファイルをWordPressの管理画面からアップロードしてインストールします。プラグイン名は「Jin defer asset」です。詳しいやり方は次の記事をご覧ください。
本プラグインはJIN専用に作っているので、他のテーマでは使えません。
Before、Afterの数値を比べてみてください
PageSpeed Insightsで、プラグインを有効化する前と後の数値を計測して比べてみてください。
ただ、2回目をすぐにやるとキャッシュから読み込まれて反映されないことがあるようです。その場合は、少し時間を置いてから計測してみてください。
もしニーズが大きければ
そこまで機能変更があるプラグインでもないので、アップデートする機会はあまりないと思いますが、zipファイルでの手動インストールだと、アップデート時は面倒です。一度プラグインを削除してから、先ほどと同じ手順でインストールする必要があります。
公式のWordPressプラグインとして申請して認められれば、イントールも更新もボタン1つでできるようになります。
もしニーズが大きいようであれば、申請しようと思います。なので、利用してみて使い勝手が良ければ、ブログやSNSでこのプラグインについて紹介してください！
Twitterの場合は、以下の私のアカウントにメンション頂ければ気付きやすいので助かります。またこのプラグインをアップデートした際は、Twitterでお知らせするのでフォロー頂けたら嬉しいです。
https://twitter.com/tai_tantan
JIN専用のプラグイン他にも作ってます
JINで使える便利なプラグイン他にも作っていますのでご覧ください。
カッテネもおすすめ
ちなみに、3000サイト以上にご利用いただいているカッテネというWordPressプラグインも以前作りました。以下のような商品リンクを作るプラグインです。
こちらはJINはもちろん、それ以外のテーマにも対応しています。また、人気が出たので公式のプラグインとして申請したので、ボタン１つでインストールできます。無料なので使ってみてください。
増え続けるプラグイン問題への回答
プラグイン無しにはWordPressの運用はできないと思います。私のように、細かい追加機能を自分でプラグインとしてプラグラミングしてしまう人は当然ですが、そうでない人でも、管理画面のプラグイン一覧に数十個並ぶのも普通なのではないでしょうか。
そうすると、非常に見づらくなり、管理しづらくなります。そこで超役立つプラグインがPlugin Groupsというプラグイン。Pluginをグループに分けられ、グループごとに表示できます。例えば、私が作ったプラグインを複数使っている方なら、「WebFood」などとグループを作ってそれに入れてもいいかもしれません。ちなみに、タグのように複数のグループに所属させることが可能なので、柔軟に分類することができます。ちなみに、これは私の作ったプラグインではなく、公式の方法で簡単にインストールできます。
