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

Add meta attributes to preloaded tags and preload links for Image Prioritizer #1742

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

Add meta attributes to preloaded tags and preload links for Image Prioritizer #1742

wants to merge 1 commit into from

Conversation

westonruter
Copy link
Member

Important

This is a sub-PR of #1713 and should not be merged before that is merged.

Debugging optimizations applied by Image Prioritizer involves identifying why a given preload link is added or attempting to connect a preload link with the underlying element that caused the preload link to be added in the first place. This can be done by implicitly by looking at attributes like connecting a preload link's imagesrcset attribute with the srcset attribute of some IMG on the page. However, this gets more complicated with #1713 where background images applied with stylesheets are preloaded since there is no reference to the image URL in the HTML source. To assist with this, I'm considering whether we should add data-od-preloaded attributes to tags which have associated preload links, and conversely for the preload links to have data-od-related-tag-selector which helps to identify the element that the preload link was added for.

For example, the following change would be applied to the lcp-element-external-background-image-present-in-document-and-fully-populated-samples test case:

--- Before
+++ After
 <meta charset="utf-8">
 <title>...</title>
 <link rel="stylesheet" href="/style.css">
-<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop.jpg" media="screen and (min-width: 783px)">
-<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile.jpg" media="screen and (max-width: 480px)">
-<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/phablet.jpg" media="screen and (min-width: 601px) and (max-width: 782px)">
-<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet.jpg" media="screen and (min-width: 481px) and (max-width: 600px)">
+<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop.jpg" media="screen and (min-width: 783px)" data-od-related-tag-selector="HTML &gt; BODY &gt; HEADER#masthead.banner">
+<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile.jpg" media="screen and (max-width: 480px)" data-od-related-tag-selector="HTML &gt; BODY &gt; HEADER#masthead.banner">
+<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/phablet.jpg" media="screen and (min-width: 601px) and (max-width: 782px)" data-od-related-tag-selector="HTML &gt; BODY &gt; HEADER#masthead.banner">
+<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet.jpg" media="screen and (min-width: 481px) and (max-width: 600px)" data-od-related-tag-selector="HTML &gt; BODY &gt; HEADER#masthead.banner">
 </head>
 <body>
-<header id="masthead" class="banner">
+<header data-od-preloaded id="masthead" class="banner">
 <h1>Example</h1>
 </header>
 </body>
 </html>

The work to update all of the test cases with these new changes would be tedious, so I haven't updated them yet. This would be a good opportunity to implement #1418 to eliminate this tediousness here and in the future.

Using a CSS selector as opposed to the already-made XPath is just something I was considering. By not including the element index which is present in the XPath it could make it easier to locate the element after JS has manipulated the DOM structure after page load.

@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 Dec 16, 2024
@swissspidy swissspidy mentioned this pull request Dec 16, 2024
Open
@westonruter westonruter force-pushed the add/external-bg-preload-validation branch from e6cfcfd to 250f094 Compare December 16, 2024 18:39
Base automatically changed from add/external-bg-preload-validation to trunk December 17, 2024 19:56
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
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@westonruter