55KB of JQUERY is too big for my application - javascript

Is there any way to truncate jQuery?
I need to use only AJAX related methods in jQuery code.
As you might know the minified version is only 55KB and the uncompressed version is about 110KB.

I think the answer to your question is 'probably not'.
But consider these points:
You don't have to serve it on every page request, sensible HTTP response headers should mean it only needs to be downloaded once per client browser.
If you use the Google CDN for jQuery, your client may not need to download it at all, as there is a very good chance they will already have it cached.
i.e.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Using gzip compression it brings it down to 19kb. It's going to be cached from there on out, so I'm not sure why it's an issue. That's far less than most decent sized images.
Using a CDN is also an option if you don't mind someone else hosting your code and your issue is just overall bandwidth.

Is there a reason why you need to make it smaller? Coming in at a size of 55kb is rather insignificant nowadays.
If you need it faster, try having it link off of Google, it's always cached on their server. Look at their documentation here.
You can also try downloading your Javascript files asynchronously.

You can go to an older code base if it suits your needs.
1.2.6 packed is 30KB
1.1.4 compressed is 22KB

You can try to build your own jQuery from source. jQuery is actually cut into little modules and you could try to disable some of them when building your own jQuery.
If you only need AJAX, you may not need DOM manipulation, CSS utilities or animations.

Um, why is jQuery too big? How large are your pages?
What you should be doing is forcing the client to cache it so it's only downloaded once. You do this by setting the Expires header often accompanied with versioning the file so you can force a reload if necessary.
You could manually prune the code but that's probably going to be a huge headache.

Related

Best Way to Organize JavaScript Files

So I have web app with multiple JS files (jQuery, jQuery, my own JS code and more). Say I have a page named index.html. What would be the best practice to include / preload my js files? I was thinking about creating a separate JS file that will do the preloading (include all the other scripts and call jQuery.noConflict()). What do you guys suggest? Is this possible? How would you implement it?
Thanks!
In general, combine your script files into one file (and minify or compress them, or even compile them, but note that this last item is not zero-impact, there are pain points). See notes here and here. Basically, one of the first guidelines you'll see for a good fast page load is "minimize HTTP requests." So you don't want six separate script tags where you could have one.
For popular scripts, though, you may benefit from using them from Google's CDN. Google is kind enough to host most popular JavaScript libraries on their CDN for free. The advantage here being not only that the CDN will be fairly fast, but that the target user's browser may well have a cached version of the script you want to use even though they've never been to your site before.
Check out RequireJS, a smart and robust script loader for JavaScript. It's designed to work well with jQuery and comes with an optimization tool to combine all of your scripts into one.
The best way is to minimize all the js files and combine them into one script. This will cause less work for the browser, as it doesn't have to make multiple requests to the server.
If you are going to load everything up at the same time, you could put it all into a single compressed file

Loading Javascript : HTTP Requests -v- Asynchronous Loading

I'm having difficulty in deciding which approach is better in terms of site performance.
Either to have all required jQuery plugins in one file to be included on every page on the site OR split the plugins out to individual files and use the jQuery.getScript() method to load them as and when required.
Is there any real benefit in loading the scripts asynchronously over one http request?
All my Javascript will be minified and gzipped.
Thanks!
It's not so simple and depends on the distribution of javascript across your site. Have a look at this question : Which is better for JavaScript load-time: Compress all in one big file or load all asynchronously?
From my poit of view the best solution until now is controljs
Read the complete post http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/
One request will be better for performance. Period. Only downside is, every time one of the files changes, the whole thing changes (and will have to be downloaded again). Plugins won't change much, so I'd put everything (as much as possible) in 1 file.
Put jQuery core in that file as well. And your custom javascripts as well. Just make sure it's in the right order :)
Try the YSlow plugin to Firefox and try your different setups.
That said, minifying your js to one file would be an easy way with great results. You will get one file, and it's often very much smaller than the sum of the parts.

how to compress more jquery file?

