Speed up web site loading

Question

I am looking for the best way to speed up the load time of my js.

The problem is that I am working with a very large site that uses the jquery framework, and what's happening is because the site is also loading, facebook connect, addthis sharing, google analytics and another tracking code, the jquery is delayed a few seconds, and certain elements like the calendar just appear, and my users are complaining that things take to long.

I did a test in google chrome and the avg load time is 4s. Which is too much.

I am already doing minification, and the jquery UI/ Jquery is being loaded from google. What's the best way to approach this?

Answer 1

You are not likely to be able to do much more about the load time of the external scripts, so what you can do is to change the order that things happen in the page so that the external scripts are loaded after you have initialised the page.

Scripts are loaded and executed in a serial manner, so if you change their order in the source code, you also change the order they are loaded.

Instead of using the ready event in jQuery, you can put your initialising code inline in the page, after all the content but before the body closing tag. That way the elements that you want to access are loaded when the script runs, and you can put external scripts below the initialising code to make them load after.

Answer 2

Small technical changes (such as serving the JSs from Google, minifying, etc..) will only get you so far.

Seems you simply have lots of dynamic stuff going on in your page. Have you though of an asynchronous way of building your content? One option might be to place placeholders instead of the external content, and asynchronously load it, so when all the scripts are loaded and ready, all you need to do is throw the markup into the placeholder.

This will create a better user experience, instead of the user waiting 10 seconds for the entire page, it will start loading incrementally after 2 seconds (and still fully load after 10).

Answer 3

Make fewer http calls by combining images and script and css, and also use a Content Delivery Network for you static images and css might help!

Answer 4

In addition to Yuval's answer some options that might or might not bring you a speed gain:

• the load time of external libraries is something beyond your control. Try to include them as late as possible, and better still, dynamically after the page has loaded. This way your page won't stall, if Google analytics or Facebook have another hickup.

• It is not necessarily faster to load jQuery from Google. Consider putting jQuery, jQuery UI and as many of your own JS as reasonable in a single file, minify and gzip it and let the server serve the gzipped version where possible. Note here, that the gain in speed depends largely on what your users cache and where they cache it. If they already have jQuery from Google in their cache, this technique might make page load slower.

The bottomline is, that after some optimization you're out for experimenting. You must find out, what your average user has in her cache, if the page is accessed directly via deep links or if you can smuggle some JS or CSS (or even images) into her cache via a previous "landing page".

Answer 5

Make sure you deliver your content in gzip/deflate encrypted format. Combine multiple javascript files into 1 file, which helps to reduce the number of http requests.

P.S. Here's a test tool to check if compression is configured: http://www.gidnetwork.com/tools/gzip-test.php