Wednesday, May 15, 2013

Solomon says : Need for Speed

Long time no see!!!

I have been away from SolomonSays for most of this year (the reasons for which will soon be discussed elsewhere). Over the last week or so, however, the mists have lifted and I have returned to the fun and games with a vengeance.

The speed of the website has been one of the biggest concerns for me over the last few months.  Speed tests at WebPageTest showed that the home page was taking ~11 seconds to load completely. Not cool at all! So this was the first order of business.


Two of the biggest sluggards on the site were:

1. The auto-completing search box – A JQuery UI autocomplete component which took the complete list of reviews as JSON input at page load. Basically _everything_  in the system was queried on each page request. To make matters worse, this was a blocking call (synchronous request) due to some other implementation issues.  So the page loading couldn’t progress till this part was complete.

Instead of tweaking my implementation of the search, I chose to replace it with Google site search. This gives a twofold benefit:
  1. All the performance overhead described above goes away.
  2. The search functionality becomes much more powerful. The older search worked if you typed the exact name of the item in it. The new component provides full blown Google search functionality.
2. The site uses a bunch of JavaScript components and loads a whole bunch of .js and .css files. Optiomization-101 says to combine them all into a single file .js and .css file. So this is what I finally did using the django-compress. I love the simplicity of usage – just put whatever you want to compress between {% compress js/css %}  and {% endcompress %}  tags and voila, you are good to go. Almost entirely non-intrusive.

Not everything worked as expected (of course):

  1. The scripts being loaded from external sources like Google, Addthis etc. are not compressed and have to be loaded as before.
  2. Some of the javascript components like TinyMCE (used for accepting user reviews) and carouFredSel (used for the scrolling image gallery in each review) didn’t like being compressed independent of the rest of their packages. So I was obliged keep them out of the great squeeze.
Even so, I am now serving 1 js file instead of 4 and 1 css file instead of 7.

Web page test now reports a complete load time of ~6 seconds. Hurray!!!


No comments:

Post a Comment