Page Weight

We recently released the audio recording of our clinic on this topic. You can listen to a recording of this clinic here:

Windows Media Audio:
http://meclabs.com/cgi-bin/pl/pl.cgi?cqw

RealMedia:
http://meclabs.com/cgi-bin/pl/pl.cgi?cqr

This research brief will answer the following questions:

1. What is page weight?
2. What are the benefits of reducing page weight?
3. What are the best ways to reduce page weight? (10 proven techniques)
4. What are the benefits of using CSS (Cascading Style Sheets)?

Findings

1. What is page weight?

Page weight is a measurement of the file size (usually in kilobytes) of a Web page that includes the combined size of all the elements of the page, including HTML files, images, audio or video, Flash animation, etc.

Page weight can be used to determine the download time for a given page on a variety of Internet connection speeds. By way of example, the following table shows the download times for three different pages at a number of popular connection speeds.

What You Need To UNDERSTAND: At high speeds (DSL and cable connections), most reasonably sized pages will download relatively quickly. However, at slower speeds (including faster dial-up speeds), even medium-sized pages can take ten seconds or more to download.

It is important to remember that page weight includes ALL of the elements of the page, including images, audio or video files, associated style sheets, multiple HTML files loaded within frames, and so on.

Also note that 56 Kbps dial-up connections are not usually realized in the real world. Due to phone line noise, this is generally more like 48 Kbps.

2. What are the benefits of reducing page weight?

The positive impact of reducing page weight benefits both website owners and consumers. Potential benefits include:

1. Pages load faster. The most obvious impact of reducing page weight is that your website’s pages will load faster for visitors, regardless of their connection speed.
2. Lower page load times create more comfortable visitors. Visitors are less likely to become frustrated and go elsewhere if your pages load quickly. On the other hand, slow-loading pages are one of the surest ways to lose visitors and potential customers.
3. Faster load-times will contribute to increased conversion. More visitors will stay on your site longer. More of them will end up making purchases, signing up for your newsletter, or book-marking your site.
4. Your brand perception will be enhanced. Returning customers and first-time visitors alike will be more inclined to describe your site (and business) as “professional” if your pages load quickly.
5. Pages with clean, solid code will often be indexed more effectively by natural search engines. For more on optimizing your site for natural search, see our recent report on that topic:
   http://meclabs.com/cgi-bin/pl/pl.cgi?mns
6. Pages optimized for weight can actually save bandwidth charges on high-traffic sites. 100,000 pages each weighing 150 Kb will require twice as much bandwidth from your ISP than 100,000 pages each weight 75 Kb. For ISPs that charge for bandwidth used or for overages, this reduction can create significant savings on bandwidth charges.

Consider the following data, published in a report by eMarketer <http://www.emarketer.com/>:

What You Need To UNDERSTAND: You will lose nearly half your visitors if they have to wait longer than 15 seconds for a page to load. Only 5% of visitors will wait longer than 30 seconds.

Comparing this “patience” chart to the page-load chart at the beginning of this report, it quickly becomes apparent that large pages will greatly impact the effectiveness of your site. On slower connections especially, page weight becomes extremely important.

For example, a 100 Kb page would effectively scare off around half of your audience using ANY kind of dial-up connection (56 Kb or slower).

3. What are the best ways to reduce page weight? (10 proven techniques)

1. Remove inessential elements of your pages. Many page elements will serve only to distract your visitors from the primary (or even secondary) goal of your site. This is especially true of sound and video files, but also extends to unnecessary graphics and even extraneous text. If it doesn’t contribute essentially to your site’s purpose, remove it.
2. Use CSS (Cascading Style Sheets). CSS can be a very effective way to reduce the load time of your overall site. We will cover this in more detail in the final section of this report.
3. Avoid frames. Not only do framed pages load more slowly (because the browser is required to load multiple HTML pages), some search engines still do not index framed pages correctly. Unless your site requires frames as an ABSOLUTELY ESSENTIAL part of the design, it is best to avoid them altogether.
4. Avoid nested tables. Inexperienced Web designers will often utilize tables inside of tables in order to get the page layout just right. This can be avoided by using a single, well-thought-out table for page layout. Utilizing CSS can often eliminate the need altogether for tables as a formatting device (see below).

   Note that some Web design software applications will often use nested tables without your knowledge. When in doubt, check the code.

