How to fix Cumulative Layout Shift in WordPress (Core Web Vitals Item)

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/cumula...

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

Tools/Resources Used In This Video
Swap Google Fonts Display https://wordpress.org/plugins/swap-go...
String Locator https://wordpress.org/plugins/string-...
10% off WP Rocket Coupon: https://onlinemediamasters.com/go/wp-...
OMGF: https://wordpress.org/plugins/host-we...
FOIT vs. Fout: https://www.malthemilthers.com/font-l...
Font-display: swap issues: https://wpmudev.com/forums/topic/font...
Critical Path CSS Generator: https://www.sitelocity.com/critical-p...
Happy Addons for Elementor: https://wordpress.org/plugins/happy-e...
Oxygen Builder Github Solution: https://github.com/soflyy/oxygen-bugs...

Like and subscribe if you found this helpful :)

Peace out,
Tom

• #education
• #core_web_vitals
• #cumulative_layout_shift
• #fonts
• #pagespeed_insights
• #preload
• #wordpress