mozilla

Revision 28960 of Tips for authoring fast-loading HTML pages

  • Revision slug: HTML/Tips_for_authoring_fast-loading_HTML_pages
  • Revision title: Tips for authoring fast-loading HTML pages
  • Revision id: 28960
  • Created:
  • Creator: CitizenK
  • Is current revision? No
  • Comment

Revision Content

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. These tips are based upon common knowledge and experimentation. If you have additional pointers to help others improve the page load performance of their web pages, make your suggestions at the Discussion page of this article.

An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection. This can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.

Optimizing page load performance is not just for content which will be viewed by narrow band dialup visitors. It is just as important for broad band content and can lead to dramatic improvements even for your visitors with the fastest connections.

Tips

Reduce page weight

Page weight is by far the most important factor in page load performance.

Reducing page weight through the elimination of unnecessary whitespace, comments and moving inline script and css into external files can improve download performance with minimum other changes in the page structure.

Tools, such as HTML Tidy, can automatically strip leading whitespace and extra blank lines from valid HTML source. Other tools can "compress" JavaScript by reformatting the source or obfuscating the source and reducing long indentifiers to shorter versions.

Minimize the number of files

Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page.

Depending upon a browser's Cache settings, it may send an <tt>If-Modified-Since</tt> request to the web server for each CSS, JavaScript or image file, asking if the file has been modified since the last time it was downloaded.

By reducing the number of files referenced in a web page, you reduce the time required for these requests to be sent and their responses received.

Too much time spent querying the last modified time for referenced files can delay the initial display of a web page since the browser must check the modification time for each CSS or JavaScript file before rendering the page.

Reduce domain lookups

Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times.

This may not always be practical, however, you should always be careful to only use the minimum number of different domains in your pages as is possible.

Cache reused content

Make sure that any content that can be cached is cached with appropriate expiration times.

Optimally order the components of the page

Download page content first so the user gets the quickest apparent response for page loading.

The content of the page along with any CSS or JavaScript required for its initial display should be downloaded first. This content is typically text and can benefit from text compression in the modem thus providing a quick response to the user.

Any DHTML features that require the page to complete loading before being used should be initially disabled and only enabled after the page loads. This will allow the DHTML JavaScript to be loaded after the page contents thus improving the overall appearance of the page load.

Reduce the number of inline scripts

Inline scripts can be expensive for page loading since the parser must assume that an inline script can modify the page structure. Reducing the use of inline scripts in general, and reducing the use of document.write to output content in particular can improve overall page loading. Use modern W3C DOM methods to manipulate page content for modern browsers rather than the older approaches based on document.write.

Use modern CSS and valid markup

Use of modern CSS reduces the amount of markup, can reduce the need for images in terms of layout, and can in many ways replace images which are actually only images of text and cost much more than the equivalent CSS and text.

Using valid markup has other advantages. Not only do browsers not have to perform "error correction" when parsing the HTML, valid markup allows free use of other tools which can pre-process your web pages. For example, HTML Tidy can remove whitespace and remove optional ending tags however it will refuse to run on a page with serious markup errors.

Chunk your content

Either replace table-based layout with divs or break tables into smaller tables that can be displayed without having to download the entire page contents.

Rather than deeply nesting tables as in:

<TABLE>
  <TABLE>
    <TABLE>
          ...
    </TABLE>
  </TABLE>
</TABLE>

use unnested tables or divs as in

<TABLE>...</TABLE>
<TABLE>...</TABLE>
<TABLE>...</TABLE>

Specify sizes for images and tables

If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevent annoying changes in a page's layout when the page completes loading.

Images should have height and width specified.

Tables should use the CSS rule table-layout: fixed and specify widths of columns using COL and COLGROUP tags.

Choose your user agent requirements wisely

To achieve the greatest improvements in page design make sure that reasonable user agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in downlevel browsers.

Ideally, your basic minimum requirements should be based upon modern browsers which support the relevant standards. This can include: Netscape 7/Gecko 1.0.2+ on any platform, Internet Explorer 5.5+ on Windows, Opera 7+ on Windows and Safari on Mac OS X.

Note however that many of the tips listed in this Technote are common sense techniques which apply to any user agent and can be applied to any web page regardless of browser support requirements.

Example page structure

· HTML

· HEAD
· LINK ...
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
· SCRIPT ...
JavaScript files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
· BODY
· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download
· SCRIPT ...
Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
If any images are used for rollover effects, you should preload them here after the page content has downloaded.

Related Links

Original Document Information

  • Author(s): Bob Clary, Technology Evangelist, Netscape Communications
  • Last Updated Date: Published 04 Apr 2003
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Revision Source

<p><span class="comment">Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction.</span>
These tips are based upon common knowledge and experimentation. If you have additional pointers to help others improve the page load performance of their web pages, make your suggestions at the <a href="Talk:en/Editing_Tips_for_Authoring_Fast-loading_HTML_Pages">Discussion page of this article</a>.
</p><p>An optimized web page not only provides for a more responsive site for your visitors, but also reduces the load on your web servers and internet connection. This can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.
</p><p>Optimizing page load performance is not just for content which will be viewed by narrow band dialup visitors. It is just as important for broad band content and can lead to dramatic improvements even for your visitors with the fastest connections. 
</p>
<h3 name="Tips"> Tips </h3>
<h4 name="Reduce_page_weight"> Reduce page weight </h4>
<p>Page weight is by far the most important factor in page load performance.
</p><p>Reducing page weight through the elimination of unnecessary whitespace, comments and moving inline script and css into external files can improve download performance with minimum other changes in the page structure.
</p><p>Tools, such as <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>, can automatically strip leading whitespace and extra blank lines from valid HTML source. Other tools can "compress" JavaScript by reformatting the source or obfuscating the source and reducing long indentifiers to shorter versions.
</p>
<h4 name="Minimize_the_number_of_files"> Minimize the number of files </h4>
<p>Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page.
</p><p>Depending upon a browser's Cache settings, it may send an <tt>If-Modified-Since</tt> request to the web server for each CSS, JavaScript or image file, asking if the file has been modified since the last time it was downloaded.
</p><p>By reducing the number of files referenced in a web page, you reduce the time required for these requests to be sent and their responses received.
</p><p>Too much time spent querying the last modified time for referenced files can delay the initial display of a web page since the browser must check the modification time for each CSS or JavaScript file before rendering the page.
</p>
<h4 name="Reduce_domain_lookups"> Reduce domain lookups </h4>
<p>Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times.
</p><p>This may not always be practical, however, you should always be careful to only use the minimum number of different domains in your pages as is possible. 
</p>
<h4 name="Cache_reused_content"> Cache reused content </h4>
<p>Make sure that any content that can be cached is cached with appropriate expiration times.
</p>
<h4 name="Optimally_order_the_components_of_the_page"> Optimally order the components of the page </h4>
<p>Download page content first so the user gets the quickest apparent response for page loading.
</p><p>The content of the page along with any CSS or JavaScript required for its initial display should be downloaded first. This content is typically text and can benefit from text compression in the modem thus providing a quick response to the user.
</p><p>Any DHTML features that require the page to complete loading before being used should be initially disabled and only enabled after the page loads. This will allow the DHTML JavaScript to be loaded after the page contents thus improving the overall appearance of the page load.
</p>
<h4 name="Reduce_the_number_of_inline_scripts"> Reduce the number of inline scripts </h4>
<p>Inline scripts can be expensive for page loading since the parser must assume that an inline script can modify the page structure. Reducing the use of inline scripts in general, and reducing the use of <code>document.write</code> to output content in particular can improve overall page loading. Use modern W3C DOM methods to manipulate page content for modern browsers rather than the older approaches based on <code>document.write</code>.
</p>
<h4 name="Use_modern_CSS_and_valid_markup"> Use modern CSS and valid markup </h4>
<p>Use of modern CSS reduces the amount of markup, can reduce the need for images in terms of layout, and can in many ways replace images which are actually only images of text and cost much more than the equivalent CSS and text.
</p><p>Using valid markup has other advantages. Not only do browsers not have to perform "error correction" when parsing the HTML, valid markup allows free use of other tools which can <i>pre-process</i> your web pages. For example, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> can remove whitespace and remove optional ending tags however it will refuse to run on a page with serious markup errors. 
</p>
<h4 name="Chunk_your_content"> Chunk your content </h4>
<p>Either replace table-based layout with divs or break tables into smaller tables that can be displayed without having to download the entire page contents.
</p><p>Rather than deeply nesting tables as in:
</p>
<pre>&lt;TABLE&gt;
  &lt;TABLE&gt;
    &lt;TABLE&gt;
          ...
    &lt;/TABLE&gt;
  &lt;/TABLE&gt;
&lt;/TABLE&gt;</pre>
<p>use unnested tables or divs as in
</p>
<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
&lt;TABLE&gt;...&lt;/TABLE&gt;
&lt;TABLE&gt;...&lt;/TABLE&gt;</pre>
<h4 name="Specify_sizes_for_images_and_tables"> Specify sizes for images and tables </h4>
<p>If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevent annoying changes in a page's layout when the page completes loading.
</p><p>Images should have <code>height</code> and <code>width</code> specified.
</p><p>Tables should use the CSS rule <code>table-layout: fixed</code> and specify widths of columns using <code>COL</code> and <code>COLGROUP</code> tags. 
</p>
<h4 name="Choose_your_user_agent_requirements_wisely"> Choose your user agent requirements wisely </h4>
<p>To achieve the greatest improvements in page design make sure that reasonable user agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in downlevel browsers.
</p><p>Ideally, your basic minimum requirements should be based upon modern browsers which support the relevant standards. This can include: Netscape 7/Gecko 1.0.2+ on any platform, Internet Explorer 5.5+ on Windows, Opera 7+ on Windows and Safari on Mac OS X.
</p><p>Note however that many of the tips listed in this Technote are common sense techniques which apply to any user agent and can be applied to any web page regardless of browser support requirements. 
</p>
<h3 name="Example_page_structure"> Example page structure </h3>
<p>· <code>HTML</code>
</p>
<dl><dd> · <code>HEAD</code>
</dd></dl>
<dl><dd><dl><dd> · <code>LINK </code>...<br>CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
</dd></dl>
</dd></dl>
<dl><dd><dl><dd> · <code>SCRIPT </code>...<br>JavaScript files for functions <b>required</b> during the loading of the page, but not any DHTML that can only run after page loads.
</dd><dd> Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
</dd></dl>
</dd></dl>
<dl><dd> · <code>BODY</code>
</dd><dd> · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download
</dd></dl>
<dl><dd><dl><dd> · <code>SCRIPT </code>...<br>Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.
</dd><dd> Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.
</dd><dd> If any images are used for rollover effects, you should preload them here after the page content has downloaded.
</dd></dl>
</dd></dl>
<h3 name="Related_Links"> Related Links </h3>
<ul><li> Book: <a class="external" href="http://www.websiteoptimization.com/">Speed Up Your Site by Andy King</a>
</li><li> <a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)
</li></ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Bob Clary, Technology Evangelist, Netscape Communications
</li><li> Last Updated Date: Published 04 Apr 2003
</li><li> Copyright Information:  Copyright © 2001-2003 Netscape. All rights reserved.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
Revert to this revision