Poor LCP Performance in Lighthouse

[HEIGE-PCloud]

Lighthouse audition gives out an incredibly low score for the mobile performance. It takes more than 4 secs for the largest contentful paint (which is basically how long does it take for the pictures to show up) in 4x slower simulation (so in reality, it is around 1 second).

After some performance analysis, you can see clearly that all pictures such as the avatar.webp, featured-image.webp and the CSS stylesheet style.min.css are all loaded at around 500ms (around 2 seconds at 4x slower simulation).

So, it turns out that the main stuff that 'slower' down the performance is the transition: opacity 300ms; animation.

Which sounds very stupid as with a slower internet condition, the animation will not be 4x slower. But lighthouse simply does not know that. So if you find the score in Lighthouse or Page Speed Insights does not match the advertisment, it is not my fault, この世界は間違ってる.

[HEIGE-PCloud]

I don't want to simply remove the opacity transition animation. It looks rubbish when the image simply shows up to your face.