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

Technical Q&A

Topic summary

A Shopify store owner is struggling with a high Cumulative Layout Shift (CLS) score that’s causing their site to fail Google Search Console’s desktop CLS requirements. The primary culprit is a Year/Make/Model search app (https://apps.shopify.com/year-make-model-advance-search) that creates layout shifts when loading.

Key Issues:

  • The CLS problem is intermittent (.10 score), appearing inconsistently across homepage, collection, and product pages
  • Testing tools like PageSpeed Insights, Lighthouse, and GTmetrix show varying results
  • The app is essential for their business (automotive parts site: finishlinewheels.com)

Proposed Solutions:

  1. Contact app developers to fix the JavaScript-based element loading that causes shifts
  2. Reserve fixed space for the search bar in the header to prevent layout movement
  3. Preload necessary files and remove lazy loading from banner images
  4. Consider removing the app (though owner prefers to keep it)

Current Status:
The owner has contacted the app developer with test data but remains uncertain whether a fix is possible without changing UX or requiring developer modifications. The intermittent nature makes diagnosis and resolution challenging.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
2

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.

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.