Optimize Laravel E-Shop Homepage Speed with... Livewire?

Laravel Daily| 00:06:47|Jun 4, 2026

Chapters7

Introduces the idea that how fast a page feels to users can differ from the actual data load time, using placeholders to improve perceived performance.

A practical look at using Laravel Livewire to improve e-commerce homepage perceived speed with lazy and deferred loading, plus when SEO and HTTP requests matter.

Summary

Laravel Daily’s video by the creator (the host) examines how to boost an e-shop homepage’s perceived speed using Livewire. He builds on a prior episode that reduced database queries and added caching, then demonstrates how components can load in stages to feel instant while data arrives progressively. The host shows a pared-down HomeController, with data loading moved into separate Livewire components for hero, categories, and product sections, and highlights how defer and lazy loading influence the user experience. He compares a vanilla load (19 seconds with images) to a Livewire-driven load (about 0.78 seconds total with partial loads and on-scroll fetches). He also experiments with placeholders and a sleep example to illustrate the distinction between rendering time and data arrival. Finally, he notes trade-offs: more HTTP requests and SEO considerations, and reminds viewers that this approach is general and applicable to React or Vue as well. A free YouTube version offers a taste, while the premium full-length video dives deeper into code and benchmarks.

Key Takeaways

Moving data loading into separate Livewire components allows the homepage to render with placeholders, delivering perceived speed improvements.
The full page can finish in under 1 second (781 ms) when loading with Livewire, versus 19 seconds with images cached in a non-livewire setup.
Three Livewire update calls can occur as different components fetch their data after the initial render.
Defer loading delays the internal data fetch behind the initial HTML render, so the top section appears quickly while other sections load later.
Lazy loading lets lower sections (e.g., hot deals, best sellers) load only when the user scrolls, reducing initial load costs.
Using static placeholders and a separate blade for real data lets developers visually separate structure from content in Livewire components.
Overusing deferred or lazy loading increases HTTP requests and may impact SEO, so the approach must balance UX with crawlers’ needs.

Who Is This For?

Laravel developers and e-commerce site owners who want to improve homepage perceived performance using Livewire or similar frontend techniques, while keeping an eye on SEO and network trade-offs.

Notable Quotes

"Placeholder and then after 2 seconds the data appears."

—Demonstrates how placeholders can show instantly while real data loads in a Livewire component.

"The homepage is loading and liveware component inside is a separate mechanism which may load later."

—Explains defer loading as a separate rendering mechanism inside Livewire.

"Three live wire update calls."

—Shows that multiple components can fetch data in separate requests after initial render.

"Defer and lazy loading of components. This is a general thing on the web not necessarily with livewire or react or view or whatever."

—Highlights the universal nature of deferred and lazy loading concepts.

"For public pages like this one, like homepages, for eshops, it may be important for SEO crawlers and AI agents to have the text right away."

—Notes SEO implications of dynamic loading.

Questions This Video Answers

How does Livewire defer loading affect homepage performance in Laravel apps?
What is the difference between lazy loading and deferred loading in Livewire for a Laravel e-commerce site?
Can I achieve similar perceived speed improvements with React or Vue on a Laravel backend?
What are the SEO considerations when using progressive loading on a homepage?
How many HTTP requests are typically involved when using multiple Livewire components on a single page?

Laravel LivewireLivewire deferLivewire lazyPerceived performanceE-commerce homepage optimizationCaching in LaravelSEO considerations for dynamic contentPlaceholder loadingPremium Laravel Daily content

Full Transcript

