Poor Largest Content full Paint Google PageSpeed

I checked on a test site, and I’m getting an LCP of 1.6s on mobile with a performance score of 99, and an LCP of 0.4s on desktop with a performance score of 100.

The test site is on a Litespeed server and I’m using the Litespeed Cache plugin with the “advanced” presets.

Are you using a caching plugin?

Yes.

I use WP Super Cache. The “Expert” mode.

I used to use WP Super Cache too, before I was on a Litespeed server. I got better Pagespeed scores when I added Autoptimize to it. The two plugins complement each other. You might give that a try and see how it does.

I tried Autoptimize – it got worse.

There are CSS and JS resources from Autoptimize that block the display. They didn’t exist before. Now LCP has become worse. It used to be 5.4. Then it became 6.2.

As a result, I had to remove the Autoptimize plugin. Unfortunately, he didn’t help me.

Yikes! That’s not good.

Well, my thinking was that since WP Super Cache just caches the pages, and TT3–and the other block themes I’ve tested–scatter CSS and JavaScript all over the place, I was thinking that Autoptimize’s ability to minify and consolidate the CSS and JavaScript would help. Obviously not.

I don’t think it’s the TT3 theme itself. Here’s Pagespeed on a test site I have running TT3. The SEO is low because I have “Discourage search engines from indexing this site” enabled:

That test site has no caching plugin at all, and only a few plugins.

Maybe another plugin you’re running?

LCP depends on lots of things (a background image is slower then a normal image, a big image is slower then a small file sized image, …), it would help to have a URL to run a test on ??

@linux4me2 Your page is very light.

It has little content. Therefore, Pagespeed indicators are good. Try to go to some big page with additional content design.

@optimizingmatters Here is the site page. https://alzari.ru/doctype.html

From LCP, Pagespeed indicates only 2 problems:

1) Try to avoid creating chains of critical requests.

2) The element “Rendering the largest content”.

In the first one, I tried to postpone CSS, but then the site lost its design. Returned it back.

In the second, I tried to reduce the size of the H1. It didn’t help.

And LCP remained in the red zone.

the LCP problem is because the LCP element (the title) waits for the font-file to be downloaded (despite font-display:fallback) and that font-file is pretty big (over 800KB). just for fun & learning disable all fonts to see if that improves LCP. If so try setting for that (or all) font to font-display:optional or -better still in my opinion) consider trying to live without font-files being downloaded? ??

hope this helps,
frank (ao dev)

@optimizingmatters Thanks, Frank. It helped.

Yes, the problem was in the font. I’ll try to think later how you can try to live without downloading font files.

Thanks!

you’re welcome sergiksmen ??

re. postpone CSS; you can do so with the “eliminate render-blocking CSS” in Autoptimize, but you will have to either provide default “above the fold CSS” or create “critical css” rules. that will ensure the CSS is not render-blocking too ??

Thank you.

In my free time, I will also try this option.