ただいまの人気記事はこれ!TOP15を公開中

【Cocoon】サイト高速化のためにやってみたこと│設定とおすすめプラグイン

Cocoon

このところ、「サイトの表示スピードが遅いなあ」と感じることが多かったので、Cocoonの高速化設定を見直してみました。

その結果、Googleの「PageSpeed Insights」で、パソコンはおおよそ90点前後、モバイルは70点台のスコアがでるようになりました。

PageSpeed Insightsの測定結果

 

モバイルはもうひとがんばりですが、設定の見直し前に比べると、どちらも20点ほど上がりました

サイトの高速化対策 

 

「PageSpeed Insights」のスコアは、計測するタイミングでバラつきがあるので、あくまで目安ではありますが、体感的にもかなり速くなりました。

というわけで今回は、私がCocoonの高速化のためにやってみた方法をお届けします。よかったら参考にしてみてください。

当サイトの基本情報

まずは、このサイトの基本情報からです。

  • さくらのレンタルサーバを使用
  • 画像がとても多い
  • Googleアナリティクスを使用
  • Google AdSenseあり
  • Amazonなどの商品リンクあり
画像の容量は落としていますが、枚数がかなり多いです

Cocoon設定の「高速化」を見直す

まずやったのは、Cocoon設定の「高速化」の見直しです。

Cocoon設定→高速化

高速化する際の注意点

この設定をするときは、1つ注意点があります。

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

最初に「ブラウザキャッシュの有効化」という項目があります。

2018年11月22日以前に、ここにチェックを入れた方は、いったんチェックをはずして保存します。

そのあと、またチェックを入れて保存します。

これはCocoonの仕様によるもので、Cocoon公式サイトでアナウンスされています
2018年11月22日よりあとに、この項目を有効化した方は、この作業は必要ありません。

「高速化」で有効化する項目

ここはすべて「有効化」でよいかと思います。

Cocoon高速化設定1

Cocoon高速化設定2

Cocoon高速化設定3 

Cocoon高速化設定4

ちなみに、私がCocoonを導入したのは2018年の春。その頃に比べると、変わっている部分がいろいろあります。

やっぱり設定の見直しは大事ですね

画像の容量を小さくする

続いて行ったのが、画像の容量を小さくすることです。

このサイトで使っている画像のほとんどは、Photoshopで最適化しているのですが、プラグインを使って、さらに容量を小さくしてみました。

画像の容量を小さくする必要性

画像の容量を小さくすると、画像の表示やサイト全体の読み込みが速くなります。

ちなみに、現在のところ、「PageSpeed Insights」では、画像の容量よりもLazy Loadが有効になっているかどうかがポイントのよう。

・・が、今回の目的としては、サイト全体の表示スピードを上げて高速化することなので、対策してみました。

使ったプラグイン

使ったのは、「EWWW Image Optimizer」というプラグインです。

WoredPressの高速化「EWWW Image Optimizer」で画像を圧縮

これからアップする画像はもちろんのこと、すでにアップロードしている画像も一括で最適化できるプラグインです。

使うのは初めてだったのですが、これ、すごいですね。

ロスレス圧縮というだけあって、見た目はそのままに、容量だけをしっかりと小さくすることができます。

特に、PNG形式の画像には効果抜群ですよ。容量がかなり小さくなります

キャッシュプラグインで高速化

このサイトは「さくらのレンタルサーバ」を使っているのですが、時々、サーバー速度が少し遅いかな?と感じることがあります。

そのような時は、ページキャッシュプラグインを使うと、多少なりとも補える部分があるとのこと。

そこで、Apache系のサーバーでも使用可能な「WP Fastest Cache」というプラグインを導入してみました。

ページキャッシュプラグイン「WP Fastest Cache」

 

Cocoonの場合は、次のように設定します。

Cocoon「WP Fastest Cache」の設定

Cocoon設定の「高速化」にない項目を補うわけですね。

「WP Fastest Cache」のCocoonむけの設定方法は、こちらの記事で解説しています。

【Cocoonの高速化】「WP Fastest Cache」の使い方と設定方法
WordPressテーマ「Cocoon」には、サイトの表示を速くする「高速化」という機能がついています。 これだけでもかなり速くなりますが、足りない部分をプラグインで補うと、さらなる高速化が期待でき...

私が勘違いしていたこと

今回やったことをまとめると、次の3つです。

  • Cocoon設定の「高速化」の見直し
  • 画像の容量を小さくする
  • ページキャッシュプラグインの導入

すでに高速化対策をしている方にとっては、当たり前のことばかりかもしれませんが、私にとっては驚くことばかりでした。

というのも、

  • Cocoon導入時(2018年春~)は超高速だった
  • 画像はサイズを控えめにし、Photoshopで最適化しているのでOKと思っていた

のですね。

正直、「Cocoonは速いし、巨大な画像を使わなければ大丈夫」ぐらいにしか思っていませんでした・・・

アホですみません。

おしまいに

今回は、私がCocoonの高速化のためにやってみた方法をお届けしました。

「自分の思っていた高速化」と「(Googleに)求められる高速化」がここまで違っていたのか・・・というのが正直な感想です。

私がCocoonを導入した当初(2018年春)は、そのままでも「PageSpeed Insights」でかなりのスコアを出していたのですが、1年ほどで、ずいぶんと要求される項目が増えたんだなあと感じます。

サイトの表示スピードがすべてではありませんが、私のように「高速化の設定をしばらく見直していなかった」という方がいましたら、見直しておいて損はないように思います。

ここまで読んでいただきありがとうございます。

スポンサーリンク
Cocoon
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。