I have been trying to understand how to optimise the LCP for my website.
At the start my LCP is 2-3 seconds with my css file included, and under 1 second without it.
Following https://web.dev/defer-non-critical-css/ I preload my css file, and inline my critical styles.
This is how I preload my styles:
<link rel="preload" href="/static/style.css" as="style" onload="this.rel='stylesheet'">
This had no effect whatsoever on the LCP reported by lighthouse.
At this point, just to make sure there were no hidden "critical" styles in my css file, I replaced the content of style.css with 20k lines of comments.
Preloading this 20k comments file caused my LCP to be 5 seconds! "Time to interactive" was also five seconds.
What the hell is going on!? How can a preloaded css containing nothing but comments possibly affect the LCP time? Obviously it does not really change the rendering time of the actual content of the viewport.
EDIT: This might actually be caused by the simultated throttling in Lighthouse
This Image shows simulated throttling OFF. You can see the LCP is well before the theme finishes loading.
And here the only difference is that I turned simulated throttling ON. You can see the page isn't rendered without styles at all, and the FCP and LCP are well after the css (purple) is downloaded.
Is it likely that Lighthouse is giving me funny results?