(upbeat music) All right, welcome back to the slow page. You probably remember it from the beginning of the series. Well, now we're gonna make it faster, but we're gonna talk about the actual nitty gritty details, the gotchas of when you should and shouldn't use folding or memoization or things like that. But before we do that, we need to know what specifically is slow. We kind of hinted at it earlier,

what specifically is slow. We kind of hinted at it earlier, but I wanna know empirically what is slow because you're gonna load a page in your application and you're not gonna know exactly which part is slow and you're gonna be hunting around. So a really, really helpful and important utility in Blaze is its debugging tools. It has a profiler built in that shows you exactly what's going on in your page.

It has a profiler built in that shows you exactly what's going on in your page. Then you can see clear as day. Oh, that's the slow component. That's the one I need to optimize. Then you can get into all the thought processes of how to optimize those things, which we'll get to. But right now we need to cover the profiler. So let me show it to you. Right now I disabled Blaze and the debugger and everything.

So let me show it to you. Right now I disabled Blaze and the debugger and everything. So it's slow, you can just see it's kind of slow, it's waiting, there we go, it loads. Okay, well I did that in the ENV file. So Blaze actually has two ENV variables. One is Blaze debug, the other one is Blaze enabled. So I set both to false, but let's set debug to true, save it, clear our view cache. Now load it, so this is no Blaze,

clear our view cache. Now load it, so this is no Blaze, but we have Blaze debugger, which is cool because it'll also help you debug even if you don't use Blaze, right? Like you could not optimize any of your page, but you could use its profiler to learn about the speed of a page. So that took, so this is with Blaze off. You can see that it gives you this nice little helpful

So that took, so this is with Blaze off. You can see that it gives you this nice little helpful thing in the bottom. With Blaze off, it's 1.8 seconds for this load. Now that's because Blade had to compile everything the first time. Let's refresh it again, and now that it's already compiled, this will be faster, 800 milliseconds. And now it'll just sit around 800 milliseconds, but it's already giving us useful information.

And now it'll just sit around 800 milliseconds, but it's already giving us useful information. It's saying the option component is costing you the most on this page. The online count is costing you the second most. It's showing you about the cost of these things. You can even open profiler, and what this is gonna do is give you another tab, and this is really cool. We'll dig deep into it in a minute,

and this is really cool. We'll dig deep into it in a minute, but maybe, well, let's do it right now. Okay, so we load the page, and every time you load the page, you get access to the profiler. You can call open profiler, and then you can even look in here and find historical page visits and view other ones. Now, what am I looking at?

and find historical page visits and view other ones. Now, what am I looking at? I'm looking at all these little rectangles. These are all Blade components, except sometimes you'll see a big rectangle that will collapse a bunch inside of it, because it can't render them that small. You'll see. And then you get kind of an overview. So this is the total render time.

And then you get kind of an overview. So this is the total render time. This is the amount of components. 54,000 components on this page, it's crazy. And then slowest components. This is extremely useful. This shows you out of the gate. Like option, there's 49,000 option components on this page, and totally, they take 481 milliseconds in total, which is crazy.

and totally, they take 481 milliseconds in total, which is crazy. And so if I click this, I can look at, well, I guess I can't click that, but I can hover over it, and I can look at component detail on the right, and this is gonna tell us some things about it, like the file that it comes from, how many instances there are. It's total time, it's total self time,

how many instances there are. It's total time, it's total self time, which you'll see the difference between total time and total self time, because sometimes a component has nested ones inside of it, like maybe modal. Like if you look at modal, it's total self is seven milliseconds, but it's total time is 750. Total time will show you the amount of time it takes

but it's total time is 750. Total time will show you the amount of time it takes to render including all of its children. Total self will just be how long it itself takes and not all of its children. If you've seen profilers like this or flame charts and things, you're familiar with these concepts if you haven't, maybe this is a good refresher. Okay, so this is what's very useful. It's just the slowest components rank,

