10

I have build a App using nextjs and deployed it on server, I have observed that initial page loading take 4 sec to load and all subsequent page loads takes fews ms to load , if next generates the static html page and serves it then why does it take so long, correct me if I am wrong,

network process screenshot

https://public-sapient.vercel.app/

MOin
  • 31
  • 1
  • 1
  • 8

1 Answers1

1

UPDATE:

You are running too many asset requests in parallel. I suspect your asset host is throttling your requests because we see some slowdown every X request.

Only request the assets that are in view using an IntersectionObserver solution.

======

Network cost is actually all the operations that need to be completed by a site and it's not always the best marker for performance.

For example, lets say that I have a total network cost of 4ms. Even though one of the scripts takes a long time to complete (which affects total network time), my web core vitals are good and actually my First Contentful Paint (FCP) is short so users get to see a working site quickly.

Web Core Vitals are better metrics https://web.dev/vitals/

Ran a Performance Audit in Chrome Dev Tools and couldn't find any obvious issues. There are a few large tasks and a big layout shift, but nothing that could visibly cause that delay.

alanionita
  • 1,272
  • 1
  • 16
  • 34
  • okay, However there are some ssr sites( take [news website] ([https://www.prothomalo.com) for instance, The fcp is incredibly fast, is there any way to achieve this – MOin Aug 26 '20 at 11:22
  • Oh yeah 100% can be achieved. Network cost is mainly related to data, shrink the size of everything, use a CDN + cache, look at code-plitting with NextJS. Looks like you get the launches from an api - maybe build a proxy api that fetches them and puts them in a cache so when you request them it's a faster operation. It's more of a web architecture problem. – alanionita Aug 26 '20 at 11:29
  • Ah Thanks, I will look into the approaches mentioned above, I would like the learn more about web architecture, would you recommend any good courses or online material to learn web architecture in depth – MOin Aug 26 '20 at 12:19
  • A lot of it comes from practice, so don't worry too much about web perf. As long as the web vitals are good, you're doing well. https://web.dev/ is a good resource, but there is a lot to learn so take in small steps, focus on one vital or one approach and build up from there. The https://web.dev/live/ conference is great content and they had a few videos on web vitals. – alanionita Aug 26 '20 at 13:35
  • 1
    4.68s load time for the initial document request is extremely slow. The gold standard is considered to be < 40ms response times. Writing off a 100x slowdown from what should be your target response time as an unimportant metric is not helpful. – Evan Byrne Dec 02 '20 at 18:19
  • @alanionita - Stuck in the same problem. FCP and LCP are slow. I have few images loaded on the initial view port and used Image Compression. But still unable to get the FCP faster. – Appy Mango Feb 19 '21 at 18:17
  • 1
    Are you guys using the 'next/image' component? If yes, check if the loading time gets better when you remove it. If so, there might be a caching problem (i.e. max-age headers value is too low), and everytime a user visits your page the next server has to do all the fancy magic to compress the images and to convert them to future web formats like webp. See https://github.com/vercel/next.js/discussions/18481 – Felix Hagspiel Mar 19 '21 at 09:45