Lazyload (Asynchronous loading) your javascript files

An alternative to putting scripts on the bottom, is to lazyload your scripts. To lazyload your scripts there are three ways i want to show you. First you can write your own little script that will asynchronously load your main javascript file by inserting the script tag for that file programmatically. Second possibility is to use a tool like require.js which is an asynchronous scripts downloader. The thrid possibility is the new HTML5 attribute for the script tag that you can use to force the browser to load the script asynchronously.

Lazyloading a javascript file default

You can create your own basic lazyloader yourself. Only a few lines of javascript in the head of your document and your done:

function lazyload() {
    var scriptTag = document.createElement('script'); 
    scriptTag.src = "//my_example.js"; // set the src attribute
    scriptTag.type = 'text/javascript'; // if you have an HTML5 website you may want to comment this line out
    scriptTag.async = true; // the HTML5 async attribute
    var headTag = document.getElementsByTagName('head')[0];
    headTag.appendChild(scriptTag);
}

Optimize browser caching (expires headers)

Expires headers are very important for browser and if set correctly can reduce your websites loading times by a lot. If big files like your scripts, css or a background image don't change very often, setting big expiry times can help your users browsers to keep those file longer in their cache. This will reduce the loading time of the page(s) but also reduce the bandwidth used.

Move scripts to the bottom

It's important to ensure that the javascript file doesn't block the rendering of the page. Often Javascript pages are pretty big, so it can take some time to load it.

But most javascript isn't executed on pageload, therefore at least the scripts that get used by onclicks and other events that may occur later as the pageload, can be put in the file that will be at the bottom.

Gzip components

This can be done on your development machine and you then transfer the files to your production environment. Or you let your production environment gzip the dynamic files on the fly just before they get delivered to the client. Apache as well as Nginx can do this for you. Apache uses the mod deflate module, Nginx has a module that is called HttpGzipModule. Gzipped html pages for example can be transferred a lot faster from server to the client.

Use a Content Delivery Network

This is not an easy task or feasible thing for small websites. Big websites that get visitors from all over the world can benefit a lot from a CDN network. Amazon for example offers a simple to use and pretty cheap CDN called Cloudfront, i use it for this blog to host my static files like javascript and css. Another big name in this business is cloudflare.

Optimize your images

Size matters, but in the web business smaller is better. Of course for jpeg and png images you can increase the compression level right away in your graphic design tool.

But there are tools that can help you reduce the size of files, like pngcrush for PNG images. Gif images can be optimized too, even animated gifs, by reducing the amount of colors in the image color palette that is used and eventually remove non used colors from it.

Increase the amount of parallel downloads

This is something that can really make a difference, but this is an optimization field that is not very well known. Browser don't download all your files in parallel, they always only download one, two or maybe three files in parallel, this is why your browser Network Tab (firefox firebug / chrome developer tools) shows a so called waterfall of downloads. To fix this you have two options. The http 1.1 specification for example recommends no more then two parallel downloads.

You could try to put your static files, like images on different hostnames. Those can be different domains or sub-domains. You could put images on static1.example.com and other on static2.example.com or setup a cdn at cdn.some_cdn_host.com and put files there to increase the amount of parallel downloads.

Make fewer HTTP requests / Combine and minify files

1) Minify CSS and Javascript: This is pretty important. If you reduce the amount of http requests to your domain you will speed up the loading of your pages. There are lots of tools that help you with this task. A javascript builder can for example take several files and put their content into one, automatically every time you republish your website code. The builder can also minify the content for you and remove comments you had in the development version of the file.

Website speed optimization

Website loading times are important. Studies show that e-commerce platforms with low loading times will have a better conversion rate that sites with slow loading pages (tests at Amazon revealed that every 100ms increase in load time of Amazon.com decreased sales by 1%). Another important factor is that google now also measures loading times and includes those results in their ranking algorithm, which means that fast websites will rank slightly better then slow ones.

Of course you shouldn't over optimize your website. A mean if you find something that could be optimized, for example if this optimization will only make your website faster by less then one percent, but on the other hand you will have to put several hours / days of work into that task, then you may reconsider your decision to do it.