Lighthouse Performance issue

[thomasledoux1]

Bug report

Describe the bug

I ran the 'npm run build' command, and then put my site live through 'now' command. When I run a Lighthouse audit on my website, I'm currently getting a performance hit, because of the following:
"Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load".
I can see the CSS is being loaded in the tag as follows: .
Is there a way to "resolve" this performance issue?

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://website-thomas.thomasledoux1.now.sh/
2. Run a Lighthouse audit
3. Check the suggestions for Performance

Expected behavior

With the default 'build' command and setup, I would expect the CSS to be loaded as efficiently as possible.

Screenshots

https://snipboard.io/HCwVSX.jpg

System information

• OS: Windows
• Browser (if applies) Chrome
• Version of Next.js: 9.2.2

[timneutkens]

Looks like nothing on the page is pre-rendered 🤔 Can you provide a repository? You're probably doing something non-standard in _document, _app or the page itself

[thomasledoux1]

Hey @timneutkens,
Sure, you can find the repository here: https://github.com/thomasledoux1/website-thomas.

[thomasledoux1]

I'm using smoothscroll-polyfill inside the Home component, and this module required access to the window object. I read in the FAQ that this was the way to handle this?

[timneutkens]

Probably not the best idea, and definitely the reason your lighthouse score is low. You should probably only enable it when client-side / in useEffect.

[thomasledoux1]

Thanks Tim, I changed the code now to not load as SSR anymore. I'm now loading the smoothscroll-polyfill in my useEffect hook and it works fine like that too. Thanks! This issue can be closed.

[timneutkens]

Looks a lot faster now!

[thomasledoux1]

Sure is! Thanks for the help 👍