reduce unused JS, i.e. the way we import stuffs, whether or not tree shaking is done.
Preload and optimize large images such as banners
Layout shift in mobile is not the best, perhaps we need to set widths and heights more explicitly to prevent it from occuring
Potential optimizations (the ones i can think of now):
remove unused imports (good practice even though tree shaking will not include it)
enable tree shaking by setting sideEffects: false in package.json
upgrade all our package versions to experience potential optimizations that may not be done in our current versions
remove moment ~400kb parsed size lol (can consider date-fns or other more lightweight packages)
resize/optimise images before serving as~100kb image is quite big, can consider https://squoosh.app/
disable react dev tools in production: https://github.com/facebook/react-devtools/issues/191
In some packages, tree shaking is not working as intended even though they are in esm format
We need to change the way we import certain packages, i.e. `@kiwicom`
Instead of:
Do:
Remove or move certain packages from dependencies -> devdependencies
next-images
@testing-library (technically can remove since we have no tests
Created a bundle analysis that you can view it here: http://gfg-bundle-analysis.surge.sh/
Can also check in PageSpeed to see our performance with reference to google's benchmarks: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgiftforgood.io
From the bench mark, we need to:
Potential optimizations (the ones i can think of now):
sideEffects: falsein package.jsonresize/optimise images before serving as~100kb image is quite big, can consider https://squoosh.app/
disable react dev tools in production: https://github.com/facebook/react-devtools/issues/191
In some packages, tree shaking is not working as intended even though they are in esm format
We need to change the way we import certain packages, i.e. `@kiwicom` Instead of:Remove or move certain packages from dependencies -> devdependencies