【Web高速化】レスポンシブデザインのLCP

Core Web Vitals (以降、CWV)の指標の一つのLCP（主要なコンテンツの読み込み時間）のスコアが悪い

レスポンシブデザインの中のヒーローイメージが原因なのだが、このような画像のベストプラクティスについて調査してみた

以下の記事のなかで画像とCWVに関することが書かれていたので、自サイトでやれていないことをピックアップしてまとめてみる

www.smashingmagazine.com

レスポンシブ画像

標準のimgタグではブラウザに単一のソースファイルを提供することしかできないが、srcsetとsizes属性を使用するとブラウザがデバイスに適したサイズの画像を提供することができるので、これをちゃんと指定するとCWVの改善につながる

<img src="donut-800w.jpg"
     alt="A delicious pink donut."
     width="400"
     height="400"
     srcset="donut-400w.jpg 400w,
             donut-800w.jpg 800w"
     sizes="(max-width: 640px) 400px,
            800px">

最適なイメージブレークポイントはこのサイト（responsivebreakpoints）を利用するとよい

responsivebreakpoints.com

responsivebreakpointsは、最適な画像ブレークポイントを決定し、レスポンシブ画像のsrcsetコードを生成してくれる

最新の画像フォーマットを利用する

ブラウザは、要素を使用して表示する画像形式を選択できる

この要素は、複数の要素と1つの要素をサポートし、AVIF、WebP、JPEGXLなどのさまざまな形式のソースを参照できる

<picture>
    <source srcset="puppy.jxl" type="image/jxl">
    <source srcset="puppy.avif" type="image/avif">
    <source srcset="puppy.webp" type="image/webp">
    <source srcset="puppy.jpg" type="image/jpeg">
    <img src="puppy.jpg" alt="Cute puppy">
</picture>

画像フォーマットに関してはCloudinaryのwebspeedtestで自身のサイトを検索すると、ページの全ての画像の検査をして、最適な手段を提示してくれるのでそれをみてみるとよい webspeedtest.cloudinary.com

を使用して画像形式の選択を手動で処理する代わりに、acceptヘッダーを使用することもできる

developer.mozilla.org

content-visibility:autoをつかう

content-visibility CSSプロパティは、要素が必要になるまで、ブラウザが要素のレンダリング、レイアウト、およびペイントをスキップする

ファーストビューに入らない部分の大量のレイアウトとレンダリング作業を省略できるのでパフォーマンスが向上する

content-visibility - CSS: カスケーディングスタイルシート | MDN

使用できるブラウザは現在はEdgeとChromeのみ

他参考

https://responsivebreakpoints.com/

https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary

https://github.com/woltapp/blurhash

cloudinary.com