How to improve JS files loading performance (AngularJS)?

Question

I have a problem with my web performance the problem is that I have a delay when page is loading view.

I checked development tools in Chrome, and I see that most time of load taking angular.js , angular-material.js and also angular.material.css .

See image below

There is how I am adding libs.

  <script src="bower_components/angular/angular.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>

Is it possible to improve performance of load??

Answer 1

Check the following things to improve performance

• You are using development version of these libraries .. use minified versions . Go to the folder and find angular.min.js and include that. Similarly, for all libraries use minified versions.
• Enable gzip compression on web server to further reduce the size.
• Enable resource caching (Add Caching headers) to cache resources locally , so, that it won't get downloaded next time.
• Add async & defer to script tags to avoid render blocking download of resources.

Answer 2

You can use minified files that are really less voluminous for AngularJS and Angular Material:

• angular.js is 1.2MB, the minified is 160Ko. Source

• angular-material.js is 1.2MB, the minified is 290Ko. Source

Doing this you will improve your loading time for these files by 81% .

_{Details: 100 - [450 * 100 / (1200 + 1200)] = 81.25%}

Answer 3

If you see their size, they are bigger than other libraries. Maybe it can be some server config to download bigger files? It can be some kind of segmentation.