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

Atul Sharma · Accepted Answer · 2017-03-21 12:31:11Z

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.

answered Mar 21, 2017 at 12:31

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nelson Biggety Over a year ago

changed every script to minified version I'll try rest.

Mistalis · Accepted Answer · 2017-03-21 12:39:51Z

1

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%}

edited Mar 21, 2017 at 12:39

answered Mar 21, 2017 at 12:31

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Comments

Diego N. · Accepted Answer · 2017-03-21 12:31:58Z

-1

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.

answered Mar 21, 2017 at 12:31

Diego N.

6225 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to improve JS files loading performance (AngularJS)?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related