What would be ideal would be if email sent to any address for any of your domains was routed to a single email account.

In this article we are going to look at how to manage email for multiple websites from a single login system. We are going to use the free version of Google Apps for Domains to do it.

Sign Up For The Service

If you aren’t already a user of Google Apps the first step is to sign up. Google Apps is great and it gives you access to email, document collaboration and a calendar for your organisation. They also offer an upgraded version you can use if you like, but we will stick with the free one for now.

Navigate to the Google Apps for Domains Homepage and click the standard edition.

Google Apps Introduction Screen

The next page will give you a comparison between the standard and premier versions. If you want to continue with the free signup click the blue “Get Started” button in the top right corner.

On the next page you can either enter a domain name you currently own, or opt to register one through Google.

Google Apps Registration Screen

You are then required to enter the administrator’s contact details as well as answer some questions about your organisation. Google also notifies you that you must be able to change your MX records (so email sent to you is routed through Google) and create CNAME records for your domain (so you can use friendly URLs such as mail.mydomain.com).

You only need to set this up for your primary domain name. We will add more domains later on.

Create A Catch-All Email Address

One thing I like to do is get my website visitors to send emails to a specific address that is relevant to the subject they are contacting me about. For example, if I am looking for beta testers for new software I would like people to email beta@newwebmasters.net. However, I don’t want all the hassle of having to set a new email address up.

Manage Email Settings in Google Apps

This is where a catch-all email address comes into play.

Let’s create one in Google Apps.

First of all, ensure the email address you want to use has been created.

Next, click Service Settings then Email and scroll down to Catch-all address. Enter the username of the person to whom all email should be sent and click Save Changes.

From now on any email sent to an address that doesn’t have an account setup will be routed to the email address you just picked.

Add Multiple Domains

A great feature of Google Apps is the ability to add domain aliases. Say for example if you own mydomain.com and mydomain,org, you can add one as an alias so email sent to a user on either domain will be routed to the same email inbox.

To add a new alias click Domain Settings and then Domain Names. Click Add a domain alias to start adding a new domain. Every domain you add will have to be verified before it can be used.

The screenshot below shows the domains currently set up on my account.

Domain Aliases on Google Apps

From this you can see that any email sent to chris@mywebcards.net and chris@page-checker.com will be forwarded to chris@newwebmasters.net.

But now we have all email for all of our domains forwarded to a single email address, how do we keep them sorted and organised? This is where Google’s fantastic filtering and labelling comes in useful.

Filter and Sort Incoming Mail

Google Apps Email has all the features that Gmail has. This includes the labelling and filtering system.

You must login to the catch-all email account you just created. It is important that you use the correct account.

First of all, let’s create a new label for each domain we are expecting email from. In the screenshot below we have set it up for our 3 domains, mywebcards.net, newwebmasters.net and page-checker.com.

Labels in Google Apps Email

To set them up click Edit Labels at the bottom of the Labels box in the left hand column. Type your label in the Create a new label box and click Create.

Next we have to filter all our incoming mail so it is assigned the correct label.

Firstly click Create a filter at the top of any page. It is the small text just to the right of the search box.

In the To box enter *@yourdomain.com. So for example, in the screenshot below we have entered *@newwebmasters.net. This will catch all mail sent to anybody at this domain.

Using filters in Google Apps Email

You can click Test Search to check the correct emails are being picked up. Otherwise just click Next Step. You can apply the label to emails that have already been received by checking the Also apply filter to conversations below checkbox.

Next you need to choose an action to perform on these emails. Check the Apply the label checkbox and choose the appropriate label you created earlier. Click Create Filter to action your changes.

You then need to repeat these steps for each domain you have set up.

Each email you receive should then be filtered into the appropriate label you have just set up.

This is very useful to help you manage your email on multiple domains and I hope you find these steps useful.

Internet Explorer 6, 7 and 8, Mozilla Firefox, Opera, Safari and Google Chrome. All browsers that are currently widely used that your visitors are using to visit your website today.

