Improve Cumulative Layout Shift In WordPress. WordPress Speed Optimization 101 Course | WP Amaze

We'll look at the Cumulative Layout Shift, also known as CLS, and how to improve Cumulative Layout Shift. In this video, I'll discuss the Primary CLS and Secondary CLS, show you some examples, and show you how to fix Cumulative Layout Shift issues.
✅ Join FREE Speed Optimization Course 101: wpamaze.com/sp...
✅ Join Ultimate Speed Optimization Course: wpamaze.com/ul...
✅ Hire Me: wpamaze.com/hi...
My preferred hosting:
✅ Try Rocket.net for $1: wpamaze.com/ro... (My sites are hosted on rocket.net)
✅ Try Cloudways for FREE: wpamaze.com/cl...
✅ Try Chemi Cloud: wpamaze.com/ch...
My Preferred Page Speed Tools:
✅ Perfmatters: wpamaze.com/pe... (Code: WPAMAZE - 20% OFF )
✅ Flying Press: wpamaze.com/fl...
✅ WP Rocket: wpamaze.com/wp... (10% OFF - No Code Required)
✅ Flying CDN: wpamaze.com/fl...
✅ ShortPixel: wpamaze.com/sh...
✅ Swift Performance: wpamaze.com/swift
My preferred themes:
✅ Blocksy Theme: wpamaze.com/bl... (Code: WPAMAZE - 10% OFF)
✅ Kadence Theme: wpamaze.com/ka... (Code: WPAMAZE - 10% OFF)
✅ GeneratePress: wpamaze.com/gp
✅ Breakdance: wpamaze.com/br...
✅ Bricks Builder: wpamaze.com/br...
✅ AstraWP: wpamaze.com/astra
Beginner Friendly Page Builders:
✅ Elementor: wpamaze.com/el...
✅ Breakdance: wpamaze.com/br...
My favorite Gutenberg Addons
✅ Generate Blocks: wpamaze.com/gb
✅ Kadence Blocks: wpamaze.com/ka... (Code: WPAMAZE - 10% OFF)
✅ Cwicly: wpamaze.com/cw...
✅ Stackable: wpamaze.com/st...
What is CLS?
CLS is a measure of the largest burst of layout shift score for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs anytime a visible element changes its position from one rendered frame to the next. Over time, various changes have been made to the CLS metrics, and now, the way CLS is calculated is different compared to the old method.
With the new method, this is how CLS is calculated. A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1 second between each shift and a maximum of 5 seconds for the total window duration. The largest burst is the session window, with the maximum cumulative score of all layout shifts within that window. Okay, in this image, you can see Session Window 1, which is considered a session window. Blue bars that we see inside the window session represent the scores of each individual layout shift. I understand these things might look too complex for beginners and intermediates. In the upcoming videos, I'll discuss the individual issues; then, things will become clear to beginners and intermediates.
Now, for beginners, let me put it in simple words with some visuals. In this video, a user is on the checkout page and added 56 items to the cart. For some reason, the user decides to click on the No Go Back button, at that very moment, an ad will appear and pushes the buttons down, and instead of clicking on the No Go Back button, the user clicks on the Yes, place my order button, and the order gets placed. This layout shift is considered a bad user experience.

[@WPAmaze]

✅ Join FREE Speed Optimization Course 101: wpamaze.com/speed/ ✅ Join Ultimate Speed Optimization Course: wpamaze.com/ultimate-speed ✅ Hire Me: wpamaze.com/hire-me/

[@wahidurrahman314]

The scenario is, if I add something extra between two different sections, the background of the sections cannot be changed. If it is changed, the layout will shift. This extra will have the same background as the previous section. Am I correct?

[@WPAmaze]

Yes. In such situation, you can add one section and three containers inside the section.

[@atultanna]

Have u got a vid on creating a WP site

[@WPAmaze]

Planning to start this month.