Web Performance Tooling - Google I/O 2016

Key Takeaways

So, Paul. Yeah. When when we're building websites and tools, we we want things to be fast. We want the page to load quickly. We want the user to have a a good experience. Yeah. To be happy when they use our site. But somewhere along the process when we're building our app, things start to get slower and slower and I don't really realize it right away, but then all of a sudden I reach this point and I'm like, "Oh, my my app is slow." Yeah. And then I mean, you're like you got two problems. You've got poor performance and now you got the challenge of actually having to try and fix it. And like from measuring correctly to understanding enough about the internals to make an you know, an educated guess to actually trying that out and and doing something like it's not easy. Like it's this this path is is hard. Performance is hard. So, um I'm Paul. I'm Sam. Uh we we're really into performance. Like we're performance geeks, I guess. Geeks. Yeah, geeks. I don't know. I'm not sure. Sure. Performance nerds, you like that better? Okay, anyway. Yeah, um we're going to tell you about some tools, techniques, um approaches, and workflows on making measurable and effective improvements in performance. There's some some fresh tools. Fresh tools. Fresh. fresh tools. Fresh tools. All right, cool. Um before we get into some of the real world products, I want to kind of step back a little bit. You could think of performance as the art of avoiding work and making sure that any work that you do is as efficient as possible. Th- Those are some sage words, Paul. They are sage sage words. So nice. Paul Lewis Paul Lewis actually wrote this one. Oh. Real good stuff. It's good. Yeah. Um So, I want to touch on kind of like the effective workflow for diagnosing and understanding performance. Um so, it all starts with the user. The user is the most important thing. You got to consider where they beginning and what is success to them. That is kind of your balance for investigation. So, I sort of like uh put myself in that user head space. Yeah, you could like get like in the head and like right up in the between the head space. Like his glasses and where his head is. Okay, you could do that, yeah, if you want. I'm in the head space. I got it. Great. I appreciate that. Um after that point, next thing is to measure. Measure with the profiler. Get an understanding of what type sort of time we're looking at. This is the key. And you you say that like measure, but like meters, yards? Uh milliseconds. Nanoseconds? Sam, I'm doing a slide. Okay. Okay. After this, you interpret costs. You understand kind of like categorize characterize the sort of work that is happening. Understand it. After this, identify the bottleneck. Drill into like what is actually happening. You might use specialized tool for this. Um drill in and at that point, you can try a fix. You have a hunch, give it a shot and do it. And for me, it's like I just I have a hunch. I sort of guess, just change something, refresh. Change it again. Yeah. You wouldn't want to like And that's my trying. You wouldn't want to go like directly from measure to like try a fix. You don't want to like skip the rest of that. But, yeah. And we always end up and we're like that looks like it might work and that's fine. But then the key thing here is that you got to return back to measuring again. Um you you take that exact same thing that we're looking at before, you measure it, you understand what sort of change, what is the delta of the change that we actually made. So, okay. So, I found this function that takes 10 milliseconds to run. I'm like, oh, I can go JS perf crazy on this and drop it down to 1 millisecond. Like, this is awesome." But, then I look at my total time to run and it's 2 seconds. Yeah, 2,000 milliseconds and we made a 9 mill- like, 2,000 milliseconds down to 1,991. I mean, it's something. Something. But, But, oh wait, right? Cuz I'm in that that user headspace, behind the glasses. I'm like, "Oh, I can't even notice that." So, it doesn't matter. You what? It doesn't matter. Well, I mean, to the user it doesn't matter, those 9 milliseconds. Absolutely. Absolutely. Like, what is going to be most effective for them? All right. So, with that out of the way, let's get into some real stuff. Um, and I think we're going to start out with the site um, Android Auto? Yeah. Website? Cool. All right, let's dive into it. All right. So, uh I was looking at this site the other day on my phone and I loaded it. You were just like reloaded the page? Yeah, just command R. And I saw that uh when the page loads in, I sort of see this spinner and then this green thing pops up and I see a header. Yeah, if you could like um, uh yeah, describe what is happening right here in kind of poem form for me? The green fields flow in. The spinner No, okay, Uh so so Yeah. So, we got this like situation. We got the top coming in, we got the bottom, we got this thing in the middle. Um, uh and we're just waiting for the spinner, right? Yeah, and I'm like, as a user, I'm like, I can't really touch this. I shouldn't touch this because it's spinning, it's loading. Yeah. I'm just going to wait for it. Sure. Okay. So, I like figured that, okay, there's probably like a big image that's downloading. It's just taking a really long time. And so, I'm waiting for that, probably. Yeah, yeah, yeah. So, let's look at the timeline. Okay. Um, so I have this timeline recording that I did when I reloaded the page and we can scrub over this and we sort of see that initially we get this header painting in pretty much right away. Um and then we see our our spinner. Actually, Sam, uh there's like a lot happening here. Just can you just like briefly tell me what all is going on? Sure. So, here's like our JavaScript that's going on, our main thread activity. Good. Um then here's like we see our frames per second in the green and then the red is like frames that took a while to paint. Like it. Okay, but we'll just ignore most of that for now. Sure. So, we're just going to go back about the screenshots. Yeah, just just this filmstrip. Seems good. So, here's that green field that you mentioned. It's sort of Uh yeah, that's right. poetic. why you wanted it. That's nice. See our spinner and then Spinner? Uh then we get our image. Okay. Um and you know, that's like uh How long were we spinning? It's see It took a little Like 3 seconds almost. Shift. Hold shift, right? Shift key. Drag and we get to see how long that took. Yeah, a good three-ish. Almost 3 seconds. 3 seconds of spinner. Spinning. This must be loading something big. I imagine, this is my guess, uh the header image, this uh shot with the car is like like 2 megs or something. Like they forgot to compress it. Yeah, it's just huge. All right. But like okay, so but I'm not I don't know that yet. So, I want to Guess. To guess. Okay. So, what do I do now? Want to figure out. What I recommend to you is there is a checkbox at the top of the screen now. Network. Network. Uh-huh. Good. Promising. Do it. Do it. Whoa. All right. Okay, so I see I have more in this crazy view. Uh-huh. Uh-huh. Go check this out. So, basically here we have the exact same network waterfall that you might see over in the network panel, um but now integrated into this view. So, the colors are pretty much uh images are generally green, um uh style sheets are purple, script is yellow, kind of matching the colors of the rest of the flame chart. Um but the nice thing here is we can begin to kind of coordinate what is happening on the network side of things and then the actual like execution of what's happening on the main thread. Okay, so we we know that the image loads in around here. So I'm Let me find that Let me find that image. Uh scroll to the bottom. Um I the 1 MB image. So you're saying that like nothing in the network is happening between here and here. Nothing on the network is happening. You have 2 seconds of nothing. Yeah. Well what Okay, let's look at the last thing to load. Sure. Okay. Uh last thing? Click that. Yeah, we can bring it to the bottom and see kind of a preview. Okay, so that's the Not one. There was the other one too, though. Yeah. Uh let's see what this Oh, yeah. Oh, there it is. Okay. go. All right. There's our There's our image. our image. It finished right here. Yeah, but then it didn't actually show up for 1.5 seconds. Huh? Okay. Not sure. Yeah, that seems strange. So I guess at this point we're I mean we're a bit confused in this situation, right? Yeah, I don't know what's happening. We didn't build this site, unfortunately. Um and it's not every day It's not every day that you're like performing like profiling a site that you didn't have a part a hand in. Um so we had to do a little bit of digging in order to like digging find what the story is with this image. Yeah. Okay. So let's hop to um So like like let's look at the image. Yeah. Okay. So like I just hit command shift C or you can like use this. Yep. Grab the element. And here's our our banner image. Yeah, can you zoom in just a touch? Yeah. All right, check this out. Um see these data breakpoints? Yeah, I see those. I bet you can some kind of like responsive images job that are set up. thing. Yeah, yeah. Okay. Um So they don't load the 2 megabyte image on your phone. Right. So they're probably using JavaScript to start that request, which is why it happened a little bit later on the page. Um They could be using source set like or you know, they could be using a platform feature for uh But they use JavaScript. something. Yeah, it's fine. Okay. Um but now we need to understand what the connection is to the loading the spinner. Yeah, like some JavaScript is is doing something, right? Yes. I bet you your bottom dollar that if you uh one of these classes here Okay. JS header animate image. Sure. to look at anything in particular, it would be that. All right. So I I see it. I have it. Now what do I do? All right. Go up to the uh actually use the new command menu. Uh command shift P. Nice. Nice. Hit search. Uh uh type search. Yeah. Yeah. We got a few things in here. So this is just going to search across all kind of the capabilities of the dev tools. Uh just you know, and uh key keystrokes. We kick that up. It's just going to bring up the search across all files that we have. And uh yeah, yeah, search. Okay, cool. Uh we have two results. Two results. Looks like the page and one in some JavaScript. Say again. Let's check out what's going on in the JavaScript. Okay, so looks like the code's minified. Hit the button. pretty print that. There we go. There we go. All right, good. All right. So we got this JS header animate image. Looks like it's assigned to this. Yeah. Let's just hunt down kind of what happens here. Pink. Uh okay. So we're in this function load content. Yeah. All right. So to be honest, I'm going to break a little bit here. Uh we have done this before. It's not totally surprised to us. We have investigated this. There's a good amount of code here. and since Sam has understood what it does now, he's now going to explain to you what he has learned. Okay. Uh so so we look at this and we see we have a set interval here. So that every certain duration we're going to fire a function. Yep. And then I see this one e three. One e three. So I said, "Paul, what does this mean?" Cuz I know you you got like a math major or something. Yeah. Yeah. It is called exponential notation. Okay, and I did not believe him. So I copied that and I uh let's see. We go into our console here and we just sort of paste it. Oh, it's a thousand. Thousands. Well, that is a fancy way to write a thousand. Thousands. We have a set interval for every thousand milliseconds. Yeah, so every thousand seconds. And what are we doing? Then we're checking to see if this header image has a class of loaded. Every second we just pull to be like, "Hey, you loaded?" Nope. "Hey, you loaded yet?" Nope. "Hey, you Yep. Okay. Good. So Then we're loaded and then what? Okay. Uh then we're using this tween library which is, you know, doing some animation stuff. Fancy. Um and I saw we have a delay and this opacity. Um The delay. Uh 1 millisecond? Yeah, I thought that, too. And then I looked at the docs. Uh that's a second. We're pulling once a second to see if it's loaded. Yep. Then it's loaded and then we're like, "Okay, great. I'm glad that you finished downloading." Uh um I I'm glad that we have identified that you're loading. Now before I fade you in, I'm just going to just like pause and just hang out for a little bit. hang out for a second. Just just chillax. Wait. And then we'll fade it in. Yeah. That's fascinating. That is good. My dad once told me um he gave me some good advice for my career. He said, "Whenever there's kind of problems, issues, um, a good way to kind of rephrase the situation is instead of using negative words, you can say there's a lot of, uh, there's opportunities. And so, I think we could all agree that there are some opportunities in this area where we could, you know, try some things. Potentially, we could improve this. Yeah, I think that there's there's some things. Okay, so this this accounts for why we have that that gap. That big gap, yeah. Like that two-second gap of nothing happening. Yeah. So, um, yeah, I think that, uh, kind of many of us could could identify a better way of handling this. Uh, not so bad. Before we move on, we've looked at kind of the load aspect of this page, but I want to touch on kind of a little bit of the interaction stuff. Sure. All right, check this out. I come back to timeline, I clear this, uh, and I want to look at kind of some of the scrolling performance, the interactions, kind of like once I start using the page, right? Yeah, makes sense. Good. Scroll down to the bottom. Yeah, some of that stuff. It doesn't feel so bad like where I am right now. Uh-huh. In fact, um, yeah, okay, yeah. So, what I'm going to do is just capture a new recording. Um, oh, let's turn that guy off and this guy, all right, there we go, cool. And record, and I'll just kind of like scroll, fling it. And I want to sign up for the mailing list. Cuz why not? YOLO. Good. Good reference. Um, all right, check this out. But what we have here, um, some new stuff. So, along the top, uh, right here, if I scroll in, always mouse wheel, mouse wheel's the trick. Um, we have just identified kind of what interactions are actually happening. Yeah, I see the words there, like scroll. Yeah, exactly. Yeah, yeah. Fling. So, yeah, exactly, fling. So, like scroll, I have like my finger down, I'm moving it, fling, I let go, and it's just kind of gliding. Flinging. Um, and we can even go over here, like this actually here is the response. You've heard us like we've talked about rail measuring response. And so this is actually when my when I clicked on the sign up link and saw that. So we can open up the main thread again and kind of see this is all the JavaScript that was running. And if I zoom back in, I can open up and see some of the detail on this guy. And so check this out. So this is the actual like gestures that the browser is handling kind of under the hood in order to to handle this this input. So What's that like that red line? Oh, okay. So the red line. The red line if we actually bring this up here says time waiting for main thread. So what happens is basically the browser receives the tap, right? And then it's like cool, but like I just need a second because I might be busy and I have to have a moment and then I'm going to totally like evaluate this on the main thread and run like kind of the event handlers to to handle that. So it's it's kind of like hey, I just tapped you, but this is crazy. So execute your event handlers on the main thread maybe. Yeah. Yeah, I think it's like that pretty much. Can we we can rename that, right? Yeah, we could just put that whole description right here. Yeah, that makes more sense. Yes, sure. Okay, good. So the other nice thing here is that to kind of bring it back to what we were looking at before with the the network activity, I hit that sign up form, we kind of waited and then it's like oh yeah, cool. You're all set. If I bring back network, the nice situation is we can also see a little bit of what is happening. So here you can see it on the mini map. You can kind of see these the blue bar right here is actually well, it's kind of yeah, the mini view of the network and we You always open up uh to see some of the details of all of that. So, it's nice to kind of get the interaction between main thread, network activity, and back um kind of in a single view. Yeah, that sounds awesome. Seems good. Um next one? Yeah, Android Auto. All right. All right. Uh this site um you introduced this to me. Tell me about the story of what we're going to look at. Yeah, my friend Tracy sent me a message and he said, uh "Hey, I think my site is kind of slow when I load it on my phone." I'm like, "Yeah, it seems kind of slow. Uh can you take a look?" I said, "Sure." So, What are we going to do? look. Yep. Yep. Yep. All right. So, I have it loaded here. Um and guy? It's me. Who's that guy in the picture? It's me. That's cool. All right. All right. Uh Normal looking web page, right? Like I don't know. It's a it's like a blog content. Yeah. Videos, some podcasts. Some stuff. Pretty normal. you want to look at? Well, let's just reload this page real quick. And I'm going to have the timeline go here. Yep. I just want to like show you how it feels. So, you just hit command R? Command R. And it's like capture the page. So, it's loading. Cool. Still notice the spinner going. Yeah, yeah, yeah. It's still loading up there. Okay. Something's happening. I think it finished. Okay. And this is again, this is on my laptop. Yeah. Like with good Wi-Fi. Yeah. So, it took like uh a little over 10 seconds to load. 10 seconds. Yeah, yeah, yeah. About that. For your for all of the the stuff to finish. Yeah. But though if we look at like kind of what's happening here, we roll that out, it looks like this image finally came in right around here, like 8 and 1/2 8 8 seconds. Sure. And then some other stuff. Now, but like when I look at this, I see this crazy amount of yellow. I don't understand what's going on. Yeah, like there's a lot of uh pastel colors. What is happening? That is what a sec. So, I'm just like, Yeah. Yeah. Actually, the the different colors, it's colored by file. So, each file gets a different color. Oh. Then you kind of get a sense like this this file, this is this file. Okay, so there's a lot of files operating a lot of JavaScript. Yeah, yeah, yeah. Um so, I look at this and I say, "Okay, I I there's a lot of JavaScript. I can dive in and look at each function, but that would take a while." So, I kind of want to group Yeah, you probably one I like just like start looking at this 20-millisecond slice. So, we want to get kind of an aggregate view. Um if you wanted to kind of see that, try this. Okay. Hit the on the bottom. Sure. Uh bottom up, right down there. Okay. Yeah. So, what we have here is this is basically a summary of all of the costs of uh of that ran on the main thread. Um and this is across everything. So, you might be familiar, say for instance, if we kind of flip this off and go over to to no grouping it whatsoever. Um if you use the profiles panel and done kind of like a typical JavaScript profile, you'll see like the bottom-up view and these are the JavaScript functions, etc., right? Uh what we have over here, well, one thing when you do that, at the very top you always see program in parentheses, and you're like, "I don't know what that is, but it seems to be taking a lot of time, right?" So, that is actually revealed all here. So, So, this tells me that we're executing a lot of JavaScript. Yeah, we're executing JavaScript, we are doing garbage collection, we're doing layout and recalculate style and parsing style sheets, all these things in addition to just running JavaScript functions. So, there's a lot. So, um yeah, a good amount of work, all sorts of things. So, this is a bit higher level than the diving in. A good amount. Yeah. A good amount. Okay, sure. Um But yeah, you uh switch that that drop-down back to group by domain cuz in this way we can kind of just see like by file, by domain where our costs are. Good on a site like this where there's like files coming in from different places. Right. So, we have this YT which is YouTube, right? Yep. YT images YouTube. And then we're spending almost 2 seconds in Ad This code. Yep. Yep. We also got like Chrome extensions on here, too, which is nice cuz sometimes you want to actually see how much like what effect Chrome extensions that you have installed affect your page. That's all handy. But yeah, these Seems Ad This and YouTube seem like a little high to me. Like I get YouTube because these players they have to construct each player and okay. Yeah. Um but the Ad This is weird to me. Um and I was playing around with the site and I saw that there's a button over here where you can click on the podcast and you get this little Ad This widget. Behind the button. Uh Wait, wait. The the Ad This cost is like 2 seconds. It's for like the share buttons that are kind of behind this click. Yeah, so it's a feature that's behind a click that you know, probably most users won't use. Okay. 2 seconds. All right. All right. Well, that's something. Um well, Tracy wanted you to to dig into this, so what do we do next? Uh so, what if we were to just disable the whole like podcast stuff and just see what it feels like? good to just identify. We want to kind of like reduce down and identify our key bottlenecks. So, yeah. Like it'd be good to take it out of the picture. Um so, if we wanted to do that, what we could do is there's an experimental feature called request blocking where we can just say like just block these requests from going out completely. Oh, that sounds perfect. All right. So, I'm guessing we'd go to network Network panel? And then look for pods. Okay. So, this seems to be the URL. Yep. For these players. So, you can right click and block request domain, and it's just going to kind of Okay. Yeah, the browser is going to not be able to issue these requests. So So, should we reload capture the new thing? Yeah, let's do that. I see that number jumped up to 13 here, so it's probably working. Yeah, exactly. Um, another thing that I will point out on on our way over is we're doing this right now on our laptop, um, and the experience on a phone like this is a responsive site. Like we'll it's the exact same thing that runs on a phone. It'll probably take a little bit longer than this. Like a little bit means a a lot of bit. Yeah, absolutely. Um, so there's another new experimental feature, um, that we can check out, and it's uh, CPU throttling. So, just like network throttling before where we slow down things, now we can actually slow down how much time everything from JavaScript to layout takes to evaluate, um, inside the page. Oh, so I don't need to like plug in my phone to sort of experience what it's like on a phone? It'll slow it down, and that's useful. You should if you care about performance, still plug in your phone, but this will give you a nice, um, uh, push in the right direction. Yeah, that's cool. Yeah. All right, so we go back to our our our bottom-up group by domain. Yeah, so we we blocked all those requests. And at this we like remove this. We did remove this. I like the joke. I I I I I worked on it. It's growing on me. I like that. All right. Um, what are we at as far as like time time and all this? Uh, so we dropped down to like 7 seconds now. For the like until main thread is kind of Yeah, until main thread is idle, and I'm going to guess that things were ready before. That's not bad. All right, good. But we're still paying we're we're still paying this YouTube cost. Yes, the YouTube cost is a little bit interesting. Um, and I think uh, what is that How is the embed done here? There's just uh, the iframes. Iframe iframe iframe. It's typical iframe embed. Right. Uh Yeah, but like putting myself in that user head space I was thinking as a user I typically want to interact with the first video first. Yeah. And maybe not the last one right when the page loads. Yes. So what if we were to throttle the instantiation of these and sort of like lazily load them using something like intersection observer? Like when they entered the screen we could build them and defer the work. I love all of that. You should do that. Okay. Turns out I did. All right. Good. Good. Very good. So you want to show us? Yeah, I have it running locally with the patch. So you just got like this was a private GitHub and you just like cloned it. You made a patch. Wasn't that Wasn't that big. No, it's really small actually. Uh I think it's just here. It's just like Uh I mean this is a total hack but we like loop over all these videos and we just build the player objects and Yeah, yeah. Do a little You know what you could have done instead of this set timeout in 150? You do a little 1502. I mean real classy. That would have been cooler. Exponential notation. That would have been cooler. All right. So that's easy enough. Um yeah, let's measure and check it out. a little timeline. Okay. Do do do do A little bit, yeah. Yeah, it seems better already. It's the same cut off. I don't I don't know what's up with that cut off bit. But like based on this it looks like uh our page like that one that first frame gets painted in there. Yeah, just like from the top overview it looks completely different here. Okay, and like it's sort of hard to keep this in your head to look before and after. So we made some pictures. Um so before it looked like this like we were really doing a lot of work. Yeah. Yeah, it's a lot of work. A lot of work. Work. Work. Work. Work. Work. Look it's good. Yeah. Um Doing some and then afterwards we dropped it down. And the nice thing here is so there is the aspect of the fact that there's doing less work um and that's important. But we're also like at the same time as a billion how much work we're doing, we're also looking at kind of how uh visually available is the page. Right, yeah. And like Combination of things, right? Because if there's too much work then uh you like as a user you're not going to be able to like scroll interact with it immediately cuz like we're busy, you know, waiting for the main thread to call me, right? So Uh so here we chunked it we we brought it down and So yeah, not bad. We went from 9 seconds to that paint when you user could think that they could interact with it. Yep. 4 seconds. Not bad. Not bad. Not bad. Not bad at all. All right. So uh Sam and I uh we like web web stuff. We're like doing these these websites. Uh like many uh JavaScript people in the room, we also do a lot of uh JavaScript work on the server side, Node. Um we've been building some uh projects recently and uh we like to use tools to make sure that like the code quality is really good. Um one of our favorite tools is ESLint. ESLint's good. Makes sure the code looks the same everywhere. I love it cuz we were fighting about like we were fighting about line lengths and and quotes and two tabs. Yes. Yes. It's nice to put that all to rest. Um but we run ESLint sometimes and we run it on our project which is not like crazy huge. No. It's like a couple hundred files. And I felt like it was um not going kind of the speed that we wanted. Like It was 7 seconds actually. Timed it. Yeah. 7 seconds. So um we wanted to like this happens to us and because we are kind of performance geeks, uh you Geeks. Yeah. Geeks. You like can't help sometimes. You're like I was doing something but I got to go figure out what's up with the performance. You were texting me at like 1:00 a.m. You're be "Sam, I think I I Why is it so slow?" I I I I think I think it maybe No, that wasn't it. I'm going to uh so, um what we're going to show you, we're going to try and, you know, look at this together. Um but, I do have to like put out a little um disclaimer. Wait, did they announce this yet? So, I need you guys to keep We're going to show you if you can keep a secret. We're officially announcing this thing like tomorrow, but you get a little bit of sneak preview to if you're quiet. So, we're going to show it? So, yeah, yeah. Basically, we wanted to take the kind of uh the developer tools and the and the profiling experience in these tools that we know from the client side and be able to use them in this uh in this back end experience with Node.js. So, we're going to go check that out right now. Yeah, it's good. All right. So. have our project here and Yeah, this is Yeah, this is ours. And I just want to I just want you to experience this lint. Hook it up. You ready? Hook it up. Running, right? Yeah, it's running. Yeah. It's good. It's good. I won this I won this staring contest right there. Totally did. I couldn't take it. All right, we're we finished. Took a little bit. That's a little bit. I feel Yeah, anyways, yeah, it took some it took some time there. It's just Yeah. So, this is Let's uh let's actually measure it with a profile Yeah, it was a little bit faster. Let's measure it with a profiler to see what's really going on. All right. So, I'm using uh my Node binary and I'm passing two flags, inspect and debug break, which is going to pause us on the first line of the program. And I'm just running our lint. Yep. So. Okay, I get a URL here, so I can open that in Chrome. I have it open already. I'll just reload this page so we connect to our node. So what we have here is um the Chrome DevTools um modern Chrome DevTools. Inside of Chrome. Inside of Chrome and we're just talking directly to Node.js like Yeah, so this is my node program or this is ESLint. Yeah, yeah. Notice like no elements tab, whatever like we don't need that. Yeah, it's pretty cool. I like it. We got a job to do. We got to we got to figure out what's going on here. Profile this. Let's profile it. Okay. So I'm going to go over to the profile tab and I'm just going to record this CPU profile and as soon as I record the CPU profile As soon as you hit start, yeah. It's going to un-breakpoint. It's just going to run our program. Yep. So let's let's watch for when our program exits so we can stop our profile and we'll go ahead. You know that if you you can use command E to start and stop these as well if you don't want to click. Little pro tip. Done. Okay, let's take a look. Okay. Ooh, look at that flame chart. That is a great flame chart. All right, some good colors on here. Um but that that's a a lot of work again, 12 seconds of work. 12 seconds, yeah, yeah. Wow, okay. So interesting. All right, if we want to like just characterize the shape of this like at the end over here we got kind of um uh I don't know. We got this green land green green kind of world and process text and we're parsing probably the um Like the files like we're looking at what's going on in the Like we're actually like interpreting them and and the the linting. Yeah, like this stuff. Okay, so we zoom way out. Good. And I see this other group here glob sync. Glob sync, big group. Glob sync. What are what's glob? Uh I I think it's what gets all the files. It says give me all the files in the project. Pass them down. Got it. Lint them. Just give me the files. Give me the files. Look it up. But like this is, you know, this is 6 seconds. There's a lot. What's happening like at the bottom of this? Like what is what is the actual stuff that is taking time? Okay, zoom way in. Zoom a bit in. All right, it looks like we're doing like a reader and reader and glob star. Let's click in. Just click? Yes, sure. Yeah? Wait. Seems good. Is this my This is the source code. Yeah, yeah, yeah, it's your it's the ESLint source and we're just like going to view it now. From the profiles, yeah. Oh, that's pretty cool. That's nice to have that in node. Yeah, that's good. Now I I think I don't spend as much time in DevTools as you, but these colors in the side look new. These are What is this? Ah, uh yeah, this is brand new. Uh this is uh line-level annotations of all of the performance uh work. So basically, um if you're over and you taking kind of like a JavaScript profile and kind of you see all this stuff, um the self time is the amount of time that you actually spend doing work inside of that function, those specific things, right? Um so if we take those numbers and we actually say, "Hey, I want to know I want to see what that looks like against my source code." Um and so like glob sync, right? And I'm just going to like click in and see actually what is happening there. Um but not only like per function, but at the line level as well. So you're able to see between functions and lines where I'm spending time on the CPU doing work. Oh, so it's kind of like um a perf perf gutter. It's like it's like we put the performance work in the gutter of the editor. It's like a perf gutter. It's like a perf gutter? Perf gutter. Perf like an Yeah, it's like a perf gutter. Perf gutter. I like that. We can call it that, right? It's a thing. Okay, I named it. IO 2016 perfgutter We're doing the work here. We're doing the perfgutter. And actually in the other files that we have, like Seems like the numbers are smaller, right? So, like all the work is happening in here, like in the kind of globbing, we're moving around the file system. Um Paul Lewis once said the performance is the art of avoiding work, and I feel like that is some work that we can avoid, right? Yeah. any ideas on like how we could, you know uh Well, let's let's zoom way out here. Yes. Yeah. Okay. And sort of look what's going on. And we see that it all kind of starts in this list files to process function. Mhm, yeah. Steps down into this anonymous function, so let's click in again and see just like what's happening. Um and this is this is a lot of code. Yeah, too much. Took took me a while to read it, and Yeah. So, you you made me some like artisanal handcrafted all Irish graphic. what's going on here again uh with the help of my graphics. Yeah, you're welcome. Okay. Um Mhm. Okay. So, this is what's happening in that function block. We call ESLint, which is going to lint our code. It calls glob.sync on our project and gets all 26,000 files of JavaScript which include, you know, node modules Yeah, and other stuff. Yeah, third-party stuff. And then it passes each one of those files into this filter, which it reads in our ESLint ignore to know what to not pass on, like node modules. And then at the very end, we get 30 files. Yeah. It's like lint these 30 files. That does it, yeah. Okay. So, that's something. That's cool. That's that's one way to do it. That's fine. Uh is there any way to improve it? Well, I was looking at the glob options because like doing the filter ourselves seems like too much work. Yeah. And glob takes an ignore. Ooh, you can like give a a blacklist of what should be ignored to the glob function. Yeah, so it's like hey, should I even look at the node modules folder and it just doesn't. It doesn't Oh. That seems like a like a good approach. Yeah, it does. So ideally it might look like this. We we call ESLint, it reads in our ESLint ignore, constructs this filter object, it passes that to our glob.sync Yeah. and we get 30 files. Yeah, and the nice thing here is that like we were looking at all that self time doing the traversal and stuff and now we like it it's like node modules? Nope, I'm going to skip that like big bunch of files and I'll stick to the project. Okay. So I uh That seems good. Um let's like try it out and measure it. Yes. And see. So I have a branch where I've actually made this patch already. Um I like it. Okay, here we go. So let's rerun our profile and see what kind of impact this had. Run it. So back to that measure step, right? So measure it again. So here we are in the source. files Let's start our profile. You know you can hit command D. Okay, we're finished. Wait, wait, wait, wait, what? Yeah, we're done. Wow, okay, cool. Yeah, I still see that like green area where it's doing the linting at the end and then that that bit before where Yeah, but but like before it but there's no glob anymore. I mean I think it's in here like it's there. Oh, there it is. Oh, wait. That's nice. 144 milliseconds now. That's good. And so before we were looking at what like really it's like 11 seconds in total for that that That's pretty good. All right, cool. So, um uh for our project we'll make we'll like just hack the uh thing just Yeah, I can email you the patch. Okay, I'll apply it. Maybe we should contribute it back to the community. I have to open a pull request. It's the right thing to do. Um I have to like take pictures and attach them and write words and like choose at least four emojis. There's some work there. Uh I know we're busy with this, but like maybe later you could do it. Okay, I'm I'm just going to say that I started I started doing it. Oh, good. Okay, well, like sooner the better. All right, you want to do it now? Yeah. Do it now? Yeah, let's do it. All right, all right. Oh. All right, run. All right, so note the the unicorn emoji. Always the unicorn emoji. Those are good. Smart stuff. Not bad. So, interview Paul, what what what do we learn today? Yeah, what did we go over? A good amount. From being able to coordinate between what's happening in the network activity in the main thread, understanding categorizing the kind of work that's happening, understanding the interactions that you're that the browser is receiving and coordinating that with my work, and then being able to take all that kind of performance stuff and then actually be able to use the same kind of stuff in Node.js. It's pretty awesome. Some good stuff. Some good stuff. Um so, yeah. So, we're uh really excited about some of this stuff. Happy for you guys to to start using it. Let us know what you think. Um Some good things. If you have any questions, you can find us on the internet. That works. Yeah, cool. Thank you guys very much. Appreciate it. Thank you. Mhm.