Cross browser testing is one of those development steps that is a necessary evil. It is an integral part of building a page, not something to be left until you are about to publish it. Javascript, CSS, transparent images and html coding errors are all handled differently by different web browsers. In order to ensure your visitors have the best experience possible, you need to test these aspects on as many different browsers as you feel is necessary.

Which Browsers Need Testing?

The big ones that all sites should be tested on are Firefox and Internet Explorer 7 and 8 (which as of writing is currently in beta). Others that you may include are Safari, Google Chrome, Opera and Internet Explorer 6. It can be tricky deciding which browsers are worth your time testing on. Some people argue that you shouldn’t test on IE6 as it is outdated, however it still has a 25% share of the browser market. The statistics below show the browser market share for the main browsers according to Net Applications for January 2009.

You need to look at your analytics information and decide what you are able to cover in your browser testing efforts. Nobody can tell you what you should try and include, you need to decide based on your own statistics and how much time you are able to take away from your development time.

Where To Start?

Now we have covered what you need to test and why, we need to decide how we are going to start testing.

Most developers try to avoid installing multiple browsers as this can be very tricky. It is also sometimes impossible to install different versions of the same browser on a single computer. Let’s have a look at some of our options.

Screenshots

Perhaps the simplest way of testing a web page in multiple browsers is by taking screenshots in as many different web browsers as possible. This will help you discover the major html and CSS layout bugs that affect your pages.

Browsershots

Fortunately, this type of testing can be done for free and without you needing to install any other browsers. The best place to try is Browsershots, which lets you test a page on 88 different versions of web browsers on four different operating systems. The system is free too, although you should definitely think about leaving a donation to show your appreciation.

It works by adding your page to a queue. When a system with the correct operating system and browser version becomes free, it loads up your page and takes a screenshot. While the system is free, it relies on their being sufficient free computers available to take your screenshot. This means that sometimes you may have to wait up to a few hours for your screenshots.

The major drawback of taking screenshots is that you only get an image of how the page looks when it loads. You can’t test javascript or CSS effects and, since you can only pass a URL, you can test pages that need a form submission to access them. It is, however, a great way to get an overview of your site in many different browsers.

Litmus

There is also a great service that will take screenshots of your webpage called Litmus. It takes screenshots instantly and they have a great variety of browsers to choose from. You can test on Internet Explorer 7 and Firefox 2 for free, but prices start from $49 US for a single user for a month.

The service has a great interface and you won’t have to queue for your screenshots to be taken.

Using Multiple Versions of Internet Explorer

Running multiple versions of Internet Explorer (IE) on a single PC is not an easy task. If you are daunted by anything too technical, please skip this step and continue below. Different versions of IE use different versions of the same files, so it is not possible to have multiple versions of those files on a single Windows installation

The two main ways of installing multiple versions is by using an emulator or partioning your hard drive.

Using An Emulator

An emulator, such as VirtualBox allows you to install a new operating system, within an existing operating system. It is frequently used to get a Windows program running inside a Linux operating system, however it is possible to install Windows XP inside Windows XP, or Vista inside Vista. On the “emulated” operating system (also known as the “guest”) you can install a different version of Internet Explorer than you have on your original operating system.

It might sound complicated, but it is actually quite easy to achieve. Unfortunately, emulated operating systems may run very slowly as the memory on the computer is shared between the two systems. It is very useful when you only use it infrequently.

Partitioning Your Hard Disk

This method requires you to split you hard disk into two (or possibly even more if you want to run more than two versions) and install a new operating system on each. It means you can install, say, Windows XP on each partiton and have IE6 on one, IE7 on another and IE8 (currently beta) on the third.

This method is quite easy and more reliable and accurate than using an emulator but it means you are wasting a lot of hard disk space by having three operating systems installed. It also takes a lot of time to reboot your machine and select a different system just to test a small change you have made in your web page.

Using Multiple Versions Of Firefox

The best method of using multiple versions of Mozilla Firefox is to install the PortableApps version. Software from PortableApps.com can run as standalone software with no other requirements and with no need for installation. It is designed so you can carry your essential software round with you without having to install it on every PC you use. This has the added side effect that you can run multiple versions at the same time.

