Archived topic
Issue with Cumulative Layout Shift Due to Font Size Reduction
8 replies · Started by FullyInstrumented on December 14, 2020
Hello,
Several weeks ago, I changed my site's body font to a smaller size. Unfortunately, it causes an issue with my site's Cumulative Layout Shift. I leave it without care. Now, I get a message from my Google console.
I use Cloudflare. I think this is due to Cloudflare. I did a custom purge to the CSS file but it doesn't result in any improvement. I come here to look for the answers.
Maybe I have to change the CSS file or anything. I hope I get the answer here.
This is the site: https: www fully instrumented com.
Thank you in advance!
Hi there,
your site is using an async loader for your CSS. Which means some styles are being loaded as the page is being rendered, hence you see a slight change in the font sizing during load.
Can you first off try clearing disabling your cache plugin to see if that resolves the issue.
Hi,
Thank for the fast response.
Did you ask me to deactivate my LiteSpeed Cache plugin and then activate it again?
First deactivate the litespeed cache and check the site to see if THAT CLS issues clears.
Then re-enable the litespeed cachce - if the CLS issue returns then this will be related to how the litespeed cache is serving up your CSS.
I've done as you instructed. But nothing happens to the CLS score.
However, if I reduce the font size of the body, the CLS score improves significantly.
If I set the body font 17 px, the problem comes with the CLS.
If I set it 18 px, the problem is fixed.
But I like 17px. I want 17. Thank you in advance.
Now it's 18 px. I need to turn it back to 17 soon.
Can you put it back to 17px and leave the Litespeed cache disabled so i can see what is going on.
No way. It becomes red. I am okay now with 18px.
No problems
