When you deploy your web mapping application, you want it to run as fast as possible. There are a number of "tricks" you can use to make it even faster. Many of these tricks seem to be missed when people deploy websites (GIS based or otherwise).
HTTP compression. This can really shrink the size of your HTML, Javascript or CSS files. usually to about 20% of what they were originally. With GIS Mapping sites, there is usually quite a bit of logic going into the JavaScript end - so making your JavaScript files as small as possible is a real benefit. For example - iws.js - one of the main JavaScript files went from 140KB to just 29KB!
Minification of JavaScripts, CSS and HTML. Minification indicate the removal of excess or unnecessary whitespace or comments in your JavaScript or CSS files. Cutting out this space can reduce the size of a text based file by around 30%. With this size, I also strip out excess whitespace in the HTML files.
Minification often extends to renaming variables in JavaScript files to "shorter names", saving on size of data. I have had mixed success with this - sometimes it seems to create errors in my code.
Combine CSS and Javascript files. Reducing the number of individual requests for files speeds up data access. So, where possible I have grouped CSS and Javascript into one larger file, rather than separate files. Each file request can take up to 200 miliseconds. So, if you have 10 or more external scripts, it can quickly add to your total loading time.
Settings a long expires header on resources that don't change often. This means that a browser doesn't have to keep requesting the same resources over and over again - even if it is just to find out the resource hasn't changed. I have set a long expires on my icon images, as well as base JavaScripts, CSS files.
Request resources from a number of different URL's. Browsers are limited to requesting two resources at a time per domain. Therefore, i have setup a couple of different domains - to access the same resources - to move through this bottleneck. For example, iws.erdas.com and iws2.erdas.com both point to the same server.
CSS sprites. I still have to do this one, but it seems extra useful. Essentially you can group common, small images into one single image. I am going to do this for my toolbar. The end result is that you only need to make one request, and the total file size being requested is less. My icons, separately are about 9KB in size. Putting them into a CSS sprite brings it down to about 3KB.
There are some more optimizations that I performed - but i will make those a focus of another post....
For production sites, you might like to use a combined .js file with all the code required to setup a Image Web Server layered view control. Reducing the number of referenced files will speed up the loading of your pages.
The .zip file in this document contains two versions - before and after minification. Minification is a process of removing unnecessary whitespace from your script, in order to reduce the file size. Often, doing this reduces the size of the script by 25% or so. The minified script isn't that readable, so i included the "before" script so you can have a look. The combined script also replaces the .vbs (vbscript) with javascript....
| |