How to Optimize Your Website for Google’s Core Web Vitals Update!

If you’re in the SEO game, you’ve probably heard about the Core Web Vitals update. Google has confirmed that Core Web Vitals will be one of the ranking signals, along with other UX-related signals from June 2021.

As the update is expected to be live soon, website owners are hurrying to optimize their site for the Core Web Vitals that include Loading, Interactivity, and Visual Stability. This article is all about the Core Web Vitals and will show you how to use optimization tips to improve your Vitals score to a passing grade.

What Are Core Web Vitals?

We’ve been hearing the word a lot of times but what does it really mean by Core Web Vitals?

Core Web Vitals are simply a set of metrics used to define the speed, responsiveness, and visual stability of a web page. These vitals are made up of 3 specific metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

As Google continues to rank pages with good user experience scores on higher positions, the current Google rankings might collapse for many competitive terms. In 2021, we can say good UX is the best SEO strategy.

Let’s see each of the Core Web Vitals and see what they actually are.

1. Largest Contentful Paint

The largest Contentful Paint or LCP is the measure of time taken for the page to load its main content. In other words, it measures how long it takes for the largest content to be visible on the screen after clicking on a link or action.

largest contentful paint

– Largest Contentful Paint

The LCP score can be used to determine when the main content of the page is visible on the screen. The LCP score that you must aim for is 2.5 seconds or faster. Most of the time, the slow server response is the culprit behind poor LCP grades.

2. First Input Delay

First Input Delay or FID is the measure of time taken for the page to be interactive. In other words, it measures how long it takes the page to be interactive to the user, like clicking a button or choosing an option from the menu.

first input delay

– First Input Delay

The FID score can be used to determine how long it takes something to happen on a page when a user does something. An ideal FID measurement is less than 100ms.

One common reason behind bad FID scores is the browser may be busy executing a large JavaScript file loaded by your web page.

3. Cumulative Layout Shift

Cumulative Layout Shift or CLS measures how stable a web page is as it loads. In other words, it checks for unexpected layout shifts of visual page content when the page is being loaded.

cumulative layout shift

– Cumulative Layout Shift

The CLS can determine the visual stability of a web page, and it is calculated by summing shift scores across layout shifts that don’t occur within 500ms of user input. An ideal CLS score to aim at is 0.1 or less.

Say you’re reading an article on a website/blog when the layout suddenly changes, causing you to click on the wrong link. Now you’ve landed on the wrong page and you need to get back to the previous page to click the link you wanted to. Annoying, right? That’s a sign of poor UX and it’s what Core Web Vitals is focused on eliminating.

In the above case, users who landed on the wrong page may abandon the page or site instantly, so the website loses traffic. A poor CLS grade thus indicates more harm to your site than you’ve imagined.

The example below shows a user on the checkout page. The site asks whether to confirm the order or not. The user intended to click on No but suddenly the layout got changed and the Confirm button got assembled in the position of “No”.

The user thus ordered the product by mistake, which is not great for the store, even though the website can track conversions.

Start Growing with Cloudways Today.

Load WooCommerce Stores in 249ms!

Let’s take a look at how you can pass your Core Web Vitals so you won’t fall apart once the update rolls out in June 2021.

How to Check Your Core Web Vitals Score?

google page experience checker by cloudways

– Google Page Experience Checker by Cloudways

To help users optimize their site better and get accurate decisions after analyzing the web page, Cloudways has launched a new tool that helps you get your Page Experience Scores. Follow the steps to try it out:

  • Step 1: Visit the Free Page Experience Checker by Cloudways.
  • Step 2: Enter the URL of the page which you want to check and click on Run Test.
  • Step 3: The tool will analyze the web page and give you the scores.

The tool will display the score for metrics like Performance, Accessibility, Best Practices, and SEO out of 100. While 90-100 is the best range, make sure your site scores don’t fall beyond 49. You can just do changes and run the test again to see if your scores improve.

The screenshots below demonstrate how the reports will look when you’re actually using that tool. I used my website homepage for the test and the metrics are as follows.

page experience score of draftpublish

– Page Experience Score of DraftPublish

Take a look at the Core Web Vitals report below. If your site needs any improvement, it’ll be mentioned in this section.

core web vitals report of draftpublish

– Core Web Vitals Report of DraftPublish

The Core Web Vitals report will highlight the issues and places where there’s an improvement required. There’re a lot of metrics to improve your Page Experience and you can make use of them to make your site an example of great UX, which in turn will be a positive aspect for your site’s SEO.

How to Optimize for Core Web Vitals?

key factors of core web vitals

–  Key Factors of Core Web Vitals

