CODEWITHSUNDEEP
javascriptangularjsperformance
Nelson Biggety
Nelson Biggety

Reputation: 25

How to improve JS files loading performance (AngularJS)?

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 enter image description here

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

Upvotes: 0

Views: 626

Answers (3)

Mistalis
Mistalis

Reputation: 18269

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%

Upvotes: 1

Diego N.
Diego N.

Reputation: 632

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.

Upvotes: -1

Atul Sharma
Atul Sharma

Reputation: 10645

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.

Upvotes: 1

Related Questions