Steve: One thing that I wanted to talk about is ... We've already agreed the thing to focus on is the user experience. That's a unifying theme that everyone in the team can work towards.
Steve: What we talk about Speed Curve being unique in doing is helping you track and measure the user experience. That sounds great in words but what does it actually mean?
Mark: Yeah. How do we do it?
Steve: How [00:00:30] does Speed Curve ... So, Mark, you tell us.
Steve: How does Speed Curve actually measure user experience?
Mark: This, for me is we ... Webpage Test is an amazing tool because it gives us such an amazing source of data. The one thing that Webpage Test does differently from any other tool out there is record a video.
Steve: Just so people know, Speed Curve is build on top of Webpage Test.
Mark: Yeah, totally. So, we're loading web pages and real web browsers on consistent hardware in all sorts of places around the world [00:01:00] but when that page loads we're recording video at 30 or 60 frames per second. That allows us to do a whole lot of visual analysis of their page from a user's perspective. So, not the browser telling us when different events fired but actually what does a user see? How does it feel as it loads?
Steve: And for me, like I love metrics around DNS and how long it took to download jQuery. But what really matters if we do want to try to measure the user experience [00:01:30] is visually, what is the user experiencing?
Mark: Yeah, what are they seeing. So, we've got two great metrics that come out of visual analysis. Start window is when the very first pixel changes on the screen so I can see something, I'm engaged, I'm there.
Steve: It gives the user feedback that the server is working.
Mark: The other really important one is Speed Index. Speed Index is an analysis of the viewpoint and how it's changing over time during the next page load. So, if a little bit appears on screen there's 20% [00:02:00] visually complete right through to the end of the page load where I can see all the content in my view port. The speed index number is a calculation of that process over time and turning it into a number that I can use to compare against other websites and between my templates and giving me a really great user experience number to share with the team and improve.
Steve: And so, we have these film strips, which are great to drill down to with Speed Index is, [00:02:30] if you can't look at all of those and digest all of those, it's a number that kind of represents what you're going to see in that filmstrip.
Steve: I think that one of the ways that we kind of show that Speed Curve is so focused on user experiences that we actually determine the typical page load based on speed index. I think the default in webpage tests is to use page load time but because Pat has done such an amazing [00:03:00] job and parametrized the way web test works, we've actually changed that to pick medium page loads based on speed index because it's really all about the user experience.
Mark: To make it even more about those users and the feedback that we're getting ... [crosstalk 00:03:15].
Steve: So, we're first Speed Curve. We should be talking about Speed Curve features, so rifle off ... what are some other features that illustrate how we're measuring user experience.
Mark: We take that raw data, that speed [00:03:30] index number, and those film strips, which give you a great visual feedback and we turn it into a series of dashboards that focus on you on particular aspects of your website. Responsive design ... We're giving you visual feedback on how it feels on mobile, how it feels on desktop, visually. How it feels different in those filmstrips and how they load differently. Also, allowing you to compare those [inaudible 00:03:56] and we understand how well you're tuning your responsive website.
Steve: [00:04:00] And you say, "How it feels" and again, what we're talking about is the user experience. If you can see those filmstrips and you can compare a phone to a tablet to laptop, visually, what the user is experiencing that really helps you get that "what does it feel like to a user".
Mark: The other big thing we do is custom metrics. We support the use of [timing speak 00:04:22] that's now available in a couple of the key browsers and these [inaudible 00:04:26] available as well. The use of timing speak is all about deciding [00:04:30] what is the hero piece of content on your webpage that determines when that user experience is ready.
Steve: And, if a customer adds a measurement to that we can surface that and to really let them hone in on their key elements in their page.
Mark: So, think about a product page, when that product image loads you really want to know because that's when the user is engaged. Twitter has talked quite a lot about time to first Tweet. All these metrics get involved down to one number that's actually [00:05:00] about user experience. When do I first see their Tweet.
Steve: That's their custom metric.
Mark: We totally encourage you to go through a process with your team, with marketing, design, developers, everybody and decide what is that most important element on each template? Then, you can pull that through. It's supported by ROM, you can push it into other data providers and we support it and Speed Curve as well.
Steve: How about ... With competitors ... We've got film strips for looking at different devices, [00:05:30] what if visually I want to know how my site compares to other sites that I'm competing with? How do we do that?
Mark: The wonderful thing about webpage test in Speed Curve is you can measure any site. All the same data that you get for your site, we can give you for other people's. We can tell you what the speed index is for other people. We give you all those same screenshots and film strips so you can visually see how you compare. You get all that construction feedback [00:06:00] so you can go, "Hey, that site is faster than me. What are they doing differently? And, how might I improve my website to get up to that same user experience?"
Steve: That's important because we talk about setting performance budgets but sometimes to set the value of a performance budget you have to figure out what should it be? Looking at what your competitors are doing is a good way. I think everyone wants their site to be better than their competitors so it helps you know [00:06:30] what you have to do.
Mark: Performance budgets are huge part of Speed Curve and supporting that decision making process to really think about what should my user experience be like. Turning that into a metric that you then monitor using a performance budget and then we push you alerts so that you're really staying on top of what that user experience is like and how is it changing over time.
Steve: That's important. Then, how about the ever nefarious 3rd party [00:07:00] content?
Mark: Whew ... 3rd parties. Don't we love them?
Steve: I think it's not that they're nefarious. I mean, we appreciate things that adds and analytics and widgets do to our sites. I think the worrisome part of it is it's really a big variable because it's not content that the website owner controls.
Steve: So there are uncertainty about how it's performing and the impact it's having on the user experience. What can we do there?
Mark: So, we put a lot of efforts [00:07:30] into rolling up some of those services and giving you a really nice 3rd party overview waterfall that allows you to understand where the impact is being had. The key thing is really about that start render line on the graph that's showing you that potentially these 3rd parties are affecting your user experience and what they're seeing.
Steve: Mark, more and more 3rd parties, luckily, have moved to loading their content asynchronously but there are still [00:08:00] many that don't. That waterfall ... that's one of the most beautiful visualizations that I love in Speed Curve. Being able to see if maybe you have one of those outlier 3rd parties that is blocking rendering. That's of course, if you can find that and fix it, gonna have a huge impact. That's ... the fixing part, sometimes I know that initially a lot of widgets [00:08:30] are not asynchronous by default but then afterwards they rolled out async versions of them. It's a way to see which ones should I investigate. Which ones do I have to focus on? Maybe, if you just search for them you'll find they have an asynch version.
Mark: Those are all the great features and the way that we support user experience and actually bringing that to the forefront. We're going to keep adding more over time. [00:09:00] Check them all out. They're awesome.