- This topic has 14 replies, 4 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
Any chance I could have some pointers as to why there are LCP issues on desktop on the URL attached? Main one seems to be caused from an inline headline SVG icon further down the page.
Customer Support
Hi George,
Can you try uploading the fonts you have locally? Currently, that’s the only thing I see changing while manually looking. It’s not causing a shift though. Can you check if it somehow helps?
Ok, I’ve uploaded local fonts but same issue . From a scan I did at https://www.webpagetest.org I got the result attached but I am not sure what to make of it. Maybe it can make sense to you?
Customer Support
Hi George,
Just did a lighthouse test, and your site doesn’t seem to have LCP issue on the desktop:
https://www.screencast.com/t/TNWUWrRaI also checked the report you attached, when I hover over the images, I don’t see a layout shift, do you?
Hmmm, I keep seeing it, strange. Like the black red frame when you hover over the image. CLS shows as 0.763 on desktop. Lighthouse test doesn’t show it but the pagespeed.web.dev, GMetrix and webpagetest.org tests all show it. I’ve attached screenshots. Can you replicate it?
Customer Support
Hi George,
in my dev tools i see that fonts are using
display: swapand there is a tiny amount of FOUT occurring.
If you can set the font display toautoI am using local fonts and the setting in the LiteSpeed cache is Default (there are two options for font display, default and swap). I’ve reuploaded fonts with
display-auto,same issue.
That
imghas nowidthorheightattributes, so the browser can’t reserve space for it.
So it relies on that CSS to resize it to 300px. And that CSS is not included in the critical CSS that litespeed is loading in the head of your doc..Best fix is to make sure the image does have
widthorheightattributes that are exact match so the CSS isn’t required.Also the Litespeed inline CSS doesn’t have all the above the fold styles, so the FOUT is fixed but the font is still be resized.
Switched back to a core image block since a GB image block doesn’t allow width and size attributes. That’s how it was before, didn’t fix the issue.
Can you disable Litespeed and any other optimizations ?
Done.
And now the CLS is almost
0https://www.webpagetest.org/vitals.php?test=230215_AiDcQ5_ENX&run=2&cached=0#cls
Its Litespeed messing with the CSS and creating a poor Critical CSS that seems to be the cause
I disabled Load CSS Asynchronously from LiteSpeed, problem solved.
Thanks David!
It started doing it again, I’ve had enough with this, though, thanks again.
All optimizers that try to automatically create create critical css and async load the remaining css generally end up messing something up. Might be worth checking with Litespeed support, as their config looks super complex.
- You must be logged in to reply to this topic.
