Lighthouse scores are low - using custom server with express + antd

[raindecastro]

Hi there! To anyone who would be willing to help me it would be amazing. I'm trying to create a boilerplate that would be able to have two things.

• Custom server using express
• Ant Design library

I created a quick little dashboard with this and deployed it to Heroku. I wanted to test out the performance with lighthouse. Unfortunately I got a really low score with performance.

Here's the link so you could check the performance using lighthouse -
https://coastal-staging.herokuapp.com/

Do tell me if a repo would be helpful!

[janus-reith]

Well, although there is room for improvement, I wouldn't call it "really low".
Did you run Lighthouse in an incognito tab?
Here are the desktop results I get:

[raindecastro]

That's interesting. Here's mine for reference!

For some reason scores went literally up once I was in incognito mode, also tried it again in the normal browser, scores seem better. Thanks for the help btw, I really appreciate it!

Would you recommend me trying out a different way to handle ant design's implementation? I think the 'removed unused CSS' were from antd's CSS

[janus-reith]

@raindecastro One thing I noticed is that both css files Lighthouse mentioned are not minified, although that probably doesn't account for the issues with the unused css.
https://coastal-staging.herokuapp.com/_next/static/css/styles.82abfc3a.chunk.css
https://coastal-staging.herokuapp.com/_next/static/css/04eab6188193162fa68cd886170f75a049dc043c_CSS.31053dd1.chunk.css

Did you check out the examples in the repo? e.g.: https://github.com/vercel/next.js/tree/canary/examples/with-ant-design
The main relevant ants css seems to be imported here:

next.js/examples/with-ant-design/pages/_app.js

Line 1 in a32fa42

import 'antd/dist/antd.css'

Quick Note: That example seems to be broken currently, #13604 should fix it.

[raindecastro]

@janus-reith

Yeah, I actually used the sample repo with-ant-design-less for this boilerplate. Unfortunately when you import antd.css like that, it would also include other styles from components I wouldn't need.

Ex. I would only use the component so the button styles should only be used.

I looked around github and saw this issue - #9830

Looks like i'll have to find a better way to implement this. Thanks alot for the help! I think this pretty much answers my question above.

[Vadorequest]

When running LightHouse in non-incognito mode, all your (Chrome) extensions are slowing down the app. (but 8% is crazy, for me it's around -20% performance and I have like 30 extensions, maybe one of yours make things really bad?)