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. This means that when the page style has not yet arrived, Opera will show the textual content of the page while waiting for the styles, whereas other browsers wait before they display the content. This page tests this facet of page loading.

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 {
      border: 5px outset #ff0000;
      text-align: center;
      <?php flush(); sleep(5); ?>
      font: bold 400% 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 (which is probably the time the browser renders it), the time the script had to wait before it could accomplish the task is written to the box.

Opera is the only browser which writes to the box before the 5 second latency expires. It's apparent that the load time which appears in Opera is the time the HTML took to load. 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.



Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test
The time will show here...