Apr 19

Written by:
2010/04/19 07:42 AM 

With all the talk of Google's new effort to include page speed into their ranking algorithm I thought it prudent to have a look at how we could improve the speed of our own blogs and web sites.

Readers first Google last

While I think that speed is relevant I believe that we must not be complacent and allow our blogs and web sites to degrade to such a state that it becomes an irritation rather than a blessing to our readers.

If you are going to improve the speed of your blog, do it for the readers and not for Google.Your readers and mine will soon vote with their back button, by leaving if our site take too long to download.

Try to analyse your site on a weekly basis and find areas where you can squeeze every last bit of bandwidth that you can.

Here are a few tips that might get you started.

Change your host

By far the most important change that you can make is to analyse your ISP and your site host. This general rule is always true, you get what you pay for.

If you can afford to, find a host that has a reliable and fast backbone. A host that keeps up with the technology.

Analyse your visits to see where the most originate from, then try to host there. Minimising the amount of hops (how many routers and devices to go through before you get to the end user) from your site to the reader helps to improve speed.

This also minimises the chances that you will go though a sub standard router along the way.

Remember you site is always only as fast as the slowest link.

Get off shared hosting.

Probably the next biggest factor in speed is sites that share a hosting environment with other sites. A little more expensive. But if your site starts to pull 1000 –5000 page views a day, you don’t want that to be hampered by 100 other sites sharing the same hosting environment and battling it out for the same bandwidth pipe.

Optimise images

With the increase of available bandwidth we have become lazy in optimising our images. Remember always test your site on the slowest possible connection that you expect your readers to have.

Reduce the size of your images. Remember, the web is a different medium. It does not need the crispness and colour intensity that print requires. Choose a lower DPI, and a higher compression ratio.

Always use the “Save for the web” feature included on most image editing software. You’ll be surprised what the average human eye can differentiate as far as colours and sharpness goes.

Run your site through Yahoo’s SmushIt. You’ll be surprised as to how much you can save without reducing quality. Use an online image optimizer like DynamicDrive or JPEG Wizard.

Minimize external requests.

It’s great that we have these free online storage places where we can store all our multi media. Places like Picasa and F'lickr. We save tons of space on our own hosting environment.

The thing to understand is that when referring to anything, whether it be a picture, video, mp3 or just plain text that resides somewhere else other than your own server, it takes extra time to fetch.

Those extra DNS lookups, extra HTTP requests, extra paths and hops that need to be taken, all degrade the speed of your site. Not to mention that you are at the mercy of the other site. If their servers fail, or go slow. If their bandwidth is throttled for some reason. Your site suffers.

Reduce unnecessary and redundant code

Remember that everything on your webpage must be downloaded. Whether it is used or not. So, although things like comments are good to remember what your code is all about. It still must be downloaded.

Redundant code in JavaScript and CSS files should also be deleted, making them smaller and faster to download.

Use external services that will help you to minimise your code files. CleanCSS is an online tool that will merge similar selectors, remove useless properties and remove the whitespace from your code.

Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Don’t use images to display text

This should be a no brainer. Text loads so much quicker than an image. But you say you need to have that fancy sign-up button.

Investigate whether or not you can achieve the same effect by making use of CSS.

Avoid tables where possible

If your website is contained in one big “<table>” tag, be wary. Websites generally won’t load until the server processes the whole chunk of code inside. Instead, try cutting things up into smaller tables, or use “<div>” to clean it up.

This does not actually speed up your site. Because all the data will be downloaded anyway. But it does give an impression of speed. Rather than have your readers stare at a blank page for 20s, give them something to start reading after 3 seconds will give the impression that the page is loading faster. While they are reading the page miraculously loads in the background.

Use external scripts

Oftentimes you might use the same function or the same method or css styling on more than one page. this means that it will be downloaded multiple times. Export those common scripts into an external file. This means that they get downloaded once to be available for all.

Categorise your external script file. Don’t put all your scripts into one file. This makes the file bigger to download. It also means a waste of bandwidth as you will have a lot of redundant code for many pages as they will not need a lot of the code in the one big script file.

Categorising your scripts avoids this behaviour.

Analyse and optimise

As I said in the beginning. Analyse your site regularly. Use external services to analyse your site and identify the culprits that are causing your site to slow down.

Use Pingdom full-page test to analyze the page loading action.  WebPageTest lets you test web pages that are directly accessible as a URL from the Internet.

Both provide an excellent view of your page, it’s speed, and which components you need to concentrate on.

If you have Firefox then download and use YSlow, another excellent Firefox add-on tightly integrated with Firebug web development tool to analyze the elements of a web page.

Combined with the power of Firebug, YSlow provides vital information about web page components and the reasons why the page is slow. This helps you in identifying the problematic elements.

Finally

I suggest you read up on the Best Practices for Speeding Up Your Web Site from the Yahoo developer network.

The team at Yahoo Developer Network has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.

Remember you can win a weeks worth of free ad space just for commenting. The best comments during the week will get a weeks free advertising space. Check out: Win free advertising for your blog

New here, or perhaps you've been here a few times? Like this post? Why not subscribe to this blog and get the most up to date posts as soon as they are published.

Get involved in our community. Help promote other bloggers. List your blog in our directory for bloggers. Blog Directory for Bloggers

blog comments powered by Disqus