【JINモバイル高速化】スコア47点から85点に上げた方法まとめ

- WordPress -
2020.01.10
WordPress

Google PageSpeed InsightsでJINをテーマに使って運営しているサイトをスキャンしたら、モバイル表示のスコアが思った以上に低くかった・・・。

そんな時に実際に行なった施策をまとめました。

今回実行したことは以下4つです。

  1. プラグイン「a3 Lazy Load」をインストール・有効化
  2. JINのアニメーションを無効化
  3. プラグイン「Autoptimize」をインストール・有効化
  4. function.phpへJavaScriptの読み込み遅延処理を追加

★このうち、最終的に採用したのは①④だけ

ちなみに、これらを実施する前に、"効果が大きい"と評判である「FontAwesomeの読み込みをオフにする」は実施済みです。

JINのモバイル高速化対策 ビフォーアフター

Google PageSpeed Insightsの実行結果だけ先に書いておきます。

モバイルのスコアの結果

BEFORE

JIN 高速化
38点も改善!
AFTER

JIN 高速化

ちなみに、PCのスコアも86から95へ向上しました。

PCはまぁ元からそこそこ高いし良いかな、と思っていたので今回はフォーカスしません。以降載せているキャプチャは全てモバイルに対するスコアとなります。

"改善できる項目"の結果

BEFORE

JIN 高速化

AFTER

真っ赤な「即改善せよ」がなくなった↓

JIN 高速化

それでは、以下施策を一つ一つ実施していったらスコアがどうなったかを書いていきます。

  1. プラグイン「a3 Lazy Load」をインストール・有効化
  2. JINのアニメーションをオフ
  3. プラグイン「Autoptimize」をインストール・有効化
  4. function.phpへJavaScriptの読み込み遅延処理を追加

JINに"a3 Lazy Load"を導入したら

JIN 高速化

スコアが47 → 77に

一番効果が大きかったのはこのa3 Lazy Load。いきなりスコアが30点も改善しました。

ちなみに、a3 Lazy Loadは設定画面を見ると多くの設定項目があり恐怖心を煽られますが、僕は何も設定を変えませんでした。

インストール・有効化しただけです。

JINのアニメーションを無効化したら

JIN 高速化

スコアが77 → 変わらず

体感的には「パッと」表示されるようになったかに見えましたので速くなったかと思いきや。

表示直後のピックアップコンテンツの描画に違和感が出たので、「数字が変わらんなら余計なことしなくていいや」ということでアニメーションは有効化しておくことに

JINにAutoptimizeを導入したら

JIN 高速化

スコアが77 → 78

たったの1。

Autoptimizeは、速度改善関連のプラグインの中ではかなりメジャーだと思っていたので効果も期待していたんですが、ガッカリ。

僕は他プラグインで痛い目に遭って以来「可能な限りプラグイン導入数は少なくしたい」と考えているので、今回は問答無用で停止・アンインストール行きです

ちなみにパソコンスコアは92から97に上がりました。

ここで、自分で手軽にできそうな施策は終わりかな?と思い、改善できそうな項目はあるか確認。

JIN 高速化

すると、真っ赤になっている「レンダリングを妨げるリソースの除外」が気になり改善できないか調べたところ、PHPコードを追加することで対処できそうなことを発見。

JINのfunction.phpへJavaScriptの読み込み遅延処理を加えたら

JIN 高速化

スコアが77 → 85へ

これも手間がかからない割りにスコアが改善されました。このまま採用!

方法は以下を参考にさせてもらいました。「遅延でリソースを除外する」の項目です。

"Webログ"さん: レンダリングを妨げるリソースの除外を行ってサイトスピード改善!!

この方法は、WordPressの「functions.php」というPHPのソースコードファイルを直接編集することになるため、(コピペとはいえ)1文字でも間違いがあるとWebサイト全体が表示されなくなり管理画面へのログインもできなくなる可能性があります。

管理画面からの修正ができなくなっても、FTP接続経由、もしくはご自身で契約しているレンタルサーバーのコントロールパネルで提供される「ファイルマネージャー」等から直接ファイルの内容を修正可能ですが、もし「何のことか分からない」という方はこの方法の実施は控えた方が無難です。

JINモバイル高速化の施策 まとめ

a3 Lazy Loadだけでも相当な改善が見られたので、試す価値はあると思います。

ただし、画面表示に関係するプラグインは自分の気づかないところで影響が出ている可能性もあるので、PCだけでなくスマホでも表示崩れなどないかを可能な限り細かくチェックすることをおすすめします!

【JIN高速化】ピックアップコンテンツpng画像とバトってjpgへ変えた話

UdemyでサクッとWordPressを学習してみる