Browser Content Load-Time Example

An example of time-to-first-paint latency

While loading an HTML page, most browsers won't consider an element to exist until it has been styled using incoming information from the CSS stylesheet. Thus, should there be a delay in downloading the stylesheet, there is the possibility that content will not be shown, or a time-out cycle will need to expire before content is shown. A browser which overcomes this problem is Opera, which treats all loaded HTML content as if it exists, even before content is styled.

The script on this page attempts to write to an element at the very bottom of the page beneath a 1000-cell table. It includes some CSS to style this element in an external stylesheet with a normal <link> tag. Through some funky PHP, a 5 second delay has been inserted in the middle of the stylesheet. (Click the stylesheet link to witness the latency yourself)

    <?php header("Content-type: text/css;"); ?>

    #loaded {
      position:fixed;
      top:0px;
      right:0px;
      <?php flush(); sleep(5); ?>
      border: 5px outset #ff0000;
      text-align: center;
      font: bold 300% sans-serif;
      background-color: #00ff00;
    }
  

This will cause half the stylesheet to be delivered to the browser, and then a latency of five seconds before the rest of it finally arrives. Essentially, this ensures that the CSS only arrives after the HTML content has already loaded.

A piece of JavaScript is triggered as the page is downloaded from the server, which checks every 100ms to see if the element at the bottom of the page is a valid target for innerHTML manipulation. When it becomes available, the time the script had to wait before it could accomplish the task is written to the box.

Opera is the only browser out of Mozilla, Opera and IE which writes to the box before the 5s CSS latency expires. Safari on Mac reportedly handles this test with the same efficiency as Opera. It's apparent that the load time which appears in Opera is the time the HTML took to actually load. All of MSIE, FireFox, and Mozilla seem to wait until the styles have been applied before allowing scripts to touch any HTML element. The times displayed for these browsers are all greater than 5s.

By GreyWyvern - June 05, 2004