WordPress 5.8 brings sustainable enhancements

It seems that WordPress is making some more positive steps to make the platform more sustainable, in the form of performance upgrades and improvements in support of modern web image formats.

Two of these updates in particular will help towards creating more performant, smaller websites that will help to cut the carbon impact of websites created with core functionality.

WebP is now supported in core

The first is the inclusion of support for WebP image formats into core functionality.

You will need to create or convert your images to WebP format before uploading to WordPress. In terms of how the process works from that point, it is exactly the same as using other image formats. You can now upload WebP images into the Media Library and use them like any other image when adding to pages and posts.

The great thing is that the animated features of WebP are also supported so you can replace heavy GIFs with much much smaller WebP versions.

The only caveat is that ‘WebP support in the media library requires that your web server’s image processing library (WordPress supports both Imagick and LibGD) supports the WebP format’.

Support for WebP

Browser support for WebP is really good now. Only legacy browsers don’t support them (and Safari pre Mac OS 11). If you need to support these older browsers you would need to include a polyfill. Alternatively, add a plugin such as WebP Express, which allows you to upload your optimised JPEG or PNG images and convert them within WordPress automatically upon upload. The plugin also automatically adds WebP images within your theme whilst falling back to JPEG or PNG versions using the picture element and different sources.

For more information, please see the Make WordPress blog post on WebP.

Performance improvements in Gutenberg block styles loading

The second is new Gutenberg block loading enhancements. WordPress 5.8 improves the way the platform loads block-styles by introducing 2 new features:

The first is an opt-in feature. Within your custom theme, or child theme’s functions file, include this line.

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

Before WordPress 5.8, all blocks styles were combined and included in a style.css file that is loaded on every page. By opting-in to the new separate style loading, the following will happen:

A few theme development caveats

There are a few additional points raised within the Make WordPress blog post which are useful for theme developers. Elements such as pointing out the difference of block and classic theme styles and how and where these new, smaller files will load. Have a read of the full article before implementing on a live website.

With these improvements, we hope to see the start of lighter WordPress sites in the near future. For more WordPress related tips, read our WordPress snippets to reduce page load and Delivering WordPress in 7kb resources.

What to read next

More from our resources, blogs and case studies

Find this resource useful?

I hope so. I want everyone to be able to benefit from articles like this one. That is why I'm kindly asking for your support.

These resources take time to research and write. The site is run by one person, with occasional volunteer contributors in spare time. Please consider supporting the project if you can.

Plant a tree with Ecologi or Donate £3