High CPU usage when using custom styles and custom style compatibility issues

[xiayesuifeng]

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug

1. High CPU usage when using custom styles and very slow on mobile devices but not much on PC
2. My custom styles are broken after updating to v2.5.0-beta.1, and the problem remains in beta.2

I think one of the reasons for high CPU usage is the use of custom styles. On a separate dashboard, there is only a list of room cards and the corresponding pop-up cards. When using custom styles, the CPU usage can sometimes be as high as 35%. Without custom styles, it is much lower (10-14%), and it is much faster on mobile devices. My dashboard uses a lot of pop-up cards, and the CPU usage is even higher, 60%.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

YAML
If applicable, add any relevant YAML code.

square: false
type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F1 大厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f1_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: fan.211106241022386_fan
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f1-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 客厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: media_player.sony_xr_75x95el_2
        icon: mdi:youtube-tv
        tap_action:
          action: toggle
        hold_action:
          action: navigate
          navigation_path: "#f2-tv-remote"
      - entity: cover.dooya_f2_livingroom_balcony_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 头房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_front_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - icon: ""
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
        entity: climate.f2_front_bedroom_climate
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-front-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F2 尾房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f2_back_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
        entity: cover.dooya_f2_bedroom_2_cover
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f2-back-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 客厅
    icon: mdi:sofa
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.f3_livingroom_covers
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 头房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_front_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.dooya_f3_front_bedroom_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-front-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F3 尾房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f3_back_bedroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.f3_back_bedroom_covers
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
      - entity: climate.f3_wei_fang_leng_qi
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f3-back-bedroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: F4 客厅
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_livingroom_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f4-livingroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: 客房
    icon: mdi:bed
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_guest_room_lights
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#f4-guestroom"
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: 家庭影院
    icon: mdi:youtube-tv
    show_icon: true
    show_name: true
    scrolling_effect: true
    card_layout: normal
    styles: |
      .bubble-button-card-container {
        height: 100px;
      }

      .bubble-button-card,
      .bubble-range-slider,
      .bubble-button-background {
        flex-wrap: wrap;
      }

      .bubble-sub-button-container {
        justify-content: center;
        width: 100%;
        bottom: 8px;
        left: 0px;
      }
    sub_button:
      - entity: light.f4_home_cinema_lights_fully_on_off
        name: ""
        show_name: false
        show_background: true
        icon: mdi:lightbulb-group
        tap_action:
          action: toggle
      - entity: cover.dooya_f4_home_cinema_cover
        icon: mdi:curtains
        tap_action:
          action: toggle
        show_background: true
        show_icon: true
        hold_action:
          action: more-info
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#home-cinema"
columns: 2
title: 区域

dashboard yaml
https://pastebin.com/gUHKi4Bu

Informations (please complete the following information):

• OS: ArchLinux
• Browser/App: chromium
• Bubble Card version: 2.5.0-beta.2
• Home Assistant version: 2025.2.1

Additional context
Add any other context about the problem here.
use styles

no use styles

2.mp4

After v2.5.0-bate.1 update

Before v2.5.0-bate.1 update

Thank you! 🍻

[Clooos]

Hi! Have you tried the latest v2.5.0-beta.4 for your styling issues?

And for your CPU issue, you should try to move most of your custom styles into modules, or directly under default: in the bubble-modules.yaml file. This should improve performance a lot 🙂

Edit: One more question, was your CPU usage lower in the previous v2.4.0?

[xiayesuifeng]

The style issue has been fixed since v2.5.0-beta.3. The high CPU usage issue has existed for months, long before v2.3.0

[Clooos]

This is weird, because you seem to only have simple custom styles. I will check if I can optimize that for custom styles without templates.

[xiayesuifeng]

In v2.5.0-beta.5, I moved the custom styles into modules, and the CPU usage was improved, down to around 35, and the pop-up cards on mobile devices were much faster on the pure room card list and several corresponding pop-up cards, but the button triggering speed was still relatively slow. There was not much difference on my complete dashboard. And after updating to v2.5.0-beta.7, the CPU usage increased by 10%, and the memory usage was even higher.

[Clooos]

Do you have card-mod installed? Someone said recently that he fixed his performance issue by removing it.

And good to know for the higher CPU usage in the latest beta, I will revert some code then 👌

[xiayesuifeng]

I have card-mod v3.4.0 installed, I've tried removing it but it didn't change anything

[xiayesuifeng]

There is also a bit of lag when editing. Clicking Save will be stuck for a long time. In fact, it has been saved soon and it is still spinning. Force F12 has taken effect. Because I don't edit often, I don't know which version started. A previous version was normal.

This is the error reported by the console when saving

[Clooos]

You seems to have a lot of errors with Apex charts, I don't see any errors from Bubble Card in these logs.

[xiayesuifeng]

I think this is not a problem caused by apexcharts. After uninstalling apexcharts, the problem still exists.