Making Fewer Server Requests - J Query

Problem
You’re including jQuery and a number of plugins in your page. The sheer number of server requests is slowing down your page load time:

After the page loads, you are downloading some JSON data using $.getJSON(), thus adding yet another server request:

Solution

Load jQuery from Google’s Ajax library, and combine all your plugins into a single file:

Or, combine all of the JavaScript code you use most frequently (jQuery, plugins, and your own code) into a single file:

Either way, it also helps to minify the .jsfiles (remove comments and extra white space)to reduce their size. And make sure your server is using gzip compression on the files it downloads.
For the JSON data, since this page is generated by your own server application, you can “burn” the JSON data directly into the HTML page as it’s generated, using a

The highlighted portion of that script tag is identical to the JSON data downloaded by myjson.php in the original code. In most server languages it should be easy to include the content in this way.
Now the jQuery code to use the JSON data is simply:

This eliminates one more server request.

Discussion

One of the keys to fast page loading is to simply minimize the number of HTTP requests .Making requests to different servers can also help. Browsers will make only a small number of simultaneous downloads from any single domain (or sub domain), but if you download some of your files from a different domain, the browser may download them in parallel as well.
You can combine JavaScript files by hand by simply copying and pasting them into one big file. This is inconvenient for development but does speed up downloading. There are a number of file combiner/minifiers available for various server languages.
Ruby on Rails:

  • Bundle-fu
  • AssetPackager
  • The packager built into Rails 2.0
  • PHP:

  • Minify
  • Python:

  • JSCompile
  • Java:

  • YUI Compressor

In addition to JavaScript code, check your CSS for multiple .cssfiles. Some of the tools listed can merge your .cssfiles into a single download, just as they do for .jsfiles.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics