Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload image URLs for elements with external background images #1697

Draft
wants to merge 5 commits into
base: trunk
Choose a base branch
from
Draft

Preload image URLs for elements with external background images #1697

wants to merge 5 commits into from
+418 −36

Conversation

westonruter
Copy link
Member

@westonruter westonruter commented Nov 22, 2024 •
edited
Loading

Fixes #1584

Given the Twenty Thirteen theme which has a CSS background image in the header and some images in the post content, on desktop the header is the LCP element whereas on mobile the first image is the LCP element:

Desktop Mobile
localhost_8888_2024_11_07_bison-columns_ localhost_8888_2024_11_07_bison-columns_(Moto G4)

With the changes in this PR, the CSS background image gets a fetchpriority=high preload link for desktop, whereas the first image in the content gets a preload link for mobile:

<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="http://localhost:8888/wp-content/themes/twentythirteen/images/headers/circle.png"
  media="screen and (min-width: 783px)"
>
<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="http://localhost:8888/wp-content/uploads/2024/06/bison2-1024x673-jpg.webp"
  imagesrcset="http://localhost:8888/wp-content/uploads/2024/06/bison2-1024x673-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/06/bison2-300x197-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/06/bison2-768x505-jpg.webp 768w, http://localhost:8888/wp-content/uploads/2024/06/bison2-1536x1010.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/06/bison2-2048x1347.jpg 2048w, http://localhost:8888/wp-content/uploads/2024/06/bison2-1568x1031.jpg 1568w"
  imagesizes="(max-width: 1024px) 100vw, 1024px"
  media="screen and (max-width: 480px)"
>

Todo

  • Add additional validation constraints on the new root property (e.g. require same-origin).
  • Add tests.

@westonruter westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) labels Nov 22, 2024
@westonruter westonruter added this to the image-prioritizer n.e.x.t milestone Nov 22, 2024
@westonruter westonruter mentioned this pull request Nov 23, 2024
Open
@westonruter
Copy link
Member Author

@felixarntz This is getting close! I'm excited about this one since it unlocks a very common use case which we've seen especially among page builders. This unlocks potential optimization of the DIV (assuming it has a background image) which is the second most common LCP element:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@felixarntz felixarntz Awaiting requested review from felixarntz felixarntz will be requested when the pull request is marked ready for review felixarntz is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Type] Enhancement A suggestion for improvement of an existing feature
Projects
None yet
Milestone
image-prioritizer n.e.x.t
Development

Successfully merging this pull request may close these issues.

Image Prioritizer should be able to store the LCP (background) image URL for prioritization
1 participant
@westonruter