We are convinced that web performance challenges can be met with knowledge and access to data.  The problem is that as web pages grow heavier and more complex, so grows the amount and variety of performance data.  Developers need smarter tools to sift through this performance data, figure out where the bottlenecks are and what to do to fix them.

That’s why the Yottaa team developed our new waterfall chart. Starting from March 2012, all Yottaa users have access to the most powerful waterfall chart, ever.

An Unprecedented Tool

Waterfall charts have become indispensible tools for developers to analyze webpage performance.  Until now, though, waterfalls were limited: they displayed data one way (in the order that the assets are loaded by the browser) and offered very little help for data analysis.

At Yottaa, we analyze web performance every day and we know the pain. We decided to help ourselves and our customers by creating the most powerful web page performance visualization and analysis tool.

Our new waterfall now provides data filtering, sorting, details drill down as well as integrated actions. Developers and website owners can now investigate deeply into every asset: slicing, sorting, and filtering performance data as it’s conforms to the open HAR file standard.

This is the first of three blog posts in which the Yottaa team will discuss some of the features in our new waterfall. This week we’ll cover the new Filtering and Sorting functionality; next week we’ll cover the deep drill down data on individual assets; and third we’ll cover some groundbreaking features in development that will be released later this year.

Filtering and Sorting: You Can Teach an Old Dog New Tricks

First, to access Yottaa’s new waterfall simply enter a URL into the field on the top right of your Yottaa dashboard.  From the ensuing page, you’ll be able to select “Page Load Time” on the left-hand navigation.  Here you’ll find the waterfall tool, along with an interactive performance graph.

Across the top of Yottaa’s waterfall you’ll see columns with categories describing the assets.  These will be familiar for developers: URL, HTTP Status, host address, size, type, and timeline breakdown (the “waterfall” part of the waterfall) but we’ve packaged them together here for convenience.

The real key is that for each column of values, the user can select what assets the waterfall will display and how they will be ordered.  Sorting (ascending or descending) for any of these categories will allow developers to clue in quickly on problem areas, without having to hunt through a vast timeline for the key stats.  For instance, by clicking “sort (descending)” on the timeline column, developers will immediately be presented with a clear, neat view of the slowest assets on their website.

Show Only What You Want To See

Additionally, on columns in which the values fall into categories, there is an option called “show only” that helps to further isolate desired pieces of data.  For instance, a developer could show only assets with 400 HTTP statuses, or only assets from a particular third party domain.  This flexibility will increase efficiency for developers seeking to find and fix performance issues as they arise in the development process.

This is especially the case for the “type” column. With the ability to separate all JavaScript files or all JPEG files, for example, from the rest of the website, developers will have greater insight into the components of web pages.

Why Is Sorting and Filtering Important?

Every time you analyze a waterfall chart, you are probably looking for answers to the following questions:

1. Which assets are slow?
2. Which domains are slow?
3. Which assets are problematic — for example, returning 404 error?
4. How many Javascript files are there?
5. How many Javascript files are loaded from this third party domain such as Facebook.com?

When you apply the new sorting and filtering capabilities, you will get answers to these questions instantly.

Try It Out!

In the next post, we will explore the deeper data that can be found by clicking on assets within the waterfall.  In the meantime, we encourage you to explore the tool on your own: just register
here for access.

And please don’t hesitate to share any feedback on the waterfall in the comments or on Twitter @Yottaa!