Best practices for reducing page size and optimizing assets in Next.js
Last updated: Aug 6, 2022
Any best practices on reducing page size? Got a notification list from Ahrefs that one of my pages was about 50,000 bytes (https://www.redshirtsports.xyz/2022-socon-media-day ). Granted it is a lot of text but I feel like text shouldn't be too much to send down? I’m surprised Next js didn’t complain that it was too big.
Aug 4, 2022, 4:52 AM
It would be good to know what exactly is heavy on the page (I don’t have time to open it and check it just now, sorry). Is it the markup? This could be caused by the amount of data that is returned by Next.js
for that page. Is it the images? This could be because they’re not optimized. Or perhaps even something else?
Aug 4, 2022, 7:13 AM
loads really fast for me, lighthouse gives it a 67 on performance. Maybe try lazy hydration on the text further down on the page?
Aug 5, 2022, 10:49 PM
Odd that it gave a 67 on performance, this is what I get in an incognito window for Mobile and Desktop
Aug 5, 2022, 10:51 PM
But yeah I need to figure out how to get better at PortableText... This is what I currently have
so not sure how I would be able to do lazy hydration on text further down the page
Aug 5, 2022, 10:54 PM
Unless your portable text is absolutely huge, you shouldn’t lazy-load text content. It would also be bad for accessibility and SEO as well. This is very very very unlikely to have any significant performance benefit compared to optimizing assets like fonts, images and icons.
Aug 6, 2022, 7:20 AM
My icons come from https://heroicons.com and I don't think I have any custom fonts (at least not in current production)