Let’s have a look at how you can optimize the key elements that can impact your Vitals score.

1. Optimize the Server

As mentioned earlier, slow server response times can contribute widely to a bad Core Web Vitals score of your web page. The longer it takes content to receive from the server, the longer it takes to display on the screen and let the user interact with it.

A slow server response can kill your User Experience (UX) and is one of the main priorities when getting your site optimized for the Vitals update. A faster server response time can really improve your Core Web Vitals, mainly LCP, and can help your site grab a good User Experience Score.

The faster your server responds, the better. Getting that quick response can help you improve your website speed metrics. In complex sites, you must optimize the process to make the server respond quickly. You can use Brotli or Gzip compression for server-level compression that will reduce your site’s file size and boost your LCP score.

role of hosting in your websites performance

– Role of Hosting in Your Website’s Performance

Optimizing your server can start with upgrading your hosting plan. Don’t set up a complex site on shared hosting. Pick your hosting keeping in mind its performance, the PHP version, and price in mind. Your hosting provider has a great role in improving your site’s speed metrics to a great extent.

2. Optimize Images

Optimizing your images can improve both your Vitals score and also the overall user experience. Your LCP is highly affected by images on the web page, so one big unoptimized image can cause poor user experience and thereby affect your Core Web Vitals.

As all the SEO experts mention, image optimization needs to be prioritized. Images can slow down your page and take a long time to load, which can kill the User Experience and your Core Web Vitals.

For optimizing images, you can try to switch the image formats to WebP which can deliver high-quality images with lower file size. WebP is new and most industry leaders are now making the switch happen.

Another thing that can help you optimize images is the Lazy Loading feature. This only loads the images on the current viewport. The remaining are loaded only when the user interacts, thereby boosting your page speed.

3. Mobile Friendly

More than 80 percent of internet users use mobile devices to browse sites. If your site is not mobile-responsive, it can hurt your UX score and in turn affect your Vitals score.

Along with HTTPS and other Page Experience signals, mobile-friendliness is a proven SEO ranking signal. Make sure your site has a responsive design that fits according to the screen of mobile phones and tablets.

Keep your site mobile-friendly, and check if your web page has any loading issues with mobile devices so that you don’t have to worry about mobile users getting layout-shifted designs!

4. Safe Browsing

Users can’t compromise on security and the website owners are responsible for keeping their website and visitors safe.

Keeping a website clean is one of the UX signals that can contribute to better SEO grading. Make sure there is no malicious or deceptive content or unsafe links.

Some malware on your site can redirect your traffic to spam or malicious websites without the reader knowing it. This can kill your site’s user experience and trust. Make sure this doesn’t happen with your site as it can negatively impact your site’s traffic over time.

5. Avoid Interstitials

Too many banners and interstitials can ruin your site’s user experience and if it’s too repetitive, the user may just bounce back from your site.

You might rely on popups for lead generation, but they can make the user experience irritating. Try to limit those banners. One thing you can do is reserve the space for banners and other addons so that it won’t affect the page usability of the reader. This also decreases the chance of unexpected layout shifts happening.

6. Reserve Space for Elements

Reserving space for elements like ads or other embeds prevents unexpected layout shifts when the page is loaded completely. When adding images, make sure to mention the dimensions for those images. But you don’t need to do this on a CMS like WordPress, as WordPress automatically adds the dimensions.

The case of ad slots that accept multiple sizes can be a problem with CLS. You can reserve the dimension for the largest ad size that is configured. Avoid ads near the top of the viewport as they may get a higher layout shift than those in the middle. Although you may get a high CTR and revenue on ads near the top of the viewport, it can hurt your CLS scores.

Summary

As we’ve said, Core Web Vitals is a performance metric that will be used for Google rankings along with other UX signals as part of the June 2021 update. We can expect the changes of this algorithm on the search results after the update is fully rolled out.

While ranking #1 on Google is everyone’s dream, you will miss out if your website has a poor UX grade. With that said, I truly believe UX is the new SEO that you must focus on.

Focus on your server response times (your hosting capabilities) and play carefully with images, videos, and other embeds like ads. Reserve the space for these elements or else you can expect an unexpected layout shift!

Make sure you don’t ruin the UX by putting too many ads although some ad slots may bring you higher CTR and profit.

Moreover, it will be better if you use a CDN and caching which can significantly boost your site performance without any hassle. With that said, make sure you do prepare your site for the Core Web Vitals update wisely. All the best and let me know what you think in the comments below!

 

Note: This article was First published at Cloudways by Mansoor Ahmed Khan

 

×

Hello!

Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

× How can I help you?