WordPress announced that 6.3, scheduled for release in August 2023, will help websites achieve better Core Web Vitals SEO scores, especially for Largest Content Paint (LCP).
Largest Content Paint (LCP) is a metric that measures how long it takes to render the largest image or block of text. The underlying premise of this metric is to reveal the user’s perception of how long it takes to load a web page.
What is being measured is what the site visitor sees in their browser, which is called the viewport.
The optimizations achieved by WordPress in version 6.3 achieve a long-time effort to precisely use HTML attributes in specific elements to achieve the best performance of Core Web Vitals.
Get the 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 web page resources should be downloaded more quickly in order to display the content that a site visitor sees in their browser, what is in their viewport.
Content that is not in the viewport, which is content that the user must scroll down the page to see, has a lower priority than content that is at the top of the page and graphic window of the site visitor.
Fetch Priority allows a publisher to control which resources have a high priority and which 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 that it determines is most likely to be the ‘LCP image’, meaning the image that is the largest content element in the graphic window
The attribute tells the browser to prioritize this image, even before the layout has been calculated, which typically improves LCP by 5-10%.”
One of the cool things WordPress does with fetchpriority is that it only applies to images of a minimum size threshold.
This means that the fetchpriority attribute will not apply to small resources like a navigation button.
Another feature of WordPress automatic fetchpriority is that it will never override an existing fetchpriority attribute.
Improved lazy loading implementation
It is said that the first things a site visitor sees in their browser when they visit a website are the viewport.
Ideally, web page elements that are necessary to render the first viewport when the site visitor visits should have priority.
Items below the first viewport should not be downloaded immediately.
Lazy loading is a way to tell the browser which images and iframes are not critical to loading the first display screen.
Using the lazy load attribute allows immediately needed web page elements to be downloaded first.
WordPress initially implemented the lazy loading attribute on all images on a web page, regardless of whether it was critical or not.
Although applying lazy loading to rendering-important images above the fold content was not ideal, testing showed that it was still improved by not applying the lazy loading attribute.
WordPress 6.3 solves this problem by being able to detect which images are critical.
The lazy loading attribute will not be applied to critical images, allowing these images to be downloaded as quickly as possible.
WordPress noted:
“Implemented more tweaks and fixes to improve automatic handling of lazy loading using the loading attribute to more reliably detect when the attribute should be omitted for some images.”
Finally, the new process for detecting the initial viewport and applying fetchpriority and load attributes can be used to apply further optimizations in future versions of WordPress.
WordPress observed:
“…this can be improved with other performance-related attributes in the future.”
Changes may affect third-party plugins
WordPress’ announcement alerts plugin developers who rely on basic lazy loading logic that this has changed.
There is now a new unique function that controls both fetchpriority and load attributes.
Developers who relied on the old logic may need to update their plugins. This is important for publishers to keep in mind so they know to prioritize updating their plugins as well after upgrading to WordPress 6.3.
WP 6.3 will not override related custom optimization
A thoughtful aspect of this update is that automatic application of both fetchpriority and lazy loading will not override custom applications of these attributes.
The ad notes:
“With the new feature being used consistently anywhere images are rendered in WordPress core, support for customization is also improved.
The function will never override attributes that have already been provided, so if you set a fetchpriority or load attribute on an image before calling this function, the attribute will remain as is.
This allows fine-tuning without imposing the default automated behavior. If you do, be careful to never set fetchpriority=”high” and loading=”lazy” for an element.
If the function finds these two attribute-value combinations together, it will trigger a warning.”
Best Core Web Vitals SEO for WordPress
In addition to the above, WordPress also fixed several bugs that affected the correct implementation of these attributes to optimize the larger painting of content.
When it comes to image optimization for SEO, WordPress 6.3 finally offers a fully optimized SEO experience that will help websites achieve higher LCP scores.
Read the official WordPress announcement:
Image performance improvements in WordPress 6.3
Featured image by Shutterstock/Ljupco Smokovski
[ad_2]
Source link
