Preload Header Overlay Images#5241
Conversation
Header images are the most important thing outside of content. While this could also be done in the general custom header file, it's probably best the theme is practicing best practices. Be responsive for all users out of the box.
|
The overlay image is specified in an inline |
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
@iBug The preload hint does help because the overlay image URL lives inside an inline In practice, on fast connections and small pages the difference is negligible — but it's a free improvement for the edge cases where it matters (slow connections, large HTML documents), and has no downside since the browser deduplicates if it already found the image. I've been running this in production on my site. Happy to open a fresh PR if this one can't be updated — the only other nit is the self-closing |
|
@bexelbie I am still not convinced as maintenance overhead is a kind of cost, outside visible performance metrics.
I checked my website and the So I don't think this is the kind of edge case worth "optimizing". |
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
This PR is based on theoretical argument of presumed optimization, so I'm not considering this before concrete numbers prove non-trivial improvement. |
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a <link rel="preload"> hint for page.header.overlay_image in <head> so the browser fetches it immediately instead of waiting for CSS parsing. Only emitted on pages with an overlay image. Upstream: mmistakes#5241 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
3 participants
This is an enhancement or feature.
Summary
Header images are the most important thing outside of content. While this could also be done in the general custom header file, it's probably best the theme is practicing best practices. Be responsive for all users out of the box.
Adds a liquid check to inject a preload
<link>tag with the overlay_image if it's specified.Context
If the user has overlay images in their page header liquid, make it so we by default, preload those images immediately. This will make the page look responsive and clean.