WordPress horizontal vs downward layout shifts and field CLS

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

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 75% of Vue sites have a good CLS, against 78% 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%78%

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

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

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

Horizontal (lateral) shift Downward (vertical) shift

Does the framework explain the layout shift direction difference?

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