$2,000 Free Audit

Get A Proposal
blog

Everything To Know About Google’s Core Web Vitals

When it comes to a high-ranking and high-converting website, speed is a huge factor. Here, we introduce Google's latest Core Web Vitals. Find out everything you need to know about achieving the perfect score.

You might have observed that page speed has taken centre stage in SEO community discussions lately; and most of these talks are about Google’s new speed metric WebVitals. 

But here’s the catch. SEOs have tried to achieve the best page speed score ever since Google and other search engines said user engagement is a major ranking factor.

However, these optimisation efforts were mostly around a few myths that speculated on the ideal page speed score. 

This is exactly what Google busted with the introduction of Core WebVitals.

With Google’s announcement about the new WebVitals metrics, website owners now know what the ideal speed they must aim for, but they are a bit more worried! 

Nowadays, websites concentrate more on the accumulated scores that show up on tools such as Pagespeed SpeedInsights, Pingdom, and GTMetrics. 

perfect page speed score

Even though these are great tools to check the speed of a web page, the impetus has always been on the overall speed rather than the individual user experience metrics, which mattered more. 

Google has come up with the concept of Core WebVitals to make sure the webmasters spend quality time in improving the speed metrics that matter to the users and not the browser or Google bots for that matter. 

 

What is Core WebVitals? 

Google’s definition of WebVitals says it’s a unified metric that analyses the speed signals essential to delivering a superior user experience on the web. 

Importantly, WebVital compliance is going to be the latest entry to Google’s ranking signals starting 2021

The core web vitals, along with the existing page experience metrics like mobile-friendliness, safe browsing, HTTP security, and no intrusive interstitial, will be defining elements of future Google Algorithm Updates that decide which websites to rank.

 

Core Web Vitals Metrics

The core web vitals, introduced in May 2020, are valuable metrics related to site speed, responsiveness, and visual stability. Google classifies these three metrics as follows: 

  1. Largest Contentful Paint (LCP): It is measured by the amount of time it takes for a page’s primary content to load. The ideal LCP measurement should be 2.5 seconds or faster than that. 

  2. First Input Delay (FID): It is the measurement of the time it takes for a page to become interactive, and the ideal value for this is less than 100 ms

  3. Cumulative Layout Shift (CLS): It measures the visual stability of a page. The ideal measurement of CLS is less than 0.1.

It should be noted that the core web vitals speed scores are not a permanent set of metrics that defines page experience. As technology improves, the current scores may change based on what users expect a good web experience to be. 

 

How to Achieve the Perfect WebVitals Score?

WebVitals

Most SEOs overlook the slow speed of a website as it requires more expertise than changing the title and description of a page. And more importantly, you need a certain level of technical SEO experience to achieve the desired results. 

Adding a cache plugin and optimising the images, CSS, and JavaScript are some of the easy fixes that webmasters come up with. These optimisation efforts definitely help in improving the server response time and reducing the overall resource size. 

However, from the research that we have done in the last month, we have identified that despite these easy fixes, the websites were not able to achieve the ideal Core WebVitals score. 

Here’s why: 

  1. Cache plugins speed up the site performance and improve the server response time only when the users revisit your site or when they browse through multiple pages within the same session. If the cache is set to expire soon, this advantage is also wasted. 

  2. Images, JavaScript, and CSS, are integral to the overall look and feel of any website. Delaying the sequence of when to fire each of these can result in a poor user experience, and this often ends up breaking the site. 

  3. If you’re running a CMS, you may require multiple Plugins or Apps to optimise each of the resources. This can result in your website becoming even slower.

What you’re about to see is a strategy that has worked for many of our clients. We’ve helped them achieve the perfect WebVitals score by following the process you find below. 

We identified that if the same web server is trying to deliver primary and secondary resources, achieving the ideal WebVitals score will be hard. 

However, there are hosting platforms like WP-Engine and AWS, which come with all the features mentioned above inbuilt. Moving forward, choosing such hosting providers will be a key, which means SEO begins even before you decide on the host. 

You may be wondering how some websites hosted on WP-Engine, and in Amazon Web Server can achieve the perfect WebVitals score. The remaining part of this blog is going to discuss precisely this.

 

Resource Optimisation for WebVitals 

Several factors contribute to slowing down the page load time. Large image files, Javascripts, CSS files and the requests generated by each one of these increases the payload on browsers and keeps users waiting for long.

Fortunately, there are a couple of Google-recommended solutions that can make sure a pleasant user experience on your site, which, in turn, will improve your ROI. 

These are the same techniques that we used to get the perfect WebVitals score for the client you just saw above. 

 

