These tips are based upon common knowledge and experimentation.
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 or mobile device visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.
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 and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.
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 on a browser's cache settings, it may send an
By reducing the number of files that are referenced within a web page, you reduce the time required for these requests to be sent, and for their responses to be received.
If you use background images a lot in your CSS, you can reduce the amount of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background, and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce pageload time.
Reduce domain lookups
This may not always be practical; however, you should always take care to use only the minimum necessary number of different domains in your pages.
Cache reused content
Make sure that any content that can be cached, is cached, and with appropriate expiration times.
In particular, pay attention to the
Last-Modified header. It allows for efficient page caching; by means of this header, information is conveyed to the user agent about the file it wants to load, such as when it was last modified. Most web servers automatically append the
Last-Modified header to static pages (e.g.
.css), based on the last-modified date stored in the file system. With dynamic pages (e.g.
.aspx), this, of course, can't be done, and the header is not sent.
So, in particular for pages which are generated dynamically, a little research on this subject is beneficial. It can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable.
Optimally order the components of the page
Reduce the number of inline scripts
Inline scripts can be expensive for page loading, since the parser must assume that an inline script could modify the page structure while parsing is in progress. 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 AJAX methods to manipulate page content for modern browsers, rather than the older approaches based on
Use modern CSS and valid markup
Use of modern CSS reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-CSS.
Using valid markup has other advantages. First, browsers will have no need to perform error-correction when parsing the HTML (this is aside from the philosophical issue of whether to allow format variation in user input, and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format).
Moreover, valid markup allows for the free use of other tools which can pre-process your web pages. For example, HTML Tidy can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors.
Chunk your content
Tables for layouts are a legacy method that should not be used any more. Layouts utilizing
<div> blocks, and in the near future, CSS3 Multi-column Layout or CSS3 Flexible Box Layout, should be used instead.
Tables are still considered valid markup, but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.
Rather than deeply nesting tables as in:
<TABLE> <TABLE> <TABLE> ... </TABLE> </TABLE> </TABLE>
use non-nested 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 prevents annoying changes in a page's layout when the page completes loading. For this reason,
width should be specified for images, whenever possible.
Tables should use the CSS selector:property combination:
and should specify widths of columns using the
COLGROUP HTML 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 down-version browsers.
Ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the relevant standards. This can include: Firefox 3.6+ on any platform, Internet Explorer 8.0+ on Windows, Opera 10+ on Windows, and Safari 4 on Mac OS X.
Note, however, that many of the tips listed in this article 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
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
- · User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
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.
- If any images are used for rollover effects, you should preload them here after the page content has downloaded.
Use async and defer, if possible