HTML,CSSの記述によってCLSのスコアがどう変化するか実験するページ

1. このページの目的

HTML,CSSの記述によってCLSのスコアがどう変化するか実験する。

2. メモ

• HTML, CSS は自由に書き換えて実験する。
• Core Web Vitals といった Chrome 拡張機能を使って CLS のスコアを確認する。
• 毎回、Chrome の新規タブでこのページを開くこと。そうしないと CLS のスコアが 0 くらいしか算出されない。
• 日本語の長い文章がページ端で改行されると、その下の要素に CLS が起きるようだ。

3. ダミー コンテンツ

Dummy patrol cars will be set up beside motorways to frighten speeding motorists.

何もコンテンツがないと実験にならない。

何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。。何もコンテンツがないと実験にならないので、ダミーのコードを表示しておく。

何もコンテンツがないと実験にならない。

<img id="img1" src="sample-700.jpg"
     alt="" loading="lazy"
     srcset="sample-550.jpg 550w,
             sample-700.jpg 700w"
     sizes="100w">

#img1 {
  max-width: 700px;
  width: 100%;
  /*height: auto;*/
  aspect-ratio: 8 / 5;
}

4. 参考