Blogs      Emerging Tech      Cumulative Layout Shift as new Google ranking factor

Cumulative Layout Shift as new Google ranking factor

Web Design

Complimentary Consultation

We will explore how you can optimise your digital solutions and software development needs.

Share

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 scores for CLS

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:

  1. Images without dimensions
  2. Ads and iframes without dimensions
  3. Dynamically injected content
  4. 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.

pic

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.
    pic

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

SEO specialists outline 5 reasons why it can happen. Here they are: Using fonts improperly leading to flash of invisible text (FOIT) or flash of unstyled text (FOUT) Using images without specifying their dimensions Embeds and banner ads and iframes without dimensions Actions waiting for a response from the network before updating DOM Any content that is injected dynamically
To find a Cumulative Layout Shift on your page it is better to use Chrome DevTools. It can help you quickly edit on-the-fly pages and fix problems so that you can eventually create better websites. Chrome DevTools has also been updated to help site owners find and fix visual instability issues on a page that can lead to Cumulative Layout Shift (CLS). The Layout Shift Summary view contains the total layout shift score as well as a rectangle overlay showing the affected regions.
CLS is an entirely new metric. Google still has to gather real-world data about it. It’ll take a while before we know how important it really is. But It’s the first PageSpeed Insights metric that measures the user experience more than anything else. According to CLS, LPC, and TBT metrics, Google will rank your site and if it meets all requirement you will have a huge advantage unlike your competitors how doesn’t follow the trend.

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.

Leave a Comment

Why you can trust Altamira

At Altamira, trust is built on expertise. We deliver content that addresses our industry's core challenges because we understand them deeply. We aim to provide you with relevant insights and knowledge that go beyond the surface, empowering you to overcome obstacles and achieve impactful results. Apart from the insights, tips, and expert overviews, we are committed to becoming your reliable tech partner, putting transparency, IT expertise, and Agile-driven approach first.

Sign up for the latest Altamira news
Latest Articles

Looking forward to your message!

  • Our experts will get back to you within 24h for free consultation.
  • All information provided is kept confidential and under NDA.