The WordPress Core Performance Team released two plugins that speed up webpages with new technologies that pre-render URLs before a user clicks on a link and speeds up lazy-loaded images.
WordPress Core Performance Team
The WordPress Core Performance Team is responsible for coordinating with the different WordPress core development teams for the purpose of improving performance and also to work on projects that directly impact improving core WordPress performance.
The initial plan for the Performance Team consisted of:
- lead the working groups formation
- coordinate the initial administrative tasks (slack channel, weekly meetings, schedule working groups representative nominations, etc.)
- create a mission statement for the team
- coordinate the areas to tackle
- outline the scope and the roadmap
WordPress Performance Plugins
Some of the performance improvements to WordPress are first tested in plugins before they are subsequently integrated into a future version of WordPress.
Users who download the plugins are able to be the first in the world to use and benefit from the webpage speed improvements and it is expected (hoped) that those who are using the plugins will also provide feedback on their experiences, both positive and negative.
The first and most popular plugin released by the Performance Team is the Performance Lab plugin that features five modules that can be turned on or off depending on user needs.
The current modules of the Performance Lab plugin are:
- Dominant Color Images:
Adds support to store the dominant color of newly uploaded images and create a placeholder background of that color. - WebP Support Health Check:
Adds a WebP support check in Site Health status. - WebP Uploads:
Creates WebP versions for new JPEG image uploads if supported by the server. - Enqueued Assets Health Check:
Adds a CSS and JS resource check in Site Health status. - Autoloaded Options Health Check:
Adds a check for autoloaded options in Site Health status
Two New Performance Plugins
The two brand new plugins that were announced today are:
- Auto-sizes for Lazy-loaded Images
- Speculation Rules
The two plugins improve performance in two different ways which means that they can both be used to gain the most amount of improvements.
New WordPress Auto-Sizes Plugin
Lazy-loading is a performance optimization technique that defers (pauses) the loading of non-critical images to improve page loading times. Images that are necessary for rendering the visible part of the webpage are loaded first while the ones that are not necessary are deferred until the user scrolls and the images are needed.
What this plugin does is integrates a new lazy loading HTML attribute called sizes=”auto” that sets the “sizes” attribute to “auto” for lazy-loaded images using ‘srcset’ and speeds up the downloading for images that will be needed when the user scrolls down the page.
The sizes=”auto” attribute for images is a part of the responsive images specification in HTML, but it is not specifically related to lazy-loading. Instead, the sizes attribute is used with srcset to provide the browser with the image size dimensions needed to display the image at different viewport sizes. The browser is then able to select the most appropriate image source from the srcset.
New WordPress Speculation Rules Plugin
The Speculation Rules plugin leverages the Speculation Rules API in order to download the resources of webpages that a user is likely to request. The Speculation Rules plugin essentially predicts that a page will be requested and will begin pre-rendering the webpage before a user clicks a link.
The official plugin description explains:
“Uses the Speculation Rules API to prerender linked URLs upon hover by default.”
The Speculation Rules API is a feature designed to improve the performance of web browsing by allowing web pages to provide hints to the browser about potential links that a user might click to navigate to a different webpage. The browser can then prefetch or pre-render resources based on the likelihood of a site visitor clicking a link to navigate to a new webpage.
The Mozilla developer page for the Speculation Rules API explains:
“The Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).
The Speculation Rules API provides an alternative to the widely-available <link rel=”prefetch”> feature and is designed to supersede the Chrome-only deprecated <link rel=”prerender”> feature. It provides many improvements over these technologies, along with a more expressive, configurable syntax for specifying which documents should be prefetched or prerendered.”
The plugin implementation requires the use of at least Chrome 121. Users that visit a site while using a different browser that does not support the Speculation Rules API won’t be affected in any way, the webpage will render as it normally would.
According to the plugin documentation:
“By default, the plugin is configured to prerender WordPress frontend URLs when the user hovers over a relevant link. This can be customized via the “Speculation Rules” section under Settings > Reading.
A filter can be used to exclude certain URL paths from being eligible for prefetching and prerendering (see FAQ section). Alternatively, you can add the ‘no-prerender’ CSS class to any link (
<a>tag) that should not be prerendered.”
Read more about the new WordPress performance plugins and download them here:
WordPress Auto-sizes for Lazy-loaded Images Plugin
WordPress Speculation Rules Plugin
Featured Image by Shutterstock/Haali