There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
https://slides.com/richiemccoll/visualising-frontend-performance-bottlenecks
Hello. Before we get started, I would just like to give a shout out to the organizers and the fellow speakers at the summit. There's been a really great conference so far and they're all doing a great job that they'll be talking about. Where performance. My name is Rich, I'm known as Chemical on Twitter. I'm a phone and engineer and I work at a company called The Zone and London. I'm from Glasgow, Scotland. But, you know, we can probably tell from the accent. And before I start talking about performance, I'll just give a quick introduction and to what we do at this point. So the zone is alive and on demand, streaming service and real live in new markets around the world, and we're providing millions of customers with access to the spots that they would like to watch. Tim, I'm working as responsible for letting them devices and what led them devices as can be broken down into three categories. So we have smart devices, which is like Samsung, Toshiba, Panasonic pities. We've got games consoles, which is for by Xbox and also set top boxes, which is Comcast by ATV and Skycar. And so the performance and the context of what we do, it is the kind of problems that we face to do with a little memory and CPU targets destroys competition on the Internet, for example, you have playback running in the background and the users trying to navigate content. At the same time, maintainance move 60 frames per second InterAction's when the customers are navigating content. And the data doesn't lie, right? Websites equals a better user experience. This is what customers prefer and it's something that we should be fighting towards. So they are from the closely again past the white paper demonstrates some kind of useful, quote, convergence within seven percent to just one additional second of the time and 80 percent of users stop engaging with website. Images take too long to load. And another great quote from Craigmore on fast software is that, to me, Speedie software is a difference between an application smoothly integrated into your life and one called the point of great reluctance. And as usual, the software. We can definitely relate to this at one point or another. So today, what we'll be covering, as I understand, the method of measuring analyze infection. Well, briefly touch on the use of time in spite of the Broza provides Lavalife, Damul measured and analyzed slowdown in jobs that could. I'll introduce the RenderMan technique, Robotization. I'll speak briefly about the performance problems we face at the Zone and finally affects the performance bottleneck that we involved in the demo. The missionaries, in fact, say there's a methodology they tend to use when doing performance audits. So before we can analyze and a problem before first start to measure, measure will give us the baseline that we need to analyze the problem, really, once we analyze a problem, we can then propose a fix. Once we fix with a measure again and the cycle repeats until we've got a new number that we're happy about where we measure. I've got demo, small front end application that's available in Moscow bureau. The set instructions are with me. So if you fancy following along, then please feel free. So central to the demo here. I've got a button and this application is just a small front end application that uses a SpaceX API to render a list of launches from your old identity, actually to be able to qualify as changing the order of launches. So if I was button, I know you know, this launches SpaceX. So the best thing, what do is going to develop hotels and chrome and we'll use a performance panel and we'll come to the CPA option here and click six time slot on. Well, they come over here and press record and what we'll do is interact with this feature a few times just to get some idea. And stop the recording. OK, so what we can see here is there's quite a lot going on, what we're really concerned about as this section here. So this section is the main thread. And for those who aren't aware of what happens on the Internet, I'll quickly jump over to that and we can explain the theory behind that. So that's she knows from Paul Lewis's blog post called The Anatomy of a Flame, and essentially the Broza performs a different set of tasks at any given time to get stuff on the screen. So when we profile and we see any yellow jobs that has been executed. Haythem, we receive will say, well, will can calculated, and anything green, green or compositing to this thing happened. So first of all, to that, they know that we understand a little bit about what the colors mean, if we were to analyze this interaction, we can see here they've got there's some yellow, which means or some JavaScript being executed. Some people, which means a style somewhere. And finally is a little bit green, which means as the day happens on the screen. So let's quickly jump into how we measure stuff, but before we do that, I want to quickly touch on this topic, which is we always wanted measured against the production belt. The reason for this is that development liberties such as yakked have called in development belt and the production belt, which means that the that users or customers may be experiencing as in the same as what you would be walking about and a development belt. So always measure the production balance just to get a real sense of the numbers. If that being said, how do we measure? That's the first question we have to answer. That brings me onto the use of Tamaz API and there's a team API is provided by the browser. We can access it through the performance, which is an object, but a few useful methods to perform it, such as mock. And we'll mock us as it creates a high resolution timestamp that we can associate that Thamesdown with a name we can easily access these timestamps using when the performance measure and this example I've created through timestamps one create Muxtape and the other and. We can then we can access these. Usually when the performance measurement. I wonder performance measure, Chris, in your time stamp, but it calculates the judicial between a stop and an end. Usually when the performance measure is how we visualize stuff and develop those. OK, so let me know a little bit about things we know how to measure. Let's jump into the demo and start trying to create a baseline. So the thing that we could do. As we think about the interaction that we will profile when we click that button, the state changes and all of the cards update on the screen. So one thing we can do is we could create the first time stamp, which would be the stop. And say, don't click the button, so jump out of the vehicle and just have a look at the. So this is the demo application locally that could delay its launch last component, which is the functional component that has the button and when there's a list of launches. So inside here, inside the unclick mark the start. So that's the first thing we have to do. And also to mark the end, we have to use some instrumentation called. And this instrumentation, quote, is just a custom hook that we use to store the value from the previous vendor and say the ref. This custom hook. And the way that people use this. As like so. We have. An offender runs out the window that compares the previous order, which we've using the custom hook and we compare against the new or the prop f those two values are different. We know the state has changed and we can mark the end of that transition. So if I copy paste this. It is here. That should give us some time to analyze and measure and develop those. So now let's switch back over to Dana Bash Reloaded so it is clear recalling. Record again and again and try to just change the order of launches a few times. OK, so there's a lot of stuff going on here. Let's take this one, for example. As you can see, a team and section with no can you measure this is the measure that we've just added just to get some understanding of what the baseline is? So armed with the feed, it would be hard for frames. We can obviously see that this combination of JavaScript style pain is roughly a six hundred and fifty four milliseconds for that interaction. Also, remember the reality, the instrumentation code, so we want to subtract the instrumentation code from that number, so that's here will be the instrumentation code around 15 milliseconds. So if we remove it from six hundred and fifty four, we're roughly around five hundred, five hundred and fifty milliseconds. So that is the kind of thing that we're working about. So if we think about what happens at that, actually we're changing the order of cards, right? So the question is how many cards or lunches that we have in the dorm. One way to do this would be to change over to the element, stop and look for the contain and eliminate. So if we look at this element here, this is the list of launches, I think those three dots still as a global variable, it means that in their access, that's going to be some properties on, for example, the element which will give me the amount of launches that we've got. So what we're dealing with here is 102 items. And Adam. So this is obviously causing a lot of work for the browser to do everything that we do that transition. So how could we mitigate that? How could we fix that problem? That brings me on to the technical virtualization, so popularisation, also known as windowing and as a way to especially rent a large loss of content. I actually personally think when wonderings about to come to this concept. If we look at this image you have from the Web dev article, which I highly recommend reading. That's really just the concept. So the U.S. is only looking at maybe a certain amount of items on screen at any given time. But also, there are some Oreshkin items that you didn't see initially. Let's see, for example, the use likes to scroll fast, so the Wendle would then change over a subset of that list and it's an efficient way to render content. If you've got a large a large list. So before we apply this technique in the demo, I'll take a little detour around what we were doing at the John. So we adopted popularisation position and before we adopted using a lazy loading approach of rendering content and what you can see, my guess is that when you're going up and down the content, we are just changing the window of what the user sees at any given time. The problem we had before was that as the user was interacting and going up and down the content, we will easily load and content and changing the dom and update the new elements. The problem with that on the when the basis is that actually causes significant lag and a significant chunk and the user experience. So we wanted to remove that in order to provide a good experience across all these different devices. And so virtualization and this is just the vertical example here is the horizontal example without any animation. So as you can see, there's only maybe five items horizontally on screen at any given time or screen items. There's a maybe two on either side so that the users can fast, for example, the hard remote and the hold down right or the left. Then the rendering is clear fashion because all we're doing is just changing the subset of the view. It's also us speaking about the constraints on TV and how the slightly different and the Constitution may be Facebook on mobile web. For example, on TV, one of the big problems is focus management and maintaining consistent focus throughout the front pages. Another one is the wide range of hardware specifications. For example, some of these devices have really little memory loss CPU and somehow key memory CPU and also dealing with a wide range of Brossette engines. I think the oldest processor we support is SAFADI six, which is quite old. And obviously that means that there's a lack of modern Web standards. At the same time, there's also lack of developing tools, which means that it's really tricky to navigate this landscape when working with performance. And remember, boldness and application of the zone, but right now, once and we're going to work across these different devices, so any technique to we use, such as virtualization, has to prove effective across all these different devices.