Shopify layout shift causes (CLS attribution) and field CLS

Sites with element box growth layout shift causes have a good CLS most often: 91%, against 94% of all Shopify sites. Sites with sibling displacement shift causes have it least often, at 90%.

Element box growth is the most used: 79.8% of Shopify sites.

jQuery sets the layout shift causes to element box growth on 84% of its sites, and 91% of jQuery sites have a good CLS, against 94% of all sites.

FrameworkLayout shift causes on its sitesGood CLS

Shopify sites with layout shift causes 5,389 sitesElement box growth (box_grow) 80%Displaced sibling element 36%Web font swap text reflow 19%94%

jQuery 2,327 sitesElement box growth (box_grow) 84%Displaced sibling element 35%Web font swap text reflow 21%91%

Vue 669 sitesElement box growth (box_grow) 84%Displaced sibling element 39%Web font swap text reflow 18%90%

Element box growth (box_grow) Displaced sibling element Web font swap text reflow Unsized media expansion Late iframe / embed growth

Does the framework explain the layout shift causes difference?

On jQuery, 88% of sites with element box growth layout shift causes have a good CLS, against 86% of jQuery sites with sibling displacement. Within jQuery, sites with element box growth and sibling displacement have a good CLS about equally often. On Vue, 88% of sites with element box growth layout shift causes have a good CLS, against 87% of Vue sites with sibling displacement. Within Vue, sites with element box growth and sibling displacement have a good CLS about equally often.

How different DOM mutations translate into field CLS failures

Not all lab layout shifts hurt real users equally. Sites whose shifts come from web font swaps (19.2%) pass field CLS 91% of the time because line-height adjustments are small. Element box growth (79.8%, 91% good CLS) and displaced siblings (36.1%, 90% good CLS) cause moderate drops, while late iframe and embed growth (0.4%) pulls field CLS down to 69% (median CLS 0.04).