Skip to end of metadata
Go to start of metadata

When entering a URL in your browser the browser starts by downloading the initial HTML document. After that it downloads all referenced images, styles sheets, javascript files and any other media types such as flash components. Every resource that needs to be downloaded from the web server requires one roundtrip. The total download time of a page depends on network speed, latency and speed of the web server to deliver the requested resources. The more resources there are to download the longer it takes till the end user can see the full page.

In order to download resources the browser establishes physical network connections to the web server(s) that host the resources. The number of connections depends on the type and version of the browser, e.g: IE7 uses 2 connections per domain, IE8 and FF3.5 up to 6 connections per domain.
The more resources there are on a web site the more roundtrips are necessary for the browser to download all these resources. Because of the limited number of parallel downloads (depending on the number of physical connections) certain resources have to wait a long time to be downloaded which increases overall page load time.

The following illustration shows a typical network download graph. It is easy to see that the more resources there are to download from one domain the longer the wait time becomes for the individual resources to be downloaded:

The goal for a web site must therefore be to avoid unnecessary roundtrips as well as reducing the size of individual resources. This allows the browser to use the available connections to download all resources fasters and therefore speeds up the page load time and improves end-user experience.

Avoid Redirects, HTTP 400s and HTTP 500s

HTTP 300’s (Redirects) are sometimes necessary and used by web developers to e.g: indicate a new location of a resource or to track clicks. Redirects however mean an additional roundtrip from the browser to the server as the redirect tells the browser where to really find the resource that was requested. Redirects on the initial HTML Document additional cause a general delay of all resources on the page as the browser can’t start downloading things like images, js, css until it downloaded the initial HTML Document. The following illustration shows that browsing to www.msn.com causes a redirect to at.msn.com:

It takes the browser 430ms to finally download the initial html document as it first had to follow the redirect. Once this document was downloaded the browser could start downloading additional resources such as the CSS files:

Requests that result in a HTTP 400 (Authentication Issues) are another example of unnecessary roundtrips as the user does not get the the content delivered that he requested. There are 2 common sources for HTTP 400’s: a) the application code generated HTML that references resources not accessible by the current user, e.g: if I am not a premium member of a website I may not be authorized to download certain resources. b) access control on resources are either wrongly configured or resources are incorrectly deployed secured folders.

HTTP 500’s (Server-Errors) are caused by failing application code and it is a problem that needs to be investigated by analyzing the code execution traces on the application server.

The dynaTrace AJAX Edition lists all HTTP 300s, 400s and 500s in the first table on the Network Tab on the Performance Report. It shows you exactly which request (URL Column) returned with which HTTP Status and also lets you know how much time could be saved by avoiding these requests.

Common Problem Patterns with resources

Too many images, css and js files

Web sites are not just html files that contain text to be displayed. Most of the content comes in the form of images and styles sheets that define how certain elements need to be rendered and how the layout should be and last but not least JavaScript files that contain client side code to enable the web site to become more interactive for the user.

The dynaTrace AJAX Edition lists all css, images and js files in separate tables on the Network Tab on the Performance Report. It also calculates how much time there might be to save when merging these resources and therefore reducing the number of roundtrips.

Bloated images, css and js files

Besides looking at the number of resources one must also look at the size. There are different options to reduce the size of images (choose a different image type or a lower resolution) and the size of css and javascript files (compressors get rid of things like spaces and empty lines). Smush.it is a great online service to optimize your images in size.

The dynaTrace AJAX Edition gives an overview of the size of all embedded objects in the first table on the KPI tab on the Performance Report. It shows the number of resources for a specific mime type, the total size and whether these objects are cached or not. Please look into the Best Practices on Caching to learn how to optimize browser cache usage:

Performance Savings, Recommendations and Rank Calculation

The ultimate goal is to reduce the number of roundtrips to the server. Getting rid of unnecessary calls and merging resources to reduce the roundtrips allows the browser to make more efficient use of the available network connections.

Recommendations and Savings

Reducing the size of images, css and javascript not only speeds up loading your web site but also reduces the memory footprint and cpu usage of the browser. Here are some tips on how to optimize your resources.

Optimizing images (CSS Sprites and Compacting)

Analyze all images and the page and identify those that can be merged into a single file. Don’t go overboard and pack everything into a big image and therefore end up with one huge file that takes forever to download. Please read more on CSS Sprites and Best Practices on this topic before starting to merge files. Also look at the size of your images. Consider other image types (jpg, gif, …) or images with a lower resolution to reduce the size of your images. Check out Smush.it that allows you to optimize your images.

Optimizing Style Sheets (Merge CSS Files)

If there are multiple css files on a single page merge the content, get rid of potential duplicate style definitions and compress the file by getting rid of spaces, empty lines or comments. This not only saves network roundtrips but also reduces the overall size of the transferred content and reduces the parsing time on the browser. Read more on combining and merging CSS files and look into online CSS merging and minification services such as Online CSS Compressor

Optimizing JavaScript (Merge and Minimize JavaScript Files)

The same that applies to css files also applies to javascript files. Identify which files you can merge into a single file. Minimize and compact the file using available JavaScript compressors/minifiers. Do not prematurely put all javascript code in a single global file and load this file on every page. Every page may not need to load all the javascript code so you end up loading more code than is necessary. Also make yourself familiar with techniques to delay load javascript that is not needed right away on the page. With providing the needed javascript code for a single page in a single file in a compressed and minified way you reduce the network roundtrips, the network payload and the parsing time on the browser

Rank Calculations

dynaTrace AJAX Edition calculates a rank based on the number of avoidable roundtrip. A page gets a score of 100 if there are no redirects, 400s or 500s and if there are no images, css and js files that could be merged.

The rank is therefore negatively impacted by the ratio of unnecessary roundtrips and the resources of the same type to the overall number of resources. The AJAX Edition makes the assumption that most images, css and js files served from the same domain can be merged so that we do not end up having more than 1 css, 6 images and 2 js file from the same domain. How we get to these numbers? We believe that all CSS served from one domain can be merged in a single file. We see the value of at least two JavaScript files in order to load necessary js functions early on in the page and delay load the rest of the functionality. That means that we consider 2 js files on each domain to be ok. We also believe that not every image can be merged into a single file but that most can. 6 images per domain therefore seem reasonable - so that the browser can make optimal use of its physical connections.

Note: We know that merging is not always possible due to the nature of the website. A negative ranking for your website might therefore seem a bit unfair by this generic rank calculation as it might not be a problem for you that can be solved. The Rank information is still a good indicator for you as a bad rank means that the end-users performance can be improved by measures like merging resources.

Example

Take a page that has a total of 50 roundtrips in order to fully load the page. If we have 2 HTTP redirects on that page it degrades the rank by 2. If we have one domain that serves 3 CSS files this means that 2 can be avoided degrading the rank by another 2. If one of the domains serves 16 images we assume that 10 can be saved by merging images into fewer. We reduce the rank by one point for every 5 images which reduces the rank for this page by another 2. If we also have one domain that serves 3 javascript files the rank gets penalized by 1 point.
We end up with a rank of 100-2-2-2-1=93 which corresponds to an A Grade.

Further Readings

Here are further reads and detailed explanation on Cache Settings

  • No labels