ブログ運営

JINに変えたらcocoonよりサイト表示速度が遅くなったので改善するためにしたこと

2週間ほど前に無料テーマの「cocoon」から有料テーマの「JIN」に変更しました。

主にデザイン面など大変気に入っていて僕みたいな初心者は自分自身でカスタマイズできないのですがJINのおかげでそれっぽいサイトになり、「さすが有料」と感じています。

しかしcocoonとの変化点をまとめた記事を前回出した時には気付かなかったのですがブログの表示速度が激遅になってしまったので改善に向けて試したことをまとめていきます

 

テーマをcocoonからJINに変更し満足しました。大きく変わったところブログ開始して大体2週間が経ち、文章を考え入力するのが少しだけ慣れてきた気がします。(少しだけね) ブログの知識全くなしの...

 

JINに変えてからのモバイルの速度が遅い

cocoonを使っていた時はモバイルの速度もパソコンの速度も90越えで普通にしていれば速度90は超えるものなのかなって思っていたのですが「JIN」に変えてしばらく更新していくとブログの表示速度が遅く感じるようになりました。

 

最初はただ単にうちのネット環境が遅いって思っていたのですがふとした時に、サイト速度計測のサイトPageSpeed Insightsで調べてみると「パソコン80・モバイル25というような悲惨な結果になっていました。

まめやろー
まめやろー
モバイル遅すぎっ!!

 

うちのネット環境の話じゃなくてブログ自体が超重たいんだ!っと気付けました。ネットの表示速度がGoogleの検索順位に影響を与えるというルールがあるそうでサイトの読み込みが早いページを優先的に検索順位を高くすると聞き、こうしてはいられないと思い改善に踏み切りました。

 

JIN公式に乗っている改善策などや自分で調べた方法でスピードUPを目指します。

 

ページ表示速度のテストの仕方

これは知っている人は読み飛ばしてOKです。

ページ表示速度のテストは超簡単です。PageSpeed Insightsというサイトにアクセスし「ウェブページのURLを入力」の検索BOXの中に自分のサイトのURLを入力するだけです。

 

あとは1分くらい待てばモバイルやパソコン環境下での表示速度を勝手に出してくれます。お金もかからず無料でテストできますし面倒くさい登録も不要です。

 

もし詳しく説明を見たい方は僕が参考にしたサイトを載せえておきます。詳しい手順を画像付きで載せてくれているので分かりやすいです

 

JIN公式サイトに載っている高速化の方法

有料テーマJINは丁寧に高速化する方法を公式サイトにきちんと載せてくれています。

 

まめやろー
まめやろー
ありがてぇ

 

JIN公式サイトに載っている方法は

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

全て試せるものは試してみました。

 

僕の場合JINは元々最新版でダウンロードしてます。FontAwesome・アニメーションは元々オフにしてるので大丈夫。そしてXアクセラレーターというのはXSERVERを使っている人しか関係なく僕は「ロリポップ」なので弄ることすらできません。

 

JIN公式サイトに載っている改善策は「標準フォントを使用する」と「プラグインを導入する」「画像を圧縮する」というこの3つしか試せませんでした( ゚Д゚)

 

①標準フォントを使用する

WordPressから「外観」→「カスタマイズ」→「サイト基本情報」の中のフォント選択を変えるだけです

元々角ゴシックフォントにしてたので標準のデフォルトに戻しました。

まめやろー
まめやろー
これだけで速度変わるか?

正直そこまで速度変わる気はしなかったのですが半信半疑でやってみることにしました( ゚Д゚)

 

②プラグインを導入する

これがJINの正直苦手というか嫌なところ。

cocoonではプラグインほとんど入れる必要はなかったんですがJINではことあるごとに「プラグインを入れてください」になるのですごい抵抗感はあったのですが速度のために、、、と渋々導入しました。

 

JIN公式サイトに載っていた推奨プラグインは3つ

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

 

簡単に解説すると

AutoptimizeとはWordPressのHTMLソースコードやCSSなどを最適化してサイトの表示速度を向上するプラグイン

 

Lazy Loadとは画像やコンテンツなど画面内に表示されてから読み込ませることであえて遅延して表示させることでページの表示速度の向上に繋げてくれるプラグイン

 

