WordPress 5.9 Performance Improvements

Thank you to @aristath @piyopiyofox @bph @mkaz @flixos90 @youknowriad who helped review this post. 

Whether you’re using the latest and greatest with full site editing features or not, there are performance enhancements that everyone can look forward to with WordPress 5.9 set to launch January 25th, 2022. At a high level, you can expect improvements to the Inserter, BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Themes, List View, and more. 

Editor performance

This section touches on the actual experience of creating content within the editor itself. Does the Inserter open quickly, allowing you to snag what you need? Does using List View feel smooth and snappy? These are the kinds of experiences that have been focused on and improved for 5.9. 

Inserter 

The Inserter is a very commonly used tool in the editing experience that allows you to select any block or pattern you’d like to build with. As the number of blocks and patterns grow, the Inserter needs to be able to keep up to make it easy to add what you need. To aid in usability, lazy render has been applied to the Inserter in two instances: when searching block types and patterns, and when displaying categories. 

By lazy-rendering search results, the initial results are provided faster when you search. With the same lazy-rendering approach applied to categories, they now render one by one. Both improvements allow the browser to do higher priority things and ensure a better experience (like actually opening the Inserter quickly) before continuing to take care of other processes, like displaying categories. 

Reusable Blocks

For larger sites with lots of reusable blocks, saved reusable blocks are now significantly faster when a site has thousands of them. This helps fulfill the promise of WordPress growing with you. The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. of this improvement was achieved by implementing a method that extracts the tokenizer regular expression used in package block-serialization-default-parser, and uses it to match the very first block boundary found in a reusable block’s markup.

List View

List View is an increasingly used tool to help folks navigate complex content with ease. A big part of ensuring it can be done with ease comes down to performance considerations, especially if you have a large amount of content in a page or template. When we say large, we mean it–we tested posts with 10,000 blocks. Thanks to a windowing technique that now renders a fixed number of items at a time instead of every block, the enhanced List View continues to scale as your content does. 

Front end performance

This section touches on site visitor experience and the resulting impact on SEO. Does your site render quickly? Is only what’s necessary loaded as needed? What can one do as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or theme author to ensure solid performance? While loads of things impact front end performance, there are quite a few enhancements coming to WordPress 5.9 that focus on these kinds of questions: 

Block Themes

If you’re using a Block Theme, you’ll be able to take advantage of enhanced site performance thanks to theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. enqueuing all styles from one place as a “global stylesheet”. This will reduce the amount of CSSCSS Cascading Style Sheets. shipped with a theme and result in fewer specificity wars.

Block Stylesheets & CSS Loading

In previous releases, all styles for all blocks were enqueued in a single file, leading to extra page load. With the 5.9 release, only what’s necessary is loaded when viewing content due to improvements that inline tiny stylesheets, and a tweak to only load a block’s CSS styles if the block exists on the page. Further, IE polyfills were removed from block front-facing scripts to reduce their size. By cutting down on the amount of CSS loaded, the 5.9 release increases performance and decreases loading time dramatically. 

Add additional stylesheets on a per-block basis to reduce CSS impact

Block and theme developers can now add additional stylesheets on a per-block basis instead of loading monolithic stylesheets– further reducing the CSS impact on a page. For Block developers, this allows for complex blocks to reuse styles they need from other blocks without the need to duplicate those same styles. For theme developers, you can now use a new wp_enqueue_block_style() function that allows you to register stylesheets on a per block basis to reduce any unnecessary styles loading. Here’s a dev note with more information.

Improvements to Lazy Loading images

Building on the excellent work to implement lazy loading images in WordPres 5.5, performance improvements are coming baked into WordPress 5.9 without needing any extra efforts from developers. At the core of this change is that WordPress will now skip the very first “content image or iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.” on the page from being lazy-loaded. As you can see in the comprehensive dev note that details this change, “an analysis taking into account 50 popular themes showed that the enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. brought LCP improvements across the board, up to 30% faster page load”

What do the numbers show? 

Numbers help paint a picture that words can’t always. Below is a snapshot of this release where you’ll see decreased loading times in a variety of editor areas, with only two gaining nominal loading time increases in the build.

FeatureDescriptionWP 5.6WP 5.7WP 5.8WP 5.9Diff
LoadingTime to first block (ms)3311.884773.943457.623184.38-7.90%
TypingTime to type a character (ms)54.2564.2453.6341.52-22.58%
Block selectionTime to select a block (ms)78.2166.5689.82101.89+13.44%
Inserter openingTime to open the global inserter (ms)98.91124.21134.8637.87-71.92%
SearchTime to type in the inserter search input (ms)38.8669.46124.1173.26-40.97%
HoverTime to move the mouse between two block items in the inserter (ms)37.7924.7923.5226.23+11.52%

If you’re interested in improving performance in WordPress, join the performance meetings, review the current performance related Trac and Gutenberg issues, help with the performance plugin, and test everything with performance considerations in mind.

Changelog:

  • Jan 6 2022: Updated to correct the diff values in the chart. All values were updated.

#5-9, #core-editor, #performance