cocoonサイトの高速化設定でどれだけ速くなる?サイトスピードを一つづつ検証してみた

wordpress編

こんにちは

cocoonのサイト表示高速化設定により、どれだけ表示が速くなるか検証して
みました。

サイトの表示速度は、速い方がSEO的に有利だし、サイトに訪れた人にも
気持ちよく閲覧してもらいたいので、できるだけ速くしたいものです。

Googleさんによると、サイト表示が3秒以内、PageSpeed Insights
のスコアが80以上が理想と言われています。

け~さん
け~さん

自分で見ていても、表示が速い方が気持ちいいでしょう?

それで、みんな表示速度を上げようと、いろいろ試行錯誤してるんです。

代表的な高速化の方法は、

  • 画像の圧縮
  • HTML、CSS、Javascriptなどの圧縮
  • キャッシュの利用
  • Lazy Load(画像の遅延読み込み)
  • サーバー側の設定確認(見直し)

などですが、それぞれの対応方法などについては、別の記事でまた詳しく取り上
げてみたいと思います。

と言うことで、今回は、cocoonでできる高速化についてのみ検証してみます。

スポンサーリンク

cocoonでできるサイト高速化

cocoonのサイト高速化は、wordpressのダッシュボード⇒cocoon設定⇒高速化
で設定します。

cocoonでできるサイト高速化項目は、

cocoonサイト高速化項目
  • ブラウザキャッシュの有効化
  • HTML、CSS、JavaScript縮小化
  • 遅延読み込み
  • Googleフォント、WEBフォントの非同期読み込み

以上です。

検証の前に、すべての高速化項目を無効化した状態でテストした数値を確認すると。

パソコンで49ポイント、モバイルで26ポイントと出ています。

け~さん
け~さん

かなり悲惨な数値だけど、これを基準に検証して行きます。

サイトの表示速度は、GoogleのPageSpeed Insightsを使用しまし
た。また、事前読み込み設定はよくわからないので今回は試してい
ません。

ブラウザのキャッシュの有効化

始めに、ブラウザのキャッシュの有効化だけにチェックを入れてみます。

パソコンで58P、モバイルで27Pなので、

パソコンで+9P、モバイルで+1Pそれぞれアップしました。

HTML、CSS、JavaScriptの縮小化

HTMLのみ縮小化

HTMLだけ縮小化してみると

パソコンで65、モバイルで25ですので

パソコンで+16P、モバイルでー1P

はるこ
はるこ

パソコンではかなりスコアアップしたけど、モバイル
では逆にスコアが少し落ちてる。

CSSのみ縮小化

CSSのみ縮小化してみると

パソコンで61、モバイルで21ですので

パソコンで+12P、モバイルでー5P

はるこ
はるこ

CSSも同じような傾向だわね?

JavaScriptのみ縮小化

JavaScriptのみ縮小化してみると

パソコンで62、モバイルで23

パソコンで+13P、モバイルでー3P

け~さん
け~さん

モバイルには、縮小化が逆効果なのかなぁ?

HTML、CSS、Javascriptすべて縮小化

3つすべて縮小化してみると

パソコンで61、モバイルで26

パソコンで+12P、モバイルで±0

はるこ
はるこ

3つすべて縮小しても、スコアがあまり良くならない
のは不思議。

遅延読み込み(Lazy Load)を有効化

遅延読み込みのみを有効化してみます。

パソコンで58、モバイルで23

パソコンで+9P、モバイルでー3P

Lazy Loadはwordpress5.5でも標準の機能となったし、スマホの
描画トラブルの原因になる可能性があるんで、ここでは敢えて
有効化することはおすすめしません。

Googleフォント・WEBフォントの非同期読み込み

Googleフォントのみ非同期読み込み

Googleフォントだけ非同期読み込みを有効化してみると

パソコンで57、モバイルで24

パソコンで+8P、モバイルでー2Pとなりました。

WEBフォントのみ非同期読み込み

WEBフォントのみ非同期読み込みを有効化してみる

パソコンで60、モバイルで25

パソコンで+11P、モバイルでー1Pです。

2つを非同期読み込み

GoogleフォントとWEBフォント2つの非同期読み込みを有効化してみる

パソコンで57、モバイルで23

パソコンで+8P、モバイルでー3P

すべてを有効化してみる

最後に、cocoonのサイト高速化の設定をすべて有効化してみます。

パソコンで60、モバイルで26

パソコンで+11P、モバイルで±0になりました。

検証を表にしてみると、

有効化する項目パソコンのポイント増減モバイルのポイント増減
ブラウザのキャッシュ+9+1
HTML縮小化+16-1
CSS縮小化+12-5
JavaScript縮小化+13-3
HTML、CSS、Javascript+12±0
Lazy Load+9-3
Googleフォント+8-2
WEBフォント+11-1
Google、WEBフォント+8-3
すべて有効化+11±0

という結果になりました。

PageSpeed Insightsのテスト結果は、いつも同じ数値とは限りません。
テストのタイミングでポイントが多少前後することもあります。

まとめ

今回のcocoonのサイト高速化の設定を検証してみて、概ね次のようなことが
わかりました。

検証結果からわかった事
  • パソコンでの高速化にはかなり有効。
  • モバイルの高速化にはあまり効果が見られない。
  • 他の手段(プラグイン等)による画像の圧縮が必要
  • サーバーの高速化設定、見直しも必要
け~さん
け~さん

しかし、改めておじさんのサイトはモバイルに弱い
ってのがつくづく分かった。

はるこ
はるこ

そうね、何とかしないといけないレベルだわ。

サイトスピードについては、今後も改善していこうと思います。
その都度改めて、検証記事を書いてみますのでよろしく。

最後に、cocoonの製作者であるわいひらさんの言葉を引用しておきます。

というか、最後にこういうこと言うと身も蓋もないですが、PageSpeed Insightsで100点を取ろうが、大事なのはサイトの内容です。たとえ、PageSpeed Insightsで50点のサイトだったとしても、内容が良ければ100点のサイトより上位表示されると思います。なので、あまりページスピードにこだわるよりは、コンテンツに注力するのが、正しい時間の使い方だと思います。

cocoon製作者のわいひらさん
け~さん
け~さん

よくわかりますが、ライティング力の無いおじさんは
せめてサイトスピードでも速くしたいと思うのです。

それでは

コメント

タイトルとURLをコピーしました