I am having a tough time reducing my mobile FCP and LCP stats, being 3.6s and 5.5s respectively.
I've read through this question, done all of the suggested points already and I still face a huge Load Delay for my LCP.
- My LCP is a
<picture>inside a Bootstrap Carousel used as background - The
<picture>has various sources, among others a webp and a resized webp version:
<picture >
<source srcset="http://localhost:8888/image.webp" type="image/webp" media="(min-width: 576px)">
<source srcset="http://localhost:8888/image_xs.webp" type="image/webp" media="(max-width: 575px)">
^^^ this is the one that gets used for the LCP
<source srcset="http://localhost:8888/image.jpg" type="image/jpeg" media="(min-width: 576px)">
<source srcset="http://localhost:8888/image_xs.jpg" type="image/jpeg" media="(max-width: 575px)">
<img src="http://localhost:8888/image.jpg" alt="alt" >
</picture>
- I added a
<link rel="preload" fetchpriority="high" as="image" href="http://localhost:8888/image_xs.webp" type="image/webp" media="all">and in the dev tools network tab I see that it's actually the first source being loaded. It's 14 kB and takes 2 ms to load.
So, running Lighthouse locally in dev tools I still get a Load Delay of 3800 - 4000 ms in the LCP which is weird to me since the whole page, according to the network tab (after running LH), just takes ~400ms.
I guess that Load Delay does not describe when the image source was loaded, does it? Does it describe the delay the renderer takes to actually correctly display that element? If the latter, I really dont know what else to improve. I have 2 CSS files, one just being bootstrap, one custom, both minified and gzipped and combined below 50 kB. Even packing them into one file doesnt change a thing.
I only get 2 diagnostic recommendations by Lighthouse. The first one being to "Eliminate render-blocking resources" with a potential saving of 2,700 ms. As said, I only have 2 stylesheets though, bootstrap.min.css and my minified main.min.css. I cannot split their positioning or put them at the end of the page because that would result in more red flags popping up, like Layout Shifts and effectively halfing my performance score.
Google recommends putting inline styles in the top elements and after that to load the stylesheets which sounds like madness to me and is actually impossible for many big sites and I am really confused that anything other than that will be punished.
The second entry is just the big LCP element in general:
| Phase | % of LCP | Timing |
|---|---|---|
| TTFB | 8% | 450 ms |
| Load Delay | 68% | 3,720 ms |
| Load Time | 1% | 40 ms |
| Render Delay | 23% | 1,280 ms |
Also, Lighthouse in dev tools asks me to minify the js of chrome extensions which sounds weird...
So, any idea what I am missing? I am currently playing around with mod_pagespeed on Apache, maybe that will help.
Edit
In the Performance tab I actually see better results for my LCP and FCP after implementing a lot of the measures. I still dont understand the LH reports.