ヘッダー背景画像の表示が遅れる
- Qヘッダー背景画像がなかなか表示されないんですが。
- A
背景画像は他のすべての画像が表示されてから最後に表示されます。
他の添付画像をLazy Loadで遅らせても優先度は変わりません。そこでプリロードで先読みさせて優先度を上げます。
Cocoonの場合はhead-insert.phpに以下のように追記します。<link rel="preload" href="ヘッダー背景画像ファイルのURL" as="image" fetchpriority="high">
背景画像は一番最後に表示される
背景画像やヘッダー背景画像は他の添付画像の後に表示されます。
（ヘッダー背景画像でなくヘッダー画像なら普通に表示される。）
他の添付画像をLazy Loadで遅らせても優先度は変わりません。
なので写真を多数添付したサイトでは特に影響が出ます。
トップの画像が一番後回しにされるので体感的に遅く感じます。
ただPageSpeed Insightsの結果を左右するのかは不明です。
仕様？なので仕方ないと思いましたが、解決方法がありました。
ヘッダー背景画像をプリロードで事前読み込みさせるのです。
背景画像を優先表示させる方法
Cocoonの場合はhead-insert.phpに以下のソースを追加します。
<link rel="preload" href="画像ファイルのURL" as="image" fetchpriority="high">rel=”preload”でヘッダー背景画像を先読みするように指定。
as=”image”は対象が画像である事を示します。
画像ファイルのURLは相対パスより絶対パスの方が確実です。
下は私の場合です。
<link rel="preload" href="https://kuromin.net/wp-content/uploads/2024/07/kurominadv_title.jpg" as="image" fetchpriority="high">これが仕様ならプリロードしても変わらない気がするんですが…。
しかし実際これでヘッダー背景画像の表示速度が改善するそうです。
参考
送信中です
×
※コメントは最大500文字、100回まで送信できます