How do I fix CLS for footer in Dawn theme - Every page on my site is failing!

[lflounge]

Here are the results from PageSpeed Insights for https://lflounge.com/ and it appears every page on my site is failing because of this...any suggestions or solutions much appreciated! I think this is an extremely common issue...

[oreoorbitz]

CLS is hard to figure out from just reports, it is very situation specific, it has to be tested carefully, no one will be able to give usefull suggestions on fixing if you don't share the URL.

[lflounge]

Updated to include URL thanks

[oreoorbitz]

So the issue isn't the footer specifically, the content of the body is not being loaded, and then is being loaded in via javascript. This is probably being done by an app, it's most commonly done by contnet lock apps, as they will need to hide the content of a page based off of dynamic conditions.

The body tag has an id of appstleCustomBodyMarker. So you can investigate based off that naming if you have an app that has that name.

[lflounge]

I sent you a message regarding this here thanks

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Is this solved? Or you are looking for further solution.

Do let me know in case of any concerns.

Regards,

San

[oscprofessional]

Hello @lflounge ,

I have checked your site in the Google Pag

You can improve your website speed score by fixing these issues.

e insights tool. There is a low score on your website. It needs to be improved, especially on mobile devices.

Below are some factors that might impact the speed of your online store, and how you can address them.
Page speed score for mobile view:

3rd Party App Code: 

• You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
• 3rd party apps & codes which take time to load and their size. They decrease the speed.
• Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
• If you're removing an app, then consider removing the code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
• Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.

Reduce CLS :

For Reducing CLS issues you can adjust the height and Width of the Footer

We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it's quite complicated for non-technical people.

You need to work on the following points:

• Pass core web vitals (important)
• Reduce JS Payload.
• Use Critical CSS.
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third-Party JavaScript & Shopify Apps
• Preload Web Fonts. 

 Use a standard web font.

Theme Upgrade:

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

How to Optimize Total Blocking Time:

After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.

• Reduce the Request Count of the Third-Party Scripts
• Reduce the Size of the Third-Party Scripts
• Minimize the Browser’s Main Thread Work
• Clean the Unused Javascript and CSS Codes
• Compress the Javascript and CSS Files
• Implement the Code Splitting for Javascript Assets

You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer's computer, you can use a system font.

How to avoid showing invisible text:

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

Remove unused CSS and unused JS:

• Check the assets folder of the theme and remove unused CSS and JS file
• Check and remove unused apps
• If your store has not installed any app you can comment {{ content_for_header }} code in the theme. liquid (not recommended if you don't have knowledge about the liquid)

You can improve your website speed score by fixing these issues.

If there is anything that needs to be clarified or included, please let us know.  We will surely help you.