Archived topic
Lowering CLS on desktop
3 replies · Started by Bart on January 13, 2021
Hi
I was trying to drop down CLS on desktop and can't really deal with it... can you help
Hi there,
the simplest way to check what is going on is to open the site in Chrome, Right Click > Inspect - go to the Network tab in the developer tools - beside the Disable Cache checkbox, you'll see Online - change this to Slow 3g. With the developer tools still open refresh the site.
You'll see on your site that your Header/Nav is being initially loaded without any styles, whereas as scrolling down other parts of the site has. This is because of the Optimized CSS option in Litespeed.... unless you know how to manually write Critical CSS i would suggest you disable that feature.
Hi David
I dont know how to write Critical CSS, which option I should disable in Litespeed?
Yeah writing Critical CSS is a somewhat complex affair.
See this article:
https://blog.litespeedtech.com/2018/06/20/critical-css-and-litespeed-cache/
Under:
How LSCache Handles Critical CSS
Disable all three options listed there.