5. Compress your images. Uncompressed JPEGs and GIFs often contain extra data not necessary for their correct display. Most professional graphics programs feature utilities to compress and optimize graphics for the Web.

   You might also find the following tools helpful:

   Image Compressor:
   http://www.spinwave.com/

   GIFCruncher:
   http://www.webreference.com/services/graphics/gc/

6. Always use height and width tags in your images. This will allow the page to appear on the screen before all the images are loaded. This is especially true in older Web browsers.

   Even in newer browsers, images with height and width tags will allow the page to load normally without having to resize itself as the images load. Images without size attributes often manifest as the infamous page “jump down” that will annoy visitors if they have already begun reading.

7. Remove extra “whitespace” in your code. Every space, tab, and “newline” character in your HTML code requires extra data in the page. Thus, limit their use and pay attention to what extra space is inserted by your design software.

   Some page-design software programs (notably Dreamweaver) have extensions that can be added for the removal of whitespace. Running these tools before uploading your pages can often eliminate several kilobytes of extraneous data from each page.

   You can also run a simple “search and replace” on your pages, telling the software to replace “> <” with “><” while “ignoring whitespace”.

8. Break up long copy. While long copy can often be an effective means of marketing your products or services, long-copy pages taken to the extreme may take so long to load that they will lose visitors during the wait. Consider breaking up very long copy to multiple pages.

   For more on long copy versus short copy, see our recent report on that topic:
   http://meclabs.com/cgi-bin/pl/pl.cgi?mlc

9. Clean up your code with tools. A number of free and commercial tools are available online that will clean up your website code, reducing page weight without affecting how your page is displayed.

   Three popular tools are:

   Web Developer ToolBar:
   http://www.chrispederick.com/work/firefox/webdeveloper/

   NetMechanic:
   http://www.netmechanic.com/

   Dr. Watson:
   http://watson.addy.com/

   There are additional site-optimization and page-weight tools listed in the Literature Review at the end of this report.

   KEY POINT: Don’t use these online tools without first making a backup copy of your pages, as they sometimes produce errors in the code.

10. If you choose to design for a specific connection speed, pay close attention to your target audience. For example, high-speed connections are more common in the workplace than in homes, and in wealthier households than in poorer ones. You may place more or less emphasis on optimizing your page weight depending on your target audience.

4. What are the benefits of using CSS (Cascading Style Sheets)?

Cascading Style Sheets (often abbreviated CSS) creates a number of key advantages for the website owner. Cliff Rainer, a specialist on our design and development team, has provided the following overview of the benefits of CSS:

1. CSS accommodates forward compatibility. Some depreciated elements will one day no longer be supported in browsers. These elements include the “font” tag, the “center” tag, the “background” element of the “body” tag, and so on.
2. CSS effectively separates content from presentation. In other words, to change the content of your site, you would modify one file; to change the presentation of that content, you would change another file (the style sheet).
3. CSS allows you to create different style sheets for different media, such as the Web, printer-friendly pages, PDA, etc. You can also create different style sheets for the various Web browsers (Internet Explorer, Mozilla, etc.).
4. KEY POINT: CSS reduces file size because it decreases the amount of markup in the HTML. CSS eliminates the need for page elements such as one-pixel spacer images, multiple font tags, nested tables, and similar items.
5. KEY POINT: Using an external style sheet also allows for the caching of the styles so that the browser doesn’t have to reload it with each new page, thus reducing the time for subsequent pages (after the first) to load.
6. CSS allows for global control. Change a single property in the external file and it changes the appearance of that element for the entire website.
7. CSS speeds up redesign. You don’t have to rewrite all of the HTML code; you can simply make changes to the style sheet.
8. CSS gives you more powerful control over the elements of your pages. You can control basic elements such as font size and color as well as more high-level elements like the precise location of the objects (paragraphs, graphics, etc.) on the page.
9. KEY POINT: CSS allows you to put your most important content near the top of the page documents while less important elements such as navigation can be closer to the bottom. The CSS code tells the browser where the content is to be displayed on the page, regardless of its position within the code of the document. This allows search spiders to get to your most important content first.

To see some of the potential of CSS for page design, visit the CSS Zen Garden:

http://www.csszengarden.com/

There are additional CSS-related resources listed in the Literature Review at the end of this report.

The impact of just a few key improvements in the overall page weight of your site can be quite substantial. You will benefit from increased conversion rate, a more professional company image, and more satisfied website visitors.