Hello guys, in this video I will talk about e-commerce homepage performance. This is kind of a part two of a video I had on this channel already. Eshop homepage speed optimization because the thing is with speed the clients may mean different kind of speed. So this is based on Upwork job with a goal to improve the performance and make it similar to gaming marketplaces such as Annaba. And this was the result of my first video. I optimized the database queries and introduced caching for this homepage which makes the back end faster. But maybe what the clients actually mean is if we go to that anima homepage, look at how it loads. I refresh and see those placeholders. They load a bit later. So there's such a thing as perceived speed and perceived performance for the end user. So the homepage with design elements feels instant, feels much faster, although some of the data comes later. And this is the header of the website. If we scroll down, some data may come even later when we scroll down after placeholders are replaced with real images and real database queries. So I decided to introduce something like that in the same project with perceived performance and speed with LiveWire. And this video on YouTube will be a shortened free version of this optimization video. The full 12minute video with more livewire tricks is on Laravel Daily for premium members where I keep posting not only courses but expanded videos on some topics. So the link to the full video will be in the description below. But I still try to make this free YouTube video as useful as possible. So let's dive into the code. So here are the changes. If we look at home controller that home controller basically is stripped to the minimum. So no queries, no cache, nothing in the homepage. All we have on the homepage in controller is just loading the view home. That's it. So no querying for the data in the controller. And then that home blade instead of having all the data inside has live wire components. So live component for hero livewire component for each section of the games which is homepage categories and then product section with different attributes and also there are things like lazy in this case and for example for homepage hero it's defer which also changes the behavior. So now look at this result. So if we load that page before live wire changes, it loads in the network tab, we can see 93 milliseconds, but that is with a lot of cached data and all the images are loaded right away. So it's all in one go, which is optimized already. But the total finish of the page is 19 seconds with images. And now look what happens when I refresh that with LiveWire. I've moved that network tab to the left side. I refresh that and now see it's finished in 781 milliseconds. The main document is 81 milliseconds but the thing is it loaded only part of the documents and then if we go to fetch tab you see three live wire update calls. So separately three livewire components loaded some data. Now look what happens if I scroll down. I scroll down hot deals are already loaded. one of the components. But if I scroll down, best sellers are loaded a bit later when I scroll down only. So there are two kind of levels of optimizations. Some top part is loaded a bit later but immediately with live wire and then some other parts are loaded when you scroll down and each of them as you can see is in 17 milliseconds or so. And this is example with livewire but the same behavior can be of course achieved with JavaScript with react or Vue.js or whatever you want. This is the perceived speed and perceived optimization I was talking about. Now let me show you the code. If we take a look at that hero component which is loaded right away but also with livewire component. We have the class of hero component. We have the blade view rendered but before that we have placeholder. So for example, let's put sleep 2 seconds here. And now let's refresh the page and look what happens. Placeholder and then after 2 seconds the data appears. So for live wire components you can define the actual rendering blade and then placeholder separately. So this is static HTML without any data and this is the blade with actual data which is stats products, stats offers and stuff like that. Now in our new home blade which is empty and loading live wire components there are defer and lazy. So if we remove defer and we put the sleep again for two seconds here. Look what happens. I refresh the page and it's loading for 2 seconds. So you don't actually win anything. You wait for 2 seconds for that livewire component to load with the same time as the full homepage. So this is what defer does. It well defers the loading. So the homepage is loading and liveware component inside is a separate mechanism which may load later. So such behavior of lazy and deferred loading of components. This is a general thing on the web not necessarily with livewire or react or view or whatever. This is the general logic for user experience. It's probably better in most cases to have some things added and loaded later. But also it has a few downsides as well. So you need to be careful with that. First you have more HTTP requests and also don't forget SEO. For public pages like this one, like homepages, for eshops, it may be important for SEO crawlers and AI agents to have the text right away. So yeah, this is the end of the free version of this video here on YouTube. What do you think about such kind of optimizations? What do the clients actually mean by optimizing the performance? And do you often use such techniques of deferred loading? And again, if you want the full video, the link to that will be in the description below. 12minute video where you will see the internal code of homepage data class difference between lazy and defer with LiveWire and more benchmarks before and after. And reminder, by purchasing Laravel Daily premium membership, you're supporting this YouTube channel to continue with free videos in the future. So, I appreciate your support. That's it for this time and see you guys in other