www.allensmith.net . . . [Webpage Basics]       Technical >> Web Design >> Webpage Coding >> Coding Basics >>   Design for Webpage Loading Performance.

 

 Three basic guidelines to design Websites for loading performance:

1. Ensure that each Webpage, by itself, loads within 10 seconds. Then if a few pages need to be an exception to this, just make certain there is real reason for any "extra" content.
    
   
2. Starting with the "always most important" top 200 pixels of screen height, have the page load as a sequence of complete and self-contained sections. (No entire page in a single table, etc..) Then for any page that does have "extra" content, use techniques to alter the loading order of the page elements-- so the navigation and written page content (text) will be displayed first.
    
   
3. Design all pages in the Website to reuse "common components", such as images and (external) style sheets. This makes exceptional average load times possible, because web browsers will cache these common items, then won't re-download them for subsequent Webpages.

 

>>	WebPage Size and Speed Including a Webpage Size Checker utility.
>>	The Web Page Analyzer (Beta) Evaluates Webpage loading performance.
>>	Web Design Guide: Speed Tutorial Best "Executive Summarry" I've found for this.
>>	Webmonkey: Site Optimization Tutorial More in-depth load-speed optimization basics.  A "must read" if using <table>'s for layout.
>>	Site Optimization Strategies Then: Everyone's Guide to Optimizing Graphics
>>	Degrade Me - Treat Me Like an Object Innovative use of the <object> tag for images.

 

 

    Using OptiView to size reduce the GIF format of an image, usually results in the PNG format for that same (optimized) image, having a file size not much smaller than the GIF format. Also, some browsers that support PNG images have trouble displaying at least some images containing transparent areas. (GIF and JPEG are the "always works" defacto image-format standards for the Web.) And the display of anything using the <object> tag currently can produce unpredictable results. So for the few situations where the above "smart images" would be useful, extensive multi-browser testing (with some re-coding for compatibility) would be required.

 See the Graphic Utilities page for information on OptiView.  

 

>>	JavaScript & DHTML References  Pre-load (small file size) navigation images.  Post page-load, pre-loading of rollover images. Load large images after the webpage loads.

 

[Top of Page]  [Site Policies]  [Webpage Basics]

TM Monitor this Webpage

E-mail the Webmaster Page Content Updated: May 23, 2003

   

    You want potential customers to know about your product(s) or service(s). You already know that most prospective clients want such information NOW; and they don't appreciate being told to use a different browser, or download some multimedia plug-in. Understanding this enables your site to be among the few that obtain the greatest volume of traffic. Unlike other web sites, which are designed to be "fully functional" only with some specific browser configuration, or which use fancy slow loading graphics and/or animations. Sites which usually do look exceptional, but frustrate and impede the real reason people come to a web site in the first place. Their quest for information, and the desired content within a site.