Inline SVG icon causes LCP on desktop

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?

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/TNWUWrRa

I 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?

Hi George,

in my dev tools i see that fonts are using display: swap and there is a tiny amount of FOUT occurring.
If you can set the font display to auto

I 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.

https://www.screencast.com/t/LuN28GmQYu7

That img has no width or height attributes, 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 width or height attributes 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 0

https://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.