Improved Stackable Server Performance

Improved Stackable Server Performance

Our team has been hard at work on Stackable’s latest update. In this article, we break down how Stackable V3.13.0 optimized Stackable’s speed and performance PLUS other enhancements we’ve added to the plugin.

Stackable PHP Execution Times Now Up To 2x-3x Faster

V3.13.0 brings you the fastest Stackable yet. In this update, we have focused on significantly enhancing the server performance of Stackable, and we have seen up to 2x to 3x plugin code execution speed improvements!

All websites made with Stackable will benefit from this, however, the performance update is expected to be felt significantly more by those hosted on shared hosting or affordable hosting platforms, where resources are limited. By optimizing the efficiency of Stackable, this update helps to significantly reduce the load on shared servers. This gives websites faster response times both in the WordPress backend and frontend for a smoother overall user experience!

To help you visualize the improvements in Stackable, here are some speed benchmarks we made. For this, we used Code Profiler, which is a plugin that measures the PHP execution times of the plugins and themes present in a website. All tests were done on the free versions of all plugins. The names in the benchmarks are hidden since they’re not important, it’s the relative measurements that we care more about.

Benchmark #1: Stackable Before & After Update

So how much did Stackable’s execution times improve? We benchmarked the before and after the performance update of Stackable across different website and server environments and here are the results:

We tested Stackable v3.12.15 and v3.13.0 PHP execution times in the homepage in different website & server environments. Run 1: Results from our internal testing website hosted in InstaWP. Run 2: Results from our Staging site hosted in Kinsta. Run 3 & Run 4: Results from different local development environments with Local by Flywheel. Run 5: Results from a Stackable user’s live shared hosting site.

Based on the above, it’s clear that there is a huge performance increase! You’ll also see though that the amount of improvement is different per server environment. Run 2 didn’t see much of a difference as our setup there is already fast.. but run 5 which was from an actual live website removed 2 whole seconds off!

Benchmark #2: Before & After in a website

Next up, how does Stackable’s performance improvement look like in an actual fully functioning website?

We benchmarked our staging website to find out how much Stackable has improved, we kept all the plugins we’re using active – these range from security plugins, performance plugins to utility plugins. Here are the results:

This is the benchmark of our actual staging site with all the plugins we currently use. Each bar is the execution time of a plugin in the site. We then ran Code Profiler on that site’s frontend, the above is the average of 5 runs.

Our site already is performant off the bat, so the improvement that we see in terms of milliseconds shaved off is minimal. However, a small amount of improvement goes a long way if you have thousands of visitors that go to your site!

Benchmark #3: Stackable & other block libraries

So far so good, but we were also thinking: how does Stackable’s performance improvement stack up against other block libraries? We got some of the top block library plugins that have similar offerings of blocks and functionality and did a comparison. Here are the results:

We got a test website and installed different block libraries in it, and created a sample page that contained a text block (or similar) from each block library. We then ran Code Profiler on that page’s frontend, the above is the average of 5 runs.

Benchmark #4: Stackable & page builders

Now for a bit of apples to oranges comparison, we were curious on how Stackable goes against the top page builder plugins. We thought we might throw this into the mix since the Block Editor alongside Stackable is quite a capable alternative to building full websites. Here are the results:

We got a blank test website, and installed different page builder plugins in it along with Stackable. Then ran Code Profiler on the home page, the above is the average of 5 runs. Note that the home page wasn’t built using any of these plugins.

Benchmark Results

As we mentioned earlier, the results seem to be more significant if your site is using shared resources. But nevertheless, you may be able to see x2 to x3 code execution improvements with Stackable. This can improve website performance, not just in terms of speed but this will lead to a smoother user experience for you and your website visitors!

You can also test this yourself and see how Stackable’s performance has improved in your own websites. Results will vary depending on the website, hosting, and other active plugins. You can find Code Profiler in the WordPress Plugin Directory!

If you’re curious on what exactly we did to achieve this, we meticulously went through a lot of the internals of Stackable and optimized the following:

  • Database queries: We refined some long running database queries to make them faster
  • Various functions: We have fine-tuned the functions within Stackable to run more efficiently
  • Post handling: We’ve refactored how Stackable queries and deals with posts
  • Block registration: The way Stackable loads blocks has been optimized, minimizing disk reads
  • Option autoloading: We’ve removed autoload options so that they will only be loaded when needed

