Over the last few days I have been having fun improving the performance of Meshcentral.com. I used object recycling techniques, database connection recycling to get quite a speed up. Well, I have been looking for more improvements and found a few more that I just released today.
First, I started mastering the "CSS Sprite" technique. This involves taking many images normally loaded on a page and turning them into a single image that is compressed and loaded more efficiently. For example: On the site you can remotely power on and off computers. There is a dialog box with the actions you can take. Here is a picture of the actions dialog.
So I have 5 different icons here (Sleep & Hibernate use the same one). In the past, I would have loaded 5 separate images. Thanks for CSS Sprits, I one load one. I noticed a big difference on my Apple iPod Touch and Android Phone, on these devices, the improved UI is much faster. I went around the site and cut down the size and number of images loaded by quite a bit.
Second, I was playing around with the Google PageSpeed add-in for Firefox. Actually, you need to install FireBug first. For web developers, Firebug and PageSpeed are just great. PageSpeed shows you a full graph of what the browser is doing and in what order. You can quickly see what gets held up. The goal is to speed up what you can, and make as much as possible load in parallel. In my first screen below, is my devices pages without any modifications. You can see that there is a big database call to render all of the devices on the page and it's taking a long time.