Skip to main content

Faster webpages with fewer CSS and JS

Its easy, have lesser images, css and js files. I will cover reducing number of images in another post. But If you are like me, You always write js and css in a modular fashion. Grouping functions and classes into smaller files (and Following the DRY rule, Strictly!). But what happens is, when you start writing a page to have these css and js files, you are putting them in muliple link rel=style-sheet or script tags. Your server is being hit by (same) number of HTTP Requests for each page call. At this point, its not the size of files but the number server roundtrips on a page that slows your page down. Yslow shows how many server roundtrips happen for css and js. If you have more than one css call and one js call, You are not using your server well. How do you achieve this? By concatinating them and spitting out the content as one stream.

So Lets say I have util.js, blog.js and so.js. If I have a blog template that depends on these three, I would call them in three script tags. Which would mean 3 hits to the server. However using ssi, php or python you can map one url to include at serverside, these files together. (This can also be implemented effectively in JEE). Using url mapping (util_so_blog.css) to a php/py/ssi/java action class, that (dynamically) spits out these files together. So that one url can be called in the webpage on trip to the server. But then how many such url mappings will you do. Again, DRY. Make it a a parameterized cgi.

Something like <script src="/jscss.php?files=util,blog,so" >(or better yet make it rest-like /jscss/util/blog/so.css)and the php file just reads the files, maintaining the order, spits out the value in it. You can even set the cache header in the response, so this is not repeated by the same client in the subsequent requests. Next step of tuning, cache the server side concatenation itself.

For the set of files, the server will output the same concatenated output (most of the time). Even though the call is cached in web browser on the client, for multiple clients your server does the same thing. So put a layer of caching. Say like memcache (if available). I intend to post implementation code in future posts, but the whole idea can be put into a picture like below


Honestly, I dont see why Google JSAPI for AjaxLibs doesnot do this? In order to load multiple Google API, you need to make multiple .load() calls, which invoke multiple script tags (HTTP Requests). GWT on the other hand is a total sucker for this. As a matter of fact, GWT generates a number of JS files for a set of combinations at compile time. Its a fabulous architecture, can be observed in this presentation 

In JEE, there are Object level cache implementations. For this specific use I recommend something like Oracle AS WebCache. Its been a while I used it but, it is good. It stands between your appserver and the client and caches by url (as key). It is configurable to cache by a header setting / url filter. It can also set cache-headers to the content on the way out.

Popular posts from this blog

Being a Vegetarian

I am a Proud Vegetarian. I don't eat Meat or Eggs. People say its hard here in US to be one. I beg to differ. The mere fact that I am hail and healthy these 4 years is a definitive proof. Apart from being bullied and trash talked by The Meat-Eaters, There is really nothing that makes this choice of mine any more than a debatable issue at a lunch or dinner. Other things aside, I am writing this blog having watched a PETA Video. Before you click on the play button, I ask you - If you are a vegetarian : Dont watch it. If you are not : Dare to watch it till the end. If you think going veg is just a fashion, think again . Even if you just want to do it for Fashion . Do it. Go Vegetarian. And Feel better asking the waiter for a Vegetarian Entrée in your next lunch.

Using Equinox CommandProvider to make OSGi console interactive.

After fiddling with the First Bundles that "Hello World"-ed upon Activation, You want to see more interactivity in OSGi. Although Using OSGi for an interactive Command Line Application would be like this one would be, well, a callable over-kill, I am going to start with an example and Expand it in later posts. So, please Welcome CommandProvider. CommandProvider is an EQUINOX specific API for extending the Console. This basic Example illustrates how to get a command from console and do something in java and also gets your feet wet on Service Registry package; import org. eclipse .osgi.framework.console .CommandInterpreter; import org.eclipse.osgi.framework.console.CommandProvider; public class DisplayMessageCommand implements CommandProvider { public void _say(CommandInterpreter ci) { ci.print("You said:" + ci.nextArgument()); } @Override public String getHelp() { return "\tsay - repeats what you say\n"; } }

How to Make a Local (Offline) Repository in Ubuntu / Debian

If you are in a place where you dont have internet (or have a bad one) You want to download .deb packages and install them offline. Each deb file is packaged as a seperate unit but may contain dependencies (recursively). apt-get automagically solves all the dependencies and installs all that are necessary. Manually install deb files one by one resolving each dependency would be tedious. A better approach is to make your own local repository. Before you actually make a repo, You need *all* deb files. You dont practically have to mirror all of the packages from the internet, but enough to resolve all dependencies. Also, You have to make sure, you are getting debs of the correct architecture of your system (i386 etc) # 1. make a dir accessible (atleast by root) sudo mkdir /var/my-local-repo # 2. copy all the deb files to this directory. # 3. make the directory as a sudo dpkg-scanpackages /var/my-local-repo /dev/null > \ /var/my-local-repo/Packages # 4. add the local repo to sour