はじめに

最近行っていた案件の中で、CLS対策を行いましたのでそのメモになります。

CLSとは

2021年５月Googleの検索結果のランキングの評価対象として、コアウェブバイタルという３つの指標が定められました。
3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。
その中で、今回はCLSの対策を行いました。
CLS（Cumulative Layout Shift）とは直訳すると「累積レイアウトシフト」の意味になります。
CLSは、ページの視覚的な安定性を測る指標で、読み込みフェーズで予期しないレイアウトのズレがどのくらい発生したかを表します。
詳しくは、下記を参照
https://web.dev/optimize-cls/

CLSの低下の要因

CLS が低下する要因としては、一般的に以下のものが考えられます。
・サイズが指定されていない画像
・サイズが指定されていない広告、埋め込み要素、iframe
・動的に挿入されたコンテンツ
・FOIT/FOUT の原因となる Web フォント
・ネットワークの応答を待ってから DOM を更新するアクション

CLSのスコア

CLSのスコアを0.1以下にすることで、ユーザビリティの向上につながります。
スコア0.1未満が「良好」、0.25以下は「改善が必要」、0.25を超えると「不良」と判断されます。

実装手順

具体的に今回行った具体的な手法を紹介します。
基本的には、画像の要素に対しての領域の確保をHTMLとCSSで行います。

画像領域の確保

imgタグ内にwidth属性とheight属性を指定します。

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

レスポンシブ画面やモバイルは、CSSで対応します。

@media screen and (min-width: 900px) {
  img {
　　width: 100px;
　　height: 200px;
　　}
}

要素の領域の確保

幅や高さを固定しても問題なさそうな要素に対して、領域の確保をします。
div要素などに対しても、画像領域の確保のようにサイズを指定します。

.hoge{
　width: 100px;
　height: 200px;
}

親要素のサイズを設定することで、レイアウトシフトの防止になります。

検証ツール

Lighthouse

Google Chromeの拡張機能になります。
SEOにおける分析レポートが表示されます。
今回は主にLighthouseを使用しました。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

Google Chromeの開発者ツール

開発者ツールのPerformanceタブに移動し、計測します。
細かな静止画が表示され、レイアウトシフトしている箇所を確認できます。

PageSpeed Insights

Googleが提供している公式の検証ツールになります。
スコアの表示とレイアウトシフトされている箇所が表示されます。
しかし、ベーシック認証がされているページは計測することができません。
https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja

所感

・SEO対策の一環としてCLS対策を行いましたが、SEOは奥が深く今後CLS以外にもSEOについて学んでいきたいと思います。
・少しの工夫で、スコアの改善につながり、検索結果の上位表示につながるので突き詰めていきたいと思いました。

参考資料

　　出典：株式会社イーノバ公式ページ　（最終閲覧日：2022年6月15日）
　　　　https://innova-jp.com/core-web-vitals-cls/
　　出典：web.dev　（最終閲覧日：2022年6月15日）
　　　　https://web.dev/optimize-cls/