6 Tips to Improve Core Web Vitals For WordPress

In May 2020, Google introduced Core Web Vitals, which consist of a series of metrics used to rank a website, that influence the overall user experience of a website and that Google considers essential for good navigation. Optimizing these metrics plays an important role in ranking performance and therefore in the success of the SEO strategy.

What are Core Web Vitals?

To be able to evaluate the user experience a website is providing, Google has recently come up with algorithm changes, introducing three metrics that measure three different aspects of user experience. These are perceived load speed, load responsiveness, and visual stability. Improving this set of metrics gives you more opportunities to rank well in search engine results because you are providing a good user experience.

Core Web Vitals incorporate 3 metrics:

• Largest Contentful Paint (LCP);
• First Input Delay (FID);
• Cumulative Layout Shift (CLS).

Let’s see more details about each of them:  

Largest Contentful Paint (LCP)

LCP evaluates the loading performance of the most relevant content on a website. It measures how quickly it becomes visible to the user (how many seconds it takes to be displayed). This metric looks rather from the perspective of the user, who expects large elements to load almost instantly and who perceives the whole website as being slow if the main content is loading slowly.

To better understand what LCP measures, take the following example: you enter a website and the main content (which can be a video, an image, or a text box) is not displayed properly or loads slowly. Despite the fact that the website has a good loading speed, the slow display of the content that interests you can be frustrating, right? This means that the user experience is not as good as Google would like it to be. It would be desirable that a website’s LCP score to be less than 2.5 seconds and in no case more than 4 seconds.

If the main content on your website consists of images, it’s more than important to make sure they load quickly. The LCP evaluates the size that the item takes within the viewport, which means that optimizing images is a good idea to reduce the LCP.

First Input Delay (FID)

FID measures how long it takes for a browser to start processing events in response to user interaction. In other words, this performance indicator measures the speed (in milliseconds) a browser needs to process an interaction, such as submitting a form or clicking a link.

So, once again, it’s all about speed. Now, the focus is on the time elapsed between the performance of an action on a page and the processing of that action by the browser. The recommendation is that the delay should be 100 milliseconds or less until the page becomes interactive;

Cumulative Layout Shift (CLS)

This metric aims at the stability of visual elements on a page and assesses how much the appearance of a website changes as its elements load. CLS detects those sudden changes in the placement of visual content on the page as new elements load. Such layout shifts can be unpleasant for the user and can make it difficult for him to navigate the page. This also can prevent him from performing certain actions.  

If the elements on the page move when others load, it is likely that users will encounter difficulties when trying to click on something and perform an action (such as adding a product to the cart) since some elements move around the page and lack visual stability due to unexpected layout shifts (for example ads and pop-ups). Quite annoying to have a button move just when you want to press it, isn’t it? This is why CLS must be less than 0.1 for good page performance.

How to Measure Core Web Vitals for your WordPress website

Earlier we learned more about the 3 metrics: LCP, FID, and CLS. Their purpose is to evaluate the on-page experience, which is important for getting a good position in the search results. Next, we will see how to check the Core Web Vitals score.

The easiest way to test and measure Core Web Vitals is by using PageSpeed Insights. Simply enter the URL of your website and initiate an analysis with an instant click of a button.

An important aspect to consider when using this tool is that results for mobile and desktop are often different.

To pass the test, your score must look like this: LCP – under 2.5 seconds, FID – under 100 milliseconds, and CLS – under 0.1. With this tool provided by Google, you get information about each of the three metrics. A very interesting thing about PageSpeed Insights is that it provides suggestions on how to improve website performance. So, PSI helps you learn more about the experience of users visiting your page and about the elements affecting your score.

Another great tool for measuring Core Web Vitals metrics is Google Search Console. Using this tool, you’ll find out which URLs on your page need improvement and which ones score well, so you’ll get a slightly more detailed evaluation. Comparing the two tools, PageSpeed Insights and Search Console, we see that the former helps to detect individual page problems, while the latter helps to diagnose site-wide problems.   

