Improve page load performance

[josueetcom]

PageSpeed Insights rates our site at 90/100 for Desktop performance and 36/100 for mobile performance:

We should really address performance issues by leveraging code-splitting (lazy loading) and Suspense: https://web.dev/code-splitting-suspense/

[josueetcom]

For reference, here is the score after #1108 but before #1114:

Big gains in FCP and SI scores! #1114 should hopefully address LCP. Still gotta figure out how to improve TI and TBT :P

[josueetcom]

Looks like we have a better score now after merging those two PRs:

TTI, LCP and TBT have dropped without affecting FCP and SI.

The score seems to vary after a runs but I think this is the first time I've ever seen PageSpeed insights give our site a score of 50+ on mobile.

[josueetcom]

What remains to be improved has to do with the JS we send to the browser. There's a lot of unused code:

Unfortunately most of it is has to do with Firebase:

• 15% (175KiB) is for the Firestore library. Loaded for ScholarshipsContext. Not needed for the public home page but is needed for other pages.
• 14% is for the analytics library (green box at the bottom)
• And the iframe.js file somewhere is for Firebase Auth. It doesn't always appear but on PageSpeed it says it's 263 KiB and not zipped. In practice though the mobile view in my inspector gives around ~86 KiB and it is gzipped.
• Everything else there is pretty much needed as far as I can tell.

But, these are some things we could try:

• Some how code splitting away ScholarshipsContext and its firestore imports so that they're only used on an as-needed basis (e.g. under the /scholarships routes). Nested routes might make sense. This would address 15% of the bundle size and some of the blocking time for pages that don't use the context.
• Use Firestore Lite instead? We'd be missing some features like caching but we could always change it back later (much easier to go from lite -> full than the other way).
• Deploy ES2015 to browsers that support it. Apparently the reduction is about 50% or more! Which would be totally worth it, especially as we add more features to the app.

The last one seems the most promising to me, especially since every major browser supports it since March 2017:

It looks like at least 95.46% of browser versions used in the US fully support ES6. Of the ones tracked, 98.36%. And of mobile users specifically, 99.15%. Definitely seems like an easy win to me!

[josueetcom]

Next step: follow this guide to send modern JavaScript.

[josueetcom]

According to https://estimator.dev/#dreamscholars.org modern JS might only make the site around 12% faster :P