A. Optimising Images for Page Speed

Large image files are responsible for the maximum payload on browsers. Optimising the images can help in speeding up a site and offer a good user experience as well. 

Image CDN: If your images load from the same server, it might put a lot of load pressure on your server. The most effective way to dismiss this problem is by using a CDN server. AWS and CloudFlare are currently the best picks if you're looking for a good Image CDN provider. 

WebP Format: You have to also ensure that the CDN you have selected converts the images into WebP format, which is the Google Recommended Image format for Web images.

LazyLoad: Implementing a lazy loading technique also increases the score of WebVitals as only the onscreen image resources come along with the initial payload. 

The off-screen images will load as and when the viewers reach near the particular image viewpoint on the website. During the loading process, only the dimensions of the off-screen images load to avoid page break. 

 

B. Optimising Java and CSS

GZip Compression: GZip compression has become a standard practice for almost all websites. However, this is still important as it makes the files smaller and enables faster network transfer.

Minifying Resources: The first step to optimise the JavaScript and CSS is to minify these resources. Minification is a process where the non-critical and redundant resources are removed to speed up the process. This is a basic feature offered by most optimisation plugins. 

Combine CSS and Javascript: Using a single file for loading the JavaScript code and CSS will reduce the number of requests and can speed up the rendering. 

By enabling this, a single file will be used to deliver all the CSS resources and each resource will be grouped by media type. 

The same happens with the JavaScripts as the number of DOM requests can be reduced, which will increase the overall speed performance. 

Reduce Render Blocking: The most common reason for slow PageSpeed score is the excessive use of Javascript and CSS. Though some Java and CSS files are critical for the overall stability of the websites, not all have to load above-the-fold, which makes it render-blocking. 

It’s important to optimise the execution of non-critical JavaScript and CSS. Make sure that these files are rendered only after the user interaction with the site is detected. This option can drastically improve the PageSpeed score and additionally help you to achieve the perfect WebVitals score.

I know by now, most of you may be thinking, I have done all of these but still my WebVitals Score is not up to what Google expects. If that’s the case, it’s because you missed out one important aspect of CSS and Java delivery - the CDN again. 

Deliver CSS and JavaScript Using CDN: Once again, until you implement the CDN for loading JavaScript and CSS, you are banking on the speed of your server to deliver all these resources. 

Most of the time, without the CDN, you can reduce the load put on the server but it will still sweat. 

To be frank, there is a ton of it. Our tests have come out with mind blowing results for websites that have enabled it. 

 

C. Optimising the Font

Font rendering behaviour is one of the most important speed drainers. 

Browsers are trained not to render the text unless the font loads from the payload. This causes a lot of delay in rendering the pages and results in slower page speed. 

To optimise the font, ensure your CDN can override font rendering behaviour. A good CDN can swap the font of the rendered text and display the original font as soon as it loads from the CSS. 

In normal cases, this happens within a few microseconds as both resources are delivered from the same CDN server simultaneously. This can significantly decrease the Cumulative Layout Shift and give you a perfect WebVitals score. 

 

D. Embed Codes

Embedding images and videos on a website can slow down a site. However, many businesses cannot choose to get rid of these videos since they are a part of a product demo or introduction video.

Google recommends a quick fix for embedded images and videos where you can lazy load these assets too. Also make sure the video resources load only when a user clicks on the “Play media/video” button. 

When we implemented this optimisation, it showed a 70% improvement in performance in Lighthouse. 

 

E. AMP Pages

A slow server can significantly affect the performance of a website. AMP cache can help optimise delivery, but enabling AMP for desktop may cause significant UI changes and impact conversion. So ensuring your server is responsive and fast still remains essential.

 

Conclusion

This introduction of Core Web Vitals may seem overwhelming to the website owners, but on achieving the perfect score, it gives better user experience and can improve the conversion multi-fold. 

According to Google, the average page load time for mobile devices and desktop is less than 3 seconds. The majority of top traffic-driving websites load within 4 seconds or less.

If your website takes up a lot of time to load, your visitors will automatically choose to opt-out from your webpage and visit your competitor’s site instead. 

Often, this situation leads to “click rage,” which are moments when a user repeatedly clicks on a web page due to frustration arising from a delayed response from the site.

For many marketers, the click rage is an actionable insight to improve their site experience. 

With Google laying out these metrics, it will be easier for webmasters to optimise their site for improved SERP rankings and prioritise user experience above everything else. 

Let's increase your sales.

Claim your $2,000 Audit for FREE by telling us a little about yourself below. No obligations, no catches. Just real, revenue results.