zukucode
主にWEB関連の情報を技術メモとして発信しています。
other

CLS に関する問題を改善するためのCSSの修正ポイント

Google Search Consoleのウェブに関する主な指標で、「CLS に関する問題: 0.1 超」の問題が発生していたのを、CSSを修正して改善しましたが、そのときの修正ポイントをまとめました。

flexboxは使用しない

よくあるブログのレイアウトに、2カラムや3カラムがあります。

横並びのレイアウトにするために、flexboxを使用していましたが、これが原因の場合があります。

以下のようなイメージです。

<style>
.wrapper {
  display: flex;
  align-items: flex-top;
  max-width: 800px;
}

.column1 {
  background-color: blue;
  color: #fff;
  width: 65%;
}

.column2 {
  background-color: green;
  color: #fff;
  width: 35%;
}
</style>
<div class="wrapper">
  <div class="column1">
    <p>メインコンテンツ</p>
    <p>メインコンテンツ</p>
    <p>メインコンテンツ</p>
  </div>
  <div class="column2">
    <p>サイドバー</p>
    <p>サイドバー</p>
    <p>サイドバー</p>
  <div>
</div>

画面初期表示時に、一瞬ですが、サイドバーがメインコンテンツの下に表示され、1カラムとして表示されてしまうため、CLSの問題が発生します。

対処法として、floatを使用します。

現在ではflexboxやgridが使われるため、floatはほとんど使われることがないと思いますが、flexboxの代わりにfloatを使用すると、CLSの問題は改善します。

<style>
.wrapper {
  max-width: 900px;
}

.column1 {
  background-color: blue;
  color: #fff;
  width: 65%;
  float: left;
}

.column2 {
  background-color: green;
  color: #fff;
  width: 35%;
  float: right;
}
</style>
<div class="wrapper">
  <div class="column1">
    <p>メインコンテンツ</p>
    <p>メインコンテンツ</p>
    <p>メインコンテンツ</p>
  </div>
  <div class="column2">
    <p>サイドバー</p>
    <p>サイドバー</p>
    <p>サイドバー</p>
  <div>
</div>

広告の領域をあらかじめ確保する

広告が画面表示後に読み込まれますが、広告が表示されると広告サイズの分、レイアウトが移動してしまいます。

これを防ぐために、広告を貼っている場合は広告サイズの領域をあらかじめ確保します。

heightで、広告の高さを確保します。

横に移動するという場合はないと思いますので、widthの指定は必要ありません。

<style>
.ad-wrapper {
  height: 300px;
}
</style>
<div class="ad-wrapper">
  <!--広告のコード-->
</div>

画像サイズを明示的に指定する

広告と同じように、画像が表示されると、画像サイズの分、レイアウトが移動してしまいます。

対処法として、画像サイズ(width属性とheight属性)をあらかじめ明示的に指定します。

<img width="300px" height="200px" src="画像.png" />

他にもWebフォントの読み込みなどを変える方法などがありますが、シンプルなレイアウトのブログであれば、上記3点を修正すれば改善することが多いです。

other

関連記事