Recently Google disturbed the world by announcing a new ranking factor – page experience. User experience has always been a measure of building a successful web site, but since the announcement, it will play the most important role in creating brilliant sites for your customers. Such changes are powered by new metrics – the Core Web Vital.
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
https://web.dev/vitals/
New page experience according to Web Vitals
Most specialists admit that site speed metrics are difficult to understand. In addition, it can change in some ways every time you make a test of the web site. Sometimes it shows different scores. So when you look at metrics all you have to do is pray they turn green.
Of all available metrics, outline three so-called Core Web Vitals. It is the main focus of Google in the coming year. Each year, Google might change the metrics as they evaluate these over a longer period of time. Today we are going to talk about one of them it is Cumulative Layout Shift.
What makes the bases of page experience? They include three bases of page experience: loading performance, responsiveness, visual stability which CLS (Cumulative Layout Shift) is actually responsible for.
CLS: Cumulative Layout Shift
This is a brand-new metric of Core Web Vital. CLS is responsible to identify the “stability” stuff that loads on your screen. It checks often stuff jumps around while loading and by how many times. There is a situation sometimes that a button appears while in the background, there’s still a large content area being loaded. The result? When the content finally displayed, the button can move sideways a bit — it might seem you want to hide the button. Such an event may lead the user to frustration.
These layout shifts regularly happen with ads. Despite advertising has long been a part of websites but with so poorly loading it frustrates users. Meanwhile, quite a large number of complex sites where a lot of action takes place that these are heavy to load, and content is loading randomly. This can also result in content or CTAs that jumps around on the screen, making room for slower loading content.
What do you need to know?
The Cumulative Layout Shift compares the frames to define the movement of the components. It estimates all events when layout shifts happen and calculates the density of those movements. Google takes into account anything below 0.1 good, while anything from 0.1 to 0.25 requires improvement. You should pay attention to everything above 0.25 as poor.
The score takes into account only unexpected shifts. If we are talking about a fold-out menu or a subscription popup it doesn’t count as a layout shift. In case the button changes in design or shifts because of another element, you should make sure to keep that clear for the user.
Here are four reasons that can cause to Cumulative Layout Shift alleged to Google:
- Images without dimensions
- Ads and iframes without dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
Images and videos need to have the height and width dimensions declared in the HTML. With regard to responsive images, make sure that the different images sizes for the different viewports use the same aspect ratio.
As we mentioned above that advertising can be the main point of layout shift. Here are several reasons:
- the ad container is inserted in the DOM;
- the ad container resized by site with first-party code;
- When the ad tag library loads;
- When the ad fills a container.
Best practices to reduce ad shift is:
- allocate a specific space for an ad slot.
- be attentive placing non-sticky ads near the top of the viewport.
- reserve the maximum possible size for the ad.
Dynamically Injected Content. Never inject content above existing content, except for user interaction. This ensures anticipation of any layout shifts that occur.
You would have noticed layout shifts due to a UI that pops up at the top or bottom of the page when you are trying to load a site. As an ad, this also happens with banners and forms that change much of the page ‘s layout.
When you choose to display these kinds of UI affordances, reserve enough space in the viewport for it in advance. Try to use a placeholder or skeleton UI so that once it loads, it does not trigger page content to move around unexpectedly.
Web fonts causing FOUT/FOIT Downloaded web fonts can cause what’s known as Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT). You can reduce to a minimum it with such tools as:
- font-display enables you to change the rendering behavior of custom fonts with values such as auto, swap, block, fallback and optional. Alas, these values (except optional) may lead to one of the mentioned above events.
- The Font Loading API can reduce the time for getting necessary fonts.
As of Chrome 83, we can advise:
- Using <link rel=preload> on the key web fonts: a preloaded font will have a higher chance to meet the first paint, in which case there’s no layout shifting.
- Combining <link rel=preload> and font-display: optional
Every time Google creates new requirements for a website the whole world tries to adapt their resources to it because not doing this could mean losing everything at one time. It is very important to work under your site constantly, especially content, think through each element, and use wisely popups, ads and etc.
FAQ
Improving the experience page is a rather complex topic and requires technical knowledge to be able to solve it. Keep in mind that Google will focus more and more on the user experience. In the long term, the CLS will get more importance in SEO. You have time to start the optimization of your site before it affects it.
