{"id":25476,"date":"2022-10-04T10:54:50","date_gmt":"2022-10-04T15:54:50","guid":{"rendered":"https:\/\/wpstackable.com\/?p=25476"},"modified":"2022-10-04T22:42:55","modified_gmt":"2022-10-05T03:42:55","slug":"improved-performance","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/improved-performance\/","title":{"rendered":"No Bloat &#038; Improved Performance"},"content":{"rendered":"\n<p data-block-type=\"core\">Our latest release greatly improves the editor performance and experience. Stackable is now leaner and faster. Update now to version 3.5.0.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Improved Editor Performance<\/h2>\n\n\n\n<p data-block-type=\"core\">For the past weeks we\u2019ve 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.<\/p>\n\n\n\n<p data-block-type=\"core\">We\u2019ve 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!<\/p>\n\n\n\n<p data-block-type=\"core\">It\u2019s not enough to say that we\u2019ve improved the editing performance, let&#8217;s see some numbers!<\/p>\n\n\n\n<p data-block-type=\"core\">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) &#8211; this version was the last release before we introduced speed improvements.<\/p>\n\n\n\n<p data-block-type=\"core\">Here are the parameters of our tests:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>We created a web page that contained over <strong>225 Stackable blocks <\/strong><\/li><li>The blocks on the page are styled and are placed in different columns and in different layouts,<\/li><li>Each action was timed from the point the action was initiated to when it ended<\/li><li>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),<\/li><li>Each action was done 3 times then averaged<\/li><\/ul>\n\n\n\n<p data-block-type=\"core\">Here&#8217;s how our test page looked like, it contains columns, buttons, images, text, and heading blocks. These are duplicated to reach the 200+ blocks.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image-818x1024.png\" alt=\"Our test page composed of various Stackable blocks.\" class=\"wp-image-25492\" width=\"614\" height=\"768\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image-818x1024.png 818w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image-240x300.png 240w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image-768x962.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image-1226x1536.png 1226w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/image.png 1402w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><figcaption>Our test page composed of various Stackable blocks.<\/figcaption><\/figure><\/div>\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\" data-block-type=\"core\"><table><thead><tr><th>Action<\/th><th>Performance Improvement<br>(v3.4.1 vs v3.5.0)<\/th><th>How It Was Timed<\/th><\/tr><\/thead><tbody><tr><td>Switching preview from Desktop to Tablet<\/td><td><strong>79%<\/strong> speed improvement<\/td><td>From desktop preview, click the tablet preview button<\/td><\/tr><tr><td>Switching preview from Tablet to Desktop<\/td><td><strong>78%<\/strong> speed improvement<\/td><td>From tablet preview, click the desktop preview button<\/td><\/tr><tr><td>Switching preview from Tablet to Mobile<\/td><td><strong>33%<\/strong> speed improvement<\/td><td>From tablet preview, click the mobile preview button<\/td><\/tr><tr><td>Typing text<\/td><td>Lag <strong>decreased<\/strong> significantly<\/td><td>Typing fast on a text block<\/td><\/tr><tr><td>Sliding a block option<\/td><td>Lag <strong>decreased<\/strong> significantly<\/td><td>In a text block, slide the font size option left to right<\/td><\/tr><tr><td>List View dragging<\/td><td><strong>25%<\/strong> speed improvement<\/td><td>Dragging a block down from the List View<\/td><\/tr><tr><td>Duplicating block<\/td><td><strong>40%<\/strong> speed improvement<\/td><td>Duplicating a columns block with nested blocks inside<\/td><\/tr><tr><td>Deleting a block<\/td><td><strong>46%<\/strong> speed improvement<\/td><td>Deleting a columns block with nested blocks inside<\/td><\/tr><tr><td>Saving the post<\/td><td><strong>7%<\/strong> speed improvement<\/td><td>Clicking the update button and waiting for it to become active again<\/td><\/tr><tr><td>Autosave<\/td><td><strong>59%<\/strong> speed improvement<\/td><td>Typing on a block, then waiting for autosave to kick in<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p data-block-type=\"core\">So as you can see, the speed has drastically improved across the board with Stackable. And you can really feel the difference!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">No Bloat<\/h2>\n\n\n\n<p data-block-type=\"core\">Another improvement is that we\u2019ve restructured how we compiled our JavaScript code. This wasn&#8217;t a small feat, but it&#8217;s well worth it because it resulted in <strong>up to 24% decrease<\/strong> in total JavaScript loaded in the Block Editor.<\/p>\n\n\n\n<p data-block-type=\"core\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"762\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize-1024x762.jpg\" alt=\"Graph of the decrease of JavaScript total filesize\" class=\"wp-image-25481\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize-1024x762.jpg 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize-300x223.jpg 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize-768x571.jpg 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize-1536x1142.jpg 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/JavaScript-Total-Filesize.jpg 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><br><\/figcaption><\/figure>\n\n\n\n<p data-block-type=\"core\">If you notice in the chart above, the free plugin\u2019s JavaScript total filesize actually increased by a bit &#8211; 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.<\/p>\n\n\n\n<p data-block-type=\"core\">Another good news is that the plugin zip file saw at most a <strong>34% decrease<\/strong> in filesize as well. This means faster plugin updates, and frees up a little bit more disk space.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\" data-block-type=\"core\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"799\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize-1024x799.jpg\" alt=\"Graph of the decrease of Stackable's plugin zip file\" class=\"wp-image-25483\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize-1024x799.jpg 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize-300x234.jpg 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize-768x599.jpg 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize-1536x1198.jpg 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/Plugin-Zip-Filesize.jpg 1682w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Frontend Performance<\/h2>\n\n\n\n<p data-block-type=\"core\">There are no frontend performance improvements included in this update &#8211; only the editor experience has been improved. Don&#8217;t fret though, <strong>the frontend performance is already very fast<\/strong>!<\/p>\n\n\n\n<p data-block-type=\"core\">Just a refresher on what happens in the frontend:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>The frontend loads one 7.1kb CSS file (the premium version loads an additional 1.7kb CSS)<\/li><li>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)<\/li><li>Almost no PHP processes run for the frontend<\/li><li>CSS is grouped together and optimized to a single style tag<\/li><li>Images are lazy loaded<\/li><li>Responsive images are used for reduced image sizes in smaller screens<\/li><li>And more!<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Other Fixes<\/h2>\n\n\n\n<p data-block-type=\"core\">Here are the other fixes which are included in this release:<\/p>\n\n\n\n<ul class=\"wp-block-list\" data-block-type=\"core\"><li>New: Support for block theme contentSize and wideSize<\/li><li>Fixed: Wide and fullwidth blocks sometimes showed centered in the editor<\/li><li>Fixed: Some block options not showing up in the editor<\/li><li>Fixed: Column block&#8217;s Content Vertical Align not displaying correctly in the editor<\/li><li>Fixed: Icon block margin and size options not displaying correctly in the editor #2426<\/li><li>Fixed: Card block horizontal layout image resizing issues in tablet and mobile<\/li><li>Fixed: Hero block can get an error when switching layouts<\/li><li>Fixed: Accordion content in the editor overlapped sometimes<\/li><li>Fixed: Some styles did not show in the editor when changing hover states<\/li><li>Fixed: Some shadows flicker or get clipped in Safari #2328<\/li><li>Fixed: Accordions close adjacent doesn&#8217;t work with reduced motion OS setting #2352<\/li><li>Fixed: Custom Fields PHP warnings #2415<\/li><li>Fixed: Using custom SVGs with colors can sometimes cause block errors #2411<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" data-block-type=\"core\">Conclusion<\/h2>\n\n\n\n<p data-block-type=\"core\">I hope you guys enjoy the new speed with your Stackable blocks!<\/p>\n\n\n\n<p data-block-type=\"core\">If you&#8217;ve reached the end of this article, let me give you a tiny reward.. a hint about our next release: <em>progress circle and progress bar blocks<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our latest release greatly improves the editor performance and experience. Stackable is now leaner and faster. Update now to version 3.5.0.<\/p>\n","protected":false},"author":1,"featured_media":25478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-25476","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/10\/No-Bloat-Improved-Performance.jpeg",1200,624,false]},"post_excerpt_stackable_v2":"<p>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\u2019ve 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\u2019ve 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\u2019s not enough&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Benjamin Intal","url":"https:\/\/wpstackable.com\/blog\/author\/gambit\/"},"comments_num_v2":"6 comments","acf":[],"modified_by":"Benjamin Intal","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/25476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=25476"}],"version-history":[{"count":12,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/25476\/revisions"}],"predecessor-version":[{"id":25495,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/25476\/revisions\/25495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/25478"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=25476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=25476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=25476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}