Story:
LCP is abnormally high and it is being called out as an h2 tag. After inspecting webpagetest json we can see that the LCP event fires multiple times. This lines up with page visibilty as the element in question is visible to the user well before the browser captures the final LCP.
https://www.webpagetest.org/result/220823_BiDcKW_AEJ/
As seen above LCP is captured at 1.9s and is identified as a text element. But it also fires again after hydration occurs and the DOMNodeId has been changed. This is the same issue that has been identified by Patrick Meenan here.
https://forums.webpagetest.org/t/lcp-varies-wildly-across-runs-with-no-code-difference/11701/9
"Yeah, looking at the raw JSON for the LCP candidates, the DOM node ID is different for the 2 text paint candidates (for the same content).
This looks like rehydration issue where the initial SSR painted with the fallback font and the rehydrated version painted with the webfont (which was larger), making the LCP report later."
not sure what the fix would be, but this is most likely the issue.
"largestPaints": [
{
"event": "LargestTextPaint",
"time": 1908,
"size": 18031,
"DOMNodeId": 33
},
{
"event": "LargestContentfulPaint",
"time": 1908,
"size": 18031,
"element": {
"translate": true,
"hidden": false,
"draggable": false,
"spellcheck": true,
"contentEditable": "inherit",
"isContentEditable": false,
"offsetTop": 32,
"offsetLeft": 16,
"offsetWidth": 343,
"offsetHeight": 74,
"autofocus": false,
"tabIndex": -1,
"inert": false,
"localName": "h2",
"tagName": "H2",
"className": "at-headline-text d-text-display4-xl text-display4-lg ",
"outerHTML": "<h2 class=\"at-headline-text d-text-display4-xl text-display4-lg \">Meet the Varsity Collection.<\/h2>",
"scrollTop": 0,
"scrollLeft": 0,
"scrollWidth": 343,
"scrollHeight": 74,
"clientTop": 0,
"clientLeft": 0,
"clientWidth": 343,
"clientHeight": 74,
"childElementCount": 0,
"nodeType": 1,
"nodeName": "H2",
"isConnected": true,
"boundingRect": {
"x": 16,
"y": 536.15625,
"width": 343,
"height": 73.59375,
"top": 536.15625,
"right": 359,
"bottom": 609.75,
"left": 16
}
},
"type": "text"
},
{
"event": "LargestContentfulPaint",
"time": 6859,
"size": 24548,
"element": {
"translate": true,
"hidden": false,
"draggable": false,
"spellcheck": true,
"contentEditable": "inherit",
"isContentEditable": false,
"offsetTop": 32,
"offsetLeft": 16,
"offsetWidth": 343,
"offsetHeight": 74,
"autofocus": false,
"tabIndex": -1,
"inert": false,
"localName": "h2",
"tagName": "H2",
"className": "at-headline-text d-text-display4-xl text-display4-lg ",
"outerHTML": "<h2 class=\"at-headline-text d-text-display4-xl text-display4-lg \">Meet the Varsity Collection.<\/h2>",
"scrollTop": 0,
"scrollLeft": 0,
"scrollWidth": 343,
"scrollHeight": 74,
"clientTop": 0,
"clientLeft": 0,
"clientWidth": 343,
"clientHeight": 74,
"childElementCount": 0,
"nodeType": 1,
"nodeName": "H2",
"isConnected": true,
"boundingRect": {
"x": 16,
"y": 536.15625,
"width": 343,
"height": 73.59375,
"top": 536.15625,
"right": 359,
"bottom": 609.75,
"left": 16
}
},
"type": "text"
},
{
"event": "LargestTextPaint",
"time": 6859,
"size": 24548,
"DOMNodeId": 943,
"nodeInfo": {
"nodeType": "H2",
"attributes": {
"class": "at-headline-text d-text-display4-xl text-display4-lg "
},
"bounds": [
16,
536.15625,
343,
73.59375
],
"styles": {
"background-image": "none"
}
}
}
],