- compressing the size of your graphics
- using tables to speed up the load time of your website
- how to get rid of redundant code.
Compressing your graphics
The idea behind compressing your graphics is to make the graphic file size smaller so that your web page loads faster.
Time and time again people build graphics in Photoshop or Paint Shop Pro and think they have the graphics down to the smallest size. Well they do not! Most of the time the graphics can be compressed much more. The problem is that these programs are so powerful with so many extra features that most users do not know all the tricks that can be used to really compress graphics down to the bare minimum.
Once your graphics are done, I recommend going to http://www.gifwizard.com or http://www.gifoptimizer.com for your GIF graphics and http://www.jpegwizard.com for your JPEG graphics. These are free services that will retain the viewing quality of your graphic but compress them down as much as possible so that they load faster.
If you are really familiar with Photoshop or Paint Shop Pro, you can do a lot of the compression yourself. The first thing to do is make sure you are not using too many colors in the graphics. For example some people have 16 million colors in their banner when in actuality they are using only three real colors. Use the minimum number of colors in your graphics.
Always use 256-color mode, or if you can, you might even try 16 or 8-color graphics mode. This one technique alone will compress your file size so much it will make your head spin! As a side note, Photoshop 5.5 has one of the best compression utilities that will do all the compression for you and generate small file sizes while preserving the quality of the image.
Check it out at http://www.adobe.com/prodindex/photoshop/main.html
Using Tables
If you have a really long page, the second thing you can do is split it up into tables. The idea behind using tables is to split the text up into different sections. The browser maps the page immediately and automatically starts loading text into the first table so it appears as the rest of the page is loading. This allows your visitor to start reading right away while the rest of your page loads.
Let me explain this in more detail. Say, for example, your file size is 10K and you break this down into 5 tables of 2K each. As soon as you hit the 2K load period of your 10K file, the browser will drop that information into the table so that your visitors have something to read on the first part of your page while the rest of your information is still loading. Normally the browser would wait for all 10K to be loaded before it would display the page at all.
This is a great way to trick the browsers into displaying the first part of the page while the rest of it is loading. It gives your visitor something to read right away and makes it appear as if your page is loading faster.
I recommend that you take this a step further by making your table shorter at the top and longer at the bottom. This way your table loads really fast at the top while the bottom takes a bit longer. It makes it appear as if your page is loading even faster and gives the illusion of a really fast website! And, most importantly,
your visitors will not leave because they are tired of staring at a blank and loading screen.
Remove Redundant Coding
The third way to speed up your website is to take out redundant HTML. If you are using any of the “What You See Is What You Get” (WYSIWG) editors like Microsoft FrontPage you will find lots of excess code. These editors put a lot of redundant HTML on your page… it simply does not need to be there and it only increases the size of your files.
For example WYSIWG editors put in the font size and font type for every paragraph. This is a waste of space. This gives the browser more things to figure out which takes time. You should only have to put in your font type or size when you change it, not in every paragraph.
Here’s an example of some simple coding done in a text-based editor:
Hi, My name is Corey
Some HTML editors put in a lot of excess code, making the size of the field large and
unwieldy.
By taking out excess code you can reduce the size of your files significantly!
Here’s an example of redundant source code put in by a WYSIWG editor:
Hi, My name is Corey,
Some HTML editors put in a lot of excess code, making the size of the field large and unwieldy.
By taking out excess code you can reduce the size of your files significantly!
As you can see, it has put in a font face and size definition for every paragraph even though it always stays the same throughout the page. WYSIWG editors will insert code like this for many other things, not just font face and size.
If you have a file that is simple text and it comes out as a 20K file when you use a WYSIWG HTML editor, you can reduce the size by at least 4-5K by just removing redundant HTML code. It does not sound like much, but it can add up to a load time which is 25%+ faster.