Tips for Improving Core Web Vitals for WordPress

First of all, we must say that you don’t have to be an expert in order to improve your website’s Core Web Vitals. There are several actions you can take to get better scores with your WordPress website, and the following tips can help you in this regard:  

Improve LCP score

Poor LCP is typically caused by:

• ❌ Slow server response times – the LCP is affected if the server takes too long to send the content requested by the browser.
• ❌ Render-blocking JS & CSS – these resources increase your page load time, which results in a poor LCP score because they force the browser to delay the content rendered on your site.
• ❌ Slow source resource load time – large resources such as uncompressed images that are needed to render above-the-fold are bound to take a lot of time to load, affecting the LCP.

In performance reports, it is important to target an LCP score of less than 2.5 seconds, i.e. to provide users with a good experience so they don’t have to waste time waiting for the main content to load. For a better result when measuring Core Web Vitals, it’s good to keep in mind that the website (and its elements) must have a good loading speed, which means using small, high-quality images may be the right solution to improve the speed.

There are some quick fixes to improve the LCP. We’re going to walk you through a few of the simpler and most critical ones:

✔️ Reduce server response times

You can measure your server response time by looking at the Time to First Byte (TTFB) – a metric used to measure how quickly a web server responds to a visitor request. By improving your TTFB, you’ll improve your server response time and the overall LCP score.

In order to reduce the server response time:

• Consider a better hosting solution – a faster server will ensure better performance. You should check how much traffic your site usually gets and make an upgrade.
• Caching solution – by using an effective caching solution like WP Rocket, your site’s content will be displayed faster. That is the easiest way to improve TTFB.
• Use a CDN – if you have visitors from all around the world, it could take more time before your website’s assets are delivered. Using a CDN solves this problem thanks to a global network of servers. That means no matter where your visitors are located, they will receive the assets from the closest server.

✔️ Optimize images

The most important steps you can take regarding your images are:

• Compress your images without losing quality
• Consider converting your images to more efficient formats, such as WebP and AVIF
• Use a suitable file format
• Serve properly-sized images

✔️ Defer parsing of JavaScript

When you access a website, your browser will receive the content from the server and start loading the code (basically rendering the page). However, if the browser sees a JavaScript file, the loading process will be interrupted until it finishes downloading it, interrupting the rendering process.

JavaScript code can be executed later using a technique called Defer, method supported by various popular WordPress caching plugins like Autoptimize.

This allows the browser to render all the content without waiting for the JS files to load. Since there won’t be any roadblocks anymore, the rendering process will run much faster, meaning the LCP metric will improve.

✔️ Minify JS & CSS

As mentioned above, JS and CSS files are resources that block rendering. You can use a free plugin such as Autoptimize to minify the JS and CSS files in use. That means optimizing the code by removing any white spaces, line breaks, and comments included in the code. This action will reduce the file size of these resources and make them load faster.

Improve FID score

Intuitively, the next tip on our list is improving the FID score. Once you understand these metrics, it’s just as easy to take action to improve them. If you get an unsatisfactory score (more than 300 ms), it means that the people who visit your page wait quite a long time until they are able to interact with the page (this may explain a high bounce rate).

The road to a better FID score can start by removing third-party scripts that you don’t use. We talk about the useless scripts that do nothing but take up space, consume resources and therefore affect website performance. PageSpeed Insights helps you detect unused JavaScript that you can remove, with the aim of improving response time and FID score, which measures how quickly a user can interact with your content.

Another action you can take is installing a caching plugin, such as WP Rocket, to defer non-critical code during loading. That means if some scripts are not “critical”, the caching plugin tells the browser to put them last in line, so other elements which are more important can load first.

Contrary to the first recommendation to remove unnecessary scripts, there are some that you won’t want to eliminate. In this case, the best course of action is to minify them. There are various WordPress plugins that will handle minification automatically, such as Autoptimize.

