class-kadence-blocks-css.php causing performance issues

  • Resolved spidrweb

    (@spidrweb)


    9 months, 1 week ago

    Hi, Hope you’re well….

    We’re experiencing significant performance issues with the Kadence Blocks plugin, specifically with the class-kadence-blocks-css.php file. According to profiling data (Query Monitor + plugin profiler), this single class accounts for nearly 3 seconds of execution time per page load.

    It appears that the plugin may be generating dynamic CSS on every request and outputting it via without any caching. This results in high server load and slower TTFB — especially problematic on high-traffic or WooCommerce sites.

    Our setup:

    • Kadence Blocks version: 3.5.11
    • WooCommerce installed
    • No caching plugins active during testing, Object Caching in place as well as Redis
    • Using Query Monitor + Plugin Performance Profiler
    1. Is there a built-in way to cache or generate static CSS files instead of inline CSS?
    2. If not, are there plans to add support for CSS file generation or transient caching?
    3. Are there hooks or filters I can use to intercept and override this behavior safely?

    Im not to familiar with the plugin, so any pointers would be helpful.

    Thanks,
    Phil

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support victormonk

    (@victormonk)

    9 months ago

    Hey @spidrweb,

    Welcome to Kadence Support!

    Typically, our products are designed to only load content that is needed for the current page. So, for example, if you have an accordion block, it will load in CSS for the accordion block and the styles. This is also true for dynamic content and all of our products/features.

    It will not load in styles for a block that’s non-existent or a feature that’s not being used. Users will typically use caching plugins to improve frontend speeds, and this is standard for really any combination of tools you use in WordPress. You can explore some popular caching options here. https://wordpress.org/plugins/search/cache/.

    To address your questions:
    1 – There isn’t a built-in way to change how our files are generated. If you can share with me a link to the page in question and let me know which blocks you are referencing, I’d be happy to take a look at things to see if anything is unexpected. Overall, this is usually something a Cache plugin would help resolve.

    2 – We do use Transient Caching in some areas of our products, but there may be room for improvement when it comes to Blocks. Our devs are currently looking into improving the speed of Kadence Blocks on the back end and front end. So, generally speaking, Kadence performance is actively being worked on for improvements. I suggest keeping an eye on the Kadence Blocks Changelog here. There is a high chance our developers will improve things that will help with the things you are describing.

    3 – There aren’t any hooks or filters to change this behavior. I suggest using an optimization plugin to help with front-end page speeds. For example, I created an entire KadenceWP website over the weekend. I got the LiteSpeed Cache plugin and applied the Advanced Preset. Afterward, my website load speeds were great. You can see them here. (The LCP score is lower than expected because my Images are not in an optimal format yet. Overall, the scores are great and were easy to achieve.)

    I hope this helps. Best regards,
    Victor

    Thread Starter spidrweb

    (@spidrweb)

    9 months ago

    Hi Victor,

    Thanks for the detailed response, much appreciated.

    Based on your feedback and our own profiling, we’re going to review and simplify the header layout. It currently includes multiple rows, navigation blocks, off-canvas menus, and dynamic elements, which appear to be triggering a heavy load of inline CSS generation on every page.

    Rather than relying on caching workarounds, we’re aiming to reduce the number of block elements and improve structural efficiency to mitigate the performance impact at the source.

    Appreciate your transparency around how Kadence handles CSS output, we’ll keep an eye on the changelog for any upcoming improvements around front-end optimisation.

    Thanks again,

    Phil

    Plugin Support michael-levelup

    (@michaeltarongoy)

    9 months ago

    Hi Phil,

    Glad to hear you were able to figure out a solution to this.

    Just keep posted on the changelog. It is public and you can check that anytime.

    Also if you aren’t subscribe, I recommend subscribing to the Kadence newsletter: https://www.kadencewp.com/newsletter-subscribe/

    New updates will be emailed to the community via the newsletter.

    Please note that you can also submit a support ticket via these channels.

    Thank you for your understanding!
     
    Kind Regards,
    Michael Taro

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘class-kadence-blocks-css.php causing performance issues’ is closed to new replies.