
どうもサイトの表示速度が遅いので、今回はJIN公式が発表したサイトを高速化する方法を試してみます。
目次
WEBサイトの表示計測するための前提条件
WEBサイトの表示速度を測定する方法は?
今回はこの3つのWEBブラウザの表示速度を計測するツールを使って検証します。
https://developers.google.com/speed/pagespeed/insights/?hl=ja
https://testmysite.withgoogle.com/intl/ja-jp
上2つの測定サイトはGoogle公式のサイトのようです。
検証手順
- 現状の表示速度を測る
- JIN公式が発表している高速化方法を実行する
- 表示速度を測る
検証開始!
それでは実際に検証してみましょう!
現状の速度測定
現状はこうなっております。
Pagespeed Toolsでの結果
モバイル | GOOG 82/100 |
---|---|
PC | LOW 2/100 |
げ、、、PCの表示速度おそすぎるw


これはひどすぎますね。。。
testmysite.withgoogle.comでの結果
(これはモバイルでのテスト結果だと思われます。)
読み込み速度 | 7秒 |
---|---|
訪問者の推定離脱率 | 26秒 |

技術的なことはあまりわからないのですが、遅すぎる気がする。。。

要するに遅い方ということはわかりましたね。
GTmetrixでの結果
(これはPCでのテスト結果だと思われます。)
PageSpeed Score | F(1%) |
---|---|
YSlow Score | D(67%) |
Fuly Loaded Time | 9.2s |
Total Page Size | 15.9MB |
Tequests | 114 |

なんか英語でよくわかりませんが
PageSpeed ScoreがFランになっているというのだけはわかりましたね
要するに改善の余地がありすぎるということですね!
それぞれまとめると
■Pagespeed Tools | |
---|---|
モバイル | GOOG 82/100 |
PC | LOW 2/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 7秒 |
訪問者の推定離脱率 | 26秒 |
■GTmetrix | |
PageSpeed Score | F(1%) |
YSlow Score | D(67%) |
Fuly Loaded Time | 9.2s |
Total Page Size | 15.9MB |
Tequests | 114 |
ということになりますね。
JIN公式が発表している高速化方法
JIN公式では5つの方法が紹介されています
- 画像は圧縮してアップロード
- アニメーションをOFFにする
- 標準フォントを利用する
- 高速化プラグインを活用する
- Xアクセラレーターを活用する
詳しくはこちらの公式サイトをご参照ください
https://jin-theme.com/manual/speed-up/
このサイトではすでに上から2つは実行済です。
そして3つめのサイトのフォントなんですが、このサイトではNoto Sans Japaneseを使っているのですがデザインの関係上デフォルトにすることが出来ないのでスルーします。
そして5つめのサーバーはロリポップを利用しているのでXアクセラレーターも利用出来ませんでした。
結果以下の1つの方法を試すことになります。
- 高速化プラグインを活用する
高速化プラグインを実際に導入してみた
- Autoptimize
- BJ Lazy Load
- WP Super Cache
公式さいとでは以下のプラグインが相性が良いと言っています。
上から順番に入れてみて結果を見てみましょう!
検証開始!
それでは各プラグインを導入してみた結果を見てみます!
Autoptimize
こちらのプラグインはこのサイトの説明がわかりやすいです。
https://pasolack.com/wordpress/autoptimize/
とりあえず基本設定をCDN以外チェックした結果
■Pagespeed Tools | |
---|---|
モバイル | GOOG 80/100 → GOOG 80/100 |
PC | LOW 2/100 → LOW 2/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 7秒 → 13秒 |
訪問者の推定離脱率 | 26% → 31% |
■GTmetrix ※結果表示までの読み込み遅かったんで無視します笑 |
何故かtestmysite.withgoogle.comでの評価が下がってしまいました笑
そこで、Autoptimizeの更に詳細設定で、画像の最適化にチェックを入れてみました!
■Pagespeed Tools | |
---|---|
モバイル | GOOG 80/100 → GOOG 86/100 |
PC | LOW 2/100 → LOW 7/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 7秒 → 13秒 |
訪問者の推定離脱率 | 26% → 31% |
■GTmetrix ※結果表示までの読み込み遅かったんで無視します笑 |
お!これは特にPCに関して改善の兆しがありましたね!
BJ Lazy Load
こちらのプラグインは画面のスクロールに合わせて画像を読み込むことで表示速度を上げるプラグインのようですね。
■Pagespeed Tools | |
---|---|
モバイル | GOOG 80/100 → GOOG 86/100 |
PC | LOW 7/100 → LOW 48/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 13秒 → 9秒 |
訪問者の推定離脱率 | 31% →29% |
■GTmetrix ※結果表示までの読み込み遅かったんで無視します笑 |
お!これは全体的に改善傾向です!
PCに関してはええ感じに上がってます!
WP Super Cache
こちらはまじで意味がわからないプラグインですが、早くなるということなので信じて導入してみます。
と思いきや
警告! /home/users/0/boo.jp-kansaiben/web/wp-content/advanced-cache.php がないか、更新できません。
という警告がでて導入出来ませんでした。
速攻で消しました笑
Imsanity
どうやら画像が一番影響しているみたいなので、画像の最大サイズを自動で設定できるプラグインを導入してみます!
正直画質ってこのブログにそこまで重要ではないのでマックスを1024pxにしました!
■Pagespeed Tools | |
---|---|
モバイル | GOOG 80/100 → GOOG 86/100 |
PC | LOW 7/100 → LOW 49/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 13秒 → 9秒 |
訪問者の推定離脱率 | 31% →29% |
■GTmetrix ※結果表示までの読み込み遅かったんで無視します笑 |
PCの速度が1だけ上がりました笑
検証まとめ!!
今回の初期値と最終結果は以下になりました。
Pagespeed Tools | |
---|---|
モバイル | GOOG 82/100 → GOOG 86/100 |
PC | LOW 2/100 → LOW 49/100 |
■testmysite.withgoogle.com | |
読み込み速度 | 7秒 → 9秒 |
訪問者の推定離脱率 | 26秒 → 29% |
Autoptimizeの画像の最適化が一番影響がありましたね。
正直ほかは微差って感じですね。
というかもうボトルネックは画像で決定ですね。
3G環境だと9秒もかかるみたいですし。
とりあえず結論として、PCが2から49まで上がったので一旦は良しとします!(自分に甘い笑)
あと、これは仮説ですが、どうもサムネイルの画像達はHTMLかCSSで毎回リサイズしているくさくて、CDNを導入するか、その処理を無くす。(アップロードする時点でリサイズされた画像もアップロードできるようにして、サムネイルではそれを表示するだけにする処理を入れるとか?)
が実現するともっと早くなるかも説ですね。
よくわかりませんが笑
引き続きなにか改善の兆しがあったらまとめていきます。
JIN関連の記事だと以下の記事がありますので良かったら合わせて御覧ください。
ブログ関連だとこちらが人気です