How to find the source of CLS issues on your website
According to a study by Google, about 53% of websites have a Cumulative Layout Shift (CLS) score of 0.25 or higher, which is considered to be a poor score. This means that a majority of websites are affected by layout shift issues.
CLS stands for Cumulative Layout Shift, and it is one of the core Web Vitals metrics used to measure the user experience on a website. Web Vitals are a set of metrics that Google and other search engines use to assess the quality of a web page’s user experience. They are important because they can impact a website’s search engine ranking and overall user satisfaction.
CLS measures how a web page’s content moves as it loads. A high CLS score can frustrate users by causing unexpected shifts in page elements. Fixing CLS and other Web Vitals metrics improves SEO and user experience, boosting retention and conversions. Layout shift issues result from element loading hierarchy, not loading speed, and can disrupt the user experience.
According to Nielsen Norman Group, layout shifts can increase the difficulty of reading text by 10% and clicking on links by 15%. Additionally, Akamai’s study revealed that layout shifts can result in a significant 20% reduction in conversion rates.
Layout shifts harm the user experience in situations such as when content is suddenly rearranged or buttons become inaccessible. To fix them, prioritize element loading for a smoother experience. Let’s explore some options to address layout shifts on a page so you can find a way to fix them.
#1. Find CLS on the Web Page Test tool
This method is a personal favorite for pinpointing the element responsible for layout shifts. It’s both straightforward and efficient in identifying these elements. Furthermore, the web page tool offers video snapshots to illustrate how the shifts impact the overall page experience.
- Go to the webpagetest website.
- Select web vitals from the drop-down and paste your webpage URL.
- Select the device type based on where the CLS issue is prominent.
- Then run the test. (Typically, it takes only a couple of seconds)
- When the test is complete, you will find the web vital outputs, and if you notice CLS being marked as RED and is more than 0.1, then click on that.
- Under the CLS section, a visual reference on how the layout shift is getting triggered so you can identify the element and take necessary action to fix it.
In this example, the logo (image) had been loading a bit late, so when I decided to preload the image, that fixed the layout shift issue for the site.
You can also look at the asset flowchart to simulate where your assets are loading and which asset you want to load faster so all elements on your pages load stable.
#2. Use Page Speed Insight To Detect Element Shiting
Page Speed Insight is Google’s go-to tool for testing web vital metrics on web pages. It’s a widely trusted tool for evaluating website performance.
While the CLS report it generates may not be as visually intuitive as that of WebPageTest, it still identifies the impacting element. Once you’ve identified the affected element, finding a solution becomes more straightforward, as you can closely observe the reasons behind its shifting.
To detect Layout Shift, visit PageSpeed Insight and enter the URL of the page you want to assess. Check the resulting metrics: A score higher than 0.25 is considered poor, and Google recommends improvements when the metric falls within the range of 0.1 to 0.25. However, the goal should always be to eliminate any type of layout shifts on your web page.
After generating the report, go to the DIAGNOSTICS section and expand the “Avoid Layout Shifts” section. Here, you will find a list of elements that contribute to your overall page layout shift. Each element will be displayed as HTML code, allowing you to identify the CLASS and element ID, which can help you locate it on your web page.
#3. You can use Webvitals.dev’s CLS debugger
The Cumulative Layout Shift (CLS) Debugger tool available on webvitals.dev is an excellent resource for visually identifying CLS issues on your web pages. Simply provide the URL, and the tool will conduct multiple tests across different browsers for both mobile and desktop versions of your site. It will identify elements with shifting problems and make it straightforward to address them by marking the affected elements and providing associated scores for resolution.
Steps to use this tool:
- Visit: https://webvitals.dev/cls
- Give your URL address > check the consent box and start the analysis.
- You will see the debugger loading screen as long as the test runs.
- Once the test is finished, you will notice the CLS visualization over your mobile and desktop versions like this, which I believe is a decent way to know where you need to fix element shifting.
There could be many reasons causing CLS issues on your pages, but here are the most prominent causes of CLS across most of the sites and solutions.
Top fixes for CLS issue: more than 0.25
- Turn Off Sticky Headers: Avoid using sticky headers that cause content to shift as users scroll.
- Eliminate Logo Zoom Effects: Disable logo zoom effects, such as zooming in or out as users scroll. Ensure your logo image includes size attributes. Lack of size attributes is a common cause of CLS issues.
- Specify Width and Height for Elements: Declare explicit width and height attributes for elements like images. Avoid using pixel measurements (px). In platforms like WordPress, these attributes are often set automatically when you upload images. Here’s an example of properly declaring dimensions:
<img src="thelink" width="400" height="300">Note that you should use plain numbers, not pixel values.
- Avoid Content Overlaps: Never insert content that can overlap existing content, except when triggered by user interactions. This ensures that any layout shifts are expected. Common examples include popups like subscription or newsletter forms.
- Disable Animations or Use CSS Transforms: Consider disabling animations altogether, or use CSS transforms for animations that don’t trigger layout changes. Ensure that animated transitions maintain context and continuity between states, or consider avoiding animations altogether.
- Exercise Caution with CSS Minification and Caching Plugins (WordPress): Be cautious when using CSS minification or caching plugins, especially in WordPress. If you’re using a caching plugin, consider disabling CSS minifiers or compilers first. Test by temporarily disabling the caching plugin to check if it’s causing CLS issues. Note that default settings in plugins like WP Rocket have been known to create CLS problems.
- Ensure Instant Font Display: Ensure that fonts are displayed instantly, even before the font family fully loads. Use CSS code like ‘font-display: swap;’ in each ‘@font-face’ style to achieve this. If ‘font-display: swap;’ doesn’t work, consider using ‘font-display: optional;’. Here’s an example:
@font-face {
font-family: 'roboto';
src: url("https://www.paulhoda.co.uk/roboto/Roboto-Regular.ttf");
font-display: swap;
}- Disable Floating Ads: If you have a floating ad that covers your content, it’s a simple fix: disable it. Move that advertisement to a location within your content so that it doesn’t obstruct the user’s view. Google introduced CLS penalties partly because floating ads can lead to unintentional clicks when users scroll through an article. Placing the ad within your content, similar to how you would add an image to your article, can help avoid this issue.
Conclusion:
Identifying and resolving CLS issues can be a challenging task, often involving hands-on coding and potentially editing server files or your WordPress theme directly.
If this seems too complex for you, consider enlisting the help of an expert to address your CLS problems and other core web vitals errors. I recommend reaching out to Speedy Site for professional assistance. Use my code SPEEDY50 to enjoy a $50 discount on your initial order.
