WordPress announced that 6.3, scheduled for release in August 2023, will help websites achieve better Core Web Vitals SEO scores, especially with regard to Largest Contentful Paint (LCP).

While page speed is a small ranking factor on Google, page speed is important as it can lead to higher sales and improve ad views and clicks.

Focusing on user experience can help determine how long a user interacts with a website, whether they will recommend the website to others, and whether they keep coming back.

A good user experience is a cornerstone of increasing popularity, and in my opinion, Google search shows users what to expect from a given search query.

Largest rich color

Largest Contentful Paint (LCP) is a metric that measures how long it takes to render the largest block of image or text. The underlying premise of this metric is to show a user’s perception of how long it takes to load a webpage.

What is measured is what the website visitor sees in his browser, the so-called viewport.

The optimizations achieved by WordPress in 6.3 are the result of many years of efforts to use HTML attributes on specific elements with precision in order to achieve the best Core Web Vitals performance.

Get priority HTML attribute

Fetch Priority, written in HTML as fetchpriority, is an HTML attribute of web page 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 website visitor sees in their browser and what is in their viewport.

Content that is not in the viewport, that is, content that a user must scroll down the page to view, has a lower priority than content that is at the top of the page and in the site visitor’s viewport.

Retrieval priority allows a publisher to control which resources are high priority and which are low priority.

WordPress 6.3 includes a new feature that adds the fetchpriority attribute to the image most likely to appear in the site visitor’s viewport.

The WordPress announcement states:

“WordPress now automatically adds the fetchpriority attribute with a value of “high” to the image it most likely determines to be an “LCP image”, which is the image that represents the largest piece of content in the viewport.

The attribute tells the browser to prioritize this image even before it has calculated the layout, which typically improves the LCP by 5-10%.”

One of the cool things WordPress does with fetchpriority is that it only applies to images with a minimum size threshold.

This means that the fetchpriority attribute is not applied to small resources like a navigation button.

Another feature of WordPress’ automatic fetchpriority is that it never overrides an existing fetchpriority attribute.

Lazy load implementation perfected

The first thing a website visitor sees in their browser when visiting a website is the viewport.

Web page elements that are required to render the first viewport when visiting the site should ideally be given priority.

Items located below the first viewport do not need to be downloaded immediately.

Lazy loading is a way of telling the browser which images and iframes are not critical for loading the first viewport screen.

By using the lazy load attribute, the immediately needed web page elements can be downloaded first.

WordPress initially implemented the lazy load attribute for all images on a webpage, regardless of whether it was critical or not.

While applying lazy load to images important for displaying content above the fold was not ideal, testing showed that it was still an improvement over not applying the lazy load attribute.

WordPress 6.3 solves this problem by being able to detect which images are critical.

The lazy load attribute does not apply to critical images, so these images can be downloaded as quickly as possible.

WordPress noted:

“Other adjustments and fixes have been implemented to improve automatic handling of lazy loading via the loading attribute and more reliably detect when the attribute should be omitted in some images.”

Finally, the new process of detecting the initial viewport and applying fetch priority and load attributes can be used to apply further optimizations in future versions of WordPress.

WordPress observed the following:

“…this may be augmented with other performance-related attributes in the future.”

Changes may affect third-party plugins

The WordPress announcement alerts plugin developers who rely on 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 relied on the old logic may need to update their plugins. This is important for publishers so they know that after updating to WordPress 6.3, they also need to prioritize updating their plugins.

WP 6.3 does not override the associated custom optimization

A thoughtful aspect of this update is that automatic application of Fetchpriority and Lazy Load does not override custom applications of these attributes.

The announcement states:

“As the new feature is deployed wherever images are rendered in the WordPress core, support for customization will also be improved.

The function never overwrites attributes already provided. So if you set a fetchpriority or loading attribute on an image before calling this function, the attribute remains unchanged.

This allows for fine tuning since the default automated behavior is not enforced. Remember to never set both fetchpriority=”high” and loading=”lazy” for an element.

If the function encounters these two attribute-value combinations at the same time, it raises an alert.”

Better Core Web Vitals SEO for WordPress

In addition, WordPress also fixed several bugs that affected the correct implementation of these Largest Contentful Paint optimization attributes.

When it comes to image optimization for SEO, WordPress 6.3 finally offers a totally optimal SEO experience that helps websites achieve higher LCP scores.

Read the official WordPress announcement:

Image performance improvements in WordPress 6.3

Featured image by Shutterstock/Ljupco Smokovski