4 ms·

8.2 MB initial page load and slow as hell (1-2sec) when trying to navigate between pages. It was so slow I thought the site wasn't doing anything. It looks lik

8.2 MB initial page load and slow as hell (1-2sec) when trying to navigate between pages. It was so slow I thought the site wasn't doing anything. It looks like rendering a new page is blocked until API requests to both "categories" and "products" endpoints are completed, which is terrible. They should be background requests that aren't render-blocking. Also, these requests fire _every time_ you click a link. Right now, the user experience is 0/10. Would not recommend.

akmittal 6y ago
Culprit is large image than necessary as its always the case. Out of 8.4 MB transfered 7.5 are just images. Product images which they are showing in 400x500 viewport has actual size of 2400x3600 (7x). I think NextJS introduces <Image /> component im not sure how much that would have been useful.
stevenkkim 6y ago
To be fair, the bulk of the page load consists of large unoptimized images. My page load was 9.1 MB of which 8.1 MB were images and 446 kB was react devtools. So that means the rest of the site is about 0.5 MB.
- chrisweekly 6y ago
  why would a prod build ship 446kB of devtools? we're clearly discussing radically non-optimized (ie, misconfigured) build, making criticisms of nextjs per se entirely moot.
thawab 6y ago
One of the reasons is that the page is not using next.js 10, which has image optimization built in, for comparison you can check the ecommerce app built in next.js 10 here: https://demo.vercel.store/ https://demo.vercel.store/
- akmittal 6y ago
  Performance is so much better for this one.
- egeozcan 6y ago
  next.js 10 finally has the "home.php" feel. Yeah, yeah, full-circle and everything but I can use typescript to create "home.tsx", come on!
dawnerd 6y ago
Definitely not the images causing it to be slow as suggested in the replies. It's just poorly built. I have a next app that was using the older version with massive images and navigation was near instant.
- ZephyrBlu 6y ago
  I think they are commenting about the images specifically. As you say, the large images and poor navigation are definitely separate issues.
adevx 6y ago
"It looks like rendering a new page is blocked until API requests to both "categories" and "products" endpoints are completed" This could be the known issue[0] with how Next.js does Server Side Rendering with getServerSideProps(). It calls this on every page transition, even client side. Often resulting in unnecessary loading of initial data. [0][https://github.com/vercel/next.js/issues/11897 https://github.com/vercel/next.js/issues/11897]
- ZephyrBlu 6y ago
  Damn. If this is a Next.js issue then I'm pretty disappointed that it doesn't work well for such a common use case. From the looks of that issue there are workarounds in some instances though.
IshKebab 6y ago
It's not just that the page loads are slow - they give you zero feedback that something is actually happening. Chrome's progress bar never appears, links don't change style, etc.

akmittal 6y ago

Culprit is large image than necessary as its always the case. Out of 8.4 MB transfered 7.5 are just images. Product images which they are showing in 400x500 viewport has actual size of 2400x3600 (7x). I think NextJS introduces <Image /> component im not sure how much that would have been useful.

stevenkkim 6y ago

To be fair, the bulk of the page load consists of large unoptimized images. My page load was 9.1 MB of which 8.1 MB were images and 446 kB was react devtools. So that means the rest of the site is about 0.5 MB.

chrisweekly 6y ago
why would a prod build ship 446kB of devtools? we're clearly discussing radically non-optimized (ie, misconfigured) build, making criticisms of nextjs per se entirely moot.

thawab 6y ago

One of the reasons is that the page is not using next.js 10, which has image optimization built in, for comparison you can check the ecommerce app built in next.js 10 here: https://demo.vercel.store/ https://demo.vercel.store/

akmittal 6y ago
Performance is so much better for this one.
egeozcan 6y ago
next.js 10 finally has the "home.php" feel. Yeah, yeah, full-circle and everything but I can use typescript to create "home.tsx", come on!

dawnerd 6y ago

Definitely not the images causing it to be slow as suggested in the replies. It's just poorly built. I have a next app that was using the older version with massive images and navigation was near instant.

ZephyrBlu 6y ago
I think they are commenting about the images specifically. As you say, the large images and poor navigation are definitely separate issues.

adevx 6y ago

"It looks like rendering a new page is blocked until API requests to both "categories" and "products" endpoints are completed" This could be the known issue[0] with how Next.js does Server Side Rendering with getServerSideProps(). It calls this on every page transition, even client side. Often resulting in unnecessary loading of initial data. [0][https://github.com/vercel/next.js/issues/11897 https://github.com/vercel/next.js/issues/11897]

ZephyrBlu 6y ago
Damn. If this is a Next.js issue then I'm pretty disappointed that it doesn't work well for such a common use case. From the looks of that issue there are workarounds in some instances though.

IshKebab 6y ago

It's not just that the page loads are slow - they give you zero feedback that something is actually happening. Chrome's progress bar never appears, links don't change style, etc.