with Lorelle and Brent VanFossen

Web Page Optimization

There are two main aspects to preparing your pages for exposure to the World Wide Web. First is validation, the process of checking and rechecking the structure and design elements of a page to meet the standards. The other is a form of site maintenance, often called optimization – the process of fixing, repairing, maintaining, and speeding up web pages for better accessibility. Remember, the better and tighter your web page design is, the more friendly and appreciated it is by search engines, and by the users, the most important people to please.

Keeping Current: Checking Loose Links

The three biggest complains by Internet users are speed issues, broken links, and slow ads . We’ll discuss the issue of speed and fast-loading pages in a moment, but let’s tackle the number two complaint: broken links. Few things are more frustrating than tracking down the information you want, and finding that the real answer is on another page, and you click the link and get the famous “404 Page Error – Page Not Found”.

The term “web” came about as a visual image of how the Internet and web pages work. Through a process of links within a web, each web page connects with another web page which connects with another, and another, and so on and so on, all connecting the strands of the web together. When one of those strands is broken, the web weakens.

example of a link check validation resultsA web page features two different types of links: internal and external. External links take the user to another site, leaving yours behind. Internal links are the links that connect one page to another within your Website. As a search engine moves through your site, it relies upon the internal links to move through your web site from page to page, gathering information. If there is a break in any of these links, or you have pages that are not linked to from within other pages in your site, that page won’t be found by the search engines.

Most web page editing software permits the checking of internal links, and some even feature external link checkers. As you redesign your Website, take care to create a good 404 Page Not Found web page to guide people to the information they want. Put placeholders, pages with information that the content has moved, on the links to pages you have deleted or moved to let people know the address has changed, what the new one is, and where to find more information. If you use site statistics programs to monitor your Website’s visitors and access, check to see how often your 404 page is being accessed. If frequently, thoroughly check how up-to-date your internal links are to keep people inside your site on the right content.

Keeping up with “dead links” can be a full-time job if your site features more than a thousand links. There are several link checking software programs available to help you organize and check your links, as well as free online link checkers to help those with only a few links on their pages. Websites and pages come and go rather quickly, or they change their linking structure so broken links are commonly found while the Website is still functioning. While the link checking programs can identify broken links, you still have to manually check to see if the link is really dead or just moved. If you have a small business or site, schedule link checking about once every three to six months to keep your external links updated.

Link – Validation

Fast-Loading: Optimizing Bandwidth

Graphic representation of how a web page passes through the funnel of bandwidth - design by Lorelle VanFossen The number one complaint by users has little to do with design elements, based more on the speed of the system relaying the information, yet how a web page designer designs the page does influence the speed of access to the page. 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), 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.

Auser user can speed up access to a web page by changing their computer’s speed (by upgrading or replacement) or changing their communication line (from telephone to high speed Internet). As of December 2003, 39 million, or 13%, of Americans are connecting via broadband (high speed Internet), a growth of 49% from last year. England, and the rest of the EU, is not far behind, with England announcing high speed Internet access to everyone in the country by 2005. Still, there are nearly twice as many narrowband (telephone line) users as broadband users. While the majority of users are still going slow, there are still things a web page designer can do to help the user get the information a little faster.

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?

There are a lot of good articles on optimizing web pages for fast loading, but here are a few tips.

Unwanted Spaces
We kept a record of the things we cleaned up in our Website recently to save space and bandwidth. Backup your Website pages before proceeding for safety reasons and take care before making any sweeping changes in your multiple file search and replaces. 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. With our over 400 web pages, we found and replaced over 49,500 spaces. This comes to just over 49K bytes of wasted space, but it still adds up. 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 -->.
Optimize Graphics
With the advent of JPEGs 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 Code, Too: Go CSS

Go through your HTML code and pull out every presentation reference you can and put it in CSS (Cascading Style Sheets). There are hundreds of articles and resources for learning about CSS on the Internet, but here is a simple 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</H2>

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

&ltH2>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;
font-style: normal;
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 }

Check Manually
Checking and validating your web pages with all the different online programs mentioned in these articles is great and a must do. But take time to check each page yourself to see if they are visually appealing and appear the way you want them to look. We often get so caught up in the minutiae of the code we forget that the darn things must look pretty, too. Many a time we’ve done sweeping multiple file search and replaces for the smallest bits of code only to find out that on three pages, that little change caused our nice two column layout to become a single column, or left a visual mess. Be sure and actually look at the pages you are working on to see that they still work right and look great.

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.

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. For larger pages, work to 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.

Designing for Speed

One Comment

2 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>