Core Web Vitals being part of the new Page Experience algorithm update are the most important user experience metrics that Google recommends you focus on. Cumulative Layout Shift (CLS) is one of these metrics.
CLS measures the cumulative score of all unexpected layout shifts that occur between when the page starts loading and when its lifecycle state changes to hidden. What that means is, when a page loads, the design layout (sidebar, image box, buttons when clicked, or anything else on the web page) shift left or right up or down unexpected distracting users.
Cumulative Layout Shift CLS score evaluates how much visible content shifted in the viewport, as well as the distance (how far) other elements are impacted by the shift.
Its also important to note that a web page can completely load and you may not be aware of any shifts of HTML elements until the user interaction occurs, then, layout/s may also shift according to that user interaction. That means, design layout shift occurs any time a visible element changes its position from one rendered frame to the next.
Video Tutorial by RankYa Showing What Cumulative Layout Shift Is
How to Get Good Cumulative Layout Shift Score
Re-evaluating a website and its functionality will by default help with Page Experience algorithm update as well as getting better Cumulative Layout Shift score. There are many different ways to improve CLS score, and much will depend on the type of website you operate and the type of content you are presenting. So I’ll share some practical tips and insights for you to consider.
Photos and images without dimensions can cause shifts. Since images play a major part of all websites, you should consider having image width and height as well as lazy load them.
Ads, embeds, and iframes without dimensions. If a website doesn’t have Google AdSense or YouTube embeds, then you can ignore this point. However, if you are using such block level elements such as iframes, then, make sure to serve them correctly, or add width and height dimensions to these elements as well (similar to img example in the above image)
Dynamically injected content such as Cookie GDPR notice, Newsletter Sign-up form etc. may (usually do) cause layout shifts. A good way to approach this would be to work out where in the HTML flow the area will be at, and consider using a placeholder. For example: Cookie notice on top bar of a web page with height 60px, you could have an empty area with 60px till the Dynamically injected content is loaded reducing shifts when it does. Then transition using CSS transition providing not jaggy but smooth interaction.
External Web Fonts?
As you already know that using stylish and unique web fonts does set your website apart from the competitor. And, I will assume that your website is created professionally, that means, your web developer had your best interest at heart and triple checked default system fonts which may be near identical to external web fonts on your website.
Because serving external web fonts with CSS display:swap may seem like a good idea making the browser swap the font value with what it can find on the system. And yet, this swapping around will almost always cause layout shifts (particularly on heading H1, H2 and so on). How can you optimize this? Use speculative optimization techniques on link rel=preload or rel:preconnect as well as setting font-display:optional
Its important to inspect CSS values for elements before/after shifted elements and properly style them.
Although most website owners won’t go through the trouble upgrading their website theme or shared web hosting servers to be something better, you being a wiser business operator should definitely consider investing in better solutions because the faster the theme and CMS and the server, faster the page load.
Don't let Google's latest Page Experience update derank your business website in search, instead, master Google rankings and website conversions with this Master Class Course by RankYa (Free Lessons Included)Learn how press here