To a Fast Web and Beyond

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.

Minification

The simplest of things available in our arsenal is just reducing the number bytes we have to move between our server and the user. We can achieve this by minifying our JavaScript and CSS files. Minification tools like UglifyJS and Google’s Closure not only remove whitespace and comments but they also improve code to make it fast efficient.

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)
www.cnn.com CSS and javascript 330kb
www.twitter.com CSS and javascript 40kb
www.bbc.co.uk CSS and javascript 201kb

Another example is that the jQuesry original source is 266.8KB but once minified, it is reduce to 91.75KB!

Compression

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.

HTTP Caching

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.

Perfetching & Lazy Loading

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.

One technique that i use extensively is have one JavaScript file that contains scripts that should run instantly when a page loads. Anything else goes in separate file which is loaded once the DOMContentLoaded event has fired.

Another technique for prefetching is when Widget Red and Widget Blue need jQuery to run. If Widget Red doesn’t run until the user clicks a button, you can let the jQueary load with Widget Blue. You can also tie an event to the hover event of the Widget Red button so that as soon as it is fired, you can fetch the Widget Red JavaScript file.
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.

By 2018, 42.4% of world’s population will be plugged into the internet, with around 3.6 bn people able to access it at least once a month.
RT : What is a ? It attaches rich photos, videos and media experiences to Tweets. http:/…