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

[deakon]

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

[oreoorbitz]

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.

[deakon]

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]

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

[deakon]

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

Litehouse always does.

[Cedcommerce]

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.

image.png

Let us know if you need any further help. 

Regards, 

CedCommerce

[deakon]

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.