Cumulative Layout Shift (CLS)

Aren’t we all tired of the constantly shifting pictures on our mobile web-pages?

You think they’ll make it easier for you to actually read the article that you were so interested in, but no. You have got to deal with shifting text and pictures that are deeply punctuated by advertisements and pop-ups. Just when you think it has finally stopped, a rogue row or column of content goes for a run again!

This shifting was prevalent a few years ago, but Google’s tireless responsive design metrics keep it in check now.

User experience has been at the forefront of Google’s improvement metrics, especially of late. As the focus shifts more on the perception of the website, web developers are putting in double the effort to improve UX every passing day. Cumulative Layout Shift is a metric that largely takes inspiration from this development and marks the detailed orientation of elements on the web page.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift is a metric that measures the shifting of core elements like images, videos and CTAs while the page downloads. A low CLS score means a greater need for optimizing the downloadable elements on the page. Revised coding can solve this problem and lead to an optimized CLS score.

Reasons Behind Cumulative Layout Shift (CLS)

The micro-levels at which CLS works are mind-boggling! There is not a single reason that leads to shifting. Web designers need to keep improving every day and polish their designs from grassroots.

Google cites five main reasons for cumulative layout shifting, as follows-

1. Dimension-less pictures
2. Dimension-less Images and advertisement embeds
3. Content inserted afterwards
4. Flash Of Unstyled Text (FOUT)- causing fonts
5. Actions awaiting a response from the network before updating DOM

The aspect ratio of the images should be synchronized throughout devices in a flexible design and layout. Responsive images have aspect ratios that exist in harmony across platforms. Make sure that you calculate accurate figures before writing it down in your source code.

How To Fix Ads That Cause Cumulative Layout Shift (CLS)?

Ads complicate giving of CLS but it cannot be called ‘impossible’. It can be managed by manipulating elements that display the ad. For instance, manipulating the div slightly can fix the height and width of your ad substantially. If the ad still doesn’t show up, you have two options-     

• First, set the ad-containing element in a way that another banner ad or placeholder image shows up to fill in the empty space.

• Second, for ads that fill the entire top, left or right-hand side rows of a web-page, and the page itself doesn’t show up, it won’t make any difference because the shift wouldn’t happen at all. In a few sporadic themes and layouts, the situation might turn out differently. You will have to test it over, just to be sure.

Dynamically Injected Content (DIC)

Dynamically Injected Content (DIC) is the kind that is embedded later in the web-page. You can take an example of a tweet or a Facebook post whose link you embed later in your web-page.

Flash of Unstyled Text (FOUT)

When you download a font from the internet and incorporate it into your web-page, sometimes Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) happens.

Use rel= ‘preload’ in the link when you’re downloading the font to prevent it.

Measuring CLS

Google recommends using two different methods of calculating CLS-

• In the lab
• In the field

1. In the lab: In this method, a simulation of a user who is downloading a webpage is undertaken. Moto G4 is Google’s choice for calculating the lab-generated CLS score. Lab Tools that are required for this exercise are Lighthouse and Chrome DevTools.
2. In the field: As the name suggests, in the field calculation is done by gathering data from live website visitors and users. Although this method gives a more accurate data, it is still recommended to undertake the in the lab simulation before testing it live.

Diagnosing The Causes of CLS

It might seem like shooting in the dark if you try diagnosing the causal elements of CLS, but with the right tools, it is a cakewalk. Chrome DevTools includes a performance panel, which further opens an Experience row. Here, you can find the layout changes and shifts that have undergone by the various elements in the form of layout shift score as well as the affected areas.

Fixing CLS Issues

Mere diagnosis of CLS causing elements is not enough; fixing it is just as important. Here are a few quick and easy ways of doing that:

• Make use of font: display values ( auto, swap, block, fallback and optional) in addition to your customized fonts
• Mention ‘width’ and ‘height’ attributes with picture and video elements present on your web-page using a proportional aspect ratio
• Ads are the biggest static sources of CLS in a web-page. Sadly, there are only a few ad-related adjustments you can make to avoid CLS. Make sure to allocate placeholder images for collapsible ad spaces. Also, reserve your ad space by stylizing your elements before embedding the ad.
• The management of HTTP response and synchronization in loading speed of all elements on the web-page reduce CLS score.
• Dynamically Injected Content (DIC) leads to a lot of shifting of web-page elements, which lead to a poor CLS score. Make sure to add skeleton images or banners to avoid shifting after adding layers of content over and above the existing one.

Parting Thoughts

As web-surfers who are stuck to our mobile devices for the better part of our days, we should be grateful that responsive design is now being taken seriously and CLS issues are addressed as a priority in core designing. Otherwise, keeping track of flying objects is only fun for a little while.

Even though many web developers have just now started to utilize the full potential of the CLS metric, it is scheduled to become the most important ranking factor in the coming year.