You can download the current version 3 from the PortableApps Firefox page and you can download older versions from their archives.

Using A “Virtual” Emulator

The site Cross Browser Testing allows you access to a “virtual” emulator. You simply pick your operating system, pick your web browser and you have full access to that configuration. You are not limited to just viewing a static image. You can fully interact with the web page and test out your javascript, CSS, AJAX and image effects.

It is a great service and you can use it in five minute chunks for free, although paid subscribers do get priority. Their monthly fee is $29.95 for the first month and $19.95 after that for 40 hours use. You can also buy credits to pay as you use the service.

Get Direct Feedback

Feedback Army is a very original idea for a service allows you to ask up to ten questions about your website. It will then be posted on Amazon’s Mechanical Turk for up to 50 people to answer.

While this isn’t directly cross browser testing as such, it is quite usual to ask visitors what their browser and operating system is and what visual problems they encountered on your site.

The service costs $10 US for ten questions and $40 US for 50 questions. According to the site’s FAQs “Feedback Army restricts the review jobs to workers with a high approval rating.” They don’t specify exactly what that level is but it is also claimed that each review is vetted before being approved.

In Summary

Hopefully now you should have some idea of how you can test your website in multiple browsers. There are many methods available and we have explored just a few in this article.

If you have experience with any other testing methods please feel free to post them in the comments below.

There are quite a few excellent add-ons for Firefox that make our lives as web developers much easier. We will look at the best ones in this article.

Web Developer Toolbar

This is ultimate add-on for web developers. It has been downloaded over 8.5 million times and is essential for any web development tasks.

It allows you to modify pages and environmental variables to help you identify problems on your pages. You can modify and remove cookies, disable images, modify stylesheets, find broken images, outline divs, tables, classes, ids and headers. You can also test the HTML and CSS validity and check links and accessibility status. It cannot be recommended highly enough as an excellent tool for web developers.

Download the Web Developer Toolbar

IE Tab

This add-on allows you to view how a page is rendered in Internet Explorer, right from within Firefox itself.

Cross-browser testing is essential and this add-on allows you to test your page is another browser without having to fire up Internet Explorer.

Download IE Tab

Live HTTP Headers

Live HTTP Headers allows you to view the meta-information that is sent with every HTTP request. It is useful for checking header status returned and for checking Etags, expiry information and server information. You can also get a list of all the HTTP requests used to generate a page.

It is also helpful to check the HTTP error code returned for a page, which is helpful for keeping th search engines happy.

Download Live HTTP Headers

Firebug

Firebug is a tool that helps you debug your HTML, CSS and javascript. You can edit your CSS live in the page to see the results instantly. You can also debug javascript errors.

Download Firebug

YSlow

This is a tool by Yahoo that profiles web pages and helps you to optimise loading times by applying Yahoo’s high performance rules. It requires Firebug to be installed first.

YSlow grades each component of your page from A to F and then gives you an overall rating. It then tells you what to do to improve the performance of your webpages.

Download YSlow

Screengrab

One thing you might find yourself doing quite often as a web developer is taking screenshots of webpages. It is surprisingly tricky to take a screenshot of an entire page without having to download external software. Screengrab is an excellent tool that gives you the option of capturing a whole page, just the visible part or a selection. It will either save the file or copy it to the clipboard, it’s up to you.

Download Screengrab

Summary

There are, of course, many hundreds of addons for Firefox and lots of them are useful for web developers. These ones here are my favourites that I use everyday. Feel free to post your favourites in the comments below.

It is also one of the very few directories that people still recommend for link building purposes. Many directories have had their ability to pass Page Rank removed, but a link from the ODP is still treasured by many webmasters.

Sites are submitted manually and each submission is manually reviewed before being approved or rejected. One of the annoying things about submitting to ODP is the amount of time it takes to have a site approved. It can literally take years. Frustratingly, if your site doesn’t appear you don’t know if it has been rejected or if it is still waiting to be reviewed.

