0

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.

enter image description here

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.

enter image description here

Do you see any abnormality from the performance result?

fiddlest
  • 1,262
  • 2
  • 17
  • 42
  • There are a few bits of information missing here to give a full answer [but see if this answer I gave](https://stackoverflow.com/a/64792982/2702894) covers some of the information as to why PSI shows a larger time than the performance timeline. Also you have blanked out some of the timeline for privacy so it is impossible to see if there are any changes there. LCP shows at about 3.4 seconds above from what i can see, which with network throttling and CPU slowdown as explained in my linked answer would be about 12 seconds for Lighthouse. – GrahamTheDev Dec 12 '20 at 00:21
  • Also First Paint is not the same as Largest Contentful Paint, I only mention that as you reference both in different places in your question and quote the first contentful paint time (1.1s) not the Largest Contentful Paint time (3.4s) and just want to check you know the difference (if not happy to explain that also!) – GrahamTheDev Dec 12 '20 at 00:23
  • I am aware that first contentful paint time is different from the largest contentful paint time. I only mentioned because the hero image shows from 1.1s but it wont count as the largest content until like 12 secs – fiddlest Dec 14 '20 at 14:53
  • Ok, it was just a few things you said like "the image shows before first paint" (which is impossible) that made me want to check. In that case I am afraid we would need a URL or a fiddle with the same behaviour to help as the performance timeline doesn't show anything useful. My only guess is that for some reason the image is being painted twice (maybe it is part of a slider of something that is misbehaving). If you want to share a URL or a fiddle I can help, otherwise [this question and answer](https://stackoverflow.com/q/62751471/2702894) will help you see paint flashes which may help. – GrahamTheDev Dec 14 '20 at 15:13
  • @GrahamRitchie Actually, its not even image slider. It is just div with image. I cannot really share url here. I do not think i can replicate with fiddle. I also cannot find any big name website have really fast LCP timing. – fiddlest Dec 14 '20 at 21:40
  • I also noticed that LCP is after DCL which is weird – fiddlest Dec 14 '20 at 21:52
  • 1
    You will have to follow the instructions in the answer I linked to watch the paint flashing on the page, see if the image paints twice and then see why that is, unfortunately that is the best I can offer with the information provided. Also DCL before LCP is quite common if you use lazy loading, JavaScript to build anything on the page, deferred scripts etc. so unfortunately that doesn't help us here I am afraid. – GrahamTheDev Dec 15 '20 at 08:27

1 Answers1

0

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.

Nemanja Lazarevic
  • 957
  • 7
  • 12