Improve page speed performance and Vercel deployment build times

[jahirfiquitiva]

Requirements

• I have verified there are no duplicate active or recent bugs, questions, or requests

URL

https://jahir.dev

What happened?

1. Currently PageSpeed Insights Core Web Vitals Assessment fails, and the performance is ~86 on mobile

Diagnostics mention:

• First Contentful Paint: 2.0 s
• Largest Contentful Paint 3.2 s
• Total Blocking Time: 240 ms
• Speed Index: 3.4 s
• Minimize main-thread work (2.4 s)
• Reduce JavaScript execution time (1.7 s)
• Largest Contentful Paint element (3,230 ms)
• Reduce unused CSS (Potential savings of 10 KiB)

2. Deploying on Vercel currently takes about 2 mins and 30 secs. More context: https://x.com/jahirfiquitiva/status/1754983387641622716?s=20

Reproduction Steps

Deploy the project

Expected behavior

1. Core Web Vitals Assessment should pass with everything in green. Performance on mobile should be at least 90.

2. Deployment time should take less than 1 min and 30 secs, which is almost what it takes to run git pull ... && yarn && yarn build locally.

---

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[jahirfiquitiva]

I'm funding this issue so if someone is able to fix it and achieve the Expected behavior mentioned in the issue description, said person will be paid.

I'm offering $75 USD if you achieve point #1, and $25 USD additional if you achieve point #2.

[gregives]

Hey Jahir, I've looked into this but I haven't had any luck with it so far. I thought I'd update you on what I've explored:

• Images: You don't have any large images and all images are optimised.
• Fonts: Just two fonts, you could subset them but it wouldn't change their size by much.
• Fade animation: I noticed that you fade in elements when the page loads, I thought this might affect LCP but it looks like Lighthouse/PageSpeed Insights have reduced motion so it's disabled for those anyway.
• JavaScript: This is the big one, PageSpeed Insights seems to think you have a lot of JavaScript. Running @next/bundle-analyzer and using the profiler shows that you don't have any large bundles or long-running tasks apart from react-dom and Next.js. Not really sure what you can do about that!

I'll keep on playing around with it, to see if I spot anything else. Next steps might be to comment everything out and add stuff back in until you find a performance regression.

[jahirfiquitiva]

Thank you so much @gregives ! 🫶

Yeah, I was just checking with bundle analyzer last night, and there's a couple things that I would rather not be part of the client bundle.

Probably because when using "use client" everything inside of it and its children components, will be added to the bundle.

So, I think one thing I (or we) could try is to try for server components inside client components to not be part of the client bundle.

Or reduce the amount of dependencies used in client components. Although that might mean missing some functionality.

Oh, and I wish there was a way to use Preact (instead of React) on the client. Like it was possible in previous versions of Next.js

We'll keep trying, thanks again!