Web Performance Basics

What Happens When a Browser Loads a Web Page?

With the help of Google Chrome's timeline view, let's explore what happens when a typical web browser downloads a web page...

First, browser obtains an IP address for the web server via DNS and requests the page. The web produces the HTML for the page--an operation that could be as simple as opening a file for an static page or as complex as running a Java servlet for a dynamic page--and sends it back to the browser:

In this example, just half a second after the user enters the URL, the browser has received the HTML for the web page. Depending on the structure of the HTML, the browser may be able to start displaying the page at this point. However, it will take the browser another four seconds to obtain all the content needed to finish displaying the page.

The HTML page is, among other things, a list of additional resources for the browser to fetch. Some of these resources might be available locally in the browser's cache. For all the rest, the browser must make an additional HTTP request per resource. Here we see the browser fetching the first few resources specified in the HTML, mostly scripts and stylesheets:

Often the CSS stylesheets specify background images. The browser adds the URLs for any background images to its list of resources to fetch.

The browser proceeds through its list of resources and sends HTTP requests to the corresponding servers to download those resources. Most browsers will try to download several things in parallel. Here we see a snapshot of the browser's progress midway through the downloading of the page:

A few seconds later, the browser finishes downloading all the content needed to fully populate the DOM tree (blue line) and fire the JavaScript onload event (red line):


What Makes Page Loading Slow?

Four main factors contribute to page loading time:

  1. Network Throughput: The heavier the content (i.e., the more bytes required to transmit it), the longer it takes to download. Reducing the number of bytes transmitted--e.g., through techniques such as compression, minification, and caching--can help reduce the page load time.
  2. Network Latency: Even with a high-throughput network path between the browser and the web server, page downloading still may be slow if the browser has to make a large number of HTTP requests to fetch all the resources used by the page.

    At a minimum, it takes two network round trips for the browser to establish a new TCP connection to the server, send an HTTP request, and get the first byte of the response. If the server and browser are, say, on opposite sides of North America, each round trip typically will take 50-100 milliseconds, regardless of the network bandwidth. This time is within a small constant factor of the fastest possible round trip, as determined by the speed of light. Thus, while network bandwidth and computer speed are likely to improve substantially in the future, network latency is not.

    Persistent HTTP connections can cut the two round trips to a number asymptotically approaching one. In addition, browsers can reduce the total page load time by loading multiple resources in parallel. Beyond those basics, there are two ways to reduce the effect of network latency:

    • Reduce the length of each round trip

      In practice, this means: use a Content Delivery Network (CDN). CDNs work by caching copies of a website's static content at multiple servers throughout the Internet and then using DNS cleverness to point the browser toward a server that's geographically close.

    • Reduce the number of round trips

      In practice, this means: restructure your content so the browser can download it in fewer pieces. For example, concatenate multiple external CSS stylesheets into one file, and combine multiple small graphics into one larger "sprited" image.

  3. Server Processing Time: This is the time that elapses between when the server receives and HTTP request and when it sends the first byte of the response. If the web application that produces the response is inefficient--or the server is just overloaded--this "time to first byte" may become the dominant component of the overall page download time. For most well-tuned websites, though, the time spent on the server side contributes less to total page download time than does the time spent on the network.
  4. Browser Processing Time: This is the time that the browser must spend parsing content, computing layout, and executing JavaScript before it can display the content it has downloaded.

Of these four sources of slowness, the Jitify software targets the first two: Network Throughput and Network Latency.