First Contentful Paint worse than expected

[JohannesRudolph]

I have a bit of a puzzler around vuepress and First Contenful Paint (FCP), which is important for SEO. I frequently browse with JavaScript disabled and sites built with vuepress render absolutely snappy. That's what I also expected given that vuepress uses server-side-rendering SSR.

That's why I was really surprised when the first Lighthouse Report I ran on the vuepress docs page generated a measly 1.9s First Contentful Paint metric on the mobile version.

I dug a bit deeper and found that Desktop is of course a lot quicker but also not nearly as fast as expected at 400ms. Now when I look into the performance trace using Chrome Dev Tools, I see something unexpected

The "Screenshots" timeline/filmstrip shows the first paints already at ~150ms, but the first paint only occurs at ~450ms, with the first "Frame" being only shown at ~550ms in the Frames timeline.

How come the "Frames" and the "Screenshots" don't match up? Is there anything here that vuepress can do (or I can configure it to do) to get better FCP scores like only loading the vue client app asynchronusly/lazily after already triggering the FCP event?

Maybe I'm getting this all wrong, new to this stuff, not my home turf ;-)

[Mister-Hope]

I am not prettier sure about that either. The problem may come from cls, where vuepress default theme is not setting hero logo and navbar logo's width and height.

But the score is green with a 1.4s time in my test case.

I don't think currently vuepress has any preformance issue here.

[JohannesRudolph]

Thanks for your insights here @Mister-Hope. I suspect it may have something to do with the way Chrome Lighthouse Devtools works in particular. I manually deleted the body element of the page using element inspector, then set in the Network Tab throttling to 3G slow, disabled network cache and hit "Start profiling and record" directly in the Performance tab. This way I got this trace

It seems that Chrome simply takes a screenshot of the viewport because the first screenshots and frames show exactly the result of that. Stilli, the screenshots timeline shows rendering around 4000ms while the FCP is recorded at 5000ms. Interestingly this coincides with finishing the load of the styles.css bundle.

What becomes clear from that screenshot though is that somehow the VuePress app "misses" the chance to already record a FCP at ~2000ms when it finishes loading the html and before fetching all the javascript bundles etc. to hydrate the html. Not saying this is a "problem", I just expected it would be different.

[JohannesRudolph]

Ok I have figured out what I was missing about Chrome Devtools - I read the UI wrong on that page. There are two timelines!

• At the top we have the FPS, CPU, NET and Screenshots, they share the timeline axis at the very top of the page. They select a slice to show details for the bottom section
• The bottom section start right underneath the screenshots filmstrip with its own timeline axis at the top. This is not the timeline axis for the screenshots filmstrip (which is part of the top section)

Confusing UI for sure...