Blade component performance unfortunately slow

[johnbacon]

First up – we love Laravel. We just launched our new rebrand (gigsalad.com, check us out!) using Laravel 11.x.

But unfortunately, we've discovered that utilizing Blade components is far slower than alternatives – and we're having to consider some major refactoring to reduce TTFB.

We're obviously not the first to find this. For some good reading, see the following:

• https://laravel-news.com/faster-laravel-optimizations
• https://laracasts.com/discuss/channels/laravel/slow-view-rendering-when-using-blade-components

Inspired by the benchmarking in the latter thread, we put together our own suite of benchmarks, including the use of a third-party caching directive (blade-boost-directive) and a custom @loop (as in the Laravel News article).

Here are our results when rendering 100 instances of Filament 3.x's badge component:

Benchmark	Time (ms)
vanilla-html-in-loop-directive	0.80
vanilla-html-in-foreach-directive	3.36
include-directive-with-boost-array	7.32
component-with-boost-array	7.35
each-directive-vanilla-html	12.92
include-directive-vanilla-html	15.57
component-with-boost-redis	16.83
component-in-loop-directive	77.85
component-in-foreach-directive	81.31
component-directive-with-slot	93.64

As you can see, the <x-badge> component takes 27x the length of time to render as does the vanilla HTML.

To test whether this was a result of the PHP overhead inherent to the Filament components themselves, we put together the following sandbox environment comparing 100x empty elements included as a component: https://phpsandbox.io/e/x/irrm9?layout=EditorPreview&defaultPath=%2F&theme=dark&showExplorer=no&openedFiles=

As you can see, <x-empty-component> takes approximately 11x as long to be included 100x as the outputting of 100 empty <div>s.

What is responsible for this overhead? How can it be improved? This isn't a purely academic pursuit – we're spending significantly more time on Blade rendering overhead than on database querying, booting, and other significant aspects of the application. Our Blade component usage (utilizing multiple components within loops for product listings) is not uncommon for a marketplace or e-commerce app like ours.

[Razunter]

Yep, tried converting Twig template to Blade in my project and got 3x slowdown.

[JuliusMaskow]

I'm having the same problems. You want to use blade to make your development easier - but you now need to make sure to NOT use blade components, because it makes your site painfully slow. That's a huge reason, not to use Laravel or Blade-Components in following projects. Any fix for this?

[Merdin]

Hello everyone,

I'm currently in a similar situation. Maybe this talk can help all of you: https://youtu.be/M60-nxlrePc?t=1855

Caleb refers to livewire blaze. It seems to fix the issues we have. I'm going to refactor some of my code this week and see where I can use blaze to solve my very slow page load.