In 2020, Google announced that Page Experience would become one of the quality metrics. The company introduced Core Web Vitals – important site metrics that measure user satisfaction and affect SEO. Due to COVID-19, the new algorithm’s implementation was postponed, and it will begin to work only in May 2021. Therefore, website owners will have enough time to prepare their resources.
Research shows that if the site meets the new algorithm’s threshold, users will be less likely to leave it and return to the search results. That’s why Google decided to take a more extensive look at the speed factor and increase its influence in its own algorithms.
The new update
Core Web Vitals consist of three metrics that you need to pay attention to:
- Largest Contentful Paint (LCP). It determines the time it takes for the browser to render the largest visible object in the viewport (an image, text block, heading or other content). Google believes that the largest element gets the most attention from the user, so it’s important to display it quickly. For a good user experience, LCP should last up to 2.5 seconds after the page starts loading.
- First Input Delay (FID). It shows the time between the user’s first interaction with the page and the browser’s response. The lower is the FID metric, the more confidence the visitors have that they can interact with your website. Web pages should maintain a FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS). It is an indicator of the element’s displacement during the web page load. Google believes that the layout jumps during page load are very frustrating for users, as they can click at something else and don’t get the desired result at the time. For a good user experience, web pages should have a CLS of less than 0.1.
Layout Shifts
Probably, everyone has met such websites (especially on mobile devices) where you want to click on a link, but at the moment of clicking, an element was changed or added, and the layout went down. At the best-case scenario, your click went into a void; at worst – to another element. In most cases, such situations are just annoying, but sometimes they can also cause financial damage: for example, when due to a button shift, you agree to buy something or sign up for an unnecessary subscription.
When the page has loaded, layout shifts are rare and usually associated with banner ads. But in the process of page loading, they happen very often. Such an unstable website can lose some of its users because it is impossible to work with it conveniently. And, unfortunately, it is a common problem with a sufficiently large number of websites.
What is a good CLS score?
Websites should strive to keep CLS below 0.1. A good indicator is if at least 75% of page load, segmented by mobile and desktop devices, does not exceed this value.
How to measure CLS?
CLS can be measured in the lab or the field tools:
Field tools
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
Lab tools
- Chrome DevTools
- Lighthouse
- WebPageTest
How to optimize CLS?
The most common reasons for a poor CLS are:
- Ads, embeds, and iframes without dimensions
- Images without dimensions
- Web Fonts causing FOIT/FOUT
- Dynamically injected content
- Actions waiting for a network response before updating DOM
Ads, embeds, and iframes without dimensions
Advertising is one of the main factors driving web layout change. Ad sizes are important as they increase performance/revenue through higher click rates. This can lead to suboptimal interaction with users because ads can push the visible content they are viewing on the page.
During the ad life cycle, many points can cause layout shift. Particularly, this can happen when:
- A site inserts the ad container in the DOM
- The ad tag library loads (and resizes the ad container)
- A site resizes the ad container with first-party code
- The ad fills a container (and resizes if the final ad has a different size)
Fixing layout shifts
To avoid layout shifts, when placing ads in your content stream, make sure to fix the shifts by reserving the ad space size, select the most likely ad slot size based on historical data and avoid placing ads at the top of the viewport.
Embeddable widgets permit you to embed portable web content on your page (YouTube videos, Google Maps, social media posts, etc.). These attachments often do not know in advance how large the embedding will be. Therefore, platforms offering embeds do not always reserve enough space for them and may cause layout shifts on the final load. To avoid this, you can minimize the CLS by pre-calculating enough space for embeds with a placeholder or fallback.
Images without dimensions
Always include size attributes in your images and videos. Otherwise, reserve the space they need using CSS aspect ratio margins. This will allow the browser to allocate the correct amount of space in the document while loading the image.
Web Fonts causing FOIT/FOUT
Loading and rendering web fonts can cause a layout shift in two ways:
- “Invisible” text is shown until a new font is rendered (FOIT – flash of invisible text)
- The fallback font is swapped with a new font (FOUT – flash of unstyled text)
The “Font Loading API” and “font-display” tools can help you minimize this.
Dynamically injected content
Probably, you have experienced layout shifts due to the UI that appears at the top or bottom of the viewport when you try to load the website. As in the case of ads, this often happens with banners and forms that shift the rest of the page content. If you need to show these types of UI affordances, reserve enough space in the viewport for it in advance so that the page content does not move unexpectedly on load. Do not insert content above existing content, except in response to user interaction. Then all changes on the page will be expected.
Actions waiting for a network response before updating DOM
Changing CSS property values may require the browser to react to these changes. A set of values triggers relinking, coloring, and composing, such as box-shadow and box resizing. Use animations and smooth transitions to prepare the user for changes on the page.
There are several tools for measuring and optimizing CLS. To measure your website’s CLS, we recommend you to use one of the most convenient ones – Web Vitals Chrome Extension. It will allow you to follow up on Core Web Vitals for any website you visit.
Welcoming changes
Improving user experience in the search engine is the priority for Google. The company is continuously developing the web industry, making SERP more user-friendly. That’s why some new metrics, which will help to improve user experience, were introduced. Those companies that will create or adapt their websites to the recent changes will have an undeniable advantage over their competitors.
