Eneba

The Shift Toward Perceived Performance Traditional optimization often focuses on raw backend execution, such as database indexing and caching. However, Povilas Korop argues that "perceived speed"—how fast a user feels the site is—matters more for conversion. By leveraging Livewire within the Laravel ecosystem, developers can serve an immediate skeletal page and stream data in segments, mimicking the snappy UX of high-end marketplaces like Eneba. Prerequisites To implement these techniques, you should be comfortable with: * **PHP & Laravel**: Fundamental understanding of routing and controllers. * **Blade Templates**: Knowledge of how to structure frontend views. * **Livewire Basics**: Familiarity with components and their lifecycle hooks. Key Libraries & Tools * **Livewire**: A full-stack framework for Laravel that simplifies building dynamic interfaces. * **Chrome DevTools**: Essential for monitoring the **Network Tab** and measuring fetch requests. * **Laravel Daily Premium**: A resource for deeper dives into advanced framework patterns. Code Walkthrough: Decoupling the Controller The first step involves stripping the `HomeController`. Instead of fetching products and hero data in one heavy request, the controller simply returns the view. ```php public function index() { // No queries, no heavy lifting here return view('home'); } ``` In the `home.blade.php`, we replace monolithic HTML sections with Livewire components using `lazy` and `defer` attributes: ```blade <livewire:hero-section defer /> <livewire:product-grid lazy /> ``` Syntax Notes: Defer vs Lazy * **`defer`**: This attribute allows the initial page to load without waiting for the component. Livewire then makes a separate request immediately after the page is ready to swap in the content. * **`lazy`**: This directive delays loading until the component is scrolled into the viewport, which is ideal for "Best Sellers" or bottom-of-the-page sections. * **Placeholders**: You must define a `placeholder()` method in your component class to return the static HTML/skeleton shown while the data fetches. Tips & Gotchas While these techniques drastically improve initial render times, they increase the number of HTTP requests. You must also consider **SEO**; if crucial content is loaded exclusively via deferred components, search engine crawlers may fail to index that text unless they execute JavaScript effectively. Always balance user experience with discoverability.