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, 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 (s nws) 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:
- 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.
- 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.
- 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.
- 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.
- 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 (s yhoo).
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.
- AOL’s Pagetest (Free) Pagetest is an open-source tool for measuring and analyzing web page performance right from your browser. AOL (s twx) 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 (s mst), Cisco (s csco), AOL and Google (s goog).
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.