こんにちは、みかおばです😊
サーチコンソールで「ページエクスペリエンス不良」と出てドキッとしましたが、
PageSpeed Insightsを確認してみたらCLSが赤判定に…。
今回あらためて見直した内容を、自分用の備忘録としてまとめておきます。
⚡ きっかけ
サーチコンソールで「ページエクスペリエンス不良」と表示。
調べてみると、PageSpeed InsightsのCLS判定が原因になっていました。
📱 PageSpeed InsightsでCLSを測定
- モバイル：CLS 0.4 → 不合格（赤）
- PC：CLS 0.14 → 合格ラインぎりぎり（黄色）だが不合格扱い
👉 LCPやFCPは良好だったので、ズレ（CLS）のみが問題でした。
📢 サーチコンソールで「ページエクスペリエンス不良」
- 不良＝ペナルティではなく「改善通知」
- 表示のズレ（CLS）が原因
- 今後は調整を進めつつ再発を観察
🧐 CLSってなに？
CLS（Cumulative Layout Shift／累積レイアウトシフト）は、ページ読み込み時に文字や画像・広告が「ガタッ」と動く現象を数値化したものです。
例：
📱 広告が後から出て本文が下がる
🖼 画像のサイズ指定がなく後から確定する
🔤 フォントが切り替わって段落がズレる
📊 スコア目安
- 0.1以下 → 良好
- 0.25以下 → 合格ライン
- 0.25以上 → 不便（要改善）
👉 今回はモバイル0.4・PC0.14で不合格判定でした。
🖼 確認・見直したポイント
画像最適化（EWWW Image Optimizer）
- ✅ WebP変換 ON（画像を軽量化して表示速度を改善）
- ⛔ 遅延読み込み OFF（不具合あり）
💡 補足
EWWW Image Optimizerはココナラで外注して設定してもらいました。
広告（Google AdSense）
- 自動広告は継続（収益優先）
- CLSゼロは難しいため、Cocoonの「広告スペースを確保」ONで調整
- 手動広告にする場合は枠を確保（例：
min-height:280px;）
Cocoon設定
- サムネイル比率は16:9で統一済み
- 通知が来たら更新（手動アップデートは不要）
- 広告スペース確保ON
- 投稿ページの関連記事ナビカードは削除 → CLS原因を減らす
💡 補足
Cocoonには「高速化」関連の設定もありますが、CLS対策とは別領域。
👉 別記事でまとめる予定です。
フォント設定（Cocoon）
- サイトフォントは「デフォルト（ヒラギノ角ゴ／メイリオ）」を使用
- 端末標準フォントなので切り替えによるCLSを軽減
✅ チェックリスト（ロリポップ＋Cocoon環境）
📱 PageSpeed Insights
☑ CLSを確認（モバイル／PCの両方チェック）
🖼 EWWW Image Optimizer
☑ WebP変換 ON
☒ 不足寸法追加 → 遅延読み込みとセットのためOFF
☒ 遅延読み込み OFF（不具合あり）
💰 Google AdSense
☑ 自動広告 継続
☑ Cocoon「広告スペースを確保」ON
🛠 Cocoon設定
☑ サムネイル比率 16:9
☑ 通知が来たら更新（手動は不要）
☑ 投稿ページ関連記事ナビカード → 削除
✍️ フォント設定
☑ デフォルト（端末標準フォント）でCLS軽減
🎯 まとめ
- CLSは広告・カード・フォントなど複数要因が絡む
- 今回はモバイル0.4・PC0.14で不合格判定
- LCP・FCPは良好だったので速度面は問題なし
- ロリポ×Cocoon環境では
🖼 WebP変換
📐 サムネイル16:9統一
📢 広告スペース確保ON
🗑 投稿ページ関連記事削除
🔎 フォントをデフォルトで表示
このあたりを押さえれば、実用的に十分運用できる
🔗 関連リンク
私はロリポップ＋ムームードメインでブログを運営しています。
同じ環境を試してみたい方は、以下からチェックしてみてください😊
🖥 レンタルサーバー：ロリポップ公式
🌐 ドメイン取得：ムームードメイン公式
🛠 WordPress設定や高速化を外注するなら：ココナラ公式
📚 Core Web VitalsやSEO改善をプロに相談するなら：エクロール公式（SEOコンサル）
おまけ：自分用メモ（CSS）
※自分のブログ調整用にまとめたCSSメモです。詳しい解説はありませんが、同じように困っている方の参考になれば☺️
/* 広告の高さを確保 */
.adsbygoogle {
display: block !important;
min-height: 250px;
}
/* ロゴの高さを固定 */
.site-logo-image,
.header-site-logo-image {
max-height: 60px;
height: auto;
}
/* ナビカードのサムネ比率を固定 */
.navi-entry-cards .navi-entry-card .card-thumb {
aspect-ratio: 16 / 9;
}
/* 記事カードのサムネ比率を固定 */
.entry-card .entry-card-thumb {
aspect-ratio: 16 / 9;
}
コメント