A recent post on the DMOZ blog explains the process from an editor’s point of view. It gives the reason why reviewing a site can take so long.

The Review Process

Time passes until an editor with permissions in that category decides to look at the unreviewed pool and review some sites. This could take anywhere from a few minutes to a year or more

ODP receives about 30 000 new site suggestions every week, and while the homepage states that there are 81 000 editors, only about 6 000 are active. Editors are assigned to specific categories and can only review sites that are submitted to that category.

When an editor has some spare time to edit a category, they look at a pool of sites and choose one to edit. Note that the blog post above states that this process “could take anywhere from a few minutes to a year or more.” Sites are not necessarily reviewed in the order they were submitted; the editor can pick and choose which site to edit and which ones to leave in the pool.

If a site is fine, or only needs minor changes made to it, it is quickly approved and added to the directory. If a site is listed in the wrong category, the editor can drop it back into the pool, or bounce it to another category. This is where things start to take time. If you haven’t bothered to take the time to choose the correct category, chances are that the editor who has just looked at your site won’t take the time either and it will probably just be sent to the pool of sites of another generic category. It doesn’t get preferential treatment because it has been looked at by another editor; it has to wait its turn to be edited again like all the other sites.

Always Submit to the Correct Category

Let’s look at an example.

1. I submit my PHP-related website to DMOZ but I accidentally submit it to the health category. Maybe this category is edited quite frequently, so it is looked at within a week.
2. The editor of the health category doesn’t know anything about PHP, but knows your site looks computer related. The site is then bumped to the computers category.
3. Perhaps the computer category is edited quite frequently too, so your site gets looked at within a month. This editor can see that your site is too specific for the computers category but realises it looks like some kind of programming language. It is then sent to the pool of websites for the programming category.
4. This category is not looked at very often, so it takes six months for somebody to review your site on the programming category. This editor can see that your website belongs in the PHP category, so once again it is assigned to a new category.
5. The PHP category is edited very rarely indeed. It takes 9 months for somebody to look at your submission in this category before it is finally approved.
6. All of this time and effort could have been saved by simply submitting your site to the correct category 16 months ago!

This is only an example, I don’t know how often each category is edited. But now you understand how the editing process works, you can understand the importance of making your title and description accurate and taking the time to ensure you have submitted to the correct category. It may make the difference between having to wait two months for approval, or two years!

What Is A “Bounce”

A bounce occurs when a visitor leaves a particular website after only visiting a single page.

A visitor is regarded as having left the website when either

• Their session times out,
• They close the browser window or tab,
• They type a new address into the address bar, or
• They click the back button to return to a different website

By default, Google Analytics’s session timeout is 30 minutes. That means that if the user stops activity for 30 minutes then carries on browsing the site, a new session will be created. If the user leaves the site but then returns within 30 minutes, the return visit is counted as part of the original session. You are able to manually change the timeout length.

Each specific page on a website has its own bounce rate. It is generally expressed as a percentage and it means the number of visitors who left after viewing that page and no others.

For example, if a page has a 30% bounce rate, it means 30% of visitors who enter via that page leave without visiting any others.

In addition, there will be an average, site-wide bounce rate. You can work out how effective a specific page is by comparing its bounce rate to the site-wide bounce rate.

What Is A Good Bounce Rate?

There is not one single figure that is suitable for all types of website. As a very rough idea, a bounce rate between 20% and 50% is not too bad. However, the ideal bounce rate depends very much on the type of site you run and the type of visitors you attract.

If you run a news-type website, the chances are you will have a higher bounce rate. A visitor comes directly to the news story they wish to learn about, reads it and then leaves. Having a bounce rate of 80% for this page doesn’t necessarily mean that the page is ineffective. In fact the page may be so effective, that the visitor doesn’t need to navigate to another page.

If you run an e-commerce site and are looking for people to complete a checkout before they leave then you would expect to have a very low bounce rate. If people are entering a product page and leaving without visiting your checkout, then something is wrong. The same is true for any site that wants visitors to complete some sort of task, be it a newsletter signup, or registration at a forum.

Analysing Specific Pages

