WordPress announced that 6.3, scheduled for release in August 2023, will help websites attain better Core Web Vitals SEO scores, particularly with regard to Largest Contentful Paint (LCP).
While page speed is a small ranking factor in Google, page speed is important as it can lead to higher sales and improve ad views and clicks.
Focusing on user experience can help with how long a user engages with a website, whether they will recommend the site and if they return again and again.
A good user experience is a cornerstone of cultivating popularity and in my opinion Google Search shows users what they expect for any given query.
Largest Contentful Paint
Largest Contentful Paint (LCP) is a metric that measures how long it takes to render the largest image or text block. The underlying premise of this metric is to reveal a user’s perception of how long it takes to load a webpage.
What’s being measured is what the site visitor sees in their browser, which is called the viewport.
The optimizations achieved by WordPress in 6.3 achieve a longstanding effort to precisely use HTML attributes on specific elements to achieve the best Core Web Vitals performance.
Fetch Priority HTML Attribute
Fetch Priority, written in HTML as fetchpriority, is an HTML attribute of webpage elements (resources) such as images, CSS and JavaScript.
The purpose of fetchpriority is to tell the browser which webpage resources need to be downloaded fastest in order to render the content that a site visitor sees in their browser, what’s in their viewport.
Content that is not in the viewport, which is content that a user has to scroll down the page to see, has a lower priority than content that’s at the top of the page and in the site visitor’s viewport.
Fetch Priority allows a publisher to control which resources have a high priority and which ones have a low priority.
WordPress 6.3 contains a new feature that adds the fetchpriority attribute to the image that is most likely to appear in the site visitor’s viewport.
The WordPress announcement noted:
“WordPress now automatically adds the fetchpriority attribute with a value of “high” to the image it determines most likely to be the “LCP image”, i.e. the image that is the largest content element in the viewport.
The attribute tells the browser to prioritize this image, even before it has computed the layout, which typically improves LCP by 5-10%”
One of the cool things that WordPress does with the fetchpriority is that it only applies to images of a minimum size threshold.
That means that the fetchpriority attribute will not be applied to small resources like a navigation button.
Another feature of the WordPress automatic fetchpriority is that it will never override an existing fetchpriority attribute.
Lazy Load Implementation Perfected
The first things that a site visitor sees in their browser when they visit a website is said to be in the viewport.
Webpage elements that are necessary to render the first viewport when the site visitor visits should ideally be given priority.
Elements that are below the first viewport don’t need to be downloaded right away.
Lazy loading is a way to tell the browser which images and iframes are not critical for loading that first viewport screen.
Using the lazy load attribute allows the immediately necessary webpage elements to download first.
WordPress initially implemented the lazy load attribute on all images on a webpage, regardless of whether it was critical or not.
While applying lazy load to images that are important for rendering above the fold content wasn’t ideal, tests showed that it was still improvement over not applying the lazy load attribute.
WordPress 6.3 solves that problem by being able to detect which images are critical.
The lazy load attribute will not apply to critical images, allowing those images to download as fast as possible.
WordPress noted:
“Further adjustments and fixes have been implemented to improve the automatic handling of lazy-loading via the loading attribute to more reliably detect when to omit the attribute from some images.”
Lastly, the new process for detecting the initial viewport and applying fetchpriority and loading attributes can be used to apply further optimizations in future versions of WordPress.
WordPress observed:
“…this may be enhanced with other performance-related attributes in the future.”
Changes May Affect Third-Party Plugins
The WordPress announcement alerts plugin developers who depend on the core lazy-lazy loading logic that this has changed.
There is now a new single function that controls both the fetchpriority and loading attributes.
Developers who depended on the old logic may need to update their plugins. This is important for publishers to be aware of so that they know to give priority to also updating their plugins after updating to WordPress 6.3.
WP 6.3 Will Not Override Related Custom Optimization
A thoughtful aspect of this update is that the automatic application of both fetchpriority and lazy load will not override custom applications of those attributes.
The announcement notes:
“With the new function being used consistently anywhere images are rendered in WordPress core, support for customizing is also improved.
The function will never override attributes that are already provided, so if you set a fetchpriority or loading attribute on an image before this function is called, the attribute will be kept as is.
This allows fine tuning by not enforcing the default automated behavior. If doing so, keep in mind never to set both fetchpriority=”high” and loading=”lazy” for an element.
If the function encounters those two attribute-value combinations together, it will trigger a warning.”
Better Core Web Vitals SEO For WordPress
In addition to the above, WordPress also fixed multiple bugs that affected the correct implementation of these attributes for optimizing Largest Contentful Paint.
When it comes to image optimization for SEO, WordPress 6.3 finally delivers a fully optimal SEO experience that will help websites attain higher LCP scores.
Read the official WordPress announcement:
Image performance enhancements in WordPress 6.3
Featured image by Shutterstock/Ljupco Smokovski