Notes

Related MEC Reports:

Site Design Tested, Part 1:
http://meclabs.com/cgi-bin/pl/pl.cgi?ms1

Site Design Tested, Part 2:
http://meclabs.com/cgi-bin/pl/pl.cgi?ms2

Effective Use of Dynamic Web Pages:
http://meclabs.com/cgi-bin/pl/pl.cgi?mdp

Ideal Subscription Path Tested:
http://meclabs.com/cgi-bin/pl/pl.cgi?mis

Landing Pages Tested:
http://meclabs.com/cgi-bin/pl/pl.cgi?mlp

Order Process Tested:
http://meclabs.com/cgi-bin/pl/pl.cgi?mdr

Order Recovery Tested:
http://meclabs.com/cgi-bin/pl/pl.cgi?mor

Transparent Marketing:
http://meclabs.com/cgi-bin/pl/pl.cgi?mtm

Literature Review

As part of our research on this topic, we have prepared a review of the best Internet resources on this topic.

Rating System

These sites were rated for usefulness and clarity, but alas, the rating is purely subjective.

* = Decent | ** = Good | *** = Excellent | **** = Indispensable

Tools:

WebSpeed Simulator ***
http://www.xat.com/wo/index.html

NetMechanic – Site Optimization Tools ***
http://www.netmechanic.com/

Web Developer ToolBar ***
http://www.chrispederick.com/work/firefox/webdeveloper/

TopStyle CSS Editor ***
http://www.bradsoft.com/topstyle/

StyleMaster CSS Editor ***
http://www.westciv.com/style_master/

Website Optimization ***
http://www.websiteoptimization.com/

Dr. Watson **
http://watson.addy.com/

Download Time Calculator **
http://www.martindalecenter.com/AATimeCalc.html

Loading Time Checker **
http://www.1-hit.com/all-in-one/tool.loading-time-checker.htm

Download Speed Calculator **
http://www.clockwatchers.com/speedtester.html

Page Download Time Calculator **
http://www.starspath.com/makewebsite/downloadcalculator.html

Page Weight and Speed Bookmarklet **
http://meclabs.com/cgi-bin/pl/pl.cgi?ssb

Spinwave Image Compressor **
http://www.spinwave.com/

Spinwave GIFCruncher **
http://www.webreference.com/services/graphics/gc/

Articles:

Speed Up Your Load Time **
http://www.webweaver.nu/html-tips/load-time.shtml

Browser News: Load Time **
http://www.upsdell.com/BrowserNews/res_load.htm

Design Tip: Load Time **
http://www.quietsiren.com/tips/archive/00000013.shtml

Improving Page Load time **
http://www.silurian.com/sitevigil/tip1.htm

Lose the Loading Time and Keep the Visitor **
http://www.sitepoint.com/article/loading-time-keep-visitor

Load Time Tip: Speed Up Those Tables **
http://www.netmechanic.com/news/vol4/load_no19.htm

The Truth About Download Time **
http://www.uie.com/articles/download_time/

Page Weight – Don’t Make Me Wait **
http://meclabs.com/cgi-bin/pl/pl.cgi?spw

Designing Your Page for Load Speed **
http://www.imswebtips.com/issue15top1.htm

Books:

Speed Up Your Site: Web Site Optimization ***
http://www.amazon.com/exec/obidos/tg/detail/-/0735713243/

The CSS Anthology, 101 Essential Tips, Tricks & Hacks ***
http://www.sitepoint.com/books/cssant1/

CSS: The Definitive Guide **
http://www.amazon.com/exec/obidos/tg/detail/-/0596005253/

CSS Programmers Reference **
http://www.amazon.com/exec/obidos/tg/detail/-/0072131780/

CSS Resources:

CSS Zen Garden ***
http://www.csszengarden.com/

Cascading Style Sheets ***
http://www.w3.org/Style/CSS/

CSS Validator ***
http://jigsaw.w3.org/css-validator/

CSS Vault **
http://cssvault.com/

CSS Tutorial **
http://www.w3schools.com/css/default.asp

Guide to CSS **
http://www.htmlhelp.com/reference/css/

The Benefits and Advantages of CSS **
http://meclabs.com/cgi-bin/pl/pl.cgi?sba

About This Brief

Credits:

Editor — Flint McGlaughlin