Blog / Tech / Web Design

Cumulative Layout Shift as new Google ranking factor

  • Rating — 5 (1 vote)
  • by Ksenija Kolomiiets
  • Updated on July 23, 2020
  • Read —
    6-7 minutes

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. 

Does your website have a high score according to Google metrics?

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. 

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.

Need an SEO specialist to optimize your website?

Ksenija Kolomiiets Expert & Evangelist in business optimization tools like fintech, logistics, on-demand services apps who will help you to understand the core ideas of the outlined themes by my articles. I also have great expertise in social media and education platforms so let me know "in comments" if you want me to describe a theme you're interested in.

Leave a comment
Close

Leave a Reply

Related services

Categories

All articles Business Company News Marketing Tips StartUp App Ideas Tech UI and Design

People are talking about

You've got
a project in mind

What's next?

Send us a message with a brief description of your project.
Our expert team will review it and get back to you within one business day with free consultation and next steps.

Testimonials

Nothing can be better than getting a review from our happy clients
who recommend us and trust us their business.

Jonathan
More good work from team GBKSOFT. All well executed. The support within GBKSOFT is excellent. Communication is good too, spoken English as well as written. Support
Dave
GBKSOFT’s performance has been very strong. We've referred them twice, which says all anyone needs to know about them. A referral is the ultimate signal we can give that these guys are great. Strong
Tao
GBKSOFT did a good job to manage the project. They put in a good effort to communicate with us and make it easier for us to communicate with developers. Good Job
Garrett
They proved to be very good and they’re very reliable as well. They are quite conscientious. They will go the extra yard to make sure we're happy. Reliable
Gireesh, USA
One word...EXCELLENT.
Very well thought out and articulate communication. Clear milestones, deadlines and fast work.Patience. Infinite patience. No shortcuts. Even if the client is being careless (me). The best part...always solving problems with great original ideas, especially with this strange project where we are making up new words every day!
Excellent
Aaron
I’ve been using GBK Soft for the past 3 years and they have been great. Communication is unparalleled to other app development companies. I’ve continued to return to them to improve my iOS app countless times and I will continue to do so in the future. I highly recommend this company! Improve
Raphael
My Project with GBKSOFT gave me the ability to develop my software while keeping a busy schedule. Ana, who was my project manager, was very professional and was always understanding of my vision and what I wanted. I would recommend GBKSOFT again to any other company or person who has a vision for their web application. Thank you GBKSOFT! Recommend
Andy
I think they do great work. I haven’t yet given them something that they were unable to do. Great
Devan
They write clean code, adhere to deadlines, and communicate extremely well. I strongly recommend anyone from the GBKSOFT agency and hope to work with them again myself. Clean Code
19
spinner