How can I reduce a high CLS score on my website?

deakon
Excursionist
49 5 6

finishlinewheels.com

 

this is causing a biggest contribution to our CLS score.

 

how do i tackle this?

 

ELEMENT CLS CONTRIBUTION

Select Make Acura Alfa Romeo Audi BMW Buick Cadillac Chevrolet Chrysler Dodge F…
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
0.10
Replies 6 (6)

oreoorbitz
Shopify Partner
253 29 130

1.
Tools that report CLS are not accurate as far as what's the actually cause, you need to identify the actual cause visually, and using logic.

2.
The cause of CLS on your website is  the searchbar created by this app:
https://apps.shopify.com/year-make-model-advance-search

Either ask the app developers to fix their app so it doesn't cause CLS ( I doubt they'll de anything is the solution is complicated) or remove the app.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
deakon
Excursionist
49 5 6

Thanks for replying

The app is necessary and probably the best year/make/model out there. 

 

Have you found Pagespeed Insights to be unreliable / inconsistent / not accurate....etc.  I've had results / scores all over the map.

 

What do you think of gtmetrix?

 

Do you think the CLS time related to the year, make, model app is caused by how fast their servers process the request?

oreoorbitz
Shopify Partner
253 29 130

Yes and No, in this scenario, there is very clear CLS caused by the the searchbar.


Sometimes, you'll have something like a popup, but this popup will have a slide animation, where it slides into the center of you screen, PSI will report this as CLS, when infact it's a wanted visual component.

In your case it's not a false positive.

This CLS is becuase the element is being created by javascript. This is the nature of app development in shopify. You can either ask the app developer to work with and or your developer to fix this CLS, or you can just live with the CLS if you do not want to remove the app.
App developers will continue to not worry about things like CLS unless they pressured into worrying about it by their customers.

gtmetrix uses Lighthouse under the hood, same thing as pagespeed insights

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
deakon
Excursionist
49 5 6

Pagespeed usually does not pick up the .1 CLS from the app, we'll under half of the time.

Litehouse always does.

Cedcommerce
Shopify Expert
718 76 112

Hello @deakon

 

For the CLS issue, you can check when the page loads. It renders the header section first, then loads the logo that will shift the layout of your website, so you need to fix the space for logo in header so that it will not shift the layout of your website.

 

https://nimb.ws/OUzXlF

 

For CLS you need to preload all the files which cause the issue. Also, remove the lazy loading with the banner image so that it will load faster.

Cedcommerce_0-1672316400135.png

 

image.png

Let us know if you need any further help. 

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
deakon
Excursionist
49 5 6

ok,

i've been testing CLS scores for a month now.  homepage.  collection pages.  product pages.  

for desktop screens, there is an intermittent .10 CLS score associated with my YEAR MAKE MODEL APP which is failing google search console desktop CLS.

it is this APP:  https://apps.shopify.com/year-make-model-advance-search

i've been very happy with the app and their support is quite good, i've worked through a few issues with them and have been happy.  

what's driving me nuts (and google) is the .10 is not always found.  sometimes the homepage will show it, sometimes not.  sometimes it shows for products urls, sometimes not.  

we are failing Desktop CLS in search console because of this issue so i'd like it fixed.

when you run our urls through Pagespeed Insights, GTmetrix and others...if the year/make/model app issue is found the Desktop CLS score fails.

if the year/make/model app issue is not found, it's good.  but it's intermittent.  

 

are any of you confident that you can fix this without changing the UX at all and not requiring the app developer to change stuff on their end?

i've contacted the developer with all this info, but they have run the tests too and often see the lower scores when the issue is not found.