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	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	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.