Date Tags speed

You can improve page load times by delaying the loading of your scripts until some or all of your body content has displayed. For nonessential services (advertising, interface enhancements, surveys, etc.) this technique can boost the initial display speed of your pages. You can also load scripts, such as Ajax, on demand via docu- ment object model (DOM) methods, or by using iframes.

One problem with JavaScript is that it is a single-threaded language: it executes scripts linearly. There are exceptions to this with extensions such as Google Gears. When there is a slowdown in loading or executing a script, it delays the rest of the objects in a page from loading and rendering.

Scripts in the head of HTML documents must be processed before the body content is parsed and displayed. Including multiple external CSS and JavaScript files in the head of HTML documents can delay the download and display of body content due to the con- nection limit default that is present in browsers that follow the HTTP 1.1 specification.

Even after placing external scripts at the end of the body element, your users can experience delays caused by slow server response. Late-loading scripts can have adverse effects, including stalling any events attached to the onload event. So, be sure to initialize as soon as possible and don’t use onload for the fastest initialization. In this section, we’ll explore the following ways to delay or accelerate script loading to combat JavaScript load lag:

  • Use progressive enhancement.
  • Load JavaScript on demand or onload.
  • Use an iframe for external widgets to simulate asynchronous JavaScript.

Use progressive enhancement

Progressive enhancement (PE) is a web design strategy that uses layers of standards- based technology (XHTML, CSS, and JavaScript) to deliver accessible content to any browser regardless of its capability. By providing static HTML content and overlay- ing dynamic content with CSS, JavaScript, or Flash, Java, or SVG, PE provides basic content for all browsers, and an enhanced version of the page for browsers with more advanced capabilities. PE improves performance by separating data (XHTML) from presentation (CSS) and behavior (JavaScript), allowing for better caching. PE uses the following techniques:

  • Sparse, semantic XHTML for basic content accessible by all browsers
  • Enhanced layout provided by external CSS
  • Enhanced behavior provided by external JavaScript
  • JavaScript to add/subtract objects from the DOM
  • JavaScript to add advanced functionality