Performance issue when using the formatter "Component per item (UI Pattern)"

Created on 9 October 2024, 6 months ago

Problem/Motivation

I run into some performance issues when using UI Patterns to set up some views and the view rendering time is pretty high.

Steps to reproduce

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:

  • Content: Title
  • Content: Image
  • Content: Body
  • Content: Tags (this field has a formatter as Component per item (UI Pattern), the formatter component is Badge with Variant default

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!

πŸ’¬ Support request
Status

Active

Version

2.0

Component

UI Patterns Field Formatters [2.x only]

Created by

πŸ‡ΊπŸ‡ΈUnited States sea2709 Texas

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @sea2709
  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    Hello, thank you for your issue.
    which version of the ui_patterns module please ?
    thank you

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    If i understand well your issue, your problem is occuring only after the clear the cache.
    if you don't clear the cache just before measuring, how the time compared to the one you have measured?

    i explain : when you clean the cache, you clean a lot of cached things by the ui patterns module. there is a "fixed cost", occuring only one time, after cache rebuild. please report to us the number just after cache rebuild, but please repeat the render operation several times to erase the "fixed cost" introduced by complete cache cleaning.

    thank you

  • πŸ‡ΊπŸ‡ΈUnited States sea2709 Texas

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

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    thank you very much.
    We will investigate and propose something soon.

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    I 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?

  • @just_like_good_vibes opened merge request.
  • πŸ‡ΊπŸ‡ΈUnited States sea2709 Texas

    @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?

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    Hello,
    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?

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

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

  • πŸ‡ΊπŸ‡ΈUnited States sea2709 Texas

    Thanks @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!

  • πŸ‡ΊπŸ‡ΈUnited States sea2709 Texas

    I 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!

  • πŸ‡«πŸ‡·France just_like_good_vibes PARIS

    thanks for your feedback, good news

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024