Slow view rendering when using Blade components

In a recent project if lots of blade components I faced some slow rendering issues.

What made a difference on that project was:

• Use traditional layout directives, instead of blade components for layout
  • @\extends, @\yield, @\section, @\stack and @\push (slashes added to avoid mentions)
• Make sure every blade component have a class

Looking at the framework's code, for every anonymous blade component (e.g. a component without a class) Laravel creates am instance of Illuminate\View\AnonymousComponent class for it. So, in practice, every component is expected to have a companion class, and if they don't have one, Laravel will use this AnonymousComponent class instead.

Not sure why this slows down code execution, but for that project, both Memory consumption and render time dropped by a lot.

I know it is not very convenient to create a lot of classes if you already have a bunch of class-less components. Believe me when I started seeing noticeable differences I created a ton of them. But it solved my problems then, maybe it could help you out.

Good luck!

Thank you very much for your insight! I tried replacing my anonymous components with proper classes and using traditional Blade layout. Sadly, that did not lead to a performance improvement in my case.

I have all my views cached. It surprises me though that the view caching has zero effect on performance. (Zero or close to zero, I was not able to see any difference when running my tests)

do you have any view composers?

btw views are always cached

Yes, I use a view composer, but it is limited to a temlplate and few views. I run my tests outside of the template, so the view composer is not initialized.

view()->composer(['components.master', 'masters.show', 'orders.create'], function ($view) {
            $view->with('cart', Item::findMany(array_keys(session('cart') ?? [])));
        });

@rodrigo.pedra Your solution works! I was able to reduce the rendering time using components with classes instead of anonymous components. It made no difference when there is no data passed to the component, but with data, rendering time is reduced significantly!

View:

@foreach ($products as $product)
        <div></div>                              // Rendering 100 of these takes 0.004s
@endforeach

@foreach ($products as $product)
        @include('test-with-class')          // Rendering 100 of these takes 0.2s
@endforeach

@foreach ($products as $product)
        <x-test-with-class />                        // Rendering 100 of these takes 0.2s
@endforeach

@foreach ($products as $product)
        <x-test-anonymous />                // Rendering 100 of these takes 0.2s
@endforeach

@foreach ($products as $product)
        <x-product-with-class :product='$product' />       // Rendering 100 of these takes 0.3s
@endforeach

@foreach ($products as $product)
        <x-product-anonymous :product='$product' />    // Rendering 100 of these takes 0.8s
@endforeach

Test components:

<div></div>

Product components:

<div>{{$product->title}}</div>

Still, I was not able to reduce the time it seems to take to load the component itself, and I would be better of just repeating the contents all over the code instead of packing them into components. (see difference between empty div and a component containing nothing but an empty div)

Any ideas?

I encountered slow rendering on my pages after breaking down my blade components, resulting in a range of 500 to 2,000 components on each page.

Unfortunately, I didn't realise how much this was slowing down my project so that rendering was taking longer than my database queries!

I thought the view:cache command would've made them almost instant to render, but that was just a flawed assumption.

However, I created a blade directive package called @boost that halved most of my page load times.

I'd highly recommend you give it a go!

Happy coding ❤️

Great package, Angus!

We reported some of what we're seeing with slow Blade rendering to the Laravel discussion thread here: https://github.com/laravel/framework/discussions/56243