Angular7 slow page load

Question

I have an Angular7 app that was passed onto me. The First Contentful Paint and Time to Interactive is about 6 seconds! It seems to stall(pending) for about 4 seconds on https://www.google-analytics.com/collect and https://fonts.gstatic.com/s/opensans API call, which I found is related with google fonts. But this might not be the cause of the stall. I tried to use lazy loading modules to get bundle smaller. Currently we are at: styles.css 465B, runtime.js 1.1kB, polyfills.js 36kB, styles.js 10kB, vendor.js 583kB, main.js 142kB. Bundle size doesn't seem to be an issue but browser(chrome) still stalls for 6 seconds before user see the home page. Does anyone have any advise?

I also looked at SSR but it seems to be very complicated to setup considering we are serving on AWS S3 using content in dist. I am building with:

ng build --outputHashing=all --prod

Please help. I am want to make sure there is nothing else I can improve on before trying SSR. Thank you!

Answer 1

First of all, you can try and update Angular version to the latest, as it brings performance upgrades and bug fixes. That is what I would do before SSR. Nevertheless, SSR is a "must", if you want better user experience. Considering your bundle size, it is not so big. My app is triple size as yours and it loads faster. As I said, I render on server (SSR) and using v9 so far. But is very hard to answer the question without any code samples.

Cheers!

Answer 2

You can try to optimize your code a bit and use the AOT compilation mode in the time of building.

I found a good article, you can explore this and understand in what way exactly you can improve your code and reduce loading time. https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application