4 Comments

Summary:

In our era of immediate gratification, creating a quick and responsive web experience is often as important as the product or service you’re trying to sell. Poor performance can frustrate users to the point that they will leave your site. Recent studies show that on average, […]

yadid2In our era of immediate gratification, creating a quick and responsive web experience is often as important as the product or service you’re trying to sell. Poor performance can frustrate users to the point that they will leave your site. Recent studies show that on average, 20 percent of a page’s load time is spent on the back end as the server processes and generates HTML, while the remaining 80 percent is spent on the front end while the browser tries to load page assets and render the HTML. This rule applies to any size web site, whether it receives 100 or 1 million visitors a day. Keeping in mind this 20/80 rule, we at MySpace give as much attention to the front end behavior of our pages as our back-end systems.

A lot of tools and services offer front-end performance tracking, and they vary by feature and pricing. Selecting the right tool can be confusing, especially if you’re new to the performance-tracking field. Different technologies and methods are available in today’s market. Here are a few tips you should take note of when choosing the right tool.

In general, three types of front-end problems can result in a slow browsing experience: network/socket bottlenecks — bottlenecks that are caused by a bad network and or download configuration; positioning the page’s elements in the wrong order; and heavy client-side processing — bottlenecks caused by overloading the client’s CPU and memory.

The most common bottlenecks are the first two: network and socket bottlenecks and bad content delivery prioritization. The method for tracking these two problems is to load the site into a browser and capture the download order and network traffic of all the elements on the page. Capturing the network and download order is usually accomplished by installing some type of network sniffer on the client’s machine or by setting up an HTTP proxy between the client’s machine and the web server, then tracking the inbound/outbound traffic. The following is a list of key features you should take note of when you choose a tracking application for your site:

  1. The application must provide a “waterfall graph” of downloaded files. Waterfall graphs are extremely helpful in identifying which download was done in parallel and which was a blocking download.
  2. The application must measure server wait time, DNS lookup time, request send time, and response receive time. It’s important to measure these numbers to get a better view of what needs to be improved.
  3. The tool must track the data using either an actual web browser or a browser simulation. Select a tool that uses the same download logic as your client’s browser. Some browsers are capable of downloading files in parallel from multiple locations, while others limit the number of sockets. So if most of your clients use Internet Explorer, you must select a tool that either simulates IE or tracks the data using that software.
  4. When running the tool, you should use the same network environment as most of your clients (same geographic location, connection speed, etc.) to get an actual view of what your users are experiencing. For example, if most of your visitors come from the UK using a 256kbp ADSL modem, your application must track the data using a 256kbp modem from that region as well.
  5. When you measure your pages, you must test them using both an empty and a primed cache. The general assumption is that 20 percent to 50 percent of your incoming requests are being done with an empty cache. This supposition was proven to be true in a test that Yahoo conducted.

Here are a few tools worth checking out:

  • HttpWatch (Starting at $395) HttpWatch is an HTTP viewer and debugger that integrates with IE and Firefox to provide seamless HTTP and HTTPS monitoring without leaving the browser window.
  • Google’s Page Speed (Free) Page Speed is an open-source Firefox/Firebug add-on. Webmasters and developers can use Page Speed to evaluate the performance of their pages and get suggestions on how to improve them.
  • Firebug (Free) Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug and monitor CSS, HTML and JavaScript live in any web page.
  • AOL’s Pagetest (Free) Pagetest is an open-source tool for measuring and analyzing web page performance right from your browser. AOL developed Pagetest internally to automate load time measurement of its many sites, and it has evolved into a powerful tool for developers and software engineers in testing their web pages and getting instant feedback. The company decided to release it to the grander development community to further help evolve it into an even more useful — and free — web performance tool.
  • MySpace’s MSFast (Free) MSFast is a browser plugin that helps developers improve their code performance by capturing and measuring possible bottlenecks on their web pages. It is custom-built technology that enables any developer to track page load performance and user experience data. The open-source tool measures the CPU and memory consumption of rendered HTML. It also reviews downloaded files and shows download time estimation on different bandwidths, and measures the time it takes to render each section of the page in different connection speeds. For more details about MSFast, check out http://www.msfast.com.
  • Fiddler (Free) Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect the traffic, set breakpoints, and “fiddle” with incoming or outgoing data. It includes a powerful event-based scripting subsystem and can be extended using any .NET language.
  • IEInspector’s HTTPAnalyzer (Starting at $149) IEInspector HTTP Analyzer is a handy tool that allows you to monitor, trace, debug and analyze HTTP(S) traffic in real time. It is used by industry-leading companies including Microsoft, Cisco, AOL and Google.

Yadid Ramot is MySpace’s Client-Side Performance Architect. He spends his time mentoring the MySpace development community on front-end performance and developing performance-monitoring tools.

Related research

Subscriber Content

Subscriber content comes from Gigaom Research, bridging the gap between breaking news and long-tail research. Visit any of our reports to learn more and subscribe.

By Yadid Ramot

You're subscribed! If you like, you can update your settings

Related stories

  1. You forgot Y! Slow http://developer.yahoo.com/yslow/ I used it to test http://www.yonkly.com when I was developing it and it was really helpful. It integrates right into firebug.

    Share
  2. >, 20 percent of a page’s load time is spent on the back end as the server processes and generates >HTML, while the remaining 80 percent is spent on the front end while the browser tries to load page >assets and render the HTML.

    Are you sure this is true? Whatever happened to Network portion of it. Measure your site from a location on the same LAN as the server is, then measure it in Europe and then in China. The delta between those numbers should be taken up by network delivery part,right? not frontend processing (because you use the same browser everywhere)..

    Share
  3. Great list of tools Yahid

    Would also like to suggest two that we have made available:

    1. Run a Website Speed Test report
    http://www.aptimize.com/website-speed-test

    2. Free Latency Simulator – an open-source Internet Explorer add-on that simulates the effects of network latency.
    http://www.aptimize.com/blog/latency-simulator

    Share
  4. Check your website speed with advanced details using this free online website speed checker at http://www.webtoolhub.com/tn561353-website-speed-test.aspx

    Share

Comments have been disabled for this post