CODEWITHSUNDEEP
core-web-vitalscumulative-layout-shift
Ben Upham
Ben Upham

Reputation: 83

Determining cumulative layout shift when attributed node is null

I am trying to reduce CLS (cumulative layout shift) on a website. Using the webvitals JS library from Google, I am seeing that one of the largest sources of CLS is the below, which has "null" for the node causing the layout shift. Anyone know how to address this? If the node causing the shift is null, how would I update the CSS or HTML to prevent this shift?

sources: Array(1)
0: LayoutShiftAttribution
currentRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
node: null
previousRect: DOMRectReadOnly {x: 0, y: 0, width: 375, height: 329, top: 0, …}
__proto__: LayoutShiftAttribution

Upvotes: 0

Views: 200

Answers (1)

Morgan Feeney
Morgan Feeney

Reputation: 897

I'm looking into this myself currently, I use a lot of loading skeletons to inform users that content is loading, once content has been fetched, I think they become null, they're essentially DOM nodes that have been replaced in some way.

Upvotes: 1

Related Questions