Investigate Light House performance issues

[jpvajda]

When running a lighthouse test found in Chrome Developer Tools, the test reported very poor performance for developer.newrelic.com opensource.newrelic.com

Steps to reproduce

CLI: https://github.com/GoogleChrome/lighthouse

1. Open Chrome Browser in incognito mode
2. Open the developer tools
3. under the light house tab click on generate report.
4. Review results

developer site

opensource site

[jpvajda]

New reports as of Oct 23...

Developer

OSS

[caylahamann]

Findings

Numbers are different for Mobile and Desktop

Mobile

Desktop

There are some main culprits for lower performance

Amplify Cache Policy

• We can enable something called performance mode on our main branch in order to ensure better caching. Changes will then take longer to appear on our main branch (10 minute deploy) but we would see better performance by keeping content cached at the end of the CDN for longer intervals.
• Use custom headers. There are recommended headers for gatsby sites for caching static sites. We would need to add these under amplify in the custom headers section to set up proper HTTP caching.

Loading of NR1 Assets

• This is currently being addressed in Jerel's PR to stitch the NR1 assets into GraphQL and then asynchronously load NR1 assets

Loading of other assets

• Tessen, this appears to still be happening and I'm not sure where we have landed on using tessen but it is taking up some of the payload
• Bizable, We could asynchronously load these libraries as well? I'm not sure what bizable is being used for right now
• Google Fonts, If we ensure that text remains visible during webfont load with a default backup text, then we wouldn't run into this issue.

Further optimizations

We could use a library called Guess.js to load our assets conditionally. Guess.js is able to determine which leverages Google Analytics data and machine learning to determine which pages a user is most likely to navigate to from the current page and only preload those resources.

[caylahamann]

• Make tickets out of these

[caylahamann]

Made follow up tickets in #954 #953 #952

[jpvajda]

@caylahamann thanks for all the work here, it's great to know what the root problems are on the performance lighthouse metric.

Tessen will eventually need to be used on the developer , oss and docs site, but i'm not sure how we are interacting with that service now, as we didn't finish the integration with it.

Bizable is used for marketing metrics, specifically tracking customer journey and was implemented on this issue: https://github.com/newrelic/developer-website/issues/803