Largest Contentful Paint timing really slow even though the largest content is loaded from the beginning

Question

I am using react ssr with styled component and the google speed test says the largest content load speed is pretty slow.

First paint time takes about 1.1s and the largest content for my site is image hero and it says it takes about 12s. However, the paint timeline shows image almost from the beginning.

The below image is from dev tool performance tab.

As you see the image is there whole time. When I run the performance test, the image sometimes goes blank but the image shows before first paint.

Do you see any abnormality from the performance result?

Answer 1

You have some JS running that seems to be blocking the Main thread and therefore that FPS drop. Analyze the big yellow parts of the Main thread to find the slow culprit.