Production is very slow

[HarelStern1]

Hi, my app is not too big and does not have many dependencies.
I've deployed it on Vercel, however, it is really slow.
when i run "npm run build" & "npm run start" localy it runs way faster as i would expect.
I think i may have deployed it in a wrong way.
If anyone could help me i would really appreciate it.
Thanks (:

[icyJoseph]

Got a link to the deployed app?

[HarelStern1]

https://back-office-new.vercel.app ‫בתאריך יום ה׳, 12 בינו׳ 2023 ב-14:54 מאת ‪Joseph‬‏ <‪ ***@***.***‬‏>:‬

…

Got a link to the deployed app? — Reply to this email directly, view it on GitHub <#44813 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXNWZQVIM2ISZYJBGGCUX73WR75J7ANCNFSM6AAAAAATZFJCBY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[icyJoseph]

There's a chunk in your project, which has a lot of unused JavaScript, could that be the problem?

Check this Lighthouse report

Having a file size of 414.6 KiB, where 353.4 KiB is unused, is not good. Are you importing Material UI correctly? It looks like the entire MUI is bundled into your application. It is thousands of unused JavaScript, that the browser has to download, and parse, to then do absolutely nothing with them.

[bennyschmidt]

Their lighthouse report is great actually - better than Google, better than GitHub, IG, Facebook... I think you're over-estimating the effect of "300kb of unused JS" which is probably just library code.

I am confident the user's website is not the reason it's slow, it's Vercel. I've used Vercel for a long time, and whenever it's time for production-level traffic I always leave Vercel because it is so incredibly slow. If you run Lighthouse from CLI, it shows that Vercel is the only thing in the red - the initial serving of the page.

[icyJoseph]

Well,

IIRC when I ran some "naive" stress test with oha (200 requests), it showed alright results, like so:

oha https://back-office-new.vercel.app
Summary:
  Success rate:	1.0000
  Total:	0.1464 secs
  Slowest:	0.1108 secs
  Fastest:	0.0089 secs
  Average:	0.0300 secs
  Requests/sec:	1365.7848

  Total data:	869.73 KiB
  Size/request:	4.35 KiB
  Size/sec:	5.80 MiB

Response time histogram:
  0.009 [1]   |
  0.019 [144] |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  0.029 [4]   |
  0.039 [1]   |
  0.050 [0]   |
  0.060 [0]   |
  0.070 [1]   |
  0.080 [22]  |■■■■
  0.090 [10]  |■■
  0.101 [11]  |■■
  0.111 [6]   |■

Latency distribution:
  10% in 0.0095 secs
  25% in 0.0102 secs
  50% in 0.0115 secs
  75% in 0.0606 secs
  90% in 0.0876 secs
  95% in 0.0935 secs
  99% in 0.1064 secs

Details (average, fastest, slowest):
  DNS+dialup:	0.0715 secs, 0.0457 secs, 0.0933 secs
  DNS-lookup:	0.0217 secs, 0.0076 secs, 0.0466 secs

Status code distribution:
  [200] 200 responses

Does that seem slow?

The lighthouse report, for OP's site did not indicate any TTFB issues. It only flagged unused JS. I ran the one below with x12 slowdown multiplier.

This is why I ended up with the "self referential question", what are saying is slow here.

[bennyschmidt]

Dude's entire site is under 1MB, and the unused data in question is mere kbs. Hilarious. There is no substitute for hands-on experience it seems.

[JaceksFridge]

@bennyschmidt Can you recommend a hosting services which loads your pages as well as resources faster? (had the same issue with vercel)

[bennyschmidt]

@JaceksFridge If you still want the convenience of a PaaS, Heroku is way faster than Vercel, and does builds for you like Vercel (so you can just commit your React changes and it builds/deploys for you like Vercel).

If you want faster but insanely expensive lol go with an IaaS like AWS or GCP - you will have to build your React app and upload the static build directory. You also have to manage the versions, these cloud providers honestly overcomplicate the basics, but it's the "cool" thing to do.

The fastest of all is of course on-prem. Get a little Raspberry Pi 4, install node, forward ports, install SSL, you're good to go.

[HarelStern1]

Hi, i removed my unused javascript but it is still very slow, the weird thing is that when i run npm run build and npm run start locally, everything works fast, api calls to the db work very fast but in my deployed app is it slow. is my deployment wrong? ‫בתאריך יום ו׳, 13 בינו׳ 2023 ב-12:10 מאת ‪Joseph‬‏ <‪ ***@***.***‬‏>:‬

…

There's a chunk in your project, which has a lot of unused JavaScript, could that be the problem? Check this Lighthouse report <https://googlechrome.github.io/lighthouse/treemap/?gzip=1#H4sIAAAAAAAAE72VTXPbIBCG/4pHZxMJBELk2ObqQ8b1qdPJIFgcaoxUgfI5/u9FTntR5U4z0fQo9uth99Xymrn7Prt+zXr4MUCIoHe9y66z+xi7cJ3njVQH1BpjFSAPj1cP0CtwV7Lr8mydGeule0+AHLSNYawXVG+7iGIPcJQd0jLK8djqlGvOts6ijQ6SdXu2rr68WVc3b1YNb1G29clnF0CvTNuvfuVYpfrJKai2Tyn84NyvjxsbOiefN60eU1ufYo4y2gc4p4zSujNtfO5G+4TIp6hk/vqaeXmEf25CD6Ed0sGn5ziGY8ZO6/ekuPPwFPMQE6fK1f3gDyHvWvdsrHMBqYpLzjRuKiOEVvXV9/BnzeLjFR+h6cYIMCXDNUhDaqJEXc7WK+uSrbPBD2kuv6/N8QL3Nn0Kf2z7A8KYViWVqqmpqRspZzkwxQWjExLKCBMfRzlK6xFQrUkaQUU5rTTj8xSFIERMKQRjC4ylk3sI+V0yI0EYBS01wQK4ruksC0lto3zCIgpR8KVYrNfwhHQ50hjGCa9lIy7IpJqq5CMduT1udg90c/Py2dIXve0PcLt7ye+awTq9kd6atO9mMTj9Dxgh7P8KIaYyXUAcGBNUVxIYKZTmCmshqwsKLapiUp+ziiylCan16Iz2fTt0CIjWJa4NFkbUxOh5oVI67UiS7mJEAZyDPiDWFKoQBquGY00JuaDT6R+zxA4nJcKy4KUsKTVcioqK2eqUUFbhCUBZYYHpUt04zyWgMklFp6FUvEmbFV9oRlFMdxnmQpy+nU6ndaZab+x+CzFavz+/pa5V8vyQg0e7bZa8fgKjLDeyhQgAAA==> Having a file of with 353.4 KiB with unused 414.6 KiB size, is not good. Are you importing Material UI correctly? It looks like the entire MUI is bundled into your application. It is thousands of unused JavaScript, that the browser has to download, and parse, to then do absolutely nothing with them. — Reply to this email directly, view it on GitHub <#44813 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXNWZQSVUGQHONGUTUK4W2DWSES27ANCNFSM6AAAAAATZFJCBY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[icyJoseph]

Let us define, "slow", what are you experiencing exactly?

api calls to the db work very fast but in my deployed app is it slow

Perhaps the problem is that, either too much data is passing on every request, locally this is not noticeable, or, that the cold start of your API route is far too slow.

Since API routes work as serverless tasks, they cold start, only when a request arrives, unless there was an instance already started.

Try to use @next/bundle-analyzer which will also analyse your server side bundle, and see if your API routes are large, like more than 600kb is perhaps already too much? Not sure, but do analyse it please. Post back some results.

[HarelStern1]

Thank you for your response.

…

On Fri, 13 Jan 2023 at 18:13 Joseph ***@***.***> wrote: Let us define, "slow", what are you experiencing exactly? api calls to the db work very fast but in my deployed app is it slow Perhaps the problem is that, either too much data is passing on every request, locally this is not noticeable, or, that the cold start of your API route is far too slow. Since API routes work as serverless tasks, they cold start, only when a request arrives, unless there was an instance already started. Try to use @next/bundle-analyzer which will also analyse your server side bundle, and see if your API routes are large, like more than 600kb is perhaps already too much? Not sure, but do analyse it please. Post back some results. — Reply to this email directly, view it on GitHub <#44813 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXNWZQXHJCX2O6UWJ4V3A6TWSF5JRANCNFSM6AAAAAATZFJCBY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[maranmaran]

Checking in here...

I get bad lighthouse perf because my LCP "loads" slow, however, that is because I have some small JS that should fade the image in and the image downloads quicker than the responsible JS... which for whatever reason takes from 1.5-5 seconds

I'm located in Denmark, EU and have optic internet

[icyJoseph]

In the Lighthouse report there are a few small labels, one of them says LCP, could you click on it and scroll down? You'll see a breakdown of the LCP time. Post that back in here.

[icyJoseph]

Talking about this chart:

[maranmaran]

Vercel hosting:

Home page LCP

Home page JS

Firebase hosting:
Home page LCP

Home page JS

[maranmaran]

Actually, slight bad from me there. I've measured this on company laptop and thus network. They might have some funky network stuff going on there.

On my personal network it's much better.

[AlexandrePatob]

Hello, I have the same problem.

I looked here and the url https://back-office-new.vercel.app/ seems to be very fast, how did you solve the problem?

[benacq]

Hey, did you find a solution by any chance?
I'm having the same issue?
I've tried a lot to fix it but none worked, considering migrating tomorrow.

[quannv]

I struggled with Vercel for a week, and final solution is moving website to AWS, the performance is much better
Here is my site on AWS: https://kapanda.com/

[VidathChamikara]

Is AWS free?

[quannv]

Is AWS free?

Not free :)

