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

Tools/Resources Used In This Video
Swap Google Fonts Display https://wordpress.org/plugins/swap-google-font-display/
String Locator https://wordpress.org/plugins/string-locator/
10% off WP Rocket Coupon: https://onlinemediamasters.com/go/wp-rocket-10-off-coupon/
OMGF: https://wordpress.org/plugins/host-webfonts-local/
FOIT vs. Fout: https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/
Font-display: swap issues: https://wpmudev.com/forums/topic/font-display-swap-not-working-problem/
Critical Path CSS Generator: https://www.sitelocity.com/critical-path-css-generator
Happy Addons for Elementor: https://wordpress.org/plugins/happy-elementor-addons/
Oxygen Builder Github Solution: https://github.com/soflyy/oxygen-bugs-and-features/issues/2139

Like and subscribe if you found this helpful :)

Peace out,
Tom

Видео How to fix Cumulative Layout Shift in WordPress (Core Web Vitals Item) канала Online Media Masters