Time is money. The more time spent waiting for websites or webapps to load makes your users unhappy. In this article I’m going to pass on some quick tips that every developer should be using to help reduce load times on websites.
The table below illustrates how a simple minification technique can save quite a bit of data. Even if the saving isn’t huge, it means the same bandwidth can be spent grabbing an image.
|Website||Resource Type||Potential saving (bytes)|
Another example is that the jQuesry original source is 266.8KB but once minified, it is reduce to 91.75KB!
Another thing that is a must have for any website, is to have compression enabled. When a browser initiates a request to retch a resource, it sends a special header which tells the server that it supports Gzip. If the functionality is enabled on the webserver, the resource returned is compressed using Gzip.
Going with the jQuery example, if the jQuery’s original source is gzipped, it is reduced to 79.2KB! If you minify and then gzip the code, you end up with just 32.84KB. From 266.8KB to 32.84KB.
You can enable gzip by editing the configuration file on the server. Instructions vary between servers but mostly it just ends up entering one line in the configuration and giving a webserver a restart and voila.
Caching is probably one of the most underused yet powerful features available to a developer. When the user visits a page, the browser requests all the resources and builds the page up. If the webserver has caching enabled, the webserver can tell the browser which resources should be stored in the browser cache. What this means is any subsequent page loads will result in fetching resources from the local memory which means they are very, very fast.
What’s more, a proxy server can also store your resources and if some other user requests the same file, the proxy server can return the resource from their local cache.
How fast you ask? Well continuing with the jQuery example, if caching is enabled, the browser will only download the jQuery file once. If the user visits another page on the website, the browser just fetches the page from the local cache and this saves the trip to the webserver.
Pretetching means loading something before it is actually used. For example, downloading an image it get displayed by a slideshow. Lazy loading refers to where you off load some resources to be downloaded later as they might be not needed instantly. For example, an image for a splash screen that only comes up when a button is clicked. Although both these are two different methodologies, I believe they work hand in hand.
The techniques listed above don’t take much time to implement but offer big rewards. These are are by no means the only ways to improve. I highly recommend Google’s Best Practices as it defines quite a few techniques really well. May the Speed be with You!
Thanks to Adeel Ejaz who agreed to write this blog for us. Adeel works as a lead web developer for Direct2Florist. He has a long a standing passion for the web and is a true programmer at heart.