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.

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

Consider storing abstract CWV data in URL Metrics not explicitly tied to tracked elements #1730

Open
westonruter opened this issue Dec 10, 2024 · 0 comments
Labels
Needs Discussion Anything that needs a discussion/agreement [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

Comments

@westonruter
Copy link
Member

Feature Description

Originally discussed in #1697 (comment).

The Image Prioritizer plugin is capturing LCP element information independent of the elements which are explicitly tracked for capturing in the elements of a URL Metric (which is indicated by returning true in a tag visitor). Image Prioritizer needs to do this for prioritizing the background image for an element which is applied with a stylesheet and not via an inline style. This is because no tag visitor would know which tag to capture in URL Metrics since there is no server-side indication that the element would be LCP or that it would have a background image.

All this to say, Optimization Detective only captures LCP information by storing isLCP in the element captured in URL Metric. It doesn't store the LCP element's image url or any other information about the LargestContentfulPaint. This means that Image Prioritizer on its own needs to store the url and id, en lieu of element it stores the tag name, and class name to better identify the element. This information could instead be captured and stored by Optimization Detective for Image Prioritizer to reuse. It could be stored in a top-level lcpElement property of a URL Metric, alongside the existing elements.

When it so happens that the LCP element was one of the elements captured in URL metrics, then the XPath of that element could be stored in the lcpElement property as well (as a nullable xpath property). As noted above, the xpath wouldn't necessarily be available since a tag visitor wouldn't know to mark the element for capturing in URL Metrics, so Optimization Detective wouldn't add a data-od-xpath attribute to the element. No longer would isLCP need to be stored with each item in elements since the XPath of the LCP element could be stored once in lcpElement. Determining whether one of the captured elements is LCP would then just be a matter of checking if the XPath matches lcpElement.xpath.

If there is a root lcpElement property it may then make sense to generalize this further to have a root metrics property which includes and lcp, inp, cls. For CLS, the LayoutShiftAttribution sources could be stored for potential reuse by Embed Optimizer (although I think the current ResizeObserver use in Embed Optimizer is preferable). The actual values for the CWV metrics could also be stored for use by a performance dashboard (#1324).

@westonruter westonruter added [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 Needs Discussion Anything that needs a discussion/agreement labels Dec 10, 2024
@github-project-automation github-project-automation bot moved this to Not Started/Backlog 📆 in WP Performance 2024 Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Discussion Anything that needs a discussion/agreement [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
Status: Not Started/Backlog 📆
Development

No branches or pull requests

1 participant