kuronekopunk https://blog.hatena.ne.jp/kuronekopunk/ ノンカフェインであなたにやさしい https://akinobu.net/ HTML CSS CoreWebVitals Core Web Vitalsの値、気にしてますか？ レスポンシブでCLS対策をする時の対応を書きます。 CLSとは？ Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。 developers-jp.googleblog.com 画像の読み込みや、コンテンツの遅延読み込みなどでサイトの要素がズレる量のことです。 基本的には画像サイズを指定してあげることでズレはなくなります。 Tip: Set width & height on … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fakinobu.net%2Fentry%2F2020%2F12%2F11%2F232441" title="レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策 - ノンカフェインであなたにやさしい" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kuronekopunk/20201211/20201211231400.png Hatena Blog https://hatena.blog 2020-12-11 23:24:41 rich https://akinobu.net/entry/2020/12/11/232441 1.0 100%