ヘッダー背景画像の表示が遅い
- Qヘッダー背景画像がなかなか表示されないんですが。
- A
背景画像の表示は一番後回しにされます。
他のすべての画像が表示されてからでないと表示されません。そこでプリロードで先読みさせて優先度を上げます。
Cocoonの場合はhead-insert.phpに以下のように追記します。<link rel="preload" href="ヘッダー背景画像ファイルのURL" as="image" fetchpriority="high">こちらはwebp画像の場合です。
<link rel="preload" href="ヘッダー背景画像ファイルのURL" as="image" type="image/webp" fetchpriority="high">
背景画像は一番後回しにされる
同じ画像でも背景画像は一般の添付画像とは扱いが異なります。
背景画像は一番後回しにされ、他の画像がすべて表示されるまで待たされます。
ヘッター背景画像の場合も同様です。
たとえ他の画像をLazy Loadで遅らせたとしても優先度は変わりません。
なので写真を多数添付したサイトでは特に大きな影響が出ます。
トップに貼られた画像がなかなか表示されないので体感的に遅く感じます。
あくまで体感の問題でPageSpeed Insightsの結果を左右するのかは不明です。
これは仕様らしいので仕方ないと思いましたが、解決方法がありました。
ヘッダー背景画像をプリロードして事前読み込みさせるのです。
背景画像を優先表示させる方法
Cocoonの場合はhead-insert.phpか、設定のアクセス解析・認証で以下を追記します。
rel=”preload”でヘッダー背景画像を先読みするように指定。
as=”image”は対象が画像である事を示します。
<link rel="preload" href="画像ファイルのURL" as="image" fetchpriority="high">私の場合はConverter for MediaでWebP画像を表示するようにしてます。
JPEG画像と併用する場合はこのように追記するといいそうです。
<link rel="preload" href="https://kuromin.net/wp-content/uploads-webpc/uploads/2025/08/kurominadv_title.jpg.webp" as="image" type="image/webp" fetchpriority="high">参考
送信中です
×
※コメントは最大500文字、5回まで送信できます