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...
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 :)
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,
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.