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

Created:

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. 参考