Okay, so this is what's very useful. It's just the slowest components rank, and you can just look at them, but then over here you can drill down into them. So let's take a slice of this. I'm just gonna highlight a piece of this right here. Okay, and now we're a little bit zoomed in. We have the card component, bunch of other ones, the modal inside here, and just to refresh what I'm talking about,

the modal inside here, and just to refresh what I'm talking about, we have a modal here that has some inputs in it, and it's all wrapped in a card, so that makes sense. We have a card, and then some things. So see how this option 196 is collapsed, showing like an aggregate of all the ones inside of it. Let's zoom in even further. Okay, and now we don't have any aggregated cards. We see all of them, and you can use this up here

Okay, and now we don't have any aggregated cards. We see all of them, and you can use this up here to actually like change the view, and you can scroll, if you wanna scroll back and forth, or I think you can hold command and scroll, and you can zoom in and out, whatever. There's like little hints for you up here of what you can do. Okay, and now let's talk about colors really quick. So blue is blade.

Okay, and now let's talk about colors really quick. So blue is blade. That means it's totally unoptimized by blaze, and that's the whole page. Everything is just blue, and those are blade components. If it's a raw blade view, so not a component, it's gray, it's called view, and there's two of those, 'cause there's the actual page, like the live wire component page, and then there's the layout that it references.

like the live wire component page, and then there's the layout that it references. Those are not blade components, they're just blade view, so there's two of those, they cost nothing. Most of the render time is blade components, okay? So we got that, and then again, you know, you can like click on one of these, and drill down, and learn a lot about it. Learn about where it is in the hierarchy, what children it has, click into specific children,

Learn about where it is in the hierarchy, what children it has, click into specific children, learn more about them. Ah, it's so freaking useful. So let's optimize the page with blade, then go back into the profiler and see what's changed, okay? So blaze enabled, we can now set to true, save, artist in view clear, refresh. Okay, 330 milliseconds, I'm gonna do it one more time, 'cause that had to compile, 332 milliseconds, okay?

Okay, 330 milliseconds, I'm gonna do it one more time, 'cause that had to compile, 332 milliseconds, okay? And then let's kill these profilers, and we'll open profiler, okay? And now take a look, everything is orange now, because we targeted all of our components to optimize with blades. So there's still 54,000 components, but they're all orange, which is compiled. So they're not normal blade components,

but they're all orange, which is compiled. So they're not normal blade components, they are compiled components, or they use our functional compiler, and you can see that the performance is just way better, like you could compare the two here, is this one's 816 milliseconds, this one's 332, but there is one interesting thing here is the old one, see this is why it's fun to have a profiler. The non-blazed one, when we loaded it,

see this is why it's fun to have a profiler. The non-blazed one, when we loaded it, the slowest component was option, because blade itself, it's overhead is so big, that this is like twice the online count, if you recall from the beginning, you don't remember, but the online count thing right here, this has an actual database query in it, so it's like arbitrarily slow. That one is faster than the option thing,

so it's like arbitrarily slow. That one is faster than the option thing, but when you go to the blaze optimized one, blaze made it so that options way faster, because it removed all the blade overhead, and now online count is the slowest one, and that hasn't sped up much at all. So that's that, as soon as we start adding folding and adding memoization, you'll see those show up, under here it'll say strategy breakdown,

and adding memoization, you'll see those show up, under here it'll say strategy breakdown, how many got folded, how many got memoized, we're gonna dig into all that stuff, but I just wanted to show you at a glance that when you're working on it, when you're trying to make a page fast, you need to enable the debugger, and that's how you open up the profiler, and that's how you use the profiler,

and that's how you open up the profiler, and that's how you use the profiler, and you can drill down and figure out like, clearly, like, you know, you ask yourself the question, what are we gonna tackle? We're gonna tackle online count component and option component, and we can do other things, but this is all the low hanging fruit, and that's a really important thing to know about a page, so let's do it.

and that's a really important thing to know about a page, so let's do it.