Google are to make website optimisation a criteria for search placement as of January 2010. If you’ve visited webpagetest.org and want to know how to optimise your site – here’s how it’s done.

optimising-iis6

IIS6 Optimisation for super speedy webpage delivery.

In light of a recent interview with Matt Cutts of Google (see related article here) in which he states that come the end of the holidays, at the beginning of 2010, Google will start to look at website optimisation as a criteria for search ranking. I have decided to take things in hand and write a tutorial on how to configure Mircosoft’s IIS6 for maximum performance and bring web page loading speeds up to a blistering pace.

This article is specifically aimed at optimizing IIS6 (*update* now IIS7 – I go into details on how to optimise IIS7 in part II) upon which this site is hosted. This is a Standard Windows 2003 Server, connected to a standard ‘home broadband connection’ with a dynamic IP address – really nothing special. It’s the sort of hosting that anyone with an Internet connection could set up with enough knowledge – which is why I have set this site as a resource.

What about Apache?

F*&# em’! Just kidding, actually there are numerous resources available on the Internet for Apache server as well as multiple plugins / modules available, so I’m not going into any detail about Apache here (other than to say – w3 total cache it’s the best optimisation plugin for wordpress – period). I intend to redress the balance of power with Apache a little bit as IIS is an excellent web server and I intend to give it some supprt on these pages.

In this tutorial I have included every acceleration requirement that is checked for by webpagetest.org. I have also included screenshots and explanations for every step along the way.

I would like to briefly mention that in order to complete this article I’ve had to do a lot of scratching around the Internet, slepless nights and plenty of prayer and waiting for enlightenment. This information is like gold dust and I’m about to blow the gaff, throw the spanner in the works and show you how it’s done. When you’ve finished you’ll have IIS up and running so fast you’ll think you’ve switched service providers.

Everything you need is right here – and all on one page.

Warning! – This post is jam packed with low-fat, light weight, web optimisation goodness! Do not continue to read this page unless you wish to become the hero that saves the day, more charming, better looking and a massive hit with the ladies.

BUT first things first. Please visit http://www.webpagetest.org and run a test on your website. When you’re done I suggest you save the images it produces for a later comparison check.

For this tut I’ll be using a site I’ve just started developing in Drupal 6.14 it’s called http://newagegiftshops.com obviously because I’ve just started developing it, it’s not complete, but there are several images as well as Drupal core and modules that can be cached by IIS – here’s what the site’s speed test looks like before optimisation:

Before configuring IIS – as you can see it’s a website efficiency horror story… Yikes!

nags-speed-start

The final report was much longer than the image above but I think you get the idea. First View 14.453 seconds, Repeat View 8.660 seconds. Not terribly impressive…

Now, let’s kick some web serving butt!

#1 Backup your IIS Configuration.

Disclaimer – It wasn’t me ok? Always be on the safe side (personally I didn’t bother – but them I’m barking mad) and take a backup of your IIS configuration like so:

1-backup-iis

Setting up compression.

When your backup’s complete, you’re now ready to have some fun! Just right click on Web Sites then Properties.

iis6-properties

And you’ll see the default settings for all your websites – Yay!

#2 Gzip.

Did you know your IIS server can automatically Gzip text and static content before sending the page over the Internet? I didn’t until last week, but it’s very easy to set up. I wrote an article about it last week, so rather than being guilty of duplicating my own content just open this link in a new window and when you’re done come back and I’ll show you the rest of the optimisations.

Remember that when you call up a page from IIS – if it isn’t cached IIS will serve you the uncompressed version and start compressing it with Gzip in the background, so if you call up the same page again immediately (before Gzip has had a chance to do it’s thing) you won’t see the Gzipped page yet. You will not need to use Metabase Explorer again as the rest of the optimisations can be done through the normal front end MMC snap-in.

#3 Keep-Alive

Keeping Alive is always a good tip, you’ll notice however that just ticking the box that says ‘Enable HTTP Keep-Alives’ doesn’t actually do the job on it’s own, that’s because…

Zero is always the highest number.

Just pop a zero (0) in the box and you’re done! How easy is that!? Although this step is incredibly simple it has an enormous effect. Establishing an HTTP connection is a slow process and placing any number here other than zero will not keep the connection open.

http-keep-alives

#4 Cache Static.

The rest of the optimisations can all be done by clicking on the HTTP Headers tab. All these steps are simple, it’s just a case of finding out what needs to be done.

Just tick the box that says: Enable content Expiration and in the box put a nice big number along the lines of 3650 Days (10 years) – that should do the trick!

enable-content-expiration

Now that you’ve set a far-future-date for your static content to expire, we’re going to add a couple of ‘Custom HTTP headers’ so click on Add

#5 Accept-Encoding.

You are now going to create a custom header, so in the text box that says Custom header name:  put Accept-Encoding and for the value put: gzip then click OK.

accept-encoding-gzip

#6 No Etags.

