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.
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.
(v3.4.1 vs v3.5.0)
|How It Was Timed
|Switching preview from Desktop to Tablet
|79% speed improvement
|From desktop preview, click the tablet preview button
|Switching preview from Tablet to Desktop
|78% speed improvement
|From tablet preview, click the desktop preview button
|Switching preview from Tablet to Mobile
|33% speed improvement
|From tablet preview, click the mobile preview button
|Lag decreased significantly
|Typing fast on a text block
|Sliding a block option
|Lag decreased significantly
|In a text block, slide the font size option left to right
|List View dragging
|25% speed improvement
|Dragging a block down from the List View
|40% speed improvement
|Duplicating a columns block with nested blocks inside
|Deleting a block
|46% speed improvement
|Deleting a columns block with nested blocks inside
|Saving the post
|7% speed improvement
|Clicking the update button and waiting for it to become active again
|59% speed improvement
|Typing 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!
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.
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)
- 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!
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
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.