is there any way to compress more jquery base file?
what i have is about 56K and i need a more light file because of dial-up speed(56k).
You can also check the The JavaScript CompressorRater and see how different tools will compress jQuery. The rule of thumb however is to enable GZIP compression for browsers that support it.
jquery 1.4 compressed with JSMin is close to 56K. packer by dean edwards generally gives a little better compression but would take longer to decompress on client side. you can compare both at jscompress
haven't seen jquery compressed with closure being used anywhere. Personally I'd go with JSMin and serve with gzip compression. That brings it down to ~23K
You can also use the ones hosted by Google, even uncompressed. The users probably have them loaded in their browser's cache, so they're not downloaded at all on your site.
http://code.google.com/apis/ajaxlibs/documentation/#jquery
You can use different minifiers to get slightly different results, and let the server use gzip to compress the files.
Google hosts the library, so you can use their server and hope that the users already have the file in the cache.
However, the download time of the library will still be at least three seconds over a 56k modem. It's not a light-weight library, if you use it you have to accept the extra load. Consider if you need it, or if plain Javascript would be a better solution.
http://www.google.ru/search?hl=ru&q=compress+javascript&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA+%D0%B2+Google&lr=
There are a lot of technics to compress js-files. You should start with downloading the min-version of jquery files - http://code.jquery.com/jquery-1.4.2.min.js.
You can also think about reducing your websites size
Check if your server compresses Javascript files (e.g. with this tool).

JavaScript code compression

Is there is way to compress JavaScript code?
e.g.
function test(){
// some code here
}
after compression it should be
function test(){//some code here}
Also, I need vise versa at the time of editing the code.
You can use a javascript minifier.
YUI Compressor
JS Minifier
jsCompress
There are a number of tools available that can reduce the download size of your javascript, improving first-load performance. The general technique of making syntactic changes to your javascript, without changing its structure, is called minification; and the tools are minifiers. I know Google has an excellent tool, as does Yahoo - there are probably others as well. Check the other responses here for links.
For more resources, try this search:
http://www.bing.com/search?q=javascript+minify
Some other things to keep in mind when optimizing your javascript:
You'll want an option to download non-minified javascript, at least on your test site - debugging minified javascript is a major pain.
Configure your web server to also compress (gzip) your javascript if the client includes the appropriate 'accept' header in their request.
Make sure you configure our cache settings for your javascript so that browsers can use their locally cached version without even sending a server request, if the file is already previously downloaded.
Minified Javascript
http://www.google.com/#hl=en&q=minified+javascript&fp=64df356c6a3f8304
http://www.minifyjavascript.com/
http://developer.yahoo.com/yui/compressor/
Good answers, for jquery you have a compressed version, remove the comments in the header to save some octets.
For your own files, use the YUI compressor, i think it's the best.
I would add if you want to save some time, you can also put all your Javascripts files in one, so you will save some precious time with http request (only for production though).
There is already a compressed version of jQuery for you to use. For js you write yourself any of the other tools mentioned will work, I use YUI myself.
A good way to optimize your site is to include one javascript file for all. An article that explains the process of Javascript Bootstrapping can be found here.
Once you use the available compressors above, you should implement this so that your site run quicker.Hopefully this will help.
Use JSMIn its the best.

jQuery file name

This one should be easy, and I think I know the right answer, but here goes.
For compatibility reasons, should I leave the filename of jQuery as "jquery-1.3.2.min.js" or just rename it to jquery.js?
My guess is leave it as is to avoid conflicts in case another app uses a different version of jQuery. If they've renamed it to "jquery.js" and I do the same, I see potential version conflicts.
Am I wrong or way off base?
Jeff
It's a very good idea to have version-numbered JS (and CSS) files, because that lets you configure your web server to use a far-future Expires header on such files without running into caching problems. When the file gets updated, it gets a new version number, so the browser always fetches the new version, not the old cached one.
You should do this on your other JS and CSS files, too. You want this to be automated, not something you manage by hand. Your development work happens on unversioned files, and your versioning system creates versioned copies and works out the details of updating the references to the CSS and JS files in the HTML files to point to the versioned copies. This can be a bit of work, but well worth it when it comes to speeding up your site. It took me about a day to set my system up. The improvement wasn't subtle.
I would go with jquery-1.3.2.min.js because it's more specific and you can immediately tell if you're reviewing this site in months to come, as well as avoiding any filename confliction in the future.
You shouldn't have any issues with updating, if you're relying on something like an include/template file for the javascript.
In my opinion, its just a personal preference. If you have version in your file name, It helps you easily identify which one you are using with out actually opening the file. It also provides an indirect way of clients downloading the new version file (as it is never cached). If you don't use the ext, upgrading to newer version is easy in coding perspective, but takes the pain of force downloading the new file by all users.
Recommended way to use jQuery in app is using the google's hosting..
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
Why and how to use jQuery hosted on google
I prefer to leave the version in the file name because there are times when you are changing versions and this is very helpful. At a glance I can see which version I am using on any given webpage.

Categories

Resources