How can I lower my LCP score on PageSpeed Insights?

Question

Context:

I recently finished my first ever project for a client (I'm 18 years old) & recently I've been trying to improve the web vitals to boost their SEO.

The biggest problem that I have is that my Largest Contentful Paint is too high which means that all of my URL's are marked as 'Poor' on the Search Console. I've spent hours on this now & read countless articles with 90% of the jargon going over my head.

Research/Attempts so far:

I've compressed all of the images on the homepage, shortened, resized & compressed the video, I moved pretty much all of my files to minified versions linked by CDN's, I deferred most of my CSS, I added lazy loading for all of the images, I ensured that text remains visible for my fonts, I optimised my web hosting, minified most of my CSS/JS...

But nothing I do seems to actually improve the LCP score by any meaningful amount. Even removing the video (the largest element) barely touched my scores...

This is a link to the Pagespeed Insights page:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fprincestheatre.co.uk%2F&tab=mobile

And the website is princestheatre.co.uk .

Am I (very likely) just being really stupid & missing something obvious or do I really need to fight over every millisecond here?

I'd really appreciate any help, thank you :)

Answer 1

Improving LCP is hard, so you're not being stupid and it is not always obvious. And you are correct that most of the blog posts on the topic just re-format what you get on PageSpeed Insights. I build an app that is based on PageSpeed Insights but hopefully makes it more clear on what to do. I would encourage you to try it out and if you have specific questions, just reach out to me via the Chat app on the site. And if you have any feedback on how to make the app better, I'd love to know.

https://waterfaller.dev/?url=https://princestheatre.co.uk

You can take a look at the desktop and mobile results. I would take a look at the top files that are slowing down your site.

But to get you started that won't show up in these reports.

The reason your LCP is failing is that you have both render-blocking stylesheets and also style blocks inside the tag. So to start I would get all my style tags into the or get them all into one stylesheet file. Then you can work on "critical CSS" which can be hard.

Or if you want to avoid working on "critical CSS" then I would do the following,

1. get all your styles into 1-3 stylesheet files (for example do you need both bootstrap icons AND font awesome?)
2. Preload those stylesheets

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

These stylesheets "block" the browser from starting to render the page. So the goal is to load all the required CSS as fast as possible. You know that this is working if first contentful paint or start render times go down.

If they go down then your LCP will go down.

Then I would figure out how to preload your fonts. Since you are self-hosting your fonts, this is pretty easy. And to make it easy I would just preload the woff2 fonts.

Start here as these address why the browser can't render the page faster. Then retest and see. Hint: you will want to figure out how to lazy load the video and images. But I would not start there.

Answer 2

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport , relative to when the page first started loading.

LCP is ok and is in green in PSI for desktop, to resolve for mobile try rendering just text based content (no slider or anything fancy that requires JS, just text) for the top portion of your website and you will see improved result in LCP for mobile.

Answer 3

As this is your first project, I would propose to learn what the LCP is and is not. It's capital to understand it.

Google's definition: The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport relative to when the page first started loading.

In other words, you can choose to design your way into selecting what will be the largest contentful paint and thus affect the score tremendously.

One good trick is to look at what your LCP target is on the page by running lighthouse and looking at the LCP. That's how it looks in Lighthouse.

After you know what the LCP is, you can choose to modify the design a bit to select an LCP that will be fast by default (text, a small image). One of the dangers with the LCP is when you start displaying a picture/big block of text at the very end of your viewport, and it becomes the LCP. In this situation introducing a space to pull that out of the viewport is perfectly fine (example).