The time it takes a page to load is dependent on a number of variables. Let’s take a look at a few of these variables:
- HTML page size (excluding external assets)
- Number of external assets (1 style sheet or 5?)
- HTML objects (images, flash object etc.)
- Server delivery speed
- Client retrieval speed
We’re unable to control the client retrieval speed. The client retrieval speed is a fixed variable. We can’t miraculously increase the speed of their internet connection. We can increase the server delivery speed though. CDNs (Content Delivery Networks) can help here. However, this is not something that I’m going to discuss in here in detail.
If you are interested in utilizing a CDN, take a look at Amazon’s CloudFront and Rackspace’s Cloud Files. Both of these seem to perform well and can help increase the delivery speed of your static assets.
Each external asset adds an additional HTTP request. This is not good so we’re going to reduce these. At the risk of stating the obvious, large assets are going to take the end-user a long time to download. Clearly, reducing the size and number of external assets is going to be our main objective.
We’re finally left with a very reasonable file size. As you can imagine, merging the files, removing white space & comments, optimizing with jsmin and gzipping dynamically (for each page request) is going to eat up CPU cycles. Our compression script caches the final result in order to significantly reduce the load on your server. If you make a change to a file, the compression script recognizes this and regenerates the optimized file before caching it.
The ResultLet’s compare the skin before and after optimization:
Not bad… That’s just 18.7% of the source (uncompressed) size. Let’s compare this with CubeCart’s standard (stock) skins:
Finally, a quick comparison of the Cascading Style Sheets:
You’ll notice that this time the Sandbox source CSS files total to a much larger size than the KitaBlue stock skin. This is mostly due to the well commented and formatted nature of the Sandbox skin’s style sheet. Furthermore, since the Sandbox skin is somewhat more complex than the KitaBlue skin, it is reasonable to expect extra styling. Nevertheless, the optimized file is just 18% of the total source size and still smaller than the KitaBlue’s style sheets.