I created webpage which has JavaScript in single file but the size is very high. When I run the page, the loading time of JavaScript is very high in Chrome. FYI: The script file created from excel tool which has lot of hidden fields and scripts but everything needed to make application worked.

Have you anyone gone through same thing and what is the solution we can make for this? Thanks in Advance.

I created webpage which has JavaScript in single file but the size is very high. When I run the page, the loading time of JavaScript is very high in Chrome. FYI: The script file created from excel tool which has lot of hidden fields and scripts but everything needed to make application worked.

Have you anyone gone through same thing and what is the solution we can make for this? Thanks in Advance.

• javascript
• performance

• Specs? or can you give us an idea of HOW MUCH js you have? What it does, is it AJAX heavy? (maybe slow async calls to the backend, etc). Otherwise this is a question without any real answer, more of a guessing game. – Jakub Commented Feb 2, 2012 at 13:47

6 Answers 6

There are a couple of things you could do:
- minify your scripts (e.g. with Google closure piler)
- bine your scripts (reduces the number of requests)
- turn on gzip pression
- load your scripts at the end of your body tag
- use a CDN, prevents loading your scripts all from the same location (most browsers will only load 2 files simultaneously from the same location)

Have a look at the YSlow plugin and Google PageSpeed, both very useful in improving performance.

Run it through a script which bines and minifies it. There are plugins for most build systems now that do that. That's how we press about 1.5mb of JavaScript into about 500kb during our build process.

Combine your scripts into as few files as possible, and minify them. Also load the scripts at the end of your page.

There is no 'generic' issue of slow loading in chrome. It will all be down to individual scripts.

You'll need to determine 1) Which script is causing the slow load by process of elimination and then 2) Which part of the script is loading slowly, then you can take remedial action.

This could include minification or code refactoring.

Tools like fiddler2 will help you track this time, as you'll be able to view the indivdual page items load time.

Chome's auditing tools can tell you a lot about why is this happening, you should probably include more information about:

1. how long did it take to connect to server?
2. how long did it take to transfer content?
3. how much other stuff are you loading on that page simultaneously?

anyway even without all that, here's a checklist to improve performance for you:

1. make sure your javascript is treated and served as static content, e.g. via nginx/apache/whatever directly or cdn, not hitting your application framework
2. investigate if you can make use of CDN for serving javascript, sometimes even pointing different domain names to your server makes a positive impact, e.g. instead of http://example./blah.js -> http://cdn2.example./blah.js
3. make sure your js is served with proper expiration headers, don't re-download it every time client refreshes a page
4. turn on gzipping of js content
5. minify your js using different tools available
6. put your script tags just before </body>
7. investigate and cleanup/optimize your onload and document.ready hooks

You should determine what´s taking time. Both FF and Chrome has a feature that shows the network traffic. Have a look at yslow as well, they have a great addon to Firebug.