ブログ運用

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

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

 

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公式のサイトのようです。

 

検証手順

 

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

 

 

検証開始!

 

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

 

現状の速度測定

 

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

 

Pagespeed Toolsでの結果

 

モバイルGOOG 82/100
PCLOW 2/100

 

 

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

 

 

 

 

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

 

testmysite.withgoogle.comでの結果

 

(これはモバイルでのテスト結果だと思われます。)

 

 

読み込み速度7秒
訪問者の推定離脱率26秒

 

 

 

 

 

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

 

 

 

 

 

要するに遅い方ということはわかりましたね。

 

GTmetrixでの結果

 

(これはPCでのテスト結果だと思われます。)

 

 

PageSpeed ScoreF(1%)
YSlow ScoreD(67%)
Fuly Loaded Time9.2s
Total Page Size15.9MB
Tequests114

 

 

 

 

なんか英語でよくわかりませんが

PageSpeed ScoreがFランになっているというのだけはわかりましたね

 

 

要するに改善の余地がありすぎるということですね!

 

 

それぞれまとめると

 

 

■Pagespeed Tools
モバイルGOOG 82/100
PCLOW 2/100
■testmysite.withgoogle.com
読み込み速度7秒
訪問者の推定離脱率26秒
■GTmetrix
PageSpeed ScoreF(1%)
YSlow ScoreD(67%)
Fuly Loaded Time9.2s
Total Page Size15.9MB
Tequests114

 

ということになりますね。

 

JIN公式が発表している高速化方法

 

JIN公式では5つの方法が紹介されています

  1. 画像は圧縮してアップロード
  2. アニメーションをOFFにする
  3. 標準フォントを利用する
  4. 高速化プラグインを活用する
  5. Xアクセラレーターを活用する

 

詳しくはこちらの公式サイトをご参照ください

https://jin-theme.com/manual/speed-up/

 

 

このサイトではすでに上から2つは実行済です。

そして3つめのサイトのフォントなんですが、このサイトではNoto Sans Japaneseを使っているのですがデザインの関係上デフォルトにすることが出来ないのでスルーします。

そして5つめのサーバーはロリポップを利用しているのでXアクセラレーターも利用出来ませんでした。

 

結果以下の1つの方法を試すことになります。

  • 高速化プラグインを活用する

 

 

高速化プラグインを実際に導入してみた

 

  1. Autoptimize
  2. BJ Lazy Load
  3. WP Super Cache

 

公式さいとでは以下のプラグインが相性が良いと言っています。

 

上から順番に入れてみて結果を見てみましょう!

 

 

検証開始!

 

それでは各プラグインを導入してみた結果を見てみます!

 

Autoptimize

 

こちらのプラグインはこのサイトの説明がわかりやすいです。

https://pasolack.com/wordpress/autoptimize/

 

 

とりあえず基本設定をCDN以外チェックした結果

■Pagespeed Tools
モバイルGOOG 80/100 → GOOG 80/100
PCLOW 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
PCLOW 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
PCLOW 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
PCLOW 7/100 → LOW 49/100
■testmysite.withgoogle.com
読み込み速度13秒 → 9秒
訪問者の推定離脱率31% →29%
■GTmetrix ※結果表示までの読み込み遅かったんで無視します笑

 

 

PCの速度が1だけ上がりました笑

 

 

 

検証まとめ!!

 

今回の初期値と最終結果は以下になりました。

 

Pagespeed Tools
モバイルGOOG 82/100 → GOOG 86/100
PCLOW 2/100 → LOW 49/100
■testmysite.withgoogle.com
読み込み速度7秒 → 9秒
訪問者の推定離脱率26秒 → 29%

 

 

 

Autoptimizeの画像の最適化が一番影響がありましたね。

正直ほかは微差って感じですね。

 

というかもうボトルネックは画像で決定ですね。

3G環境だと9秒もかかるみたいですし。

 

 

とりあえず結論として、PCが2から49まで上がったので一旦は良しとします!(自分に甘い笑)

 

 

あと、これは仮説ですが、どうもサムネイルの画像達はHTMLかCSSで毎回リサイズしているくさくて、CDNを導入するか、その処理を無くす。(アップロードする時点でリサイズされた画像もアップロードできるようにして、サムネイルではそれを表示するだけにする処理を入れるとか?)

が実現するともっと早くなるかも説ですね。

よくわかりませんが笑

 

 

引き続きなにか改善の兆しがあったらまとめていきます。

 

 

JIN関連の記事だと以下の記事がありますので良かったら合わせて御覧ください。

 

はじめてのアドセンス登録方法(特にwordpressテーマ「JIN」) アドセンスの申請がやっと通ったぁ 覚えてないですが10回近く再申請してたんで嬉しいですね 特にまだ今の段階で...
テーマJINのブログカードを外部リンクに適応する方法(WordPress) 現在私も使っているWordpressのテーマJIN デザインが綺麗でいいですよね! そんなJ...

 

 

ブログ関連だとこちらが人気です

 

【ブログ運営報告】雑記ブログ1ヶ月!読まれる記事の傾向と考察。 雑記ブログを1ヶ月と少し運用してみて、記事数も200記事近くなってきたので、ここで一旦読まれる記事と読まれない記事の傾向...
ブログ初心者の俺のメンタルの変化と継続するための3つの工夫 どうも始めましてコタロウです。 何か自分でも出来ることがないかと思い初めて6月14日からブログ(のようなも...

 

 

 

ABOUT ME
こたろう
こたろう
音楽が大好きです! エンタメ系の考察記事を多く書いています。 楽しんでくれたら嬉しいです!