Controlling Page Size

Page File Size = Download Time

Controlling your page size is important to the use of your site. Page size refers not only to the length and width but also to the page file size. Both of these page attributes affect your viewers experience of your web site and cause viewers to linger or leave.

Page Length And Width:
Page length is simply how long the page is and how many clicks on the vertical scroll bar it takes to reach the bottom of the page. An average web page is approximately 2 to 3 scroll bar clicks in length. If the page is longer, try to subdivide the page into multiple, smaller pages. If this doesn’t seem practical, use topic heading to divide the page into sections. This way the viewer gets a sense that he or she has completed a portion of the page much like the chapters of a book. (I violate this rule on my articles but do as I say not as I do.)

Page width is a special peeve of mine. I dislike sentence line lengths that are as long as the screen is wide, especially on monitors greater than 800 pixels wide. Studies have shown that readers have an easier time with shorter line lengths. This may be because of the short line lengths used by newspapers and paperbacks. I prefer a line length of approximately 500 pixels (approx. 6 inches) or slightly less. I have seen shorter lengths but if the lines are too short the page length can get out of hand.

Unless you have a very good design reason, I suggest making the total page width fit on an 800-pixel wide monitor. This is still a very common monitor resolution setting but even if viewed on higher resolution monitors, the page is clear and readable. This means that if either a table or CSS is used to define page width, make sure the total width is approximately 780 pixels, including the navigation panels. This allows the page to be viewed on an 800-pixel monitor without the horizontal scroll bar.

Page File Size:
Page file size should be as small a possible. The smaller the file size the faster the page downloads and the less time the viewer has to wait on a new page. Page file size is one reason framed sites are used and usually enjoyed by site viewers. Because in most case only the content page needs to be downloaded, the page loads quickly and the navigation panels do not disappear. However, for every advantage there is a disadvantage. In this case while search engines can crawl a framed site, the navigation pages make poor search engine listings - but I digress.

You can control page file size by controlling the size of any page images and by ensuring the images for web viewing are no greater than 100 dpi in resolution. A 300 dpi and 100 dpi image will look almost identical on most monitors (Most monitors are 72 dpi.) so why increase download time for no real gain. Also, don’t insist on 16- or 32-bit color depth if 256 colors displays the images just as well. If you feel a higher resolution and color depth is needed, use a small image as a link to the larger image.

JavaScript:
JavaScript is becoming more popular on web pages and sites. As a result some pages are taking much too long to download - at least on dial-up connections. Whenever possible place the JavaScript in an external .js file and call the file as the page needs it. This will increase the download time of the first page that uses the script but all other pages will download faster.

JavaScript menus are neat and convenient but they can be a download headache and cause search engine problems. If the menu is used on every page or even on only one or two pages, place the script in an external file. Be sure you use HTML links somewhere on the page to supplement the script menu; otherwise, search engines will not be able to find the other site pages.

Cascading Style Sheets:
Cascading Style Sheets (CSS) have replaced in-line styles in most new web site designs because of their versatility. CSS is recognized by all new browsers and even Level 1 CSS is recognized by most 4.x browsers.

Using CSS removes the clutter from your page and allows humans and search engines to find page-relevant text much easier. As with JavaScript, use an external CSS file to reduce your page size. CSS files are usually small in file size but by removing the CSS from on-page, the text is not overshadowed by page code.

Wrap Up:
These are some of the major but easier ways to control your page size and decrease page download times. Don’t worry too much about straight text because 100 words of text only use 1 or 2K of file space.

Make the web a better experience for everyone - work toward faster page downloads. Remember, no one complains if a page loads too quickly.