Fast Infinite Scroll with Livewire
Playing
01. Why infinite scroll can be slow

Episodes

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

Transcript

00:00
If you've ever implemented infinite scroll within Livewire,
00:02
you've probably come across the problem that as you get further down and start loading more and more data, every subsequent request gets slower. And that is an issue. There's a very good reason for that.
00:15
And I'm going to show you exactly why that is now. And in this course, we are going to come up with a very, very fast solution that as we load more records, we don't see any slowdown of each subsequent request that we make.
00:28
So just here, I've got a normal solution. And there's nothing necessarily wrong with this. But if we go ahead and open up our network tab here, and we start to scroll down, there's 1,000 records in the database here.
00:41
Notice the time section just here. So every request kind of looks about right. But as we keep going, you'll notice that every so often, it just starts to bump up in the amount of time it's taking.
00:53
And we're working with a very small amount of data here. There's not really much on the page. You can see that we're now up to over 100 milliseconds per request. So that can be a bit of an issue, particularly if you have, say,
01:06
a chat that you're building, and you have huge amounts of records that you want to scroll through. This can very, very quickly become a bit of a bottleneck. And you'll see that there will be very, very slow speeds,
01:18
particularly with this amount of data. So what we're going to do now is switch over to the solution that we're going to be building in this course and look with the same amount of records
01:27
how we don't see any performance degradation at all in terms of the amount of requests that we make and the time of each of them requests. So let's swap over to this now.
01:37
OK, so we've swapped over to the solution that we're going to be building in this course. Let's take a look with the same amount of records what kind of speeds we get here.
01:45
So again, head over to the Network tab here. And I'm just going to start scrolling down. And I'm going to go quite far. I'm going to see how far I can push this.
01:54
Obviously, there's a ton of records in here. If we keep going all the way down, let's get to about halfway through. And let's just take a look at the request.
02:02
So you can already kind of see here that the times are pretty much the same. We're not really going over 50 milliseconds for each of these requests,
02:12
despite this having exactly the same functionality as the previous solution that we built. So this is what we're going to be doing. I'm going to explain throughout the course
02:22
exactly how we achieve this. It's actually a pretty simple solution. It just requires doing a little bit more to get this working.
02:30
But it's very, very simple to implement. So let's go over to the next episode and see the database set up and start building this out.

Episode summary

In this episode, we kick things off by looking at a common problem with infinite scroll in Livewire: the dreaded slowdown as you fetch more data. You probably noticed that the more you scroll, each new batch of data seems to take longer to load. This episode explains why that's happening under the hood, and why it's such a big deal especially when you're working with thousands of records (like in a chat app, or any big dataset).

We then put a regular infinite scroll implementation to the test, checking out the network requests and seeing firsthand how requests start to slow down. Even with just a thousand records, response times quickly creep up, which is not great for user experience.

To show what's possible, we preview the optimized solution you'll build in this course. With the same number of records, our improved method keeps request times consistently fast, solving the performance issues we just saw. It's not magic—just a smarter approach.

By the end of this intro, you'll know exactly what problem we're tackling, why it happens, and you'll get a sneak peek at just how much faster things can be with the right strategy. Next up, we'll jump into setting up the database and start building the super-speedy infinite scroll solution!

Episode discussion

No comments, yet. Be the first!