「CLS に関する問題: 0.1 超（パソコン）」というのは、Google Search Console（またはPageSpeed Insights）で報告される Core Web Vitals の CLS（Cumulative Layout Shift）指標に関するものです。
目次
CLS（Cumulative Layout Shift）とは
- ページの読み込み中や操作中に、コンテンツが意図せず動いてしまう現象を数値化した指標です。
- 例：広告や画像が遅れて読み込まれて、文字が押し下げられる／ボタンが動く など。
- CLS 値の目安（公式基準）：
- 良好: 0.1 以下
- 改善が必要: 0.1 超 ～ 0.25 以下
- 不良: 0.25 超
「改善が必要」「不良」に分類されている場合は、改善しましょう。
参考（公式）:
Google Web.dev – Cumulative Layout Shift (CLS)
https://web.dev/cls/
改善のための主な方法
CLS の原因は「要素が後から読み込まれて押し出す」ことなので、以下を確認してください。
1. 画像・動画に width / height を指定する
<img>や<video>に 明示的なサイズを指定。- または aspect-ratio を CSS で指定。
2. 広告や埋め込みコンテンツの領域を確保
- AdSense や iframe、SNS埋め込みが原因になりやすい。
- CSS で事前に固定の枠サイズを予約しておく。
3. Webフォントの FOUT/FOPT 対策
- フォント切り替えで文字サイズがズレることがある。
font-display: optionalやswapの利用を検討。
4. レイアウトを変えるアニメーションを避ける
- CSS で
topやleftではなくtransformを使う。
具体的な確認方法
- Google Search Console → 「エクスペリエンス」または「ウェブに関する主な指標」レポートで該当 URL を確認。
- PageSpeed Insights または Lighthouse を実行 → CLS の原因となる要素を特定。
- 該当ページの 画像・広告・フォント読み込み処理を修正。
この画面で表示される指標は「過去28日分の統計」となっています。修正してもすぐには反映されないため、一定期間改善した指標を継続する必要があります。
まとめ
「CLS 0.1 超（パソコン）」は、ページのコンテンツが読み込み中にズレてしまうため「改善が必要」と判定されています。画像や広告のサイズ指定、フォント・アニメーションの見直しをして改善しましょう。
コメント