You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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-image on a pseudo-element (example using a background image in ::after). The element property will be set to the originating element, but the intersectionRect, naturalWidth, naturalHeight, and url will 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 content in a pseudo-element to add an image (example using content in ::after). As a result, the smaller text is determined to be the LCP element instead of the larger image.
The text was updated successfully, but these errors were encountered:
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-image
on a pseudo-element (example using a background image in::after
). Theelement
property will be set to the originating element, but theintersectionRect
,naturalWidth
,naturalHeight
, andurl
will 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
content
in a pseudo-element to add an image (example usingcontent
in::after
). As a result, the smaller text is determined to be the LCP element instead of the larger image.The text was updated successfully, but these errors were encountered: