ヘッダー背景画像の表示が遅すぎる

ヘッダー背景画像の表示が遅い

背景画像は一番後回しにされる

同じ画像でもヘッダー背景画像は一般の添付画像とは扱いが異なります。

背景画像やヘッダー背景画像は表示が一番後回しにされます。他の添付画像がすべて表示されるまで待たされるため、LCPを悪化させる原因になります。他の画像をLazy Loadで遅らせても優先度は変わりません。なので写真を多数添付したサイトでは特に大きな影響が出ます。

ゆえにヘッダー背景画像の使用は避けた方がいいと言われてます。これはWordPressの仕様なので仕方ないと思いましたが、解決方法がありました。ヘッダー背景画像にプリロードを設定して事前読み込みさせるのです。

背景画像を優先表示させる方法

Cocoonの場合はテーマファイルエディターからhead-insert.phpにプリロードの設定を書き加えます。（Cocoon設定のアクセス解析・認証画面でも可能ですが、head-insert.phpの方が無難です。）

<link rel="preload" href="画像ファイルのURL" as="image" fetchpriority="high">

rel=”preload”でヘッダー背景画像を先読みするように指定。as=”image”は対象が画像である事を示します。さらにfetchpriority=”high”により最優先でダウンロードされます。

自分の場合はWPプラグインのConverter for Mediaで自動的にWebP画像を表示するようにしてますが、URLにjpeg画像を指定してもWebP画像に切り替えて読み込んでくれるようです。

参考

たったの一行でサイトの読み込み速度を実質10倍以上にする方法
https://itokoba.com/archives/6594

dns-prefetchとpreconnectは同じlinkタグで使用しない
https://zenn.dev/sugamaan/articles/817cada3efc780

【違い】dns-prefetch、preconnect、prefetch、preload、prerender
https://penpen-dev.com/blog/%E3%80%90%E9%81%95%E3%81%84%E3%80%91dns-prefetch%E3%80%81preconnect%E3%80%81prefetch%E3%80%81preload%E3%80%81prerender/

Fetch Priority API を使用してリソースの読み込みを最適化する
https://web.dev/articles/fetch-priority?hl=ja

画像の取得の優先度を改善！fetchpriority属性で取得順を調整しよう
https://tech.arms-soft.co.jp/entry/2024/07/31/090000

LCP改善における画像最適化の全手法を徹底解説
https://www.landinghub.net/columns/lcp-image-improvement