ブログの表示速度、気になっていませんか？
「なんだか表示が遅い気がする…」
「PageSpeed Insightsで点数が低くて不安…」
そんなとき、Cocoonテーマを使っている方なら、難しい知識がなくても簡単に表示速度を改善できる設定があります。
実はCocoonには、管理画面からチェックを入れるだけで有効にできる高速化設定が用意されています。
今回は、初心者の方でも迷わずできるCocoonの高速化設定を、意味もあわせて分かりやすく解説します。
「まず何を設定すればいいの？」という方は、この記事のチェックリスト通りに進めてみてください。
高速化設定をする前に確認すること
この記事で紹介する設定は、Cocoonの管理画面から簡単に設定できるものです。
操作手順は以下の通りです。
WordPress管理画面 → Cocoon設定 → 高速化
ここから、ブラウザキャッシュ、CSSとJavaScriptの縮小化、Lazy Load設定にチェックをいれて、変更を保存するだけで、すべて設定できます！
高速化設定を行う際の注意点
Cocoonの高速化設定には、プラグインやサーバー側の高速化機能と重複する設定があります。
同じ機能を複数の場所で有効にすると、サイトの表示や動作に不具合が生じたり、表示速度に影響する場合があります。
高速化設定を行う際は、現在使用しているプラグインやサーバーの設定を確認し、同じ機能を重複して有効にしないよう注意しましょう。
表示速度を改善する高速化チェックリスト
✅キャッシュを有効にする にチェック
✅CSSを縮小化する にチェック
✅JavaScriptを縮小化する にチェック
✅Lazy Loadを有効にする にチェック
✅Googleフォントの非同期読み込みを有効にする にチェック
Cocoonの高速化設定をする方法
ブラウザキャッシュを有効にする
✅キャッシュを有効にする にチェック
ブラウザキャッシュとは、一度表示したページの情報を、訪問者のブラウザに一時保存しておく仕組みです。
これを有効にすると、
- 2回目以降の表示が速くなる
- サーバーへの負荷が減る
というメリットがあります。
特に、リピーターが多いブログでは効果を実感しやすい設定です。
CSS・JavaScriptを縮小化する
✅CSSを縮小化する にチェック
CSSは、ブログのデザインを整えるための専用の言語です。
縮小化すると、余分な空白や改行が削除され、ファイルサイズが軽くなります。
結果として、
- 読み込み時間が短縮
- 表示速度の改善
につながります。
✅JavaScriptを縮小化する にチェック
JavaScriptは、動きや機能を制御するための専用の言語です。
縮小化することで、
- ファイル容量が減る
- 読み込みが速くなる
といった効果があります。
初心者の方は、まずはチェックを入れて様子を見るでOKです。
Lazy Loadを設定する
✅Lazy Loadを有効にする にチェック
Lazy Loadとは、画面に表示されるタイミングで画像を読み込む仕組みです。
ページを開いた瞬間にすべての画像を読み込まないため、
- 初期表示が速くなる
- 表示速度スコアの改善につながる
WordPress 5.5から、画像のLazy Load（遅延読み込み）が標準機能になりました。
CocoonのLazy Loadを有効にすると、WordPress標準のLazy Loadではカバーしていないエリアの画像にも対応できます。
例えば、新着・人気・カルーセル・おすすめカード・ナビカードの「NO IMAGE」サムネイルなどが対象です。
Cocoonの高速化設定では、必要に応じてLazy Loadを有効にしましょう。
✅Googleフォントの非同期読み込みを有効にする にチェック
Googleフォントは便利ですが、読み込みに時間がかかると表示が遅くなる原因になります。
非同期読み込みを有効にすると、
- 文字表示を待たずにページが表示される
- 体感速度が向上する
というメリットがあります。
そして最後に、「変更を保存」を忘れずにクリック！
高速化設定後に表示速度を確認する
サイトの表示崩れがないか確認する
高速化設定後は、
- デザインが崩れていないか
- 表示がおかしくなっていないか
を必ず確認しましょう。
Google PageSpeed Insightsで表示速度を測定する
問題がなければ、ブログ記事の表示速度を確認できる、Google PageSpeed Insightsで再チェックするのがおすすめです。
まとめ｜Cocoonの高速化設定で表示速度を改善しよう
今回は、初心者向けに、Cocoon設定だけでできる表示速度改善方法をご紹介しました。
私も、思った以上に簡単に設定できたので、設定がまだの方はやってみることをおすすめします！
- ブラウザキャッシュを有効にする
- CSS・JavaScriptを縮小化する
- Lazy Loadを有効にする
- Googleフォントを非同期読み込みにする
どれもチェックを入れるだけで設定できるものばかりです。
表示速度が気になる方は、まずはCocoonの高速化設定から試してみてください。
サイトの表示速度を改善する方法をまとめて紹介した記事はこちらからご覧ください。
