Last week, we looked at YSlow and its uses (you can find the article here).
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
The aim of this tutorial is to help you optimize your website so that it may load faster than ever before. With the help of YSlow, one can find out the grey areas but not actually fix them. This is because YSlow is not supposed to fix the problems for you, but rather highlight the specific metric which needs some attention.
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 Smush.it to reduce the image size. The Smush.it 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:
- Avoid inline CSS styling
- Use Image sprites
- Put style sheets at top
- Put scripts at bottom
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.
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 Apple.com. W3Schools has a good tutorial on sprites here.
Putting first things first