Any time Google rules on a ranking factor, there’s often a rush to “solve” for it. Cumulative Layout Shift (CLS) is a tricky one because, while important, isn’t the end all be all of whether a site will be penalized.
We’re going to cover:
- What Is Cumulative Layout Shift (CLS)
- How Can You Optimize Your Site For It
- Balancing Cumulative Layout Shift With Conversion Rate Optimization (CRO)
It’s important to note that this post is going to be as “layman’s term” friendly as possible, although we’ll link to more technical answers throughout the post if you’re looking for more depth.
What Is Cumulative Layout Shift
CLS calculates the sum total of each individual layout shift scores for all unexpected layout shifts that occur during the lifespan of the page.
The equation for CLS is: impact fraction (how visible of a change was it) x distance fraction (how much the unstable element visibly moved).
The calculation only takes into account “unexpected” shifts – if the user clicks a site element, any corresponding shifts will be excluded. If the layout shift occurs within 500 milliseconds of user interaction, it will have the hadRecentInput flag (excluding it from the CLS score).
How To Optimize For Cumulative Layout Shift
While CLS used to be based on the full session, it’s since moved to the first five seconds of the session.
It’s expected that you will have some degree of CLS – up to .1 or 10% is considered “good” and won’t cause penalties to your site. Google evaluates sites on a 28-day cycle and requires 75% of site visits to have a passing score (or good experience).
These are great tools to test for CLS:
1. GTMetrix
2. PageSpeedInsights by Google
If your CLS is over 10%, it’s important to identify all the potential ways your site might be impacted.
Things that can cause CLS:
- Custom fonts that don’t load well and don’t have a back-up font.
- Non-user initiated button movement
- Pop-ups, modals, and ads that take up more than 15% of the page
- Social buttons
- Plugins clogging CSS (causing slow render times)
It bears repeating: CLS is calculated based on the first five seconds of a session – anything that happens after that is fair game!
Once you know the potential culprits, you can introduce changes (be sure to document them in your analytics).
If your site takes a long time to load (i.e. more than two seconds), the safest levers to pull will be elements impacting your render time (fonts, plugins, or design elements with a high paint count).
Balancing Cumulative Layout Shift With Conversion Rate Optimization
In an ideal world, your page will render unimpeded and not have any layout shift for the first five seconds of the session.
Sometimes it can make sense to take the hit on CLS because the overall user experience is better. As we can see in this example from Google (promoting their Google Marketing Live), their team is ok with the 8x max CLS score because the overall experience is still a positive one and empowers users to register for their event.
Other times, to unlock the most ROI out of your traffic, you’ll want to strictly adhere to CLS rules of engagement.
So long as your onsite CRO efforts do not take up more than 15% of the page or render after the first five seconds of the page’s complete render, you should be in a good spot.
Justuno customer GraceandLace.com can attribute 39% of it’s monthly revenue to on-site CRO.
They use on-page CRO tactics to engage customers at strategic points in the journey, while balancing technical SEO rules of engagement.
This exit pop-up would generate a CLS score, yet is acceptable because it’s able to drive a 35% conversion rate:
Balancing CLS and CRO can be tough. Justuno Plus customers get the benefit of advanced CRO tools and a strategist partner to keep them on the right side of user engagement. To learn more about Justuno Plus, request a demo to see how you can start creating high-converting CRO campaigns while balancing your Google scores.
Navah Hopkins
Navah is the Director of Paid Media at Justuno, an AI CRO software suite. A veteran of the digital marketing industry, she began as an SEO in 2008, transitioning to PPC in 2012. She manages the strategy and execution of paid media integrations, as well as building relationships with agency partners.
This free and instant analysis of your website performance will show you what Justuno can do for your business.
Please enter a valid URL
Please enter a valid email address
