Performance

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

2. 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. 3 www.yottaa.comHow To ID 10 Web Performance Problems in 10 Seconds
The Ideal
Before 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. 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
numberofassetsonawebsiteis47,thoughsometypes
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. 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. 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
hundredmillisecondstodownload. Inthesecases,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. 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. 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. 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