Angular Application's first page very slowly to load - javascript

I'am hosting my .Net Core / Angular application.
When I visit the url of my application the first page makes more than 90 seconds to load. I found that these files are very Big (15MB): styles. J's, scripts. J's, main. J's, vendor. J's, pollyfills. J's.
So I used this website to minifier the js code https://jscompress.com/
Now my application is faster, but I think that it can be faster.
Do you have any idea please ?click here to see the image

Not sure exactly how you have your application structured, but if possible you could break things up into lazy loaded modules.
I would check into this article, which mentions a variety of possible things to look into when trying to improve load times: https://medium.com/khojchakra/reduce-initial-load-time-of-angular-application-9b9ed4a6bfc9
Also try to serve your application AOT when you go to actually serve it for production if you are not already. This could speed things up quite a bit; but not during local development. the app reload times are quite depressing when making code changes with aot enabled

You can try to build with ng AOT option:
ng build --aot --build-optimizer.
You can find out more here https://angular.io/cli/build
With this your app should load faster

Always use latest versions of angular. Do code splitting. Lazy loading the modules reduces your initial bundle size. Remove unused imports. Try to avoid bloated third party libraries. Proper segregation of functionalities into separate modules.
Advanced: AFter doing all of the above, if you still want to reduce your bundle size. Try Using bazel for build process. https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/
More Advanced: Still you want to reduce your bundle size. Wait for Angular Ivy(public release).

Related

Angular7 slow page load

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!
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!
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

Large angular app: requirejs or standalone angular apps?

Our angularjs app becomes bigger and bigger. Lots of modules and up to 10MB js libraries loaded when the app starts.
What the best practice to resolve this? Requirejs or separate it to several standalone angular apps?
Requirejs will help you organize, but 10 megs of static javascript do not sound like an organization problem only.
If breaking down into separate apps makes sense for you (i.e. various distinct functionalities housed under the same roof), it could also help you shrink down on javascript statics the client has to load (assuming one part of the site does not request js files it doesn't need) by only including the required js files.
With requirejs however you will enjoy a more structured development time, and you could opt to use the files unpackaged or optimized (r.js optimizer)- but lazy loading (http requiring) unpackaged modules could hurt perceived website performance more than the all-in-one-min.js
If you can put in the time for optimizing require builds, you could try dehydration or split packaging to help speed up your app(s)

Performance:-How to reduce precompiled js file size in angularjs and rails

I am working on a website which is based on angularjs and rails in the backend.
The site is currently in production/live
The issue which I am having is that after the assets have been precompiled with the help of rake assets:precompile,The overall js file size goes above 1Mb.Hence it takes time for the site to load.
This is a major issue and since the site is fully ajax based,I cannot implement page caching.
Also have tried gzip on my nginx server but this is not helping.
This is hampering the performance of the site and would welcome any sort of help or suggestions if possible.
Thanks
I don't know about RoR or the rake assets you mentioned but here is a few leads and how I proceed (Lately, I've been starting to use Grunt) :
Concat your js files into 1 js file. It's easier to process one request rather than many little ones.
Minify your js files and make sure to use minified lib version.
Try to adopt a smart approach to load your libraries and your own files. For instance, if you only need graphics in your admin dashboard, make sure not to load d3.js on your front page. I know the Jquery ecosystem is full of useful plugins but I've seen way too many developers taking shortcuts and claiming they need Jquery when others viable alternatives exist.
Serving file using gzip is a good idea. This should reduces the size of your files significantly.
Also, Could you provide a link to your website ?

When NOT to use MVC Bundling?

I came across a strange issue in my recent project.
I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.
Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I am now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?
Any lights on this much appreciated.
Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling
There is only one file in your bundle. Why bundling ?
You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
On Dev Environment. It's is really really painful to debug a bundle.
Along with Cybermaxs' reply, I have also received following response while posted on ASP.NET Forum In case, if that helps the visitors.
What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files.
In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process.
There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development enviornment I had referenced the debug version of the script. But when I put it into the production enviornment, everything came to a hault. There was a release version for the knockout script file and I had to reference that to make everything work again.

Coffeescript local Development & Require.js Plugin Performance

We'd like to experiment with coffeescript and eventually convert all js code to coffee. As we are using require.js I assume the simplest approach regarding the loading part for local development is to use the require.js coffeescript plugin and adjust the module loading accordingly, e.g.
var myModule = require('cs!myModule');
Does this procedure, which if my understanding is correct implies that all .coffee files are compiled on the fly, run the risk of becoming a performance issue quickly and therefore might slow development down significantly?
If so, what alternative do you suggest?
I guess whether or not this will become a performance issue depends largely on the size and structure of your application. From my experience, compiling coffeescript doesn't take a great deal of time, but I've only ever used it with fairly small projects (5-10 files, ~50 lines each).
Since Require.js allows you to split up your code nicely into modules that will only be loaded when they're required, it should be possible to structure your app in such a way that only a few coffeescript files need loaded & compiled for each page load.
The only alternative that I have tried is to run the coffeescript compiler from the command line in watch mode. In this mode it will watch your coffeescript files, and then compile them into javascript whenever it detects changes. (Though as an aside I've found that this isn't perfect either - the compiler sometimes seems to stops watching my folder, leaving me scratching my head for a few minutes over why my changes have had no effect)
Personally, I'd recommend just using the require.js coffeescript plugin for development - if it becomes too much of a performance problem then you could easily just switch to using the command line compiler in watch mode. Converting your require calls should just be a case of a simple search & replace I'd imagine.

Categories