👉ふるさと納税「日用品」は無駄がなくておすすめ♪

【Cocoon】5分でできる!高速化おすすめ設定3つ★プラグイン不要!

Cocoonサイト高速化|おすすめ設定3つブログ
なな
なな

WordPressのテーマ Cocoonをお使いのみなさん!

サイトの高速化設定はお済みですか?

かぼすくん
かぼすくん

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

なな
なな

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

こんな方に
  • WordPress テーマ Cocoonを使っている
  • サイトの読み込みスピードを上げたい
  • SEOに強いサイトにしたい
スポンサーリンク

①サイト高速化設定

飛行機

CocoonではLazy Load(オフスクリーンの遅延読み込み)をはじめ、HTML、CSS、JavaScriptの縮小化などがプラグインなしで簡単設定できるようになっています。

高速化設定方法

WordPress管理画面で、「Cocoon設定」→「高速化」を選択します。

Cocoon管理画面スクリーンショット

基本的には以下の項目全てにチェックを入れると良いです。
(ただし、プラグインなどに同様の機能がある時はどちらかにしてください)

  • ブラウザキャッシュの有効化
    (有効にすることで2回目以降の読み込みが速くなる)
  • HTMLを縮小化する 
  • CSSを縮小化する 
  • JavaScriptを縮小化する 
  • Lazy Loadを有効にする 
    (見えない部分の画像の読み込みを遅延させる)
  • Googleフォントの非同期読み込みを有効にする
  • アイコンフォントの非同期読み込みを有効にする

(「事前読み込み設定」はとりあえずデフォルトのままで大丈夫です)

設定したら「変更を保存」をクリックして保存してください。

プラグインで同様の機能があるときはどちらか片方のみONにして重複しないようにしましょう。
逆にこの機能のためにプラグインを導入する必要はありません!

かぼすくん
かぼすくん

Cocoon有能すぎない!?

なな
なな

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

かぼすくん
かぼすくん

あの時はあせったよね💦

トラブルが起きた時には設定の競合も疑ってみてください。

スポンサーリンク

②サムネイルの画像解像度を下げる

タブレット端末

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

サイトトップ画面のサムネイル

(※ちなみに「サムネイル」は親指のツメのことです。
親指のツメほど小さな画像を意味しています)

Cocoonには画像を縮小表示した時に画像が荒くなるのを防ぐために「Retinaディスプレイ対応」という機能があり、デフォルトではONになっています。

この設定をOFFにすることで画像のサイズ(解像度)が下がり、その分ページの読み込みが速くなります。

ただしこの設定をOFFにした時に画像が荒くなるのが気になる方は、Google PageSpeed Insights などで読み込みスピードなどを検証しながら、ONにするべきかOFFにするべきか検討すると良いと思います。

かぼすくん
かぼすくん

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

なな
なな

サムネイル画像が重すぎてPageSpeed Insightsで指摘されてたのが解消しました♪

サムネイルのRetinaディスプレイ対応設定方法

Cocoon設定」→「画像」タブをクリック

Cocoon管理画面のスクリーンショット

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

Cocoon管理画面のスクリーンショット

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

ノートパソコン

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

なな
なな

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

かぼすくん
かぼすくん

使用しないCSSが大量に生成されていたんだよね

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

なな
なな

↑デバイスフォントとWEBフォントの違いや種類についても解説しています♪

サイトフォントの設定方法

Cocoon設定」→「全体」タブをクリック→スクロールして「サイトフォント」の「フォント」から選択します。
→デバイスフォントを選択したら「変更をまとめて保存」をクリックして保存してください。

Cocooフォントの設定

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

Cocoonフォント

Cocoonの高速化設定まとめ

すぐできる設定3つ
  • 高速化設定をする
  • サムネイルのRetinaディスプレイ設定をOFFに
  • フォントはデバイスフォントを選択
なな
なな

今回はすぐできるCocoonの高速化設定について紹介しました!

このような設定変更も含めて、Google PageSpeed Insightsで、モバイルスコア(Google Adsenseあり)を30→91に上げることに成功しました。

なな
なな

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

かぼすくん
かぼすくん

気になる方はまた覗いてみてね♪

なお、検索エンジンに評価される記事を作りたい方、わかりやすい文章が書けずに悩んでいるには、こちらの本がおすすめです↓

2022/4/22にアップデート・エディションが発売されました。
「4つの検索意図」「E-A-T」「YMYL」に関する解説が新たに追加されています。 

なな
なな

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

かぼすくん
かぼすくん

キャラが濃いのが面白い!

そして必要なことはおおむね学べたのでオススメします!

最後まで読んでいただきありがとうございました^^

他の記事もぜひ♪

ブログや副業、節約、貯蓄、投資etc…経済的自由を目指すコミュニティ「リベシティ」の口コミ
▶︎リベシティの感想と魅力を伝えたい!退会するけど…

ブログランキングサイトについて
▶︎にほんブログ村・人気ブログランキングのメリットと使い方
▶︎ブロガーに聞いてみた!ブログのランキングサイト登録してる?実態を調査!

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