It hasn’t been long since Google rolled out its Core Web Vitals & since then WordPress has been working towards making improvements in the new WordPress 5.9 which is scheduled to roll out in December 2021.
This is how the new update was described in the proposal, “Instead of lazy-loading all images and iframes by default, the very first content image (also considering featured images) or content iframe should not be lazy-loaded.
This is a more sensitive default than what the current implementation uses, that on average and at scale will result in better LCP performance out of the box while keeping necessary bandwidth low.”
But what are the factors that affect LCP score & cause a slow score?
- Slow Server Response Time: Fix this issue by improving your Time to First Byte, using a CDN, & establishing third-party connections early.
- Render blocking JavaScript and CSS: Fix this issue by removing unused JS files.
- Slow Resource Load Times: Manage resource load time by optimizing images, minifying & compressing CSS, JS, HTML files, and preloading critical assets.
Let us dive deeper into the topic of LCP and understand how to improve it.
Core Web Vitals: Largest Contentful Paint & Lazy Loading
Google says, “Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded — a fast LCP helps reassure the user that the page is useful.”
A good LCP score should be of 2.5 seconds or less & lazy loading helps speed up the download of web pages by delaying page weight which further allows the webpage to load faster. This slows down the loading of elements on a webpage like images with the help of an HTML attribute known as the loading attribute, it is basically a code that modifies an HTML element, like an image.
The loading attribute, when used on an <img> element or on an <iframe>, helps by modifying the image by informing the browser to delay downloading it which makes the browser free to download more important elements that are instantly visible to the user.
For example, HTML code for an image looks like this: <img src=”example.jpg” alt=”example text”>
On adding the lazy loading attribute, it will look like: <img src=”example.jpg” alt=”example text” loading=”lazy”>
How Will WordPress Improve Core Web Vitals (LCP) In The New 5.9 Version?
- According to the WordPress proposal, it is advisable to add a lazyload attribute to the first image or the iframe in the code.
- After testing out the method on the 50 most popular WordPress themes, the developers discovered that following this method provides a 7% LCP Core Web Vitals score, at an average.
- The developers also tested how the LCP is reacting after adding the lazyload attribute to 2 elements, images, and iframe.
- This test provided results that the performance gains dropped by an average of 2%, which implies that excluding lazy load from more than one element will not improve the LCP score.
We also found some more findings that are: Omitting the first content image from being lazy-loaded resulted in a median LCP improvement of 7% (1,877ms compared to 2,020ms with current core behavior) and a median image bytes increase of 0% (368KB compared to 369KB with current core behavior). → Omitting the first content image results in an LCP improvement while not noticeably regressing on image bytes saved.
Omitting the first two content images from being lazy-loaded resulted in a median LCP improvement of 5% (1,927ms compared to 2,020ms with current core behavior) and a median image bytes increase of 2% (378KB compared to 369KB with current core behavior). → Omitting the first two content images produces worse results for both metrics than only omitting the first one, i.e. it is better to only skip lazy-loading for the first content image, and therefore no additional tests with larger numbers of images not being lazy-loading are needed.
The following results were found on testing the new update by WordPress:
. 5% of themes in the test group scored LCP scores that were 10% worse to as high as 21% worse.
. 42% of the themes improved LCP scores from 10% to as high as 33% better.
. Testing revealed that the benefits were better for the majority of the tested themes.
WordPress has been the most widely used open-source content management system because it is easy to use & because of the wide range of features it offers. This new proposal is still undergoing some discussions, but LCP scores will likely become the main part of the WordPress websites in the near future.
42Works can help in guiding you through the new changes to make your website grow and create a seamless experience for your customers. Feel free to reach us at: contact@42works.net
