Web

Web Vitals patterns の Responsive Images を試してみました

投稿日:2021年10月5日 更新日:

1. はじめに

Web Vitals patterns に載っている「Responsive Images」を実際に試してみました。

Web Vitals patterns では、CWV (Core Web Vitals) に悪影響を与えない HTML の書き方が紹介されいます。

レスポンシブな画像を表示するタグは、どのように記述されているのでしょうか?

2. CSS と HTML

Web Vitals patterns の Responsive Images では、3つの書き方が紹介されていましたが、今回は 2つ目(srcset属性で画像サイズ指定に w を使うパターン)を試します。

その2つ目の Responsive Images を真似て、以下の CSS と HTML を記述したページを用意しました。

CSS

img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 1024px;
  width: 100%;
}
  • このスタイルは main.css というファイルに書いて、HTML側から <link> 要素を使って読み込みます。

HTML

<img width="256" height="144"
  srcset="foo.256w.jpg 256w,
          foo.512w.jpg 512w,
          foo.1024w.jpg 1024w"
  src="foo.256w.jpg"
  alt="test images">

3. Responsive Images を観察する

Chrome ブラウザのデベロッパーツール(DevTools)の [Performance] パネルで解析しました。

このとき、ウィンドウの幅は 1069px でした。

解析時のウィンドウサイズ

解析結果は以下となりました。

DevTools [Performance]パネルの解析結果

この結果を元に、このページの読み込み時に起きた動きを順番に書いていきます。

  1. HTMLファイルが読み込まれます。
  2. HTML がパースされます。
  3. CSSファイルがリクエストされます。
    • スタイル(CSSファイル)の処理が完了するまで、レイアウト (Layout) やペイント (Paint) 処理がブロックされます。
  4. 画像ファイルがリクエストされます。
    • まだCSSファイルを読み込んでないので、HTMLファイルだけから、どの画像ファイルを使うか判断されています。そのウィンドウの幅に近い画像ファイルが選ばれることによって、無駄に大きな画像ファイルを読み込んで時間が掛かってしまうことが避けられます。…… (A)
    • 今回は幅が、1024px の画像が選択されました。
    • 画像ファイルのリクエスト・ダウンロード処理は、HTMLパースとは平行に実行されます。
  5. CSSファイルのダウンロードが完了します。
  6. 画像ファイルのダウンロードが完了します。
  7. CSSファイルに記述されたスタイルをパースします(Recalculate Style, CSSOMの構築)。
  8. レイアウトの処理を行います(Layout)。
    • CSS(スタイル)から画像の表示サイズを算出します。
    • width: 100%; height: auto; というスタイルの記述から、画像の幅と高さが決定するので、レイアウトシフトが防止できます。…… (2)
  9. 画面に描画します(Paint)。

4. Web Vitals への影響

  • srcset属性(3 の (A) の部分)により、LCP (Largest Contentful Paint) という指標を改善します(その画像が LCP の対象であると判断された場合)。
  • CSS で 画像のサイズを指定したことにより、CLS (Cumulative Layout Shift) という指標を改善します。

5. その他のメモ

  • 今回は意図的にCSSを外部のファイルにして読み込みましたが、HTMLファイル内に記述した方が速くなります。
  • srcset 属性は「どの画像ファイルをダウンロードするか」を決定します。「画像を表示するサイズ」ではありません。「画像を表示するサイズ」は、width/height属性や CSS の width/height プロパティで決定されます。
  • srcset 属性値を「w」単位で記述した場合であっても、sizes属性が必ずしも必要なわけではありません。CSS で画像サイズを指定しておけばよいです。
  • CSSファイルに画像サイズを指定した場合でも、CSSファイルの読み込みはレンダリングをブロックするため、大抵の場合はCSSファイルのスタイルが適用された後でレンダリングが実行され、<img>タグの部分に画像サイズのスペースが確保されます(画像がダウンロードされる前であっても)。しかし、「スタイルの適用」と「<img>タグの表示」のタイミング(順番)には注意が必要です。CLSを防ぐには、スタイルが先に適用される必要があります。

6. おわりに

<img>タグの srcset 属性や sizes 属性は案外分かりにくいです。Google がベストプラクティスを示してくれることは、非常にありがたいです。

7. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

Chrome

Chrome 78 デベロッパーツールの新機能

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Web

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)

HTTP クッキー(Cookie) をより安全に使用することができる SameSite 属性 について説明します。 目次1. HTTP クッキーの基本動作2. クッキーの SameSite 属性につい …