How to make your website load faster?


How to make your website load faster?


Today we are going to talk a bit more about the specific processes involved in improving your site speed across a variety of metrics.


The metrics we are going to look at are:


  • Scaling Images in CSS
  • Fewer HTTP requests


So without further ado, let’s get started.


Using a CDN


A CDN is a must for any high performing website. CDN is a Content Delivery Network which is basically a collection of servers that host content files like images, videos etc. The reason CDN-enabled websites perform faster than those that don’t are simply attributed to server load.


The idea of data being distributed across multiple servers ensures greater speed. This is because CDN severs are distributed geographically and the server serving a particular user is chosen based on the user-server proximity. A user in India will love to access the content from a server in China rather than in the UK.


This tutorial won’t teach you the techniques to setup a CDN for your website, which can be complex at times. If you are a startup, you might want to look at these companies offering decent CDN packages. If you are a big corporation, you probably own a CDN anyway!


Top CDN vendors are Akamai Technologies,  Level3 and Amazon Web Services.


Mashable, a top 10 blog, uses a variety of CDN servers. For example, copying a random image URL from Mashable looks something like this, as shown below. Note two things, the ‘MSHCDN’ which means Mashable CDN and the number 9 after ‘http: //’. If you change the number to 8, you will be served with the same image. So the content is distributed from multiple CDNs, which is excellent. Wonder why it loads faster than most blogs? Now you know why!



Scaling Images in CSS


Thinking of scaling images in HTML? If yes, let me make it clear, it is a bad idea! Don’t do that. If your image needs to be 100px by 100px, but in reality its 5000px by 5000px and you are scaling the image in HTML, you are doing it wrong.


It is better to use to reduce the image size. The Yahoo tool reduces image style through a lossless compression, i.e. maintains quality while reducing image size considerably.


Secondly, you can use CSS scaling, e.g. <img style=”width:100px; height:100px;” src=”image.jpg”/>.



Fewer HTTP Requests


This is one of the most common of problems when it comes to slow websites. A sign of a slow website is an enormous number of HTTP requests, which takes time and in result irritates the user. HTTP requests can range from loading up of script files, CSS files and more.


Let us look at the things that help reduce HTTP requests and enable a quicker, smoother user experience. A webmaster or a web developer can reduce the number of HTTP requests by the following methods:


  • Minifying JavaScript script files and CSS style sheets
  • Avoid inline CSS styling
  • Use Image sprites
  • Put style sheets at top
  • Put scripts at bottom



Minifying JavaScript and CSS

It is important to minify your JS and CSS files during production. For testing and development, yes, you can use non-minified versions but otherwise, no. You might have seen top CSS frameworks like Twitter bootstrap supply a minified version of their CSS for production use and this is the reason for it: it loads sites faster.


If you are using jQuery, you are required to use a minified version. Even other top notch JS libraries have a minified version for production use. Now you must be wondering what a minified version is, be it JS or CSS. Well, the answer is quite simple.


A minified version is a file which weighs lesser than a non-minified one because there are no blank spaces within the code, hence, saving a considerable amount of Kilobytes.  You can use to minify your CSS code. Likewise, for JavaScript, you can check out By the way, this process of minification of code is also known as code compression.

Avoid Inline CSS styling

Using CSS inline styles work, but it is not a recommended practice. An Inline style is a CSS style applied to a HTML mark up directly like <p style=”color:red;”>Text</p>. It is recommended to avoid using CSS inline styles and rather bundle all CSS code in a separate CSS file.

Use Image Sprites

I am a big fan of using Image Sprites because they simply make things 2x faster. How? This is because an image sprite includes a bunch of different images in a single file. For example, most navigation bars use image sprites instead of separate images. This is a good practice. It allows the page to load faster as the client side has to load 1 image instead of many different ones, making things a lot quicker! Here is an example of an image sprite from W3Schools has a good tutorial on sprites here.



How to make your website load faster?



Putting first things first

When a page loads, it loads up HTML, CSS, and JavaScript. It is good practice to put the CSS style sheets at the top and the JS scripts at the bottom. This is because the CSS style sheets are usually lighter and its helps to render the page rapidly. JavaScript can come later as it is not required to render the page (i.e. the way it looks).


Also, it is suggested to use external CSS and JavaScript files, that is, avoid having CSS or JS code within the HTML mark up. This loads the pages faster and it gets even better if you are using a CDN.