Any ideas how to fix mobile CLS issue on Crave theme?

Store Design
1

Take page here, for example. I’m failing the CLS on mobile on the pagespeed insights: https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.shelhealth.com%2Fproducts%2Flemarie-patissier-mini-pancakes-35-2-oz

I’ve removed all the unnecessary apps and minimized all the javascripts used but it seems that had no improvement whatsoever for CLS. It seems it has to do with the theme layout and the way the page is loaded. Anybody has any ideas how to improve the CLS without having to change the theme or pay 100s of dollars for somebody to recode?

Thanks

2

CLS is cumulative layout shift, how much the rendering image has to recalculate the size of things as the page loads. This is mainly experienced when a pages content jumps up down as images or video are load shifting the layout around.

For you site you can first see the product title and add to cart, then the image loads and the entire page shifts down.

Reducing CLS substantially is not a basic task, look for other opportunities to improve performance.

In the lighthouse report currently the largest offender is hulk apps javascript and that should be investigate.

For CLS , simple improvements can come from putting a size attribute on images if it is missing.

https://web.dev/cls/#how-to-improve-cls

More advanced is using lazy loading possibly in tandem with low quality image placeholders(LQIP) that load fast with the proper dimensions so that no shifting is needed when the full quality image finally loads.

  1. [https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained#:~:text=Low-quality%20image%20placeholders%20(LQIPs,with%20lazy%20loading%20in%20JavaScript](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained#:~:text=Low-quality%20image%20placeholders%20(LQIPs,with%20lazy%20loading%20in%20JavaScript).
  2. https://www.afasterweb.com/2016/08/31/low-quality-blur-in/
  3. https://www.robinosborne.co.uk/2018/01/05/image-placeholders-do-it-right-or-dont-do-it-at-all-please/
3

Omg, thank you so much. You hit the nail right in the coffin. I did a quick test and I was able to get the CLS down to 0. I know exactly what I have to do now. Thank you thank you thank you, it was driving me crazy

1 Like