Beginner Tip:
Every Byte Counts (Towards Page File Size)

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

When you hear that 85% of United States residents already have broadband Internet access and that 50 million Europeans will have broadband access by 2007, you may ask yourself: "So why am I worrying about page file size, anyway?"

Because file download size is still important - to both your visitors and your bottom line.

Page File Size Affects Visitors

Broadband users are a lucky bunch. Even the slowest page download is virtually transparent to someone using a cable modem or DSL line. But dial-up users, who are proportionally more rural, older, and slightly less affluent, are painfully aware of download time. And they're still the majority in the US - although just slightly.

Even though broadband use is growing rapidly in many countries, it's not as large as you may assume. According to the ITFacts Web site's broadband statistics page:

• 10% of rural American residents have broadband Internet connections at home.
• 50 million Americans currently use dial-up for Internet access.
• Approximately 6 million French users had broadband at the end of 2004.
• 20% of European homes had broadband access at the end of 2004.

There are still tens of millions of dial-up users and there will be for years.

In Europe, a sizable number of households use some combination of flat-fee and pay-per-minute access plans. Many United States Internet providers also offer similar plans. Slow-loading pages could be costing your visitors money. It just makes sense to consider international visitors and other dial-up users when designing your site.

Page File Size Can Cost You Money And Traffic

But how do bloated pages affect your own bottom line? Look at your Web hosting plan's terms and conditions document to find out. Most Web hosting accounts come with two main limitations: disk space and data transfer. Don't confuse them!

Disk space is the amount of space your HTML pages, images, external files, music, and video files takes up on the server. Data transfer is the total amount of files that get sent when visitors request your Web pages. More traffic equals more data transfer. Larger files equal more data transfer.

Even if your hosting company advertises "unlimited data transfer," you need to realize that, well, they don't really mean it. There's a limit to what any company will accept - particularly on a very low-cost hosting plan. Bandwidth is expensive and they could receive complaints from neighboring sites on your server if your traffic volume is slowing everybody down. Worst case, the host will shut down your site, but most will "suggest" that you upgrade to a more expensive hosting plan.

Calculating Page File Size

The Load Time Check feature of NetMechanic's HTML Toolbox will calculate the download time for your Web pages and list the size of each page component.

Some HTML editors will also calculate page download time, or you also calculate the numbers by hand. It's easy for a single page, but could be a really time-consuming for a large Web site. Here, let's calculate the data transfer total for an example home page:

Suppose 500 visitors per day request this page:

But what if the page gets really popular and 5,000 visitors arrive each day?

Of course, you want people to visit more than one page in your site, so the data transfer total increases with your success. So if you have a high-traffic site (and isn't that everyone's goal?), you can easily run afoul of your Web host's data transfer limitations and incur unexpected fees or downtime.

Major Components Of Page File Size

When you're calculating page file size, remember that each separate component - external files, multimedia files, image files, and the html document all need to be considered. You may be amazed by the total "weight" of your pages when you calculate it for the first time. Fortunately though, it's usually easy to reduce the size without affecting the page quality.

• Use text - lots of text! Search engines need good, keyword-rich text in order to index and rank your site. Human visitors arrive at your site looking for information. Make sure you're giving it to them. But the best part about text is that it's generally the smallest component of page weight. One MB of text is roughly equal to 180,000 words - or about the size of a novel. You can add a lot of text without hurting download time.
  
  
• Remove deprecated HTML tags: Extra HTML code is the kind of text you don't want. HTML coding errors can cause problems with search engines. Deprecated HTML tags like FONT add size and unnecessary complexity to your code.
  
  
• Use external files: External CSS and JavaScript files serve two important functions: they reduce page file size and make maintenance easier. If every page in your site uses the same external CSS file, then it only gets downloaded from the server once. Each subsequent page retrieves it from the visitor's browser cache. That saves time for visitors and reduces your data transfer total.
  
  
• Reduce the number of images when possible. Several techniques can help you eliminate images and still keep the same basic layout:
  
  
  1. Use a background color instead of a background image. You may reduce file size while you increase page readability.
  2. Consider replacing your menu-driven navigation with a CSS-driven menu system. Visitors get the interactive effect of Javascript rollovers without the extra images.
  3. Use custom horizontal rules styled with CSS instead of a graphic image as a divider.
  4. Use the GIF format for simple images with large blocks of the same color. Use JPG images for photographs.
  
  
• Optimize images with GIFBot. This is a free, easy, and effective way to reduce file size without sacrificing image quality. Here's an example. It's a photo of our new dog, Trixie, taken the day she we adopted her from the animal shelter:

Original image	Optimized image
File size: 18,921 bytes	File size: 6144 bytes
	Saved 67% using GIFBot!

The photos are virtually identical, yet the optimized image has a much smaller file size.

Need more information about your Web site's structure, download time, and code quality? Then you need HTML Toolbox. It's an affordable, Web-based tool that comes with nine key tools, including:

1. HTML Check and Repair - Validates HTML code and generates a corrected page that you can upload to your server.
2. Browser compatibility - Checks for browser-specific HTML tags that may break your page layout in some browsers.
3. Spell check - Includes the ability to build a custom dictionary and select from 11 language options.
4. Image catalog - A comprehensive report of all images found on your website. You can easily locate images that need to be optimized.