I run into some performance issues when using UI Patterns to set up some views and the view rendering time is pretty high.
I did a test on a fresh install D11, I installed and enabled the theme UI Daisy Suite. This is how I set up a testing view to show 50 articles per page.
Format: Grid
Show: Component (UI Patterns)
Fields:
I set up the row style Component (UI Patterns) as
- Component: Card
- Variant: Default
- Map fields into slots
I use webprofiler module to check the rendering time of this view, I cleared cache and refreshed the page then I checked the rendering time. In average, the rendering time takes around 3 seconds for a 50 articles view.
I also checked the case where I removed the Content: Tags field, and the performance was much better, rendering time was about 0.3~0.4s
I attached the view configuration file bellow. Please let me know if I need to provide more information.
Thanks!
| Comment | File | Size | Author |
|---|---|---|---|
| view.txt | 21.62 KB | sea2709 | |
| Screenshot from 2024-10-09 08-40-03.png | 91.77 KB | sea2709 | |
| Screenshot from 2024-10-09 08-36-25.png | 92.61 KB | sea2709 |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
just_like_good_vibesHello, thank you for your issue.
which version of the ui_patterns module please ?
thank you
Comment #3
just_like_good_vibesIf i understand well your issue, your problem is occurring only after you clear the cache ?
if you don't clear the cache just before measuring, how is the measured time compared to the one you have provided?
Indeed, when you clear the cache, you remove a lot of data cached by the ui patterns module. So, there would be a "fixed cost", occurring only one time, in order to rebuild the data to be cached. Please report to us the measurements just after cache rebuild, but also try the render operation several times to erase the "fixed cost" introduced by complete cache cleaning.
thank you
Comment #4
sea2709 commented@just_like_good_vibes: Thanks for looking into this.
I'm using 2.0-beta3 version.
If I clear cache and refresh the page, the rendering time is around 3.2 seconds. Then I refresh page again, this time the rendering time is around 2.7 seconds. I think from the second refresh attempt, the rendering time is reduced as 2.7 seconds.
I'm using ddev with default D11 site, just install a couple of modules for testing.
Comment #5
just_like_good_vibesthank you very much.
We will investigate and propose something soon.
Comment #6
just_like_good_vibesComment #7
just_like_good_vibesI found one very important point killing performance in the context of views. It has nothing to do with field formaters but it is at the heart of ui-patterns.
indeed, when we build a render array for a component (in ComponentElementBuilder), we check that each source is carefully applicable according to the context. This has a certain cost..
What we could do is to remove the call to "isApplicable", that improves a lot...
still need to think about a clean solution.
Also, when we get the default source for a prop (imagine a prop is untouched and has default value), do we really need to call isApplicable?
Comment #9
sea2709 commented@just_like_good_vibes : Thanks for working on this. Do you think performance is an issue on other features like Layout, Block, Views when using SDC with UI Patterns?
Comment #10
just_like_good_vibesHello,
Performance is a major concern for ui patterns, not an issue.
we target the best performance possible without compromising the possibilities.
we are still in beta phase and tackling performance if needed of course.
did you test the code in this MR?
Comment #11
just_like_good_vibesHello,
i will merge this performance improvement today.
It comes at the cost of not checking configured sources for props and slots at rendering time. It is not critical, it was a "nice to have/should have" but not a "must have".
One thing to note : you had this views issue about slow rendering, because your view was not properly cached.
maybe you had caching disabled (development mode)? i am curious to hear about that setting on your side.
Because, in my understanding, the slowness you pointed is only the first time the rendering is calculated.
Comment #13
just_like_good_vibesComment #14
sea2709 commentedThanks @just_like_good_vibes,
I'll have some time tonight, I will checkout the dev version and see how it works on my project, will let you know how the performance is improved!
Comment #15
sea2709 commentedI did a test on my on-going project and the performance is improved. The rendering time for the view in which I use a Component per Item (UI Patterns) as a formatter for a View field is improved significantly. I don't see there is much change in performance in other views that are not using the Component Per Item formatter.
Thanks for working on this!
Comment #16
just_like_good_vibesthanks for your feedback, good news