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:
- Load styles only for rendered blocks in a page
- Inline small styles
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:
- The wp-block-library stylesheet changes: Instead of loading the wp-includes/css/dist/block-library/style.css file which contains all styles for all blocks, this handle will now load the (much smaller) wp-includes/css/dist/block-library/common.css file, which contains generic styles like the default colours definitions, basic styles for text alignments, and styles for the .screen-reader-text class.
- Styles for blocks will only get enqueued when the block gets rendered on a page.
The above changes will only apply to the frontend of a site, so all editor styles will continue to work as they did before.
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.