Using a CDN can also help you improve FID score, but we will discuss about this later in this article.

Improve CLS score

Improving the 3 metrics consists of a set of actions designed to guarantee you a better score and ensure a good user experience. In terms of CLS, poor results can be caused by slow loading page resources and can be a reason why users leave your page.

To improve the CLS, you can start by specifying the image size. By doing this, the browser will know how much space the images need and can prevent them from moving. The width and height attributes are specified automatically if you use the WordPress editor, but if you add the images by code, you have to specify the dimensions.

Also for a better CLS score, we recommend you to avoid inserting elements at the top of the page unless they respond to a user action. Also, be careful with the fonts you use. Using custom fonts can make the page load more slowly, because there is a chance that a backup font will appear first and then the custom font after being downloaded. Also, if fonts do not load fast, they affect the CLS grade, so it’s important to preload them.

Optimize and serve properly-sized / next-gen images

In addition to the measures you can implement to improve specific metrics, there are other actions to improve the overall Core Web Vitals. Image optimization is one of these measures and is also a card up one’s sleeve for the performance of any website. Make sure that users are properly welcomed on your website and that the loading time is not affected by unoptimized images that load slowly or do not fit the screen of the devices visitors are using.

To decrease web page load times, deliver quality images by using tools that instantly optimize your images when uploaded to the website, without affecting their quality. Note that optimizing images impacts both LCP and FID – so you’ll get a better score when you run performance tests using tools such as PageSpeed Insights or GTmetrix.

However, simply compressing and optimizing the images might not just be enough, especially if you upload high resolution images to your website. To get even a higher LCP score, the key is to also serve properly-sized and next-gen image formats such as WebP or AVIF.

Learn more about how ShortPixel can improve Core Web Vitals.

Choose a good web hosting

Did you know that the WordPress hosting company weighs a lot in the overall performance of your website? It’s safe to say that the hosting solution is one of the factors behind good website performance.

Whatever measures you implement, if you don’t use high-quality hosting, your efforts to improve load speed may not be enough. Choosing a fast hosting provider influences your LCP score by impacting the responsiveness of your server.

Investing in high-quality will bring you long-term benefits because it means that your website is on a platform that optimizes its servers and contributes to the performance of the websites it hosts. One of the web hosting providers with many recommendations is Bluehost, which offers performance and affordable pricing plans;

Use a CDN (Content Delivery Network)

CDN or Content Delivery Network are third-party services whose use involves distributing resources on servers geographically closer to users, in order to improve the loading time of the content on your website.

The recommendation to use a CDN comes from the following problem: many users are located far away from the original server, which means that the page loads more slowly. In the end, all these difficulties in accessing the elements on your website result in a low conversion rate and a high bounce rate.

CDN allows you to deliver content from multiple servers around the world, so users can enjoy fast uploads and download static files (such as images) not from the original server, but from the server closest to them. CDN services influence a better loading of your website, no matter how far away users are.

That being said, using a CDN is one of the best ways to boost your website’s performance. Your website will load just as fast in your server’s country as it will for someone on the other side of the world. This is a must WordPress performance action you need to consider if your visitors come from all over the world. ShortPixel Adaptive Images dramatically boosts the performance of a WordPress site and improves page load time by scaling, optimizing and serving your images from CDN.

Conclusions

Implementing these measures results in a better user experience, which is also the focus of core web vitals. Putting value on a positive experience for everyone who visits your WordPress website will be reflected in your performance scores and most importantly, in your conversion rate.

Check your core web vitals score using accessible and intuitive tools, identify the most appropriate actions to improve all 3 metrics, and use plugins that come bundled with features designed to support website performance, such as on-the-fly image optimization and delivery from a CDN.

You can give ShortPixel Adaptive Images plugin a try for free. Within seconds, you can dramatically improve the Core Web Vitals, the website’s performance, as well as the page load times by serving optimized and properly-sized images from a CDN.