Angular - Server side - Initial response time is very high

Question

1. My site - https://sandbox.billionlearners.com => It is on Angular 12 SSR (running on node)

2. Total time taken to render the page is @6secs but initial server side page take @4secs (which has size less than 200Kb)

3. command line dig time https://sandbox.billionlearners.com takes very less time - @150ms

4. https://tools.pingdom.com/ => even initially I do see @115KB which then changes immediately to @5MB.

5. I also checked my server box statistics (CPU/Network/RAM etc) - not at all an issue.

6. My CloudHosting company says - it's because of total size, which I do not believe. The whole purpose of SSR itself is defeated. I want user to see the initial page quickly and then it will load the big final page.

Whether am I missing some thing as per as SSR code is concerned OR whether there is a problem at CloudHosting end?

Thanks in advance

Update: Angular.json

...

            "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
          "./node_modules/bootstrap-social/bootstrap-social.css",
          "./node_modules/primeicons/primeicons.css",
          "./node_modules/primeng/resources/themes/nova/theme.css",
          "./node_modules/primeng/resources/primeng.min.css",
          "./node_modules/primeflex/primeflex.min.css",
          "./node_modules/prismjs/plugins/toolbar/prism-toolbar.css",
          "./node_modules/prismjs/themes/prism-coy.css",
          "./node_modules/ngx-sharebuttons/themes/modern/modern-light-theme.scss",
          "./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
          "./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "./node_modules/he/he.js"
        ],
...

Index.html

  <script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
      inlineMath: [['$#','#$'], ['\\(','\\)']],
      processEscapes: true
      }
});
  </script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML"></script>
  <!--for Google reCaptch v2 -->
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script src="https://checkout.razorpay.com/v1/checkout.js"> 

Answer 1

Basically SSR will not improve your loading speed of your webpage. But SSR makes the first page of the site to load quickly and then in background all the other stuff(including js) will load.

This will make feel like site has loaded fast. I hope your are missing something in SSR setup, that is why your static page is not loading properly.

https://angular.io/guide/universal

Suggestion:

• Fix your SSR, so that your landing page load quickly
• Try implement lazy loading which will give your site performance a lot

Answer 2

If the data on your initial page is not dynamic, try to cache the SSR output.

Right now, it seems SSR is regenerating the webpage again every time you load it.

If the data on the web page is dynamic, you need to triage further and find out how much time the SSR itself is taking to finish the rendering.

Then you can figure out how much time the browser tool takes to download it.

Please note that you won't be able to triage it using the browser; you will need to debug it on the server.