JIN公式が発表したサイトスピード高速化方法を全て試した結果報告！

どうもサイトの表示速度が遅いので、今回はJIN公式が発表したサイトを高速化する方法を試してみます。

WEBサイトの表示計測するための前提条件
- WEBサイトの表示速度を測定する方法は？
- 検証手順
検証開始！
検証開始！
検証まとめ！！

WEBサイトの表示計測するための前提条件

WEBサイトの表示速度を測定する方法は？

今回はこの3つのWEBブラウザの表示速度を計測するツールを使って検証します。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

https://testmysite.withgoogle.com/intl/ja-jp

https://gtmetrix.com/

上2つの測定サイトはGoogle公式のサイトのようです。

検証手順

現状の表示速度を測る
JIN公式が発表している高速化方法を実行する
表示速度を測る

検証開始！

それでは実際に検証してみましょう！

現状の速度測定

現状はこうなっております。

Pagespeed Toolsでの結果

モバイル	GOOG 82/100
PC	LOW 2/100

げ、、、PCの表示速度おそすぎるｗ

これはひどすぎますね。。。

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%