絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

1 件中 1 - 1 件表示
カバー画像

ファーストビューに配置したLCP対象画像に loading=lazyはいらない?

1. はじめにimg タグ(画像を表示するHTMLタグです)に「lazy という値を指定した loading 属性」を指定すると、その画像はすぐにダウンロードされません。ブラウザで表示している領域 (viewport) に、画像が入ってきたときにダウンロードが開始され表示されます。この動作により、Webページの読み込み&表示が高速化されます。 ところが、ファーストビュー(最初に画面に表示される範囲)上の画像はすぐに表示される必要があるため、loading=”lazy” を指定すると却ってWebページが遅くなってしまいます。 この動作を確認しようというのが、本記事の目的になります。2. 実験環境大きめの画像を画面上部に配置した Webページを用意します。 PC、スマートフォンのどちらからアクセスした場合でも、ファーストビューにこの画像が表示されるようにレイアウトを調整します。また、ファーストビュー上に表示される中で一番サイズが大きい要素がこの画像になるようにします。こうすることで、この画像が LCP (Largest Contentful Paint) の対象となります。今回の解析においても、この画像が LCP (Largest Contentful Paint) の対象となっていることを確認しています。 この画像の img タグに指定する loading 属性値を “eager” (こちらがdefault値です)、”lazy” のそれぞれを指定した場合とで、それぞれ Performance を解析します。この解析には、Chrome ブラウザのデベロッパーツール (DevToo
0
1 件中 1 - 1
有料ブログの投稿方法はこちら