How To Improve Cumulative Layout Shift - Deepstash
The Podcasting Ecosystem

Learn more about marketingandsales with this collection

The importance of networking in podcasting

How to grow your podcast audience

How to monetize your podcast

The Podcasting Ecosystem

Discover 44 similar ideas in

It takes just

7 mins to read

How To Improve Cumulative Layout Shift

1. Use a CMS (content management system).

This will make sure that you’re designing with best practices in mind, and flag any issues before you launch your site.

2. Specify size attributes for images and videos.

Rather than letting them set their own height and width, dictate size attributes for your media.

3. Understand how ads can influence your layout.

Google Publisher Tag offers extensive guidance about how to reserve space for ads.

4. Use transitions and animation to provide context around page changes. 

3

2 reads

MORE IDEAS ON THIS

Measuring Cumulative Layout Shift

The good news is that you don’t have to measure CLS yourself because Google makes it really easy to analyze your page performance with their PageSpeed Insights tool, or in the Chrome browser using Lighthouse Tools.

To analyze performance in PageSpeed Insights:

  • Enter a website URL...

3

2 reads

Expected Vs Unexpected Layout Shift

CLS only takes into account unexpected changes. If the layout changes because of a user-initiated action, there is no impact on CLS. This is a helpful tool to use when you don’t need to load everything all at once. Instead, offer users the opportunity to choose which elements they want to view th...

3

3 reads

Cumulative Layout Shift: Causes

Page shifts happen when content loads at different speeds and causes the layout to change and alters what the viewer is looking at. Advertisements loading slowly, videos of unknown size suddenly appearing, or DOM elements being dynamically added are all potential causes of CLS.

3

3 reads

An Ideal CLS Score

A good cumulative layout score is anything less than 0.1. The reports from PageInsights or Lighthouse tools will automatically flag any poor scores, as well as provide advice on how to optimize the page for better performance.

3

3 reads

Cumulative Layout Shift

Cumulative Layout Shift is one of these key metrics that measures the “jumpiness” of a website and how it unexpectedly moves as elements load. Let’s take a closer look at how this metric works, and how you can make sure your own website is following best practices so you rank higher on search eng...

3

5 reads

Cumulative Layout Shift: Importance

Jumpy websites that load in pieces or with unexpected behavior will cause your visitors to find another website to browse. And if they do stick around, a high CLS score is likely to cause usability problems like choosing the wrong option, checking out too early, or missing parts of your website a...

3

2 reads

Impact Fraction and Distance Fraction

These are the two variables that Google uses to calculate CLS in the formula below:

layout shift score = impact fraction x distance fraction

  • Impact fraction relates to the size of the unstable element in comparison to the viewport.

3

2 reads

Offer A Better User Experience With CLS Optimization

Paying attention to CLS not only provides a better user experience, but it also boosts your search result rankings. It’s a win-win.

To meet Google’s standards for CLS, start by using a diagnostic tool to measure your website’s current performance. Take into account the basic guidelines outl...

3

2 reads

Defining Cumulative Layout Shift

Cumulative Layout Shift (or CLS) is a measure of how much a webpage unexpectedly shifts during its life. For example, if a website visitor loaded a page and, while they were reading it, banner loads and the page jumps down, that would constitute a large CLS score.

Along with Largest Content...

3

2 reads

Lighthouse Analysis

  • Open up the website you want to analyze in Chrome.
  • Navigate to Developer Tools by clicking the three dots in the top right corner of the browser window, choosing “More Tools” and then “Developer Tools.”
  • When the console opens, choose “Lighthouse” from the options along the to...

3

2 reads

stash-superman-illustration

Explore the World’s

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas

Anywhere

Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.

Join

2 Million Stashers

4.8

5,740 Reviews

App Store

4.7

72,690 Reviews

Google Play

samz905

Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates