How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score
How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score
Colin Armstrong
<1 min read·
nextjs
react
programmingtips
Collect this post as an NFT.
Subscribe to Paragraph to receive new posts directly to your inbox.
timdaub
Commented 2 years ago
Kiwi News bundle.js. It's sadly 2MB big and I'd like to reduce its size. But I don't see any obvious optimizations.
Colin
Commented 2 years ago
are you lazy loading? eg loading connectkit lazily when needed since it's massive
timdaub
Commented 2 years ago
I switched to script defer now
timdaub
Commented 2 years ago
@colin but I don‘t do code splitting, should I? It seems like massive complexity increase
:grin:
Commented 2 years ago
just delete it all. that site doesn't need any js
timdaub
Commented 2 years ago
actually web3 without JS is sadly not possible but otherwise I‘d do it
Phil Cockfield
Commented 2 years ago
I'm playing a similar code-splitting game with "@farcaster/hub-web" right now! I feel 'ya @timdaub.eth !!!
Bundle size explosion can be like playing whack-a-mole. I find knocking it in the head early is the easiest way as untangling later become disproportionately harder and harder for me to get my head around.
timdaub
Commented 2 years ago
😞
Phil Cockfield
Commented 2 years ago
I'm sneaking up on it! Haven't put any real work into busting that "blood clot" up yet.
Good luck with your bundle surgery! 🫠💪
Kiwi News bundle.js. It's sadly 2MB big and I'd like to reduce its size. But I don't see any obvious optimizations.
are you lazy loading? eg loading connectkit lazily when needed since it's massive
I switched to script defer now
@colin but I don‘t do code splitting, should I? It seems like massive complexity increase
just delete it all. that site doesn't need any js
actually web3 without JS is sadly not possible but otherwise I‘d do it
I'm playing a similar code-splitting game with "@farcaster/hub-web" right now! I feel 'ya @timdaub.eth !!! Bundle size explosion can be like playing whack-a-mole. I find knocking it in the head early is the easiest way as untangling later become disproportionately harder and harder for me to get my head around.
😞
I'm sneaking up on it! Haven't put any real work into busting that "blood clot" up yet. Good luck with your bundle surgery! 🫠💪
https://www.framer.com/motion/guide-reduce-bundle-size/
npm ls framer-motion web@0.0.0 /Users/timdaub/Projects/attestate/kiwistand/src/web └─┬ connectkit@1.2.4 └── framer-motion@6.5.1 hehe
@pugson more work: https://github.com/family/connectkit/issues/231
Are you using Next 13? that’s one alternative idea also wonder what rainbowkit size v connectkit would be
nope, express and reactjs
I’m kinda digging the way next splits up client and server code, I’ve been trying to go deep on the next app directory designs
Can you migrate from Ethers to Viem?
I‘m open to it but what are the consequences and what do I gain?
Outside of the time to migrate, would check to see if there's any gaps in coverage for how you currently use Ethers (migration guide: https://viem.sh/docs/ethers-migration.html) but you'd likely see some benefits from a bundle size & performance standpoint: https://viem.sh/docs/introduction.html#bundle-size
Are multiple dependencies loading different versions of BigNumber? This was something that was bothering me but couldn't figure out a good solution