To find the bounce rate for a specific page in Google Analytics navigate to Content -> Content by title. Choose the title of the page you wish to analyse. You can then see the bounce rate of the page. In the example to the left, you can see the bounce rate is 39.16%. Google Analytics also tells us that this is 50.28% below the site average.

This suggests that this is a particularly effective page at enticing visitors to navigate the rest of the site. Note that we aren’t looking at the absolute bounce rate, just how it differs from the site-wide rate. I will explain why the site-wide bounce rate is so high later.

The bounce rate for our homepage is 83.35%. This is 5.82% higher than the site-wide bounce rate. This means that only 17 out of 100 people who enter from the homepage navigate to any other pages.

Analysing Bounce Rate by Source

Another interesting experiment is to look at how the bounce rate changes depending on the source of the visitor. This can tell you how interesting people find your website depending on who referred them. To locate the information, click Traffic Sources -> Referring Sites and click the domain you wish to analyse.

First we will look at the referrer domain buyhitscheap.com. They are a company that sells website hits. I used it in a previous experiment analysing visitor loyalty. As you can see, the bounce rate is 100%. Every single visitor referred by that domain leaves without visiting another page. From this statistic you can get a good idea of how interested the visitors were in your website – not very.

Let’s have a look at stumbleupon.com. This referrer has a bounce rate of 75%. This is not too bad compared to some other referrers. 1 out of 4 people from Stumbleupon navigate to at least one other page before leaving. It shows you that the traffic from stumbleupon will be more likely to visit other areas of your website than the traffic from buyhitscheap.com. With this information you can decide which is better to focus your attention on.

Summary

We all know that digging through statistics is incredibly boring. Webmasters don’t want to spend time trawling through analytics data, they want to spend time working on their site. But bounce rate is one of those particularly useful pieces of data, and is more powerful than it seems at first.

In my opinion it is well worth spending some time working out who are your best referrers, as they may not just be the sites that send you the most visitors. It is also worthwhile being able to determine which pages make people want to explore more of your site and which ones have people scrambling for the back button. All of this is useful information that will help you to improve your site, and ultimately gain more visitors.

Advanced Yahoo Search Operators

Search engines are incredibly advanced pieces of software. The basic interface that we see and the speed at which they work often makes us forget that. Since search engine databases hold such vast quantities of information that they put in place special features that allow you to refine what you search for. These “operators” are very useful when optimising your website for the search engines.

Yahoo is probably the most popular place to get accurate information on which websites link where. The information on Google is very unreliable, as is MSN/Live. Yahoo’s Site Explorer also gives us a goldmine of useful linking information.

This article will help you to use the advanced search operators in Yahoo Search to optimise and analyse the links to and from your website as well as those to and from your competitors websites.

Why Do I Need To Analyse My Competitors’ Links?

If you find a useful, relevant and popular website that links to one of your competitors, you need to ask yourself “why is this site not linking to me?“

It is also useful to find out which “power” sites are linking to you. Sites such .edu and .gov sites are widely regarded as more important to search engines and it’s easy to find where these sites link to. (Note: it is not the actual .edu and .gov extensions that make a site more authorative. Sites like these simply tend to among the more established and linked-to sites on the Web) Perhaps you want to find out which .info sites are linking to you with spammy keywords.

Important note. When Yahoo returns results in its regular listings and in Site Explorer it lists nofollowed links along with followed links and doesn’t differentiate between them. You will have to check the links manually or use a special tool to check if the links are followed or not.

What Operators Can I Use?

Let’s get started on the actual operators themselves.

Link:

Use link: to find documents that link to a particular URL. Link: requires you to use a full domain including http://.

Example: link:http://search.example.com/

This operator will find any page that links the specified page. The example above will match http://search.example.com only. It will not match links to http://www.example.com, http://search.example.com/blog or http://help.search.example.com.

When you use the link: operator you need to be careful when choosing to use www or not in the domain. If you look for links to http://example.com, a page that links to http://www.example.com will not be returned unless the webmaster has set up a redirect, which many of them do.

