Over the past six months, a number of our performance specialists at XWP have been supporting teams at Google and Yoast to build and launch the WordPress Performance Lab plugin and work on WordPress Core Performance.
Performance Lab plugin is a collection of modules designed to monitor and enhance the performance of your WordPress site, many of which will eventually be merged into WordPress core. The plugin allows you to individually test each functionality on your own install before they become available in WordPress Core, test that they work as expected, add improvements and provide feedback.
The History of Performance Lab Plugin
In October 2021, Google and Yoast WordPress contributors posted a proposal to create a dedicated performance team that would be responsible for improving speed and performance in WordPress Core. The proposal was well-received, and in November, work began on the official Performance Lab plugin.
Noticing the opportunity to lend our performance expertise, a number of our WordPress Core Contributors joined the team and set to work on building the first stable release of the plugin.
On the 18th of April 2022, the WordPress Performance Lab Plugin version 1.0.0 was released publicly, to much adoration from the WordPress community. At the time of writing (one week after release), it already has over 14,000 downloads and a sturdy 4.9-star rating.
XWP’s Recent Contributions to the Performance Lab Plugin
Representatives from XWP’s performance team have worked on a number of tickets for the Performance Lab plugin, but efforts were primarily focused on two key areas: Object caching and image performance.
Low-Quality Image Placeholders
When looking into improving user activity metrics, you quickly come to learn how important perceived speed is. Any millisecond where a user can’t see that something is loading, you run the risk of losing them forever.
So, in order to help WordPress users render their content more quickly, the team started work on new functionality to display a blurred version of an image before its full version has had the chance to download into the browser.
After running a thorough discovery process, however, the team found that all the libraries that were necessary to create such a functionality required PHP 7.3+, whereas WordPress still supports down to PHP 5.6.
Ensuring that the Performance Lab plugin works on all PHP versions currently supported by WordPress is important, as many of the modules will eventually be merged into WordPress Core. So, a novel solution was required.
To overcome this challenge, they created a function that, on upload, determines the dominant color of an image, caching the information and displaying it as a placeholder.
This is also the most performance-friendly way of handling this issue. Instead of loading a pixelated version, (which would require a greater amount of compute power to generate) the code behind the scenes for the color-picking functionality is nimble, and can be called upon with a single line of CSS.
“People like to see progress on their requests, and they get frustrated when they feel like nothing’s happening—when the screen’s just white. That’s why Time to First Paint is so important. It’s all about the first time you actually see something on the page.”
-Jonny Harris, XWP Core Performance Contributor
There are numerous other advantages to having the dominant color of an image available, including:
- Dynamically set CSS styling by calling on image color
- Improve CWV metrics for TTFP
- Programmatically overlay text on a cover image, based on W3 contrast standards
- Automatically to-add image color information for alt text
Object Caching and Database Performance.
The XWP performance team also worked on a WordPress core patch to improve object caching. The primary focus of this was to audit and fix the existing caches to reuse caches where possible.
This means that if data is queried, and subsequently cached, and then the same or similar queries are requested again, the same cache can be reused. The result of this is far fewer queries on the database and less memory used on-page.
Per average page requests, there are around 56 database queries performed by WordPress core. After the performance improvements, our team managed to get this number down to around 46— Now, to those who aren’t well-versed in technical performance, 10 queries per page might not sound like a lot, but consider that’s a fifth of the total page database queries.
This has numerous benefits: Pages load faster, less memory (RAM) on the server is used to display the page, and there is less load on the database server, so that if your site is ever victim to a DDOS attack, you will stay online for longer.
But potentially the most exciting part of this development is that it is completely scalable: The more stuff that’s on the page, the more savings you get.
This can be seen in the work the XWP performance team did in relation to menus, where all terms and posts are loaded and linked to menu items in one request. Instead of generating lots of queries, we are now able to achieve the same result with only two queries (one for terms and one for posts).
The effect of performance brought about by this change was so profound, that our XWP performance team went on to then commit this to WordPress core. Learn more about XWP’s contributions to WordPress Core.
Check out Caching improvements in WordPress 6.0 and Taxonomy performance improvements in WordPress 6.0 dev notes on the Make Blog
Check Out Our Latest Technology Blog Posts
How to Build a Rocket: Best Practices for Better Web Performance
The Future Is Open: State of the Word 2021
Use PHP to Wait for Docker Service Dependencies
Is that Plugin Secure?
Contribute to the WordPress Performance Team
Initiatives like WordPress Performance Lab are only made possible through the contributions of talented community members, willing to lend a hand.
If you’re well-versed in technical performance and want to help the team achieve their goal of making the WordPress ecosystem more performant than ever, get started quickly by checking out the performance focus or joining a bug scrub. There are also more opportunities to help on the WordPress reports page, like patches that need to be tested, and feature projects.
The team uses Slack for real-time communication. Contributors are all over the world, so there are discussions happening at all hours of the day. Their core development meetings are every Wednesday at 20:00 UTC in the #core channel on Slack. Anyone can join and participate or listen in!
You can also follow the latest WordPress Performance team updates under the performance tag on the WordPress Core blog, or join the #performance slack channel for WordPress Core.
