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.
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.
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.
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:
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.
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
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.
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.
We end up with a rank of 100-2-2-2-1=93 which corresponds to an A Grade.
Here are further reads and detailed explanation on Cache Settings
- Google’s Best Practice on minimizing round-trip times and reducing payload size
- Information on CSS Sprites: SpriteMe, CSS Sprite Generator
- CSS and JS Compressors: YUI Compressor, JSMin, Online CSS Compressor
- Circumventing browser connection limitations