No Bloat & Improved Performance

No Bloat & Improved Performance

0 Shares

Our latest release greatly improves the editor performance and experience. Stackable is now leaner and faster. Update now to version 3.5.0.

Improved Editor Performance

For the past weeks we’ve been concentrating on greatly enhancing the performance of Stackable in the Block Editor. We actually started introducing speed improvements 4 versions ago, but this by far is the biggest one.

We’ve combed through everything to identify performance bottlenecks and optimized them. We had to do some out-of-the-box thinking in order to refactor and speed things up. This resulted in a huge performance increase in the overall editing experience!

It’s not enough to say that we’ve improved the editing performance, let’s see some numbers!

We performed some tests in order to quantify just how much the performance has changed. We performed common actions one would typically do in the Block Editor and timed them. Then we compared the times from an older version of Stackable (v3.4.1) – this version was the last release before we introduced speed improvements.

Here are the parameters of our tests:

  • We created a web page that contained over 225 Stackable blocks
  • The blocks on the page are styled and are placed in different columns and in different layouts,
  • Each action was timed from the point the action was initiated to when it ended
  • We used the timer from our mobile phone (we pressed the start and clicking on the mouse at the same time, then watched like a hawk for when the action finished and quickly hit the stop button),
  • Each action was done 3 times then averaged

Here’s how our test page looked like, it contains columns, buttons, images, text, and heading blocks. These are duplicated to reach the 200+ blocks.

Our test page composed of various Stackable blocks.
Our test page composed of various Stackable blocks.

We performed the tests using a machine with the specs: AMD Ryzen 5 3500U 2.1Ghz, 16Gb RAM, using Windows 11 and Chrome. Specs aside, the most important thing to note here is that the tests were done using the same machine before and after the speed improvements so we can the relative difference in performance. Your results may vary.

ActionPerformance Improvement
(v3.4.1 vs v3.5.0)
How It Was Timed
Switching preview from Desktop to Tablet79% speed improvementFrom desktop preview, click the tablet preview button
Switching preview from Tablet to Desktop78% speed improvementFrom tablet preview, click the desktop preview button
Switching preview from Tablet to Mobile33% speed improvementFrom tablet preview, click the mobile preview button
Typing textLag decreased significantlyTyping fast on a text block
Sliding a block optionLag decreased significantlyIn a text block, slide the font size option left to right
List View dragging25% speed improvementDragging a block down from the List View
Duplicating block40% speed improvementDuplicating a columns block with nested blocks inside
Deleting a block46% speed improvementDeleting a columns block with nested blocks inside
Saving the post7% speed improvementClicking the update button and waiting for it to become active again
Autosave59% speed improvementTyping on a block, then waiting for autosave to kick in

So as you can see, the speed has drastically improved across the board with Stackable. And you can really feel the difference!

No Bloat

Another improvement is that we’ve restructured how we compiled our JavaScript code. This wasn’t a small feat, but it’s well worth it because it resulted in up to 24% decrease in total JavaScript loaded in the Block Editor.

Smaller JavaScript files mean that your browser will load less when inside the Block Editor, and the less stuff you load, the less memory your browser will consume. So this brings us some memory savings.

Graph of the decrease of JavaScript total filesize

If you notice in the chart above, the free plugin’s JavaScript total filesize actually increased by a bit – this is because of some refactored code or newly introduced optimization code. The decrease size can be better seen in the premium version of the plugin.

Another good news is that the plugin zip file saw at most a 34% decrease in filesize as well. This means faster plugin updates, and frees up a little bit more disk space.

Graph of the decrease of Stackable's plugin zip file

Frontend Performance

There are no frontend performance improvements included in this update – only the editor experience has been improved. Don’t fret though, the frontend performance is already very fast!

Just a refresher on what happens in the frontend:

  • The frontend loads one 7.1kb CSS file (the premium version loads an additional 1.7kb CSS)
  • JavaScript files are loaded only if the block or feature needs it (if you only use the essential blocks, then no JavaScript files are loaded)
  • Almost no PHP processes run for the frontend
  • CSS is grouped together and optimized to a single style tag
  • Images are lazy loaded
  • Responsive images are used for reduced image sizes in smaller screens
  • And more!

Other Fixes

Here are the other fixes which are included in this release:

  • New: Support for block theme contentSize and wideSize
  • Fixed: Wide and fullwidth blocks sometimes showed centered in the editor
  • Fixed: Some block options not showing up in the editor
  • Fixed: Column block’s Content Vertical Align not displaying correctly in the editor
  • Fixed: Icon block margin and size options not displaying correctly in the editor #2426
  • Fixed: Card block horizontal layout image resizing issues in tablet and mobile
  • Fixed: Hero block can get an error when switching layouts
  • Fixed: Accordion content in the editor overlapped sometimes
  • Fixed: Some styles did not show in the editor when changing hover states
  • Fixed: Some shadows flicker or get clipped in Safari #2328
  • Fixed: Accordions close adjacent doesn’t work with reduced motion OS setting #2352
  • Fixed: Custom Fields PHP warnings #2415
  • Fixed: Using custom SVGs with colors can sometimes cause block errors #2411

Conclusion

I hope you guys enjoy the new speed with your Stackable blocks!

If you’ve reached the end of this article, let me give you a tiny reward.. a hint about our next release: progress circle and progress bar blocks.

6 thoughts on “No Bloat & Improved Performance

  1. Benjamin.
    What pleasant and exciting news you share with us. It has always given me great pleasure to work with the Stackable tool and with this even more.

    Thank you so much for considering us and updating us on Stackable. I wish you continue to achieve great success. I send a big greeting and congratulations to all your team.

    1. Hi Ale, we’re glad to hear that you’re enjoying building with Stackable and this new update! Stay tuned for more as we have a lot more in store for Stackable users 🥳

  2. Glad that Stackable is considering the speed more than anything else. The time when people are shifting to Gutenberg, it is a nice step by Stackable to update the plugin to improve speed.

Leave a Reply

Your email address will not be published.

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