A simple guide to fixing cumulative layout shift (CLS) in WordPress which is currently 15% of core web vital scores.

Cumulative layout shift is when things “shift” on your website and can be seen in Google’s Cumulative Layout Shift Debugger (https://webvitals.dev/cls). CLS issues are often caused by fonts, asynchronous CSS (i.e. Optimize CSS Delivery in WP Rocket), not setting a fallback critical CSS, elements without specified dimensions, and animations that don’t use transform/translate properties.

Written article: https://onlinemediamasters.com/cumulative-layout-shift-wordpress/

0:00 - Intro
1:36 - Ensure text remains visible during webfont load
4:52 - Preload fonts
5:46 - Disable asynchronous CSS
7:28 - Specify dimensions
8:14 - Use CSS Transform property in animations

Like and subscribe if you found this helpful :)

Peace out,
Tom

#wordpress #cumulative #google