アフィリエイト

JIN高速化!アセットファイルを遅延読み込みするプラグイン作った

WordPressテーマ「JIN」の表示速度を高速化するため、CSSやJavaScriptなどのアセットファイルを遅延読み込みするためのプラグインを作りました。

PageSpeed Insightsでひどい数字を叩き出すJIN

JINは綺麗で使いやすいですよね。でも、表示速度についてはあまり考えられていない印象です。

Googleの公式のツールであるPageSpeed Insightsで以下の記事のURLを入力して計測してみました。

Kindle Paperwhite防水性能を水没とシャワーで実験!壊れたか!?防水性能がついたKindle Paperwhite(第10世代)を買ったので、お風呂で水没やシャワーをぶっかけても壊れないか実験してみま...

パソコンの方の数字は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」です。詳しいやり方は次の記事をご覧ください。

ZIP形式のプラグインを手動でインストールする

本プラグインはJIN専用に作っているので、他のテーマでは使えません。

Before、Afterの数値を比べてみてください

PageSpeed Insightsで、プラグインを有効化する前と後の数値を計測して比べてみてください。

ただ、2回目をすぐにやるとキャッシュから読み込まれて反映されないことがあるようです。その場合は、少し時間を置いてから計測してみてください。

もしニーズが大きければ

そこまで機能変更があるプラグインでもないので、アップデートする機会はあまりないと思いますが、zipファイルでの手動インストールだと、アップデート時は面倒です。一度プラグインを削除してから、先ほどと同じ手順でインストールする必要があります。

公式のWordPressプラグインとして申請して認められれば、イントールも更新もボタン1つでできるようになります。

もしニーズが大きいようであれば、申請しようと思います。なので、利用してみて使い勝手が良ければ、ブログやSNSでこのプラグインについて紹介してください!

Twitterの場合は、以下の私のアカウントにメンション頂ければ気付きやすいので助かります。またこのプラグインをアップデートした際は、Twitterでお知らせするのでフォロー頂けたら嬉しいです。

https://twitter.com/tai_tantan

JIN専用のプラグイン他にも作ってます

JINで使える便利なプラグイン他にも作っていますのでご覧ください。

WordPressテーマJINの関連記事の関連度を爆上げするプラグイン!WordPressテーマJINで記事下に表示される「関連記事」というセクションありますよね?名前の割にあまり関連していない記事が表示され...
JINブログカードをURLでなくslugで指定するショートコードにするプラグインWordPressテーマ「JIN」のブログカード機能、便利ですよね。通常URLをそのまま貼り付けるだけで良いのですが、記事のslugを指...
JINで画像遅延読込時にくるくる画像を表示するプラグイン作ったサイトやアプリで画像を読み込んでいる時に表示するくるくるする画像ありますよね。あれをJINでも簡単に表示できるようにするプラグインを作り...
JINのプロフ画像のimgタグにloadingをつけるプラグインを作ったWordPressテーマ「JIN」のサイドバーに表示させるプロフ画像のimgタグにloading="lazy"を付与するプラグインを作り...
JINのヘッダー画像にwidth,height,loadingを付与する方法WordPressテーマ「JIN」のヘッダー画像のimg要素にwidth、height、loading属性を付与する方法をご紹介します。...

カッテネもおすすめ

ちなみに、3000サイト以上にご利用いただいているカッテネというWordPressプラグインも以前作りました。以下のような商品リンクを作るプラグインです。

こちらはJINはもちろん、それ以外のテーマにも対応しています。また、人気が出たので公式のプラグインとして申請したので、ボタン1つでインストールできます。無料なので使ってみてください。

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよカエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。です...

増え続けるプラグイン問題への回答

プラグイン無しにはWordPressの運用はできないと思います。私のように、細かい追加機能を自分でプラグインとしてプラグラミングしてしまう人は当然ですが、そうでない人でも、管理画面のプラグイン一覧に数十個並ぶのも普通なのではないでしょうか。

そうすると、非常に見づらくなり、管理しづらくなります。そこで超役立つプラグインがPlugin Groupsというプラグイン。Pluginをグループに分けられ、グループごとに表示できます。例えば、私が作ったプラグインを複数使っている方なら、「WebFood」などとグループを作ってそれに入れてもいいかもしれません。ちなみに、タグのように複数のグループに所属させることが可能なので、柔軟に分類することができます。ちなみに、これは私の作ったプラグインではなく、公式の方法で簡単にインストールできます。

Plugin Groups