Linkdomain:

Use linkdomain: to find pages that link to any URL on that domain and on any subdomains.

Example: linkdomain:example.com

This will match pages that link to http://example.com, http://www.example.com, http://search.example.com and http://search.example.com/blog.

Important note. When you do a search using link: or linkdomain: you will be redirected to Yahoo Site Explorer. Although this is a great tool, often you don’t want to be redirected. To avoid this happening, simply add one of the other search operators or some search text to your query.

Site:

Use site: your search to a particular domain and all its subdomains. Whereas link: and linkdomain: were looking for links to a site, the site: operator is conducting a search within a particular domain. For this reason, you need to use additional operators to your query or add some search text. If you just use site:example.com by itself you will be redirected to Yahoo Site Explorer.

Example: site:example.com horse.

This will search the domain example.com for the phrase “horse.” It will also match results on search.example.com and help.search.example.com.

Example: site: search.example.com horse.

This will match results on search.example.com and help.search.example.com but NOT example.com.

Hostname:

Use hostname: to find all documents from a particular host. It won’t search the subdomains of this host.

Example: hostname:example.com horse.

This will find results for the query “horse” from example.com. It won’t search blog.example.com.

Example: hostname: search.example.com horse.

This will only find results from that particular subdomain. It won’t find results from example.com or help.search.example.com.

Url:

Use url: to find a specific document in Yahoo’s search index. This operator does not search a domain, it simply locates the page and provides a link to it. It is useful to determine if a specific page is indexed.

Example: url:http://www.example.com.

The full URL is required. In the above example url:www.example.com would not match any results. With this operator you need to be careful about whether you include www or not. This is one of the reasons why webmasters are encouraged to make a site with or without www resolve to the same page.

Inurl:

Use inurl: to search the actual URLs in the search index for the search terms.

Example: inurl:horse.

The example above will return any page with the term “horse” in the URL. The search term will be highlighted in the results. You can use inurl: in isolation without any other operators or search terms.

Intitle:

This operator will search the page titles for the search terms.

Example: intitle:horse.

The example above will return any page with the term “horse” in the http://newwebmasters.net/produce/optimise-your-pages-for-faster-load-time/ http://newwebmasters.net/produce/optimise-your-pages-for-faster-load-time/#comments Tue, 22 Jul 2008 15:07:27 +0000 corbyboy http://newwebmasters.net/?p=103

Optimise your code so it loads faster.

Optimising your pages is ideally something you should do as you are building your website, not at the end. If you keep these ideas in mind as you develop your website you won’t spend time looking for bottlenecks when your site is complete.

Reduce The Number of Requests

This may sound basic, but simply reducing the number of items on each page will contribute significantly to reducing load time. Think about each item you add before you decide to use it. Is another image really necessary? Can you combine two smaller images into one larger one? If you have more than one javascript or CSS file can you combine them to one? Many of the most popular websites have two or three stylesheets and anything up to ten external javascript files on each page. Combining these into one file would help to increase load time significantly. Your return visitors may have your stylesheets and javascript files saved in their cache, but what about your first time visitors? Why will they return if they had to wait an eternity for the page to load?

Make Javascript And CSS External

While this may sound like it is contradicting the above advice, you should link your javascript and stylesheets rather than include them inline. While this does increase the number of requests, they will be cached and this will make a significant difference in speed when the visitor returns to your website. You will need to experiment to get the balance right for your own site.

Remove All Unnecessary Characters

Remove All Unnecessary Characters

This includes all unnecessary charcters in your HTML, javascript, CSS, PHP and every other text that you code. You can remove comments, line breaks, extra spaces and tabs. This is particularly effective with javascript and even makes a difference when you are using Gzip. A good tool for compressing javascript is YUI Compressor. Beware that compressing (or “minifying” as it is often called) can sometimes produce bugs in your code. It will make reading source code difficult which is both an advantage and disadvantage. For these reasons, always keep a local, working copy of your work.

Gzip Your Pages

