8

enter image description here

  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">
user2869612
  • 607
  • 2
  • 10
  • 32
  • Could be so many things, we'd have to look into your code and assets to be able to help. – DFSFOT May 12 '22 at 21:33
  • Could you please give some pointers? I can start checking out one by one – user2869612 May 13 '22 at 11:10
  • Looks like some timeout or bottleneck on the server side. Do you have third party dependencies? A slow database query, api-call, file read or similary dependency could be the problem. – Martin Åhlin May 17 '22 at 11:43
  • Third party - I am using PrimeNg / MathJax etc. Updated the question with those details. – user2869612 May 18 '22 at 05:37
  • Does the angular app (or the page you visit) send http calls? Also I did see some posts in the past about primeng components bottlenecking ssr. You could hide those using `isPlatformServer` – Pieterjan May 18 '22 at 06:16

2 Answers2

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
saravana va
  • 1,081
  • 1
  • 13
  • 17
  • yes agree, SSR will not improve overall loading speed, but why my first SSR page (which is less than 200K) is taking so long @4secs? SSR seems to be working fine as I can properly view my source, share to social media etc. – user2869612 May 15 '22 at 06:27
0

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.

Ravinder Payal
  • 2,884
  • 31
  • 40