- This topic has 3 replies, 2 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
Hello,
I’m getting close to optimising my site’s core web vitals, but the last issue is a CLS score that I can’t seem to reduce. I’ve improved my CLS a lot, but I want to get it “green” for both desktop and mobile.
Mobile CLS: 0.082 (which is fine)
Desktop CLS: 0.186 (this is what needs to be improved)This issue is only flagged up on pages without a featured image. I think it’s probably affecting all pages, but isn’t flagged up on those where the featured image pushes more of the content below the fold.
Under “Avoid large layout shifts” in Pagespeed Insights, the 5 elements are the first H2 tag on the page and the three paragraphs after this H2, which makes me think it’s something to do with the H2 itself. I’m not sure why this would be the case though.
I’ve also checked using https://defaced.dev/tools/layout-shift-gif-generator/ and it’s clear that the H2 and subsequent paragraphs are shifting quite a bit for some reason.
It would be great to hear your thoughts. Thanks!
P.s. I’m using WP Rocket and have tried turning off critical path CSS, but this hasn’t made a difference in this case.
Customer Support
Hi there,
the issue is related to the Fonts loading after the page is rendered. You can check that by temporarily changing the fonts to System Stack.
Hi David, that makes sense! Thanks for that – I hadn’t thought of fonts being an issue.
I think the easiest solution is to try and match the fallback font as closely as possible to the actual font, using a tool like https://meowni.ca/font-style-matcher/.
Is there any way to adjust the fallback font in GeneratePress though? Thanks for your help.
At this time – to change the fall-back font would require the fonts to be served locally which would allow you to specify your own fallback font. We have plans to overhaul the Typography system to make this kinda thing a lot easier.
- You must be logged in to reply to this topic.