コアウェブバイタル CLS対策コーディング #CSS

そもそもCLSとは？

2021年5月にGoogle検索結果のランキング要素に新たなページエクスペリエンスが追加されました。
評価の対象としてコアウェブバイタルという３つの指標が定められました。
3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。

その中で、おそらくマークアップ手法で最も影響を受けやすいものがCumulative Layout Shift、略してCLSです。
従来のコーディングだと今までどちらでもできた表現が、はっきり良否が分かれるため逆にやりがいを感じるかもしれません。

アクセス解析担当者から、サーチコンソール上のエラー報告を受けCLSの存在を知りました。
フロント部分の原因と知り調査を開始しました。
改善前の私のコーディングはレスポンシブサイトを意識した常にレイアウトが伸び縮みするようなCLSエラーを代表するような悪い例でした・・・

ここからは実際にエラーの解消に役立った具体的なコーディング手法をいくつか紹介します。
基本的には、HTMLとCSSの書き方を気をつけるだけで改善できます。

画像の読み込みは遅れて行われるため、widthとheightを指定しないと画像の大きさのままに表示領域を変えてしまいます。
imgタグにwidth属性とheight属性を指定していきます。

<img src="hoge.jpg" width="200" height="100">

モバイルやタブレットはCSSで対応しましょう。

@media screen and (max-width: 767px) {
    img {
        width: 100px;
        height: 50px;
    }
}

タブレットは、現状では評価の対象外なので意識する必要は無さそうです。
また対策として、CSSをインラインで書いた方が良いという声もありますが、通常の外部ファイル化でもエラー解消出来たので問題ないです。

デスクトップもCSSで対処できますが、width属性とheight属性を指定しなかった場合に別の警告が出てしまうので必ず指定しましょう。

幅や高さを固定しても問題なさそうな要素はなるべくwidthやheight指定しましょう。
領域を確保した親コンテンツがある状態で中身をレイアウトしていくのが理想です。

以下は、ボタンのスタイル例の一部です。
しっかりとwidthとheightで領域を確保した上で中央寄せします。
良くない例で言えば、paddingやmax-widthなどの可変してしまうプロパティのみでの構築です、要素が可変するものはレイアウトシフトの原因になります。

    display: flex;
    justify-content: center;
    align-items: center;
    widht: 200px;   
    height: 100px;

Webサイトでよく使用されているスクロールしてもついてくる追従ヘッダーです、初めからposition: fixedで置いてしまうと高さがないためレイアウトシフトの原因になります。
スクロール後に固定されるように工夫が必要です、JSなどを使用し読み込み後の固定にすると良いです。

結論から言いますと、きちんと扱えばWebフォントは使っても大丈夫です。
中にはフォントの読み込みに時間がかかり、レイアウトシフトしてしまうこともあるので注意は必要です。

Google公式の検証ツールです、スコアの表示に加え実際のズレが発生している箇所を知らせてくれるので、基本的にはこちらを確認しながら進めます。

デベロッパーツールを開いたら、Performanceタブに移動します。
リロードの矢印アイコンをクリックして、ページの読み込みが終わったらStopを押します。
ものすごく細かな静止画で、レイアウトシフトをしている箇所を確認することができます。

Chrome拡張機能です。
検証が非常に楽でページのCumulative Layout Shiftスコアを一瞬で表示してくれます。

以上となります、最後までご覧戴きありがとうございました。