画像のベストCLS実践

GoogleがそのアルゴリズムにコアWebの重要なメトリクスを導入するために、その6月の目標に近づくにつれて、私は、コミュニティが何を期待するかについて理解するのを助けるのを始めるのが素晴らしいと思いました.
3つのコアWeb vitalsがあります.LCP (最大のコンテントペイント)CLS (累積レイアウトシフト)FID (最初の入力遅延).しかし、私は、それが消費して、実行するのが簡単であるので、私がイメージから始めると思いました.
最初に、CLSが実際にあるものについて話しましょう.グーグルによると

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

レイアウトのシフトは、ページ上の要素がフレームレンダリング中にその位置を移動し、ユーザーエクスペリエンスに大きな影響を与えることができます.そのコンテンツは、ページの負荷中または後にジャンプいくつかのウェブサイトでよく見られる.
レイアウトシフトの最大の原因の一つは画像です.
この記事を読んでいるほとんどの人は、反応するウェブデザインパターンが来る前に、常に最高の練習を加えることを確信していますwidth and height 画像への寸法.
応答ウェブに続いて、我々は静電気を除去するように勧められたwidth and height 属性と、より流動的に画像を扱うことに焦点を当てる

img {
  height: auto;
  max-width: 100%;
}

上記のルールは、イメージが変化するために優雅に対応するために数え切れないほどの時間を使用されているwindow サイズまたは装置局面.
CLSの導入により、我々は現在、最小限のレイアウトシフト/再配置で高速レンダリングを可能にするためにわずかに異なるイメージを処理するように助言されている.
ここでは、あなたのCLSが灯台監査を走らせるとき、あなたのCLSが0に近いままであることを確実とするいくつかのガイドラインがあります

1 .すべてのイメージに幅と高さ属性を確保する

<img src="https://source.unsplash.com/1600x900/?nature" width="1600" height="900" alt="Waterfall" />

ブラウザがこれらの属性を使っているのは、その応答のCSSルールCousinと一緒にアスペクト比を計算することです.

img {
 aspect-ratio: attr(width) / attr(height);
 height: auto;
 max-width: 100%;
}

上記のように、ブラウザは、イメージがどのようにページに配置されるかを理解することができます.ブラウザのスタイルシートとしてあなたのCSSにアスペクト比プロパティを追加する必要はありません.

2 .対応する画像技術で幅と高さを扱え.
あなたが応答画像を使用している場合srcset or <picture> 画像のアスペクト比を計算し、アスペクト比をwidth and height 属性.

<img srcset="large.jpg  1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" src="small.jpg"
alt="A rad wolf" width="16" height="9" />

これは、ブラウザのアスペクト比を理解し、灯台の監査を通過し、まだ別のブレークポイントで画像を処理する応答サイズを使用して

3 .すべての画像をlazyloadedします.
これを扱うための複数のテクニックがありますが、lazy =“load”属性を使用するとmodern browsers .

<img src="https://source.unsplash.com/1600x900/?nature" width="1600" height="900" alt="Waterfall" loading="lazy" />

また、これを使用することができますreally great library 全体的でよくサポートされた方法でイメージの読み込みを処理するか、手動でLQIP テクニック.

4倍以上の画像をプリロードする
もう一つの本当に役に立つテクニックは、折り目より上に置かれるイメージをプリロードすることです.前負荷relatively okay support ウェブ全体で、しかし、あなたは必要とします...

<link rel="preload" as="image" href="/path/to/image" />

これはブラウザをキャッシュし、はるかに高い優先度で画像を要求するので、すぐにブラウザに到着することができます.
また、型属性を指定することもできます.これは、プリロードするリソースについてより正確にすることができます.

<link rel="preload" as="image" href="/path/to/image" type="image/webp" />

新しいフォーマットでイメージを提供していることを確認します
これは少しハードを管理することができますが、いくつかのCDNは、その場で特定の形式で画像を設定する有用なクエリ文字列を提供します.WebPはおそらく最も一般的ですが、さらに最適化を提供することができますAvifのような他の形式があります.大したことだcomparison chart あなたが見てみたい場合は曇りで.
いくつかのマイナーなヒントやトリックも含まれます.

CDNを通じて画像を提供する

イメージがサーバー上で適切にキャッシュされることを保証する

画像が正しくサイズを確保すること、つまり300 x 150スロットで3000 x 1500の画像をレンダリングしていないこと.

私は、これが助けることを望みますtouch with me over email 何か質問があれば、無料のコンサルティングスロットを提供します!