Now on to the more obscure time saving methods!
CSS Placement
Always ensure your CSS styles, be them inline or external references, are placed inside the HEAD tag of your HTML page. If a web browser finds an element with a class that it can't find, it won't render that element until it's parsed the entire HTML page to ensure it doesn't have to re-draw the element at a later date. If you've referenced your styles inside the HEAD tag, the browser will have the required information available, if you don't, it won't.
CSS @Import
This statement in CSS allows you to reference another stylesheet from your original stylesheet. While that is great, it unfortunately has the side effect of essentially placing a stylesheet reference at the bottom of your HTML page, which, as we've just covered, is a bad thing. Instead, just use another stylesheet reference directly within the HEAD of the HTML, or, as we'll cover in a second, combine the two stylesheets.
JavaScript Placement
Try and ensure all your JavaScript files are placed at the bottom of your HTML page. Unfortunately, scripts block parallel downloads so placing them at the end of your HTML page, after everything has been downloaded, prevents this from blocking anything useful.
Make CSS and JavaScript External
If you make CSS and JavaScript external then the web browser can cache the relevant files so, during the next page load, the browser can access the file straight from disk, rather than going off to web server to fetch it. Not only will it lower the load on your web server, it'll also save time. Loading from a local disk is a lot faster than fetching a file across the internet! Be warned though... if your website is running off of HTTPS then you can't cache files!
Reduce HTTP Requests
Every time you request a CSS file, or a JavaScript file, or an image, or just about anything that isn't within the plain HTML, then an HTTP request has to be made for the file. There's a performance overhead with this so, reducing them should speed things up. So, try combining all of your CSS files into one, then combine all of your JavaScript files into one. As for images, try using the Sprite and Image Optimization Framework produced by Microsoft. Essentially, it'll combine all of your images into one large image and then using CSS, will only display portions of that large image so it'll seem as if each image is actually a separate image to your users. Pretty fancy stuff and again, will reduce the number of HTTP requests!
Reduce DNS Lookups
If you're accessing your resources on different servers then each time you try and grab the resource from each different server then a DNS lookup needs to be performed. For those of you that don't know what that is, it's essentially the process of finding out the IP address of a given domain name (e.g. Microsoft.com -> 65.55.12.349). There's an overhead with this lookup so reducing the number will again improve performance. With this said however, a web browser can only download a certain amount of files in parallel for a given server (in IE 7, this is limited to 2 files at any one time, I think in IE8 it's been increased to 6). So, putting resources on different servers will enable the users web browser to download more files at a given time. Obviously there's a trade off here, the more servers you spread your resources over, the more you can download at any given time but the larger the DNS lookup time penalty.
Reduce 404 Errors
There's really no need to be getting any 404 error for a resource you may, or may not require. It may not even break anything but, a 404 means you've the added expense of creating an HTTP request that does absolutely nothing, and like I covered earlier, the less HTTP requests, the better.
Turn Debugging Off
This is an ASP.NET specific performance improvement. Within your web.config file, there will be something like this line:
<compilation defaultLanguage="c#" debug="true">
Make sure debug="false". When set to true, several things happen, firstly, extra dbg files are produced and run for each aspx page compiled, that will slow down your website. However, I've found that the bigger performance problem is the extra JavaScript validation that runs, especially if you're using the Microsoft AJAX framework. In one instance, just by turning debugging off, a page that was taking 18+ seconds to load, was reduced to 2.
Ok, and that's about all I can think of for the time being. Website performance optimization is a huge subject with many a web page devoted to it. Personally, I find Yahoo's research on this invaluable so if I were you, I'd check out this guide that they've produced. It covers everything above and more. Yahoo also make some pretty awesome tools for helping with this, specifically, I've used the .NET port of their compressor which is one of the best I've come across. If you've got any other tips that aren't covered here or on Yahoo's guide, feel free to let me know, I'd love to hear them!
No comments:
Post a Comment