Clarify Element Timing's handling of pseudo-elements
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 61
- Forks
- 19
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 1
Description
The spec doesn't appear to say how Element Timing for pseudo-elements should be handled. A surprising number of sites put large content in pseudo-elements, so explicit support would be helpful for performance measurements and downstream specs like LCP.
Current browser behavior:
Chrome appears to be the only browser where support (or lack) is observable, but please correct me if I'm missing an entryType somewhere.
-
In Chrome, Element Timing will include timing for images in a
background-imageon a pseudo-element (example using a background image in::after). Theelementproperty will be set to the originating element, but theintersectionRect,naturalWidth,naturalHeight, andurlwill all be for the actual image painted in the pseudo-element.This is perhaps the best that can be done, since it's not possible to have a JS reference to the pseudo-element itself. The image information in the entry is usually enough to figure out what exactly is being referred to, but an additional annotation somewhere to explicitly mark the entry as referring to a pseudo-element could be helpful for automated tools to know where to look.
-
Again in Chrome, Element Timing will not include timing for images in a more-or-less identical page but using
contentin a pseudo-element to add an image (example usingcontentin::after). As a result, the smaller text is determined to be the LCP element instead of the larger image.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the Element Timing specification and the two linked browser examples for pseudo-element images. Determine how background-image and content in pseudo-elements should be specified, including whether entries need an explicit pseudo-element annotation; done means the handling and observable entry data are unambiguous for downstream specs such as LCP.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- documentation, performance
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100