The WordPress Core Performance team released two plugins that speed up web pages with new technologies that pre-render URLs before a user clicks a link and speed up lazy-loaded images.
WordPress Core Performance Team
The WordPress Core Performance team is responsible for coordinating with the various WordPress core development teams for the purpose of improving performance and also working on projects that directly affect the improvement of WordPress core performance.
The performance team’s initial plan consisted of:
lead the formation of the working groups coordinate the initial administrative tasks (download channel, weekly meetings, schedule the nominations of the working group representatives, etc.) create a mission statement for the team coordinate the areas to be addressed outline the scope and roadmap
WordPress Performance Plugins
Some of the WordPress performance improvements are first tested in plugins before being later integrated into a future version of WordPress.
Users who download the plugins can be the first in the world to use and benefit from the web page speed improvements and it is (hopefully) hoped that those who use the plugins will also provide feedback about their experiences, both positive as negative
The first and most popular plugin released by the performance team is the Performance Lab plugin which includes five modules that can be activated or deactivated according to the user’s needs.
The current Performance Lab plugin modules are:
Images in dominant color:
Adds support for storing the dominant color of newly uploaded images and creating a placeholder background of that color.
WebP Support health check:
Add a WebP support check to the site health status.
WebP Uploads:
Create WebP versions for new uploads of JPEG images if the server supports it.
Checking the status of queued assets:
Adds CSS and JS resource check to site health status.
Checking status of automatically loaded options:
Adds a check for automatically loaded options to the site’s health status
Two new performance plugins
The two new plugins announced today are:
Automatic sizes for lazy loaded image speculation rules
Both plugins improve performance in two different ways, which means that both can be used to get the most improvements.
New Auto Size WordPress Plugin
Lazy loading is a performance optimization technique that defers (pauses) the loading of non-critical images to improve page load times. Images that are needed to render the visible part of the web page are loaded first, while those that are not needed 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 download of images that they will be needed when the user scrolls down the page.
The sizes=”auto” attribute for images is part of the responsive image specification in HTML, but 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 can then select the most appropriate image source from the srcset.
New WordPress Speculation Rules plugin
The Speculation Rules plugin leverages the Speculation Rules API to download resources from web pages that a user is likely to request. The Speculation Rules plugin basically predicts that a page will be requested and starts rendering the web page before the user clicks on a link.
The official plugin description explains:
“Use the Speculation Rules API to pre-render linked URLs by default on hover.”
The Speculation Rules API is a feature designed to improve web browsing performance by allowing web pages to provide hints to the browser about potential links that a user might click to navigate to a different web page. The browser can then fetch or pre-render the resources based on the likelihood that a site visitor will click a link to navigate to a new web page.
Mozilla’s developer page for Speculation Rules API explain:
“The Speculation Rules API is designed to improve performance for future browsing. It targets document URLs rather than specific resource files, so it makes sense for multi-page applications (MPAs) in Single Page Application (SPA) site.
The Speculation Rules API provides an alternative to the available extension and is designed to replace the deprecated one for Chrome only characteristic It provides many improvements over these technologies, along with a more expressive and configurable syntax for specifying which documents should be retrieved or pre-rendered.”
Plugin implementation requires the use of at least Chrome 121. Users visiting a site while using a different browser that does not support the Speculation Rules API will not be affected in any way, the web page will be displayed as I would normally.
According to the plugin documentation:
“By default, the plugin is configured to pre-render URLs in the WordPress interface when the user hovers over a relevant link. This can be customized via the ‘Speculation Rules’ section in Settings > Reading .
A filter can be used to exclude certain URL paths from being eligible for prefetching and prerendering (see the FAQ section). Alternatively, you can add the “no-prerender” CSS class to any link ( label) that should not be submitted beforehand”.
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
[ad_2]
Source link
