BeWebmaster

Optimize your code - Make your pages load faster

Ad

Your web site visitors want your pages to look attractive, the content to look organized and easy to read, to have good quality images and on top of that to load fast. You as a designer know that better quality images and larger html files take more server space and load slower, but you also don't want to disappoint your visitors.

Try our award winning "SLR- Space and Line Remover" tool to optimize your html code.

Reducing Image Sizes

You may start with looking at your images and their sizes. You can try using Netmechanic tools to compare image quality, size and load times at different connection speeds and than make your adjustment using your Image editing software.
Sometimes, depending on the image quality you are currently using, you can make your images 10 ? 30% smaller by reducing their quality. Photoshop 7 would enable you to do that fairly easy.

Optimizing Code

After you're done with images adjustment you may want to optimize your HTML, CSS, and Javascript code.

What you should do first is check your code for errors. Sometimes the errors may slow down the page load times. To check for errors use w3c html validation service. It's free and easy to use. You can also use some of the other tools.
Once you have your pages error free, take a look at their sizes. The smaller the size of your page is the faster it will load.

You can make your pages smaller by removing extra lines of code, white space and your comments. Less code means less size, so instead of using text formatting tags and attributes in HTML, format your text using external CSS. Also, you could try using CSS instead of tables. The book HTML Utopia: Designing Without Tables Using CSS talks about it in great details.

Take a look at the bewebmaster.com source code. Most of the layout is created by using CSS.

Get rid of Javascript lines

We don't want you to really get rid of your Javascripts, but use it differently. Most Javascripts you use are between the <head> tags. Take a look at them and see if you are using same scripts on the different pages. If that is true, what you may do is combine all those scripts into one external Javascript file. That way you are not only removing those extra lines, but also making your scripts easier to manage.

This same rule applies to internal CSS. Use external CSS as much as possible.

Use one instead of tens or hundreds of HTML lines

This is something that can reduce the size of your HTML documents dramatically. You should think it through before doing it, however. But first, let's take a look at an example:
1. Easy to read and edit, but spread over 12 lines code
<TABLE BORDER="0">
<TR>
<TD>1000</TD>
<TD>2000</TD>
<TD>3000</TD>
</TR>
<TR>
<TD>4000</TD>
<TD>5000</TD>
<TD>6000</TD>
</TR>
</TABLE>

2. Hard to read and edit, but about 33% smaller in file size
<TABLE BORDER="0"><TR><TD>1000</TD><TD>2000</TD><TD>3000</TD> </TR><TR><TD>4000</TD><TD>5000</TD><TD>6000</TD></TR></TABLE>

Both examples generate same output. Your visitors will not see the difference unless they looked at the source code. If you want your visitors to be able to read your source code, or if you are working on the code with more people we would always suggest the first example. If you are worried about speed and size of your documents, second example is recommended. So think which one would work better for you.

Try our award winning "SLR- Space and Line Remover" tool to do this for you.

Remove white space

Browser doesn't care about the white space, but your pages will load slower if you have too much of it. This goes back to the lines. The more white space you have, the more lines of code you'll end up with, which will result in bigger file sizes.
Instead of:
<TABLE             BORDER="0"><TR><TD          HEIGHT="100" >        1000       </TD></TR></TABLE>

Use:
<TABLE BORDER="0"><TR><TD HEIGHT="100">1000</TD></TR></TABLE>

Try our award winning "SLR- Space and Line Remover" tool to do this for you.

Final thought and recommended resources

Your pages may already be small enough and not need any adjustment, but if you found your pages little slow the techniques we suggested could improve the speed of your web site. Also, if you have a bigger web site with more than 30-40 pages and limited server space, reducing the sizes of your pages may save you some space.

Recommended Readings
Speed Up Your Site: Web Site Optimization by Andy King
HTML Utopia: Designing Without Tables Using CSS by Dan Shafer