Low CLS performance issue

[deltaglider]

Dear Community,

Our websites face low CLS performance on our Google ranking. After digging into the problem deeper, it says that the problem lies here:

* Major impact: HubSpot Chatbot that is integrated on the bottom right corner. Issue: "Element: iframce, Class"

* H1, H2, Leadtext: "Element: undefined, Class: undefined"

Has anyone faced similar issues or has anyone an idea how to solve this problem? I'm especially curious how to solve the HubSpot chat issue since that something I can't change in the code directly.

Best

[IMakkar]

Hi,

It sounds like the low CLS (Cumulative Layout Shift) issue on your website is being caused by unexpected shifts from the HubSpot chatbot and some other undefined elements. Here’s how you can tackle it:

Address the HubSpot Chatbot CLS Issue

Reserve Space for the Chatbot: Allocate a fixed size for the chatbot container (iframe) to prevent layout shifts when it loads. You can do this with show after full page load and Delay Chatbot Loading: Configure the chatbot to load after the main content using HubSpot's settings or by deferring its script.

Fix Undefined CLS Issues with H1, H2, and Lead Text

Make sure fonts and styles for your H1, H2, and lead text are preloaded to avoid layout

<link rel="preload" href="your-font-url.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Set Explicit Dimensions:

Add fixed dimensions (e.g., width and height) for elements like images, fonts, or any dynamic content that loads late.

Alternative, If you’re looking for a quicker solution, consider using Website Speedy, a speed optimization app for Hubspot. It automates the improve the Chatboat & HTML tag H1, H2 CLS issue, making it easy to improve your store’s performance.

The app takes only 5 minutes to set up, and you can enjoy a 14-day free trial to see how it impacts your site’s performance.

You can install it here: https://ecosystem.hubspot.com/marketplace/apps/website-speedy

(Disclaimer: We are the developers of this tool and are happy to answer any questions you may have.)

[DianaGomez · Accepted solution]

Hi @deltaglider, that's a great question.

Currently, we do not have an in-app solution to directly reduce CLS from the chat flow.

I found a helpful thread titled "Live Chat Causing CLS Issues" which provides some workaround for this behavior. On the other hand, I came across information that delaying the chat by 8 seconds before loading resolved the issue for a user.

Finally, our product experts encourage users to consider these:

• As with anything related to page optimization, one should not tie themselves to the scores provided by analysis tools that are based on bots. It's important to keep in mind that the focus should be on actual user experience, and not a bot's experience. The scores provided can be a guide, but sometimes it may or may not make sense in regards to user experience.
• CLS is what happens on pages when you start to load content and then elements shift as more content is downloaded. One of the real impacts of this is when users on their site click on something but because of the layout shift, they end up clicking on something else. This would be a poor user experience. If this is not something that users on their site experience, then this is a non-issue.

Best regards,

Diana