Here’s where we get cunning… click Add again to create another Custom HTTP header, this time for Custom header name put: ETag and for the Custom header valueLEAVE IT BLANK! just like the image below… and click OK.

ETag

Your HTTP Headers tab should now look exactly like this: (if you’re running ASP  you’ll probably have another custom HTTP header like X-ASP or something like that… You can now click OK to close the IIS config box and you’re almost there!

http-header-tab

I’ve just run the webpagetest.org again and we’re really starting to look a lot better! Here are the results: First View 7.639 seconds, Repeat View 3.087 seconds… That’s double the speed!

nags-speed-final2

Okey Dokey! Lookin’ good!

Next up we are now no longer in the realms of network engineer – we have now entered the realm of Website designer/programmer. (Every step before this is the job of a network/ISP engineer.)

#7 – Reduce the number of HTTP requests

Seriously, this is a MAJOR one. The majority of web designers are still not using this technique. This is probably because website ‘optimisation’ simply meant don’t load in massive images but then display them is a 200 x 200 grid. Now that optimisation needs to be taken far more seriously one of the most important things you can do is to drastically reduce the number of HTTP requests – This means rather than having dozens of tiny images – you should combine them into a single image.

Yahoo will tell you to use the CSS background-image and background-position. I’m saying don’t bother – there’s a far more efficient way to express these statements in terms of CSS:

As you can see from the image above you can combine the background and the image X, Y offset in to a single command ie:

background: url(..images/spriteme2.png) repeat-x  0 -457px

If you go to the following url http://spriteme.org using Internet Explorer (for some reason it’s not working for me using Firefox), add that page to your Favorites. No go back to your website – the page you want to optimise, and visit spriteme.org from the shortcut you’ve just saved in your Favorites – the website will recognise it’s just been called from a bookmark it will then go through the CSS of your site and start combining the images you use into a single image.

It might take a little bit of practice to see exactly what’s going on with the repeat-x and y and the image offsets, but once you understand what’s going on it’s really very simple and the difference it will make is HUGE!

#8 – Combine your CSS & .JS files

This is a lot like reducing the number of HTTP requests (in fact that’s exactly what you’re doing only this time it’s with code rather than images). Once you’ve used webpagetest.org a few times and you realise how time consuming HTTP requests are you’ll understand the need to make as few as possible.

If you’re working from a WordPress template or another generic template for a content management system you’ll probably find that the code is increadibly sloppy – this doesn’t necessarily mean badly written it’s just that templates can be calling up different colour schemes, fonts, backgrounds etc… It will also mean that JavaScript libraries such as jQuery or MooTools are being used along with multiple other files – it’s time to get your hands dirty. You don’t have to do any actual programming, just the basics of combining all the code in to one chunk and then ‘minifying’ your scripts so they take up less space.

As you can see from the image above we’re rockin’ big time with 5 A’s that not only means that the same webserver can now handle about 4 times as much traffic, it makes for a better end-user experience and on top of that it will also get you a higher placing in the search engines – Not bad!

#9 – Cookies

Removing cookies can be a simple process, by simply setting up a different sub domain for your static content you’ll automatically remove cookies being constantly sent with the HTTP request.

A subdomain example:

http://images.mydomain.com/myimage.jpg instead of http://www.mydomain.com/myimage.jpg

By not sending cookies with every request you can further reduce the payload (size) of requests from a being sent from your server.

#10 – Using a CDN

Using a Content Delivery Network means that geo-graphical location plays a part in the delivery of your website. With a CDN your static content ie. images, video, sound, and Flash are distributed to a number of servers strategically located around the globe. This helps to dramatically reduce the number of physical ‘hops’ an HTTP request has to go through to get resolved – It’s faster to send a page from a server located in Hong-Kong to a surfer located in that region of the world than it is to send the same page half way round the planet from a server located in the UK.

The reason I left the CDN till last is it’s the one optimisation that costs money. There are free CDN’s but I couldn’t honestly recommend using them as they can be extreamily un-reliable.

Well that just about wraps it up from me for IIS optimisation. I hope you’ve found this post useful – catch ya later!

Simon

WAIT!

All done are you? I’m a long in the tooth, hard-core, old-school programmer. I believe that now – once you’ve just past step #10 you probably think you’re all done? And you know all about optimisation?

Nothing’s ever that easy. If only it were. I’m guessing that you’ve probably just optimised your homepage to be super speedy. I’ll make it easy for you here, but I’ll lay it straight on the table – You’ll never finish optimising – EVER.

That doesn’t mean just being anal about every nano second, because there really is a point where you shouold just stop. It does mean that your homepage is not the only page on your site. If you’re running a blog like me, you’re going to have lots of posts. Pick the ones that bring you in the most traffic. Take the URL and pop that into webpagetest.org and see how they come out.

All the best.

Simon

http://www.caspianit.co.uk/iis6-compression-for-php-how-to-compress-css-with-gzip-tutorial/

3 comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>