Prepare to experience the fastest, most efficient website building yet! Update to the latest version of Stackable and see the difference yourself.

Other Stackable Feature Updates

We have released a number of bug fix and feature updates since our last major feature update (V3.12) and we’d like to take this time to let you know about some of the significant updates we’ve introduced.

A lot of people have been asking for the Carousel block to have the option to infinitely scroll. In V3.12.12, we added the Infinite Scroll option in response to that. You will find it in the Layout panel of the Carousel block.

This new setting allows for endless scrolling of content, making it perfect for showcasing numerous slides seamlessly. See it in action:

Feature Update 2: Icon List Block Revamp

Our Icon List block has undergone a comprehensive revamp to address user feedback regarding the difficulty of aligning and sizing icons.

In our revamped Icon List block, we’ve introduced enhanced alignment options to give you more control over the appearance of your lists.

Here’s a breakdown of how these alignment options work:

  • List Item Alignment: This option applies to each individual list item within the list. If “Right” is selected, for instance, each item will align to the right within the list.
  • List Alignment: This option is available when the “Full Width” toggle is turned off. It controls the alignment of the entire list within its container. Choosing “Center” will center the whole list horizontally on your page.

Additionally, the Icon Vertical Alignment control adds another layer of customization. This adjusts the vertical position of the icons relative to the list item content. Whether aligned at the top, middle, or bottom, this setting positions the icons harmoniously with the Icon List block’s text.

The Icon List block now comes with the option to have borders between each list item. These are available in styles such as solid, dashed, or dotted. Like all border controls within Stackable, you can customize the thickness (Border Width) and color (Border Color).

Feature Update 3: Columns Can Now Wrap in Desktop

Previously, the Columns block only supported wrapping in mobile and tablet views. Recognizing the need for more versatile design options, we have extended this functionality to desktop views as well!

Users can access the “Allow Column Wrapping” toggle in the layout panel. When enabled, additional controls will appear beneath the toggle, providing the option to adjust the width of each column individually.

This ensures that users can precisely tailor the column layout to meet specific design needs and preferences.

Feature Update 4: Color Picker Opacity and Gradient Picker

Our updated gradient color picker now features multiple color stops and customizable angles, enhancing design flexibility. This tool is available in most Stackable settings involving color, allowing users to create intricate and dynamic color gradients that perfectly match their site’s aesthetic.

Additionally, the color opacity control was moved inside the color picker. This makes for a more efficient design workflow since all color settings are now located in one place.

Other Notable Feature Updates

The 4 above are the most asked for features that we’ve released, but here are the other features that we have been able to push out:

  • Dynamic Content post search improvements
    • While picking which post to display dynamic content from, searching by post ID is now better handled, and more search matches will now appear in the post picker.
  • WooCommerce Product Description new option
    • We added the option to disable stripping of HTML tags in the Product Description field if you need to preserve any HTML formatting when displaying them.
  • Images and background images can now be inputted via URL
    • Now you are not forced to use an image from your Image Library for image blocks and background images, you can use any URL.
  • Accordion Block
    • We’ve upgraded the Accordion block with improved schema to enhance its functionality as a Q&A section. This feature addition was highly requested by users. When a group of accordions is used as an FAQ section, this will make it easier for search engines to recognize it as so.
    • You can now assign anchor links to Accordion blocks. This allows for direct navigation to the accordion and its automatic opening. This streamlines user experience and access to information.
  • Better Border Controls
    • Border customization has been refined, with options to adjust each corner’s radius individually. The border color picker also now includes an opacity slider, giving you more precise control over the border effects.

Conclusion

This update not only boosts the speed and performance of Stackable blocks but it also brings a host of new features and improvements.

From the infinite scrolling of the Carousel block to the more flexible and aesthetically pleasing Icon List block. Every feature has been designed to make your web building experience with Stackable more intuitive and enjoyable.

Update to the latest version today and unlock these powerful new capabilities to create stunning, efficient websites!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.