Lazy Loading Components in Livewire v4

Improve page load times with lazy-loaded components.

1 February 20261 min readLivewire اقرأ بالعربية

Lazy loading defers component rendering.

Basic Usage

blade

<livewire:heavy-component lazy />

With Placeholder

blade

<livewire:heavy-component lazy>
    <x-slot:placeholder>Loading...</x-slot:placeholder>
</livewire:heavy-component>

Lazy on Scroll

blade

<livewire:comments lazy="on-scroll" />

Keep reading