Livewire Performance
This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
Playing
07. Prefetching

Episodes

0%
Your progress
  • Total: 1h 22m
  • Played: 0m
  • Remaining: 1h 22m
Join or sign in to track your progress

Transcript

00:00
Pre-fetching is a really good way of improving the perceived speed of your app, and this is mainly a UI improvement. It doesn't actually do anything to your kind of back-end speed.
00:11
We'll take a look at this anyway because I think it's really important, and it can just, like I said, provide a kind of perceived improvement in speed. So let's just start with creating our component. So let's go ahead and say Make or LiveWire Make,
00:26
and let's just call this Prefetch. I don't really think it's a good example. So we're going to go ahead and add this Prefetch component to our dashboard, and we're going to go ahead and display some employee details here.
00:39
We won't pass any props through because we already know how to do that, but if we come over to the Prefetch LiveWire component, let's just say that when we click on a button within this component, we want to load an employee.
00:51
So we'll create out an Employee property, and we'll create out a method which we can call when a button is pressed to load an employee. This could be more employee information or anything really. It doesn't really matter.
01:06
And let's go ahead and set this employee to Employee Find and 1. And like I said, that could be loading in anything, additional data, making an API request. It doesn't really matter what this actually is, but it's a bit convenient that we have employees already available.
01:21
So inside of the Prefetch template then, we want a button in here to, when we click on it, load that employee. And let's just write Load Employee in there. And let's just dump the employee information out inside of here so we've got something to see.
01:41
Okay, let's go over and try this out. So when I click on this, that loads the employee. Now it's very, very quick because we're making a request to our own database, but if this was slightly slower, e.g. we added, again, we're going to bring back that sleep in there,
01:57
a one-second sleep, then you're going to have a very slight delay, well, a one-second delay after you've clicked this button. So I've already pressed that. We've got one second to wait, and then the data rolls in.
02:09
Now the way prefetching works is we apply this to the button itself. So when we hover over the button, in the background, Livewire is already loading that data for you before the user presses the button.
02:22
So we hover over Load Employee. Livewire will start to make the request that we want, e.g. calling that LoadEmployee method. It will store it, cache it, and then when we press the button, it will give you that information. So let's see how this works in the prefetch template.
02:40
So all we want to do here is go ahead and use the prefetch modifier. That's pretty much it. Let's go over, give this a refresh. Now I'm going to go ahead and not click on the button, but I'm going to hover over that button.
02:52
So I've hovered over it, and you just saw at the bottom of the screen where we've got DebugBar open that a second request has been made. Now when I click on it, we instantly get that data back. So this can provide, like I said at the start, a perceived speed improvement in your UI.
03:09
So a user will probably just start to hover over the button, and when we click on that, which I've just done, you can see it almost looks like that data has come in instantly, even though we have that one second sleep,
03:20
because in the background, LiveWire is preloading all of that information. Now of course, if a user were to quickly click on the button, you're still going to get that slight delay, like we've just seen here. I clicked on that about a second ago.
03:32
But most of the time, you'll find that in LiveWire or in any app, a user's kind of hovering over before they click, and then when they do click, they're going to see that data come back instantly. And it's highly unlikely that you're going to have a second delay in the kind of data that you're getting back.
03:47
It'd be more appropriate to use a function like useSleep to test this out, which is in microseconds. Let's say that we had 200,000. That's a more realistic value. So when I hover over this and click on it, you can see that you get a very slight delay,
04:01
almost like a standard database delay for a large amount of data that you're trying to get back. And then again, as soon as we click on it, it almost looks like that data is instantly loaded. So there we go. Prefetching is not an actual speed improvement, but it's more a speed perception from your user's point of view.

Episode summary

In this episode, we dive into prefetching and how it can make your app feel way faster to users—even though it doesn’t actually speed up your backend! It’s all about giving the illusion of speed by preloading data before the user actually triggers an action.

We start by building a simple Livewire component called Prefetch, which sits on our dashboard and displays employee details. We add a button that loads employee data when clicked—simple enough, but it gets more interesting. To demonstrate the point, we deliberately add a delay (using sleep) so you can see what happens when the app isn’t lightning fast by default.

Then, we bring in the magic: Livewire’s prefetch modifier. With this on the button, the moment a user hovers over it, Livewire starts loading the data in the background. So by the time the user actually clicks, the data is ready and appears instantly—goodbye loading spinners!

We watch how this works through Livewire’s debug bar, noting how hovering triggers the background request. We also talk through the real-world impact: most users naturally hover before clicking, so prefetching makes the interface feel way faster, even if there’s still a short delay on the backend. The episode wraps up with tips on simulating more realistic network delays and emphasizing that while prefetching doesn’t improve raw speed, it’s a super handy trick to create a smoother, snappier user experience.

Episode discussion

No comments, yet. Be the first!