Site Optimization: Optimizing Bandwidth and Cleaning Out the Code Closet

The number one complaint by users has little to do with design elements. It has to do with how long it takes for a web page to load and how willing they are to wait for it.

While most people just accept and tolerate the long waits for pages to load, they don’t have to. As the web page designer and developer, there are ways you can speed up the process. A happy user usually returns if the pages load quickly and the content is worthy.

Imagine your access to a web page as fluid passing through a funnel. On the server site, the side where the web page rests, the funnel is at its widest, though its width is controlled by the speed of the machine that hosts the web page. A fast server (computer) will feature a huge funnel opening, and an older, slower one will have a smaller opening. From this point, the web page information flows into the funnel towards you, at the narrow end. The width of the funnel is controlled by the speed of your computer and its hard drive to accept the information, the number of other programs you are running at the time (consuming your computer’s speed and memory), the speed of the communications line you are using (telephone, cable, etc.), and the speed of the computers and lines through which the web page information passes through to get to you. At any point along the path, something can slow down a web page, such as an electrical storm over one of the computers passing your information along or a “traffic” jam of too many users online.

About 50 million Americans are connecting via broadband (high speed Internet). In 2004, England announced high speed Internet access to everyone in the country by 2005. While these statistics prove that high speed access to the Internet is growing by leaps and bounds, there are still. nearly twice as many narrowband (telephone line) users as broadband users.

This means that it is still up to you, the web page designer, to still design your site for the narrowband as well as broadband, to make sure your page is the fastest loading and most accessible to all.

Adding Up Each Byte on Your Web Page

When a web page loads into a browser, it brings with it the content, the structural format code that holds the content, the CSS (style sheets) instructing the browser how the content should look and be arranged, the images within the content, and any scripts, frames, iframes, and other pieces of code that “brings” content to a page. Every character on a page, every < tag, colon, quote and equal sign – these all add up. For example, here is a breakdown of one of our web pages with six graphics on it:

Content	Size
HTML	16K
CSS	9K
GRAPHICS	80K
SCRIPTS	45K
ADS	25K
Total	175K

The average base page, according to experts, should be about 30K, and grow to about 60K with all the graphics and scripts added in for the best loading speed, though less is always best. This page is way over the limit! So how do you get that number down?

Putting Your Web Pages and Template Files on a Diet

Maybe it’s time to put your web pages and template files on a diet? I’m sure there are some things you can do to streamline them and thin them out to make them become fast loading web pages.

I recommend you start editing your files with a text only editor rather than typical HTML web editors. These can be notorious for adding to web page bloat rather than helping. With a text only editor, nothing can get added by the program other than what you put into it. Make sure it has good search and replace features if you are serious about cleaning up and optimizing your web pages and template files.

Backup your website before proceeding for safety reasons and take care before making any sweeping changes in your multiple file or database search and replaces.

Here are a few tips to help you get started thinking about cleaning out the code and shrinking your web pages down.

Unwanted Spaces
We kept a record of the things we cleaned up in our website recently to save space and bandwidth. Here is the list of what we removed and changed (an underline or underscore represents a space):

