Archived topic
Cumulative Layout Shift when using WP Rocket caching
8 replies · Started by Angel on February 3, 2021
Hello,
I have been using GeneratePress for the last 6+ years and I love it!
For some time now I've been using WP Rocket and when it's enabled, I am experiencing a Cumulative Layout Shift. Specifically, when caching is enabled and only for mobile. All the css, javascript, ect optimizations don't seem to affect the issue.
The problem seems to be that the heading font is being loaded (it's preloaded via wp rocket), then for a moment the default font is loaded and then the correct one is loaded again.
Do you have any idea why that is?
Thanks?
Cheers
Disabling Optimize CSS delivery did the trick.
Disabling Optimize CSS delivery did the trick.
What you're seeing is called FOUT (Flash of unstyled text).
https://css-tricks.com/fout-foit-foft/
And yes, optimization of CSS delivery normally solves this issue.
Glad you got it sorted. Thank you for letting us know. :)
Hey thanks,
any idea if I could use the Optimize CSS feature and remove the FOUT?
Thanks
Hi there,
if the font is being preloaded then there shouldn't be any FOUT. If there is then it means the CSS setting the font style is being deferred - which happens when CSS has been 'poorly' optimized.
Thanks!
The font is preloaded, when css optimization is activated, the correct font shows, then FOUT happens and the correct font shows yet again.
Can I change the fallback font to Trebuchet MS since it won't shift layout in most cases?
Thanks!
So the correct font shows, then it switches to a fallback, and then back to the correct font ?
Exactly!
I used this Font style matcher to find the best fallback font configuration. So is there any way to edit the font specified in the all.css stylesheet so that it matches my preferred fallback font configuration.
Thanks
Can you share a link to a page where i can see this?
