10 Rules to Optimized Website

1. CLEAN UP YOUR CODE

The first and most obvious thing you need to do is clean up your code. Every bit of unnecessary code is additional data being transferred and possible acted upon. The most obvious thing you can do is write better code, meaning that you take a look at your markup and see if there isn’t a better solution available. A lot of time it helps redoing everything again, often ending up with a lot less markup and a more solid code base.

Some immediate things that you definitely should get right include:
1. No inline style in the HTML markup. Styles belong in separate files so that they can be cached by the browser.
2. CSS doesn’t need white space, so you might be able to clean up your style sheets a little bit.
3. While you’re at it, revisit all the classes and IDs in both your markup and your style sheet as some of them might not be needed any more.

2 PICK A GOOD HOST
You know what, your web host matters. if you’re running on poor hardware, using old versions of PHP and un-optimised server software then your site will suffer. Pick a good host that meets your needs, Google it thoroughly since you want to avoid having to move, and make sure there is room to grow should you need to.

How to pick a good host then? it all depends on your needs, but something you always can do is find out what version of scripting languages (PHP for example) that they are using, and check that against what is recommended for your CMS in particular, and web use in general. it is also a good idea to pick a host that is geographically close to your demographic, that makes for less latency.

You might want to consider serving static files such as images and Javascript files, via a Content Delivery Network, more commonly referred to as a CDN. There area multiple options there too, and which you choose is a matter of cost more than anything else. How you server files through a CDN would depend entirely on your CMS solution, so consult relevant internet documentation for more.

3. Optimise your Images
Using heavy(weight in KB) images is a sure-fire way to make a site feel slow to it users. you should optimize your image so that they don’t weigh more than necessary, and you should definitely do the cropping and resizing yourself since automatic server-side scaling won’t take any optimization into account. You should ask yourself what a large image really add to your site, and if you could compress it further (using Photoshop or your image processor of choice). if it is a portfolio then large images aren’t an issue, but other types of sites might not have the readership that are interesting in waiting for 70KB images to load. Speaking of which, it is 70KB images to load. Speaking of which, it is a good idea not to have too many images on the front page, especially if you’re running a blog. Ten posts, all with a 70KB featured image, will take some time to load.

4. STYLESHEETS LOAD FIRST, JAVASCRIPT LOAD LAST
This is pretty basic but sometimes can be forgotten. Include your style sheets in the head section of your document, but save your Javscripts for last, as in close to the closing of the document. The reasoning is that CSS is crucial for your site to look good, but most Javscript functionality isn’t . Besides, Javascript libraries need to be completely loaded before the browser moves along, and some area quite big so saving them for last will load your site much more gracefully.

Oh, and don’t forget to mash up all of your CSS files into one big, mega one. There’s no need to get additional request slowing us down, right?

5 MINIFY CSS AND JAVASCRIPT

Both CSS and JavaScript can be tightened a lot thanks to the various minify solutions. The idea is to remove all the white space and then put all the code on one line. This obviously makes for hard to read files, but the idea is to keep it small.

There area several web services that can help you out, The Minify PHP5 app (http://code.google.com/p/minify/) is one solution and the WPMinify plug-in(http://wordpress.org/extend/plugins/wp-minify/) will give your WordPress site the treatment. Online tools include Minify Javascript (www.minifyjavascript.com/) and Minify CSS (www.minifycss.com/css-compressor/) amount ton of others

6 USE CSS SPRITES
you might also want to consider using the CSS Sprites technique for your icons, logos and other similar sorts of graphics. With this your’ll keep all your images in one file meaning fewer image requests to process. How to effectively use CSS Sprites in an article on its own, but in short, the idea is to keep all images in one file and when they are needed you will use the background-image property and the use x- and y-positionning to get the part of the images you need.

Why is this good? Well, the image containing all your icons, logo, buttons and whatnot will no doubt be large, 20-30kb perhaps if you have a lot of the things, but if you add all your small images you’ll find that they take up more room. Furthermore, every image in your design will generate a request, which puts strain on the server and that means that there’s be a delay on some hundred milliseconds or so per image. Compare that to the one image requested one time and then cached, you’ll see that this is a very clever way to manage graphics in your design.

7. AVOID AND UNNECESSARY EXTERNAL SOURCES IF POSSIBLE

It might be tempting to sport your latest tweets, a Facebook ‘Like’ box, the latest pics from your Flickr account, your Last.fm tracks, Youtube channel updates, and so on. Some of those might be perfect for your readership and then by all means use them, but avoid the unnecessary ones since each one will make your site slower. After all, there is some communication going on between your server and the service’s one, and that takes time, which leaves your visitor waiting, Don’t keep them waiting for things they don’t need.

8. Limit Database Calls

Depending on your CMS of choice, you’ll be able to limit the amount of calls to the database. Most systems want to be user friendly, and that means alot of dynamic stuff that will insert your site URL in calls for a favicon and things like that.  Things is , you know your URL and by removing this query to the database, you’ll reduce strain. So look for those unnecessary calls and replace them with direct ones, to images in particular, and you’ll make your site a lot more stable should the masses come knocking on your door.

9. CACHE,CACHE,CACHE!.

Finally, the big one, you need to utilize cache to really speed up your site.
Perhaps your CMS of choice has this built in and only serves static files to the visitor, in which case all is (possibly) food, but if that is not the case then you need to find out what you can do.

10 TESTING SITE SPEED

So how do you know how you actually rate when it come to site sped?
You can click around of course, but there area more scientific solutions, such as the YSLow (http://developer.yahoo.com/yslow/) extensions/bookmarklet from Yahoo! for example, or the popular Firebug(http://getfirebug.com/) for example. These will help you analyze sites so that you’ll know what to act on

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s