Core Web Vitals is the set of website user experience metrics — and soon-to-be ranking factor — released by Google last year. These new metrics evaluate what Google calls “page experience” and provide a score accordingly. There are three aspects of page experience covered by Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). While the LCP and FID metrics focus on different aspects of what makes a website experience feel “fast” to a user, CLS focuses on the amount of content “movement” that occurs on a web page as it loads. If you’ve ever tried to click on a button, link, or image while a page loads but were unable to because the element kept jumping around, that was layout shift and it’s a poor experience. Though all three of these aspects — LCP, FID, and CLS — are weighted equally when Google calculates the Core Web Vitals score, improving the CLS score for a website sometimes can be the most difficult. What Is an Example of Cumulative Layout Shift (CLS)? Let’s go straight to the source. : Google explains Cumulative Layout Shift like this “Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you've lost your place. Or even worse: you're about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else!” It’s good that this perennial web problem is finally receiving substantial attention from Google, and it’s clear the company takes it seriously. In Google’s testing tool, CLS has a relatively low impact on the overall score (5 percent of the total score). In Core Web Vitals, however, CLS contributes one-third of the overall score. This has all the more significance when you remember that the Core Web Vitals score will soon be included as a ranking factor in Google’s algorithm. Lighthouse Tips to Improve the CLS Score on Your Sites Some website builder platforms will do a lot of the heavy lifting required to improve CLS for you by automatically performing a number of optimizations in order to align with best practices. However, if you aren’t using one of these platforms, you’ll need to manually ensure your sites meet Google’s new guidelines. Whether you work with a website builder or not, it’s still beneficial to familiarize yourself with the following best practices. Make sure images and videos have explicitly specified width and height attributes. This tells browsers how much space to reserve in the layout for these elements right when the page starts to load. Pay attention to width and height attributes on images: If you must use custom fonts, embed them directly into HTML whenever possible. Often a fallback font is loaded first when a visitor lands on a web page. Then, when a custom font is downloaded, it is loaded into the page. Once that custom font is loaded, a layout shift may occur because the size of the custom font is different from the size of the already-displayed fallback font. If you embed the custom font inline within the HTML response, this will make sure that it’s downloaded with the initial page load. (Note: This method must be used carefully, as you don’t want to bloat the initial HTML response by inlining too much data, which may negatively affect other page experience metrics.) Be careful with custom fonts: When implementing animations — especially ones that are scroll-based — be sure to use the transform CSS property over other methods. Also, you want to avoid shifting the height or width of an element for animations, unless it’s after a click event (e.g., expanding an accordion widget). Use the transform CSS property for animations: When placing ads (or other third-party content) on a page, make sure you give enough space for that element to load within the page template. This means assigning a height and width to the area where the ad will load. Similar to images, this often means applying width and height attributes directly to the element. Save space for ads, embeds, and iframes: Sometimes it is not possible to know the height of an element before it loads. For example, a comment box from Disqus or Facebook could lack a specific height attribute you can set. In these situations, these elements should be moved lower on the page — avoid placing them in the initial viewport above the fold. Since the CLS calculation is focused on when elements in the viewport are moved, loading dynamically-sized content below the primary viewport will reduce the CLS impact. Avoid dynamically-sized content above the fold: If you load an email registration form, an ad, or anything else, it will shift the page around, meaning it will directly cause layout shift. However, you can load new elements after a click if they appear within 500ms of the click. Don’t load content dynamically or without user interaction: If you add new content to a page (e.g., ad banner updates at the top of the page), this will shift all content below it. If the user has already scrolled lower on the page, the content above will shift and the user will lose their position on the page. These actions should be avoided at all costs. Don’t load new content above existing content: Loading content below the scroll is fine, but changing content above the scroll could trigger a paint event (i.e., the browser recalculates where everything is on the page). Avoid infinite scrolls that change content above where the scroll is: Conclusion Every time Google comes up with a new website testing or scoring approach — from the to Lighthouse and now to Core Web Vitals — there is a mad dash by digital marketers, developers, and web professionals to understand the latest benchmark metrics and align sites with Google’s latest recommended best practices. mobile-friendliness test True to form, the search giant’s release of last year, and the subsequent announcement that these metrics will be added to its ranking algorithm in May 2021, has yet again thrown the web into a mild panic in some circles. Core Web Vitals In fact, according to , “Roughly 92 percent of web pros feel these updates will eventually have a moderate to significant impact on their websites’ search rankings.” However, the same study also found that more than half of respondents indicated “the majority of their websites were not yet ready for any Google algorithm change that emphasized the importance of Core Web Vitals.” a recent study by Duda Hopefully, armed with the information we’ve covered in this article, you won’t be among them. By following the approaches outlined above, you should find yourself well-positioned to prepare any websites you manage for great CLS scores and Google’s upcoming algorithm changes.

Dash

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

A Beginner's Guide: Responsive Images With srcset

An Intro to Ecommerce Navigation SEO Best Practices

Automating the Removal and Replacement of Image Backgrounds

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

A Beginner's Guide: Responsive Images With srcset

An Intro to Ecommerce Navigation SEO Best Practices

Automating the Removal and Replacement of Image Backgrounds

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps