The State of Web Vitals

Layout shift direction on React sites

Horizontal lateral shifts (79.4%) versus downward vertical shifts (52.4%): how shift direction across 3,993 sites predicts real-user Cumulative Layout Shift.

Field data PhoneDesktopAll Scope All sites October 2026 edition · Phone field outcomes · React sites only
React Scoped to 9,570 sites out of 210,902 analyzed (frameworks) Compare with all sites →

79.4% of React sites use lateral horizontal layout shift direction, and 83% of those sites have a good CLS, against 92% of all React sites.

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
1

CLS pass rate

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

SitesGood, needs improvement, poor CLSMedian
All React sites5,48892%0.00
Horizontal (lateral) shift 79.4%1,91483%0.00
Downward (vertical) shift 52.4%1,28081%0.00
GoodNeeds improvementPoorSites: with Chrome field data
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
2

Layout shift direction usage

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

Sites using each option (sites can use more than one) 3,993 sites
Horizontal (lateral) shift 79.4% Downward (vertical) shift 52.4%
Horizontal (lateral) shift 79.4% Downward (vertical) shift 52.4%
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
3

Layout shift direction per platform

WordPress sets the layout shift direction to lateral horizontal on 83% of its sites, and 88% of WordPress sites have a good CLS, against 92% 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%92%
Wix 1,197 sitesHorizontal (lateral) shift 72%Downward (vertical) shift 46%97%
WordPress 1,723 sitesHorizontal (lateral) shift 83%Downward (vertical) shift 52%88%
Horizontal (lateral) shift Downward (vertical) shift
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
4

Layout shift direction or the platform

Does the platform explain the layout shift direction difference?

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

The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
5

Understanding layout shift direction

Audit downward vertical shifts (52.4% of shifting sites, 81% good CLS) by checking for late-injected announcement bars, cookie banners inserted into document flow, and unsized hero containers. Render overlays with position: fixed rather than pushing document content down, and reserve fixed heights for top-of-page slots.

Go fix it Identify and fix CLS → Fix layout shift from auto-sizing images → Scroll-triggered animations cause CLS →
The State of Web Vitals · October 2026 · React: 9,570 crawled sites · 5,488 with phone field data · 3,993 sites with layout shift directionBy Arjen Karel · corewebvitals.io/state-of-cwv
Related signals Largest single shift → Shift concentration → Layout shift count → What shifted → By Arjen Karel · 9,570 crawled React sites (5,488 with phone Chrome field data, 3,993 sites with layout shift direction, October 2026) · How we measured