• _<p>
• <p>_
• _<br>
• <br>_
• </p>_
• _</p>
• <p><ul> to </p><ul> or just <ul>
• </ul></p> to </ul>
• Double Hard Returns (spaces between lines (aka ENTER) to Single Hard Return
• Tabs (usually represented by 5 spaces)
• ._ _ to ._ (period with double spaces to period with single space)
• _ _ _ (three or more spaces)
• _border="0"

Eliminate spaces

Often when writing articles and content in word processors and pasting the information into the HTML page, spaces are created at the end of paragraphs. If your web page editor permits multiple page search and replace, search and replace for _</p> (space then tag) to </p> (no space just tag) and see how many are found. Spaces between tags are usually invisible on the screen, but they take up space. Check for spaces between ” >” and ” <” and see if they can go (be cautious of links next to links or code next to code as they will squish together with this search and replace). While empty lines and indenting around the coding help the web designer “see” the code better, they take up space so get rid of them.

Image Borders

By default, images do not have borders, but many web page editors automatically insert border="0" in their image tags. This adds up to 10 bytes per image which can be eliminated. The instructions for borders on images can be put into the style sheet if necessary. Ten images (or graphics) on a page and you have saved 100 bytes of space. One hundred bytes across 100 pages and you’ve saved 10,000 bytes. Again, not much, but they add up.

Excessive Comments

Web designers often use comments <--! Put mailing address here --> to help them with the layout of their coding in their HMTL and CSS pages. These are great, but they also take up space. Consider leaving them in your template pages and eliminating them in your final pages, or minimize them to something like <--! Mail -->.

Excessive Tabs

Understand that a well tabbed template file, web page structure and CSS file is nice to have. It can help make the code easier to read. But if it is working right and you aren’t making a lot of changes to the code, then who sees that pretty layout? Your bandwidth does. A tab is usually represented by five spaces. So why not use 3 spaces to indent instead of 5? If you have to indent. Or why indent at all? It’s up to you. Realize that many HTML editors and WordPress Themes feature tags at the end of a line. I’m not sure why, but tags at the end of a line do nothing for anyone. I examined one WordPress Theme and found 43 tabs at the end of lines of code just in one template file. Get rid of all unnecessary tabs.

Optimize Graphics

With the advent of JPEGs, PNGs, and GIFs, images can be used on web pages that feature compression to reduce their size while maintaining quality. There are now a wide range of programs available that will further reduce the size of your images without degrading the quality. If your site hosts a lot of images, consider investing in an image optimization program.

After you’ve optimized your page design, streamlining it for the fastest possible loading, validate the HTML and CSS again to make sure you haven’t slipped somewhere.

Clean Your HTML: Go CSS

While the most modern web pages feature CSS driven website layouts and designs, there are still millions of webpages using the old fashioned and obsolete inline and table styles instead of CSS. If your site is still laid out with tables – WAKE UP! It means that your site’s layout is at least 5 years old and in the web and Internet world, it’s more like 50 years out of fashion. Your site is a ball and chain on the Internet and inherently slow.

Coverting your site from a tables-based layout to CSS is beyond this article. There are thousands of articles on the web that can help. Get busy and update your site. You will be happier and your audience will cheer with the automatic speed increase.

Still, let’s look at a quick example.

If you have a recurring headline of:

<h2 align="center"><b><font size="2" font face="helvetica, arial, verdana, sans-serif" color="darkblue">Title Here</b></h2>

You can remove all those codes from your HTML page and just leave:

<h2>Title Here</h2>

By moving all the presentation effects (color, size, font face, etc.) to the CSS (style sheet), you would shrink your HTML page by every mention you have of the H2 code and only have one listing in the style sheet applicable to every H2 found in your site as:

h2 {
font-family: helvetica, arial, verdana, sans-serif;
font-size: 120%;
color: darkblue;
font-weight: bold;
text-align: center}


CSS elements can also be streamlined and condensed. For example, the DIV code for a specific box layout may be:

#box { margin-top: 2px; margin-right: 3px; margin-bottom: 2px; margin-left: 3px; padding-top: 2px; padding-right: 3px; padding-bottom: 2px; padding-left: 3px; border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-style: solid; border-color: blue}


Using the consolidated formula with a clockwise format, this can be reduced to:

#box { margin: 2px 3px 2px 3px; padding: 1px 2px 1px 2px; border:1px solid blue }

Instantly, you may have stripped any where from a few dozen bytes to a 1000 bytes off the size of an HTML page, and increased the style sheet by only a few bytes. Less code, faster loading, less time waiting.

Other Bandwith Saving Tips and Techniques

If you find you have created huge web pages, consider breaking them down into smaller portions, but take care. There are times when slicing up an article to reduce the page size is rewarding, with the faster access speed, and times when having one article paragraph per web page, requiring the user to click through dozens of pages to get to the end of your article – is a great time waster and inconvenience. You may find more users leaving before they get to page 4 than would stay if it were one long page. For larger pages, find a happy medium.

One of the most fascinating sites I found on the Internet for web designers is produced by WebReference.com. It is a step-by-step explanation and history of their web pages with samples of the pages as they developed. The lessons they learned over the years can help all of us avoid the making the same mistakes. Their articles and information on optimization of their website is a must read!

There are many other ways to streamline your code and reduce your bandwidth, so take some time to check them out. Your viewers will love you.

• Lean and Mean HTML
• Tutorial on Web Page Optimization
• Web Page Size Recommendations
• About.com’s Website Optimization Articles
• Web Page Optimization and Increasing Speed
• Speeding Up Your Web Pages
• Optimization Week – Serious Analysis of Website Optimization
• Bandwidth Conservation Society
• NetMechanic’s Load Time Check
• Site Optimization Strategies
• Submit-It Optimization Recommendations
• Web Page Bandwidth Analyzer
• Webreference Extreme Optimization
• Webreference.com’s Optimizing Web Graphics
• Website Optimization’s Bandwidth Report and Statistics
• WebSiteOptimization.com’s Web Page Analyzer

technorati tags: blog administration, wordpress, website, website administration, website optimization, optimization, HTML, css, wordpress help
site search tags: blog administration, wordpress, wordpress tips, website optimization, optimization, HTML, website design, website administration, web page design, css, wordpress help
© Reprinted with Permission