WordPress 5.9 Performance Improvements – WPQuickies

In this lunchtime #WPQuickies, I’ll look through some improvements included in WordPress 5.9.

This is a demonstration of WordPress 5.9. Best to watch the video above.

🌟Highlights:

• WordPress performance
• New Libraries

We’ve been looking at WordPress 5.9 over the past few weeks and this is the last 5.9 topic.  Let’s see what performance improvements have been included.

Lazy Loading

Probably the biggest overall performance improvement bundled in WordPress 5.9 is the change in Lazy Loading.

For those who don’t know what lazy loading is.  It’s when the browser only loads images that are in the viewable area of the browser.  As you scroll through the viewable area, images are dynamically loaded.

Lazy loading was introduced in WordPress 5.5 and by default, all images, and iframes, were set to lazy load with the “loading=”lazy” HTML attribute.

However, the good fellows at Google found out that under certain circumstances lazy loading of all images can actually slow down overall space loading speed, specifically, it can increase the Google Core Web Vitals Largest Contentful Paint (LCP) metric.

Ref: https://make.wordpress.org/core/2021/07/15/refining-wordpress-cores-lazy-loading-implementation/ 

Ref: https://web.dev/lcp-lazy-loading/ 

The core team didn’t want to simply remove lazy loading from all images as there are clear speed benefits in most cases. 

They decided that the most optimal performance was to remove the loading=”lazy” attribute for all images above the fold (that’s above the bottom of the display area), and simply just let the browser load these in as default.

However, as lazy loading tags are applied in the HTML markup by WordPress running on the server, WordPress doesn’t know which images are above or below the fold.  That’s browser territory.

So the compromise delivered in WordPress 5.9 is to remove the loading=”lazy” attribute from the first content image or iframe.

The term “content image or iframe” here denotes any image or iframe that is found within the content of any post in the current main query loop as well as any featured image of such a post and it’s applied to “singular” and “archive” content.

An analysis conducted on 50 popular WordPress themes found that this solution leads to considerable performance improvements and pages loading up to 30% faster.

That’s a huge speed improvement!

Theme developers can now use the new ‘wp_omit_loading_attr_threshold’ filter to change the number of images/iframes to be skipped from lazy loading.

theme.json = Less CSS Loaded

The introduction of theme.json for global settings and styles should lead to less theme CSS being loaded as blocks and other components can reference the global settings defined in the theme.json file.

The theme.json file allows for CSS template parts to be loaded further reducing the need for large single CSS files.  That is, once theme developers embrace theme.json and modify their themes.

I reckon a lot of theme developers will be “watching this space” before jumping in to modify their themes.

Multiple Stylesheets Per Block

WordPress 5.9 allows theme developers to register multiple stylesheets at a block level.

The idea behind this is that less stylesheet information needs to be loaded per page, just in case a block may be used.

By registering a stylesheet for a block, the stylesheet can be loaded in only if the block is being used and rendered onto the screen.

This is going to bring a huge performance update if you are using blocks on your website and once the big block themes and plugins start to implement this.

For example, the Ultimate Addons for Gutenberg plugin offers a whole suite of blocks and there’s a lot of CSS being loaded in just in case one of the blocks may be used.

Having multiple smaller stylesheets loaded in at a block-level can be handled effortlessly with HTTP2 enabled web servers.

Using multiple stylesheets per block

Theme and block developers can use the new wp_enqueue_block_style function.

wp_enqueue_block_style()

Block Browser

The last big performance improvement that you will notice is in the block browser.

That’s the LHS area where you search and choose blocks from.

Since WordPress 5.9, block types, patterns, and categories are lazily rendered in the Block Inserter. It should be a lot faster to render and display data in this area leading to faster editing times.

Other Enhancements: Locking

I thought I’d also throw in a couple of cool new features for developers that appeared in WordPress 5.9

Theme and block developers can now lock templates and individual blocks.

Template locks are inherited so if there are blocks in a locked template, these blocks become locked also.

If you don’t want to apply a lock to the entire template, you can lock individual blocks. 

See this example of block locking: https://make.wordpress.org/core/files/2021/09/site-logo-crop.mov.

Template and block locking allows theme developers to ensure that critical functionality is not removed.  A use case for this would be an e-commerce shopping cart template.

In this case, you need to ensure that a customer can checkout but at the same time you want to give the site owner the flexibility to move blocks around, maybe insert other blocks in between them.

Block locking removes the “Remove Block” option.

Ref: https://make.wordpress.org/core/2021/10/01/whats-new-in-gutenberg-11-6-29-september/#:~:text=Locking%20control%20at%20block%20level

Locking Blocks in WordPress 5.9

Other Enhancements: theme.json API

Another enhancement for developers are two new PHP function which reads the theme.json file.

wp_get_global_settings( $path = array() , $context = array() );

wp_get_global_settings()

wp_get_global_styles( $path = array(), $context = array() );

wp_get_global_styles()

Note, there are no equivalent set functions at the moment.

Summary

 Four top performance improvements which shipped with WordPress 5.9 and a couple of cool enhancements for developers.

That ends the mini-series looking at WordPress 5.9.

Do you still have questions about WordPress 5.9 performance improvements?

Ask in the comments below.

#WPQuickies

Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.

Broadcasting live on YouTube and Facebook.

Suggest a #WPQuickies Topic

If you have a WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.

https://forms.gle/mMWCNd3L2cyDFBA57

Watch Previous WPQuickies