New Feature Performance Optimization (Beta) Explained

  • alexandermatienkogmailcom

    (@alexandermatienkogmailcom)


    3 years, 10 months ago

    Since Getwid version 1.7.0, we added a new feature aimed to optimize the block assets (CSS/JS) loading on the website.

    Now, these assets are loaded only when a block is on the page, but this feature is still in beta.

    To activate the optimization process, go to Dashboard > Settings > Getwid. You’ll notice two options in the Performance Optimization section:

    1) “Load CSS and JS of blocks on demand”
    If this option is on, all CSS and JS files of blocks will be loaded on demand in footer. This will reduce the amount of heavy assets on the page.

    2) “Aggregate all CSS files of blocks in header”
    If this option is on, all CSS files of blocks will be moved to header for better theme compatibility. If your theme has custom styling for Getwid blocks, its styles will be applied first.

    This means block styles will be loaded before the theme styles allowing your theme to style these blocks.

    For this feature, we used the same optimization approach as in the Autoptimize plugin by Frank Goossens (futtta).

    It’s worth mentioning that this optimization now works only on the frontend. In the block editor, all block assets are loaded as before.

    We tested the optimization option for cases when the blocks are used as inner blocks, reusable blocks and in widget zones. We also made sure that this feature works with popular optimization plugins, such as Autoptimize, Hummingbird, LiteSpeed Cache, and W3 Total Cache.

    If you use other optimization plugins or techniques and face any issues, feel free to disable the optimization feature in Getwid and notify us about the problem.

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

  • Seems to work just fine here! Great idea! ?? Much easier solution than manually filtering assets.

    If we disable some Getwid Block in “Getwid Settings” in WordPress, will this have an impact on front-end performance ?
    Thanks for your answer

    • This reply was modified 3 years, 9 months ago by mabflot. Reason: notification of replies via email

    @mabflot I’m not the developer, but using Getwid on my personal blogs. It appears to me, that Getwid is only loading the code necessary for the blocks actually used on a page/post.

    For instance, I’m using the Progress Bar in a blog post, but not the other Getwid blocks enabled in the editor, and on the front-end, only a tiny block specific piece of JavaScript is loaded (screenshot: https://snipboard.io/6ZEtMu.jpg) – not code of other blocks not used in the blog post.

    Meaning that disabling blocks in the Getwid Settings, is more about removing clutter from the block inserter, keeping things tidy. The front-end performance is already as fast as can be.

    Those are my personal observations – hopefully the developer can confirm or clearify.
    Bjarne

    Thanks Bjarne !!! ??

    Hey @alexandermatienkogmailcom, congratulations for the effort on making the assets loading more efficient. Things are working fine here as well, GetWid is awesome.

    As a plugin developer, I’m also implementing something similar to my blocks. We are using conditioner.js to check the presence of our blocks in the DOM before dynamically requiring the assets. It seems to be working the same… I wonder if you could tell me about any challenge that you guys may have faced regarding optimization plugins. Did you need to do any specific hack to avoid conflicts?

    Thread Starter alexandermatienkogmailcom

    (@alexandermatienkogmailcom)

    I wonder if you could tell me about any challenge that you guys may have faced regarding optimization plugins. Did you need to do any specific hack to avoid conflicts?

    No, we didn’t.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘New Feature Performance Optimization (Beta) Explained’ is closed to new replies.