Shopify horizontal vs downward layout shifts and field CLS

Sites with lateral horizontal layout shift direction have a good CLS most often: 82%, against 86% of all Shopify sites. Sites with downward vertical shift direction have it least often, at 79%.

Lateral horizontal is the most used: 83.5% of Shopify sites.

Vue sets the layout shift direction to lateral horizontal on 85% of its sites, and 80% of Vue sites have a good CLS, against 86% of all sites.

FrameworkLayout shift direction on its sitesGood CLS

Shopify sites with layout shift direction 5,389 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 50%86%

jQuery 2,327 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 58%80%

Vue 669 sitesHorizontal (lateral) shift 85%Downward (vertical) shift 53%80%

Horizontal (lateral) shift Downward (vertical) shift

Does the framework explain the layout shift direction difference?

On jQuery, 77% of sites with lateral horizontal layout shift direction have a good CLS, against 74% of jQuery sites with downward vertical. Within jQuery, sites with lateral horizontal and downward vertical have a good CLS about equally often. On Vue, 76% of sites with lateral horizontal layout shift direction have a good CLS, against 72% of Vue sites with downward vertical. Within Vue, sites with lateral horizontal and downward vertical have a good CLS about equally often.

Why downward vertical shifts carry a larger distance fraction

Cumulative Layout Shift multiplies impact fraction by distance fraction. Horizontal shifts (83.5% of shifting sites, 82% good field CLS) typically nudge navigation items by a few pixels during font swap, whereas downward shifts (50.3% of shifting sites, 79% good field CLS) push the entire main column down when top banners or unsized heroes expand.