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

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

Web Vitals

<script>タグのdefer/async属性について(その2:実例)

script タグの属性によって、JavaScript ファイルがどのように読み込まれるのか、3パターンを実際のWebページを使って比べます。

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …