
WordPressのテーマ Cocoonをお使いのみなさん!
サイトの高速化設定はお済みですか?

Cocoonには設定するだけでサイトを高速化してくれる機能があるんだyo!

今回は設定だけでサクッとできる「サイト高速化」&「おすすめ設定」について解説します!
①サイト高速化設定

CocoonではLazy Load(オフスクリーンの遅延読み込み)をはじめ、HTML、CSS、JavaScriptの縮小化などがプラグインなしで簡単に設定できるようになっています。
高速化設定方法
WordPress管理画面で、「Cocoon設定」→「高速化」を選択します。

基本的には以下の項目全てにチェックを入れると良いです。
(ただし、プラグインなどに同様の機能がある時はどちらかにしてください)
(「事前読み込み設定」はとりあえずデフォルトのままで大丈夫です)
設定したら「変更を保存」をクリックして保存してください。
※ プラグインで同様の機能があるときはどちらか片方のみONにして重複しないようにしましょう。
逆にこの機能のためにプラグインを導入する必要はありません!

Cocoon有能すぎない!?

「EWWW image optimizer」というプラグインでLazy LoadをONにしたら競合してしまい、画像が全部非表示になったことが…!

あの時はあせったよね💦
②サムネイルの画像解像度を下げる

トップページや記事下の関連記事欄などで記事のアイキャッチ画像(サムネイル)が縮小して表示されますが、その解像度が高すぎてサイトが重くなることがあります。

(※ちなみに「サムネイル」は親指のツメのことです。
親指のツメほど小さな画像を意味しています)
Cocoonには画像を縮小表示した時に画像が荒くなるのを防ぐために「Retinaディスプレイ対応」という機能があり、デフォルトではONになっています。
この設定をOFFにすることで画像のサイズ(解像度)が下がり、その分ページの読み込みが速くなります。
ただしこの設定をOFFにした時に画像が荒くなるのが気になる方は、Google PageSpeed Insights などで読み込みスピードなどを検証しながら、ONにするべきかOFFにするべきか検討すると良いと思います。

このサイトでは画像の荒さは気にならなかったです!

サムネイル画像が重すぎてPageSpeed Insightsで指摘されてたのが解消しました♪
サムネイルのRetinaディスプレイ対応設定方法
「Cocoon設定」→「画像」タブをクリック

「全体画像設定」までスクロールして、□サムネイルをRetinaディスプレイ対応にする のチェックを外します。
→「変更をまとめて保存」をクリックして保存してください。

③デバイスフォントを使用する

フォントは「デバイスフォント」を使いましょう!

WEBフォント(Mplus 1p)を使ってたらサイトがめちゃ重くなりました……(泣)

使用しないCSSが大量に生成されていたんだよね
最初は原因がわからず大変でした!
詳しくはこちらの記事に
→[使用していないCSSの削減]@font-faceが大量発生|フォント変更で解決!

↑デバイスフォントとWEBフォントの違いや種類についても解説しています♪
サイトフォントの設定方法
「Cocoon設定」→「全体」タブをクリック→スクロールして「サイトフォント」の「フォント」から選択します。
→デバイスフォントを選択したら「変更をまとめて保存」をクリックして保存してください。

選択肢の上から4つがデバイスフォントです。
(WEBフォント)と書いていないものを選びましょう。

Cocoonの高速化設定まとめ

今回はすぐできるCocoonの高速化設定について紹介しました!
このような設定変更も含めて、Google PageSpeed Insightsで、モバイルスコア(Google Adsenseあり)を30→91に上げることに成功しました。

サイトスピード改善に関するその他の方法も記事にしようと思います!

気になる方はまた覗いてみてね♪
なお、検索エンジンに評価される記事を作りたい方、わかりやすい文章が書けずに悩んでいる方には、こちらの本がおすすめです↓
2022/4/22にアップデート・エディションが発売されました。
「4つの検索意図」「E-A-T」「YMYL」に関する解説が新たに追加されています。

会話形式でストーリー展開されていて漫画のようにスラスラ読めちゃう♪

キャラが濃いのが面白い!
そして必要なことはおおむね学べたのでオススメします!
最後まで読んでいただきありがとうございました^^
ブログや副業、節約、貯蓄、投資etc…経済的自由を目指すコミュニティ「リベシティ」の口コミ
▶︎リベシティの感想と魅力を伝えたい!退会するけど…
ブログランキングサイトについて
▶︎にほんブログ村・人気ブログランキングのメリットと使い方
▶︎ブロガーに聞いてみた!ブログのランキングサイト登録してる?実態を調査!