1 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

Identify

Problemsin Seconds

Performance

How to

Web

2 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

A waterfall chart is a web performance tool that visually displays each and every asset that composes a web page, in the order that they downloaded. It uses horizontal bars to show how long each asset took to download, and uses colors to display various stages within each asset’s download process. At the most basic level, a longer bar is a longer download time. However, keep in mind that the lengths of the bars are relative to each other, so be sure to look at the numbers at the right side of each bar that show the time (in seconds or milliseconds) that the asset took to download to add perspective to what you’re viewing.

In addition, the other columns in the chart give information on WHAT the asset is (you can click the link to see it displayed in a new tab in your browser), WHERE the asset comes from (the Host -- be it your origin server, or a third party), how HEAVY the asset is (in bytes, kb, mb), and the STATUS of the asset (if there was an error involved or not).

Analyzing web performance doesn’t have to take long – in fact, it doesn't have to take much longer than the page takes to load! Thanks to innovative visual tools like the waterfall chart, it’s possible to identify basic problems with web performance in seconds. Read on to learn about 10 red flags to

What IS a Waterfall?

Get the Most out of this eBook• Before you start reading, go to WebsiteTest.com• Run a report of your own website (it’s free and provides the

same waterfall chart you’ll see used throughout the document)• Bookmark the results page or keep the tab open so you can

refer to it as you learn tips for reading into the chart • Learn about ways to improve performance on your site!

Learn about 10 red flags to look for when testing

web performance. We promise you wont have to

skip lunch.

look for when testing web performance. We promise you wont have to skip lunch.

First, though, you'll need a testing tool. The best free tools are WebsiteTest.com (which Yottaa developed) and WebPageTest.org. These tools allow you to run tests on your website from a variety of locations, browser types, and connectivity levels. WebsiteTest.com offers "multivariate testing" with the ability to test from multiple locations or browsers at once.

3 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

The IdealBefore we show you how to find everything that’s WRONG in a waterfall, look at the chart below. It’s not the fastest site in the world, but it’s quite good, and it produces a nice looking waterfall. Notice that the assets download in a fairly uniform line, no assets are major performance outliers, and it has relatively few assets in total (40). Even the assets with the longest bars are well within the realm of good performance, at a few hundred milliseconds each.

4 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

Look at the very first line in the waterfall chart. If it’s longer than most of the other lines in the chart, that’s not good. It should be very short. Improvements to web infrastructure in the last decade have made rapid content delivery the Internet standard. If your “time to last byte,” aka total delivery time, is longer than 1 second, consider pursuing a plan to improve it.

1. Slow Backend Performance

2. Too many Assets

Just some of CNN.com’s 172 assets

When you’re looking at your waterfall chart, start scrolling down. Keep going. And going. If your index finger gets tired before getting to the bottom of your waterfall chart you have too many assets! The median number of assets on a website is 47, though some types of sites, such as eCommerce sites, may require more to provide their users a quality experience. However, if your assets number in the hundreds, as some sites' do, it may be time to consider cutting content or employing WPO techniques like script concatenation and data URIs to reduce your requests.

Click here to view an example of slow backend performance

Click here to view an example of a page with too many assets

5 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

Here’s a simple one: Look for an extremely long bar in the waterfall. Any asset, be it a JPEG, JavaScript, or an asset served from a third party, can drag down your entire site. There are dozens of possible reasons why an otherwise innocent-looking asset could take seconds and seconds to load, but in the short term the important thing is identifying it and removing or fixing it so that the rest of your site doesn’t suffer.

3. “OBA” - One Bad Asset

Look for abnormally long sections of bars that indicate DNS time or connection to the server. (In WebsiteTest.com, this means the blue and green sections of bars.)

Long DNS and Connection times indicate issues with the backend delivery. You may notice that these issues crop up most often in third-party assets.

4. Network issues (DNS and Connection issues)

Click here to view an example of a page with “one bad asset”

Click here to view an example of a page with a long initial DNS time

Click here to view an example of a page with a long connection times

6 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

For the inverse of #4, look for bars that are mostly gray (in WebsiteTest.com) and take more than a few hundred milliseconds to download. In these cases, the backend is working fine, but the asset itself is bogging down the process – usually because it’s heavy. A heavy asset means there’s simply more bytes for the browser to download and render, which takes longer to do. Techniques like GZIP, image compression, and code minification exist for different types of assets that can put your heavy website on a diet.

5. Slow Download Time

Ideally, the waterfall would be a flat diagonal line. You would be able to trace evenly down a waterfall cutting across the starting points for all the assets’ load bars. Unfortunately, that's almost never the case. It’s easy to see where the smooth pattern breaks: there’s a left-to-right gap from one line to the next down. This gap indicates that an asset, usually a third party script, activated blocking behavior as it executed, which stalled other asset downloads. This behavior can be overcome by forcing that asset to load asynchronously (if JavaScript).

6. Third Party Asset Blocking Behavior

Click here to view an example of a site with third-party asset blocking behavior (click “show 50 more requests” at the bottom until you get to the very end of the waterfall)

7 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

A site's assets should load roughly in the order of importance. That means content like a company logo, and above-the-fold images should come first -- not a Twitter widget or a tracking script. If anything that's not immediately important to show the visitor is loading ahead of anything that is, order of execution should be adjusted.

8. Ordering Problems

Scan the HTTP status column for anything other than “200 OK.” Any time an error occurs it’s a matter of concern since errors can often have ripple effects on performance, aside from the obvious failure indicated for that one asset. Each case begs investigation.

7. Errors

Click here to view an example of a page with several errors

Click here to view an example of a page with ordering problems

In this example, widgets and thumbnails load before the marquee page content – degrading the user experience

8 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

Some third party assets, such as social media widgets served by Facebook or Twitter, can cause problems because they’re “chatty.” This means a number of requests are required in order to load a relatively simple widget or button. If this is the case, it may be best to find a different version of the widget.

9. Chatty 3rd Party Assets

10. Long “Time to Start Render”

The moment the first visual element shows up on the page is important: it shows the user that the site is real and is on the way. As more time ticks away with nothing visible in the browser, the likelihood of a visitor bouncing away rises steeply.

The median time for something to appear in the browser is around 2.5 seconds, but shoot for better. If it’s much longer than that, there could be a problem with your JavaScript configuration.

Click here to view an example of a site with chatty third party assets

Click here to view an example of a site with a long Time to Start Render

9 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds

Try it Free

Yottaa Site Monitor• Start regularly monitoring your site for performance

problems with Yottaa’s free Site Monitor account• 24/7 Site Monitoring is always on alert & ready to

help• See what your users see from any device, any

location, & any browser

Try Yottaa Site Monitor Free

The tools are free and the time spend is minimal, so give it a shot. Let us know what you find. If you're already a guru of the waterfall chart, tell us: what patterns do you look for most often? Is there anything you'd add to this list?

Try it out!

Like this eBook?

Share it!

Managing a Web Performance Optimization Project

17 Performance Metrics You Should Care About

Learn More

Yottaa eBooks