[suggestion] - Front-end Optimisations

[chrismclarke]

Following work on backend optimisations (#953), some thoughts on good potential frontend optimisations ahead of larger v2 changes

• [ ] Remove material UI #447
• [x] Add virtual scroll component #493
• [ ] Analyse bundle size and check for easy ways to slim down (analyze script already exists)
• [x] Add lazy-loading to pages via lazy and suspense
• [ ] Review DB request strategies (possibly use server-cache more to reduce number of calls)
• [x] Review store injection (ideally should either load lazy with pages or at least initialise then)
• [x] Possibly do minor refactor on howto forms (like settings) to make validation more consistent
• [ ] Rethink image sizing strategy (possibly use picture tags with sourcesets, more default conversions etc. https://www.youtube.com/watch?v=SnFOEhi0ym0&t=1880s). Also include cache-busting strategy so can use cache-first service worker and avoid revalidation fetch calls
• [ ] (until I find somewhere else to make note of this) - https://github.com/react-workspaces/react-workspaces-playground

[chrismclarke]

Optimisations also link with discussion in #952 And writeup: https://github.com/ONEARMY/community-platform/wiki/Environmental-Impact

Summary:

• Want to keep trying to reduce overall site weight (and hence carbon impact)
• Biggest wins to be had by rendering fewer images on initial load, more image optimisations, code splitting, lazy loading

[chrismclarke]

Lazy loading for pages and stores added to https://github.com/ONEARMY/community-platform/tree/feat/lazy-loading

Note, could still do more (particularly reorganise create/edit page to load lazily within main page), but for now reasonable improvement

[chrismclarke]

Latest update, roughly 1MB gzipped.

Recommended priorities:

• remove material-ui
• defer leaflet imports (lazily with maps page/module)
• check latest update for firebase minification and import options (https://github.com/firebase/firebase-js-sdk/issues/2241
• consider moving some of the static images to the server (e.g. shredder png)
• load fonts with preaching (and make sure service worker caches)

Known blocking resources:

• slick (imported into index)

Additional

• consider adding lighthouse to CI https://github.com/marketplace/actions/lighthouse-audit https://github.com/GoogleChrome/lighthouse-ci
• should update dev site to reprocess images to match what would currently be updated (or include as part of new processing pipeline)
• Change service worker strategy to cache-first and add some form of cache-busting to image itself instead (!)