Web Performance - RTT

Web Performance - RTT

README

Round-trip time (RTT) or Round-trip Delay Time (RTD) is the time it takes for a client to send a request and the server to send a response over the network, not including the time required for data transfer; including the back-and-forth on the wire and excluding the time to fully download the transferred bytes; this time therefore consists of the transmission times between the two points of a signal; the signal it’s generally a data packet. The RTT is also known as the ping time and could be determined using the UNIX ping command targeting a hostname:

$ ping -c 3 cixtor.com
PING cixtor.com (199.188.200.231) 56(84) bytes of data.
64 bytes from host12.registrar-servers.com (199.188.200.231): icmp_seq=1 ttl=48 time=99.3 ms
64 bytes from host12.registrar-servers.com (199.188.200.231): icmp_seq=2 ttl=48 time=99.7 ms
64 bytes from host12.registrar-servers.com (199.188.200.231): icmp_seq=3 ttl=48 time=96.1 ms

--- cixtor.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2000ms
rtt min/avg/max/mdev = 96.124/98.406/99.723/1.640 ms

RTT Optimization

An important strategy for speeding up a web-page is to minimize the number of RTT that need to be made, since the majority of those RTT consist of HTTP requests and responses, it’s especially important to minimize this number that the client needs to make and to parallelize them as much as possible.

  • Minimize DNS lookups: Reducing the number of unique hostnames from which resources are served cuts down on the number of DNS resolutions that the browser has to make, and therefore, RTT delays,

    • Use URL paths instead of hostnames wherever possible;
    • Serve early-loaded JavaScript files from the same hostname as the main document.
  • Minimize redirects: Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users,

    • Eliminate unnecessary redirects;
    • Use server rewrites for user-typed URLs;
    • Track web traffic in the background, using a beacon, a popular way to recording page views in an asynchronous fashion including a JavaScript snippet at the bottom of the target page, and using HTTP 204 response (“no content”) to optimize the request;
    • Prefer HTTP over JavaScript or meta redirects, using Header[Location: /target] instead of http-equiv="refresh".
  • Avoid bad requests: Remove broken links or requests that result in 404/410 errors, also avoid using HTTP redirects to send users to the requested resources, or to serve a substitute suggestion page because redirects also slow down your site, and are better to avoid as much as possible;

  • Combine external JavaScript: Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources, actually Javascript files are downloaded serially one-by-one, combining scripts download the same size (if aren’t compressed or minified) but in a less time; it’s important also to Defer loading the files that isn’t needed at a page’s startup;

    • Partition files optimally:

    • Use two files, one file containing the minimal code needed to render the page at startup, and one containing the code that isn’t needed until the page load has completed;

    • Keep the size of the scripts served in the head tag to a minimum;

    • Server script files rarely needed in the page with the component requested by the user;

    • Position scripts correctly in the document head (this will be explained in other item);

  • Combine external CSS: Combine external style-sheets into a few files as possible following the same recommendations of the Javascript optimization avoiding also the use of the sentence @import (the reason is explained below);

  • Combine images using CSS sprites: this action allow us not only reduce the RTT and delays downloading other resources but also reduces Request Overhead finally reducing the number of bytes downloaded by a web-page, I recommend SpritePad.wearekiss.com and SpriteMe.org;

  • Optimize the order of styles and scripts: This action enables better parallelization of downloads and speeds up browser rendering time letting load the CSS files at the “same” time and Javascript files itself times, try to put the CSS links and in-line stylesheets at the top of the head of the document and continue loading the Javascript codes after those;

    • Put external scripts after external stylesheets if possible,
    • Put inline scripts after other resources if possible.
  • Avoid use the Javascript method DOM.write: This action minimize the time browser takes to display a web-page;

    • Declare resources directly in HTML markup, using <script src="">...</script> instead of DOM.write(...)
    • Prefer asynchronous resources (this method is explained below)
    • Use friendly IFrames, this type of frame have the same origin as its parent document, loading in parallel the resources referenced on each frame (the parent and the child)
  • Avoid CSS @import: CSS @import allows stylesheets to import other stylesheets. When it is used from an external stylesheet, the browser is unable to download them in parallel, which adds additional RTT to the overall page load;

  • Prefer asynchronous resources: This action prevents those resources from blocking the page load, because when a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it, however with an asynchronous script the browser can continue parsing and rendering HTML that comes after the asynchronous script, without waiting for that script to complete deferring the execution of the code until the browser’s UI thread isn’t busy doing something else (such as rendering the web-page);

    • Use a script DOM element: js var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'example.js';
  • Parallelize downloads across hostnames: Serving resources from two different hostnames increases parallelization of downloads.

    • Balance parallelizable resources across hostnames, ensuring that no one host serves more than 50% more than the average across all hosts;
    • Prevent external JS from blocking parallel downloads minimizing the number of external Javascript files and referencing them in the correct order so that they are downloaded after other resources;
    • Always serve a resource from the same hostname to improve the browser cache hit rate.

Credits

See the Google Analytics Developer Docs for details on how the tracking code works. The Apache URL Rewriting guide discusses how to set up internal rewrites using mod_rewrite. For details on using DNS aliases to parallelize downloads, see the article Using CNAMES to get around browser connection limits. For analysis of the performance improvements gained by using this technique, see the article Optimizing Page Load Time.

Make the Web Faster Google’s project

Do you have a project idea? Let's make it together!