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 Lighthouse 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.
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.
- Pay attention to width and height attributes on images: 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.
- Be careful with custom fonts: 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.)
- Use the transform CSS property for animations: 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).
- Save space for ads, embeds, and iframes: 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.
- Avoid dynamically-sized content above the fold: 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.
- Don’t load content dynamically or without user interaction: 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 new content above existing content: 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.
- Avoid infinite scrolls that change content above where the scroll is: 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).
Conclusion
Every time Google comes up with a new website testing or scoring approach — from the mobile-friendliness test 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.
True to form, the search giant’s release of Core Web Vitals 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.
In fact, according to a recent study by Duda, “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.”
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.