WP Super Cacheとは一度アクセスしたサイトのデータをブラウザで一時的に保管し、次回、同じサイトにアクセスした時の表示速度を向上してくれるプラグイン

 

プラグイン導入のやり方を丁寧に載せてくれている記事を参考にしました。設定方法が気になる方は見てみてください

 

超簡潔にまとめてこの3つのうち2つは素直に導入しました。WP Super Cacheだけ僕のサイトだと警告が出てしまい怖くなったので即消しました。

 

まめやろー
まめやろー
「デザインを更新してもプラグインのキャッシュを削除しないとデザインが反映されなくなってしまいます。」とJIN公式に書いたり面倒くさいと思ったのも導入を辞めたるよう理由の一つです 

プラグイン導入後の速度

AutoptimizeとLazy Loadを導入後にサイト速度計測してみましたところ、、

 

モバイルの速度結果

 

パソコンの速度結果

 

まめやろー
まめやろー
正直微妙、、、

 

パソコンの方は文句なしの結果になりました。しかしモバイルは50か、、こんなにプラグイン入れて設定したのに。せめて70は欲しいなと思い改善を続けることにしました。

しかしプラグイン導入はモバイルやパソコンのサイト表示速度改善に効果があることは判明しました!

 

③画像圧縮

結論から言うとこの方法で大きく改善しました。

サイトの表示速度をした時にも「改善できる項目」にも載っていましたが僕の載せる画像のファイルが大きすぎるみたいです

 

 

まめやろー
まめやろー
ごちゃごちゃ書いてあってわからねぇ

 

とりあえず次世代フォーマットでの画像の配信のところをクリックすると画像ファイルの大きいものが容量順に表示されており「これを減らしなさい」と言ってるのだと思い一個一個手作業でアイキャッチ画像の圧縮作業をしました。

 

まめやろー
まめやろー
30記事しかないのに時間かかった

 

 

圧縮作業の手順自体は簡単でこれもGoogleのツール「Squoosh」を使います。登録不要でブラウザ上で簡単に画質の劣化も少なく画像の容量を減らすことができます

 

 

select an imageをクリックし圧縮したい画像を選択。

 

 

そしたら右下のバーをいじると画像の劣化具合を目で確かめながら細かい調整もできるようになっています。調整が終わったらあとは保存ボタンを押すだけ!

 

まめやろー
まめやろー
ただ1枚1枚しかできないので画像がたくさんある人は大変よ

 

画像圧縮後のテスト結果

 

モバイルの速度結果

 

パソコンの速度結果

 

まめやろー
まめやろー
ええやん!!!だいぶ改善した!!

 

ここまで改善できれば十分です(*’▽’)

かなり時間はかかりましたが読みやすいブログを目指すためにもどんどん改善をしていきたいと思っています。

 

ピックアップコンテンツの削除

これは自分で調べてみて試してみた改善策ですがちゃんと効果がありました。

 

 

このピックアップコンテンツが好きすぎて全記事ここにスライドさせていたのですがこれも重たい原因みたいです。

ピックアップコンテンツ自体を外した結果、モバイルの速度は「5」向上しました。

 

まめやろー
まめやろー
カッコいいからって無闇に使いすぎました(笑)

 

そもそも「このピックアップコンテンツは意味がない・誰もクリック」みたいな記事も見かけましたが僕としてはかっこいいので使っていきたいです。見られるか見られないかだけではなく自分が好みだから使いたい(笑)

しかし全記事表示するようなことはせず最低限の数にしていきます

 

まとめ

JIN公式に載っていることを試した結果最初のモバイル表示速度「25」という壊滅的な遅さから「70」まで。

 

パソコン表示速度に関しては「80」から「95」に改善することができました。

 

もちろん目指すところは「90」以上にしたいですがブログ表示速度ばかりこだわって記事書かなくなってしまう気もするので、この辺でやめておきます。

 

まめやろー
まめやろー
意外と有名ブロガーさんのブログもモバイル「50」前後の人多かったのでそこまで神経質にならなくてもいいのかなって思ってます(記事などのボリュームなどは全然違くて比べちゃいけないのかもしれまえんが)

 

表示速度に困っている方は参考にしてみたください。以上が自分が試したブログ速度改善のためにやってみたことです!