Gzip is a method of compressing text that is sent from your server to the browser. In the same way that zipping a file reduces its download size, gzipping a webpage decreases the amount of data that has to be downloaded. A smaller download size means faster download speeds. Gzip can only be applied to text files, as image files are already compressed.

Gzip with PHP

To apply Gzip compression to your PHP-powered website you simply need to add the following code to each page you wish to compress.

<?php ob_start("ob_gzhandler"); ?>

This must be entered before any output is sent to the browser. This is very important. You can’t send out put before you have told PHP to compress the output! This is a very easy way to significantly increase the speed of your webpages. It is up to the browser to implement Gzip correctly so you don’t need to worry about determining whether the browser supports it.

The downside to using Gzip is that it requires more processing power to serve each page. However, this drawback is easy countered by the savings in bandwidth achieved by compressing each page. For this reason, Gzipping as many pages as possible is highly recommended.

Let Users See That A Page Is Loading

One thing that will help your visitors stick around while a page is loading is for them to see that a page is loading. If a web browser knows what a section of a page will look like before the whole page has loaded, it will display it.

Load Stylesheets First

When a browser shows parts of the page as it is loading it is called progressive rendering. The first way to ensure that a page renders progressively is to put the stylesheet in the <head> section. Since the web browser has the stylesheet right at the start it can apply these styles to the page as it loads. If you put the stylesheet at the bottom, the loading of the page is handled differently by Internet Explorer and Firefox. In Internet Explorer a plain white screen is shown until the page has loaded. This means the user has nothing to look at while the page is loading and there is no visual representation that anything is actually hapenning. In Firefox the page is rendered without any styles applied as it loads and then it changes as the stylesheet is loaded. Neither of these is ideal.

Only Use Tables Where Necessary

When content is displayed inside a table it will not be rendered until the entire table is loaded. This means that if your entire page is contained inside a table, nothing will be visible to your visitors until the page is loaded. You should not be using tables for layout anyway.

On a website, speed is good.

As a competent webmaster, you know that fast loading times are important. Your visitors won’t stick around to read your blog or buy your products if they have to wait too long.

One of the biggest, if not the biggest, bottlenecks in page loading time is waiting for images to load. This guide will show you how to optimise your images for best performance on the web.

Google: A classic example of good minimalist design

A minimalist design can be very effective. Take a look at the image on the left. Google is one of the most popular pages on the Internet and it is also one of the smallest. Remember that the most effective way to optimise an image is to not use it.

Images should only be used when they are necessary. If an image doesn’t add anything to the page then should you really be using it? Remember that not everybody has superfast broadband yet and you need to make your website accessible to everybody.

Use Thumbnails If Possible

Two choices of thumbnails

If you have a page that consists of a large number of images such as a product catalogue or a photo gallery, putting tha full size of each image on the page is not a very sensible solution. Not only will it take an age to load, but the page will look messy and cluttered. Instead, show thumbnail versions of each image and link them to the large version of each picture.

There are two main ways of creating thumbnails: cropping the image or shrinking the image. The following images show the two types of 150×150 pixel thumbnail of a snowboarder.

Crop Out Anything Unneccssary

Taking the example of the snowboarder above, how much of the sky around the snowboarder is necessary? It really depends on what you are trying to show with the image. If you are showing how high the snowboarder is in the air then the sky would be necessary, otherwise cropping as much sky as you can may be the better option.

Use All The Necessary HTML Tags

When including images on a page you should always include the alt, width and height tags. The alt tag is essential as it gives a description of the image for people with images disbaled. The width and height tags are necessary so the browser knows how to place the image in the page while it is downloading.

Compress To The Max

A jpeg image saved with three different compression levels.

Uncompressed files will have a huge filesize and users will be left waiting for images to appear. Many image editors will allow you to change the level of compression when saving your image. It is simply a case of getting the balance between filesize and image quality correct. A more clear image will have a larger filesize.

Try experimenting with different file formats as they each use different compression methods. Jpeg is usually the most suitable format for photographs, whereas you will need to use gif or png if you need transparency.

After cropping the image of the snowboarder, it has been saved in jpeg format with three different levels of compression.