CODEWITHSUNDEEP
javascriptperformance
Franck
Franck

Reputation: 610

Integrate Javascript resources in HTML: what's the best way?

I'm working on a project which uses many scripts (Google Maps, jQuery, jQuery plugins, jQuery UI...). Some pages have almost 350 kB of Javascript.

We are concerned about performance and I'm asking myself what is the best way to integrate those heavy scripts.

We have 2 solutions:

I would like to have your advice.

Thanks.

Upvotes: 3

Views: 214

Answers (4)

Amgad Fahmi
Amgad Fahmi

Reputation: 4349

1) I would recommend gather all the common scripts and most important like jquery and etc in one file to reduce number of requests for this files and compress it and i would recommend google closure u will find it here

2) Make the loading in a page the user have to open it in the beginning like login page and put the scripts at the end of the page to let all the content render first and this recommended by most of the performance tools like yslow and page speed

3) don't write scripts in your page , try to write everything in a file to make it easier later on for compression and encryption

4) put the scripts and all statics files like images and css on other domain to separate the loading on your server

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98786

Scripts in the <head> tag do (I think) stop the page from rendering further until they’ve finished downloading, so you might want to move them down to the end of the <body> tag.

It won’t actually make anything load faster, but it should make your page content appear more quickly in some situations, so it should feel faster.

I’d also query whether you’ve really got 350 KB of JavaScript coming down the pipe. Surely the libraries are gzipped? jQuery 1.4 is 19 KB when minifed and gzipped.

Upvotes: 0

mythz
mythz

Reputation: 143284

For the best performance I would create a single static minified javascript file (using a tool like YUI compressor) and reference it from the head section. For good tips on website performance check out googles website optimizations page.

Note that the performance penalty of retrieving all your javascript files only happen on the first page, as the browser will use the cache version of the file on subsequent pages.

For even better responsiveness you would split your javascript in two files. Load the first with all the javascript you need when the page loads, then after the page loads load the second file in the background.

If your interested, I have an open source AJAX javascript framework that simplifies compresses and concatenates all your html, css and javascript (including 3rd party libraries) into a single javascript file.

Upvotes: 2

Skilldrick
Skilldrick

Reputation: 70819

If you think it's likely that some users will never need the Google Maps JavaScript for example, just include that in the relevant pages. Otherwise, put them all in the head - they'll be cached soon enough (and those from Google's CDN may be cached already).

Upvotes: 1

Related Questions