WordPress horizontal vs downward layout shifts and field CLS

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

Lateral horizontal is the most used: 83.2% of WordPress sites.

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

FrameworkLayout shift direction on its sitesGood CLS

WordPress sites with layout shift direction 44,884 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 50%89%

jQuery 43,117 sitesHorizontal (lateral) shift 84%Downward (vertical) shift 50%89%

Vue 3,623 sitesHorizontal (lateral) shift 85%Downward (vertical) shift 50%89%

React 1,655 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 52%85%

Horizontal (lateral) shift Downward (vertical) shift

Does the framework explain the layout shift direction difference?

On jQuery, 86% of sites with lateral horizontal layout shift direction have a good CLS, against 84% of jQuery sites with downward vertical. Within jQuery, sites with lateral horizontal have a good CLS more often. On Vue, 86% of sites with lateral horizontal layout shift direction have a good CLS, against 84% 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.2% of shifting sites, 86% good field CLS) typically nudge navigation items by a few pixels during font swap, whereas downward shifts (49.8% of shifting sites, 84% good field CLS) push the entire main column down when top banners or unsized heroes expand.