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