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

すべてのカテゴリ

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

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

1. はじめに Web Vitals patterns (https:// web.dev/patterns/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%; } - - - - - CSS ここまで - - - - -このスタイルは main.css というファイルに書いて、HTML側から <link> 要素を使って読み込みます。 - - - - - HTML ここから - - - - -<img width="256" height="144"   srcset="foo.
0
カバー画像

ファーストビューに配置した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
2 件中 1 - 2
有料ブログの投稿方法はこちら