Layout shift direction on React sites

Sites with lateral horizontal layout shift direction have a good CLS most often: 69%, against 80% of all React sites. Sites with downward vertical shift direction have it least often, at 65%.

Lateral horizontal is the most used: 79.4% of React sites.

WordPress sets the layout shift direction to lateral horizontal on 83% of its sites, and 75% of WordPress sites have a good CLS, against 80% of all sites.

PlatformLayout shift direction on its sitesGood CLS

React sites with layout shift direction 3,993 sitesHorizontal (lateral) shift 79%Downward (vertical) shift 52%80%

Wix 1,197 sitesHorizontal (lateral) shift 72%Downward (vertical) shift 46%96%

WordPress 1,723 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 52%75%

Horizontal (lateral) shift Downward (vertical) shift

Does the platform explain the layout shift direction difference?

On WordPress, 71% of sites with lateral horizontal layout shift direction have a good CLS, against 66% of WordPress sites with downward vertical. Within WordPress, sites with lateral horizontal and downward vertical have a good CLS about equally often. On Wix, 95% of sites with lateral horizontal layout shift direction have a good CLS, against 96% of Wix sites with downward vertical. Within Wix, 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 (79.4% of shifting sites, 69% good field CLS) typically nudge navigation items by a few pixels during font swap, whereas downward shifts (52.4% of shifting sites, 65% good field CLS) push the entire main column down when top banners or unsized heroes expand.