[VidathChamikara]

What about Netlify. I deployed and host some of REACT Apps on Netlify. Without any delay those apps working.

[renolddickson]

The issue is due to SSR in Next.js, and the App Router tends to be somewhat slow. However, running npm run build followed by npm run start in a local environment will make it faster.

[cherishh]

I have the same issue. Build & serve in local is fast, as expected. But on vercel it becomes painfully slow(requests take 1s+ to load something). Any solution?

[Nader-CS]

i encounter the same issue , any solution ?

[cherishh]

I've built a simple app that fetches data using cache: 'force-cache'. Locally, it builds and previews fine, and caching works as expected. However, after deploying to Vercel, it's incredibly slow – pages take over 800ms to load, and caching doesn't seem to be working.

Here's the demo: next-try-again.vercel.app
And the code: https://github.com/cherishh/next-try-again

[cherishh]

ok now i have a conclusion. reason is simple: app router currently just sucks. see: https://x.com/thdxr/status/1905114171500273945

[MatheuszzFF]

I was having the same problem and i just found out that the region of host in vercel was in north america while im in south america, i changed it and requests fixed from 6s to 400/300 ms.

Hope it helps

[AruhaMaeda]

Same. My supabase database is in Tokyo. When vercel's function was in US, api response was very slow. (3-6s)
After I changed vercel's function to Japan, it become much faster. (200-600ms)

You should check the region of your database and vercel's function.

[harastaivan]

Same