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 Web Vitals.
With Google’s announcement about the new Web Vitals 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.
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 Web Vitals 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 are Core Web Vitals?
Core Web Vitals, or just Web Vitals, are a new set of performance metrics that analyse the speed signals essential to delivering a superior user experience on the web. In short, Web Vitals are a set of specific factors that will be part of Google’s “page experience” score, measuring how users experience the speed, responsiveness, and visual stability of a page.
(Image Source: Search Engine Journal)
Core Web Vitals are made up of three specific page speed and user interaction engagement measurements: largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).
Why are Core Web Vitals important?
Importantly, Web Vital compliance is going to be the latest entry to Google’s ranking signals. Starting in 2021, Google will make page experience an official ranking factor.
(Image Source: Google Search Central)
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.
Where and when is this going to affect rankings?
Google has announced that Core Web Vitals will become ranking signals for search results in May 2021.
But, while a great page experience score will help you rank higher, it won’t magically push you to the #1 in Google. In fact, Google notes that page experience is still just one of many ranking factors that they use to rank sites in search.
(Image Source: Google Search Central)
In this article, you’ll learn more about how the Core Web Vitals will affect rankings, what site owners can do to improve their performance metrics, and get some of the tools and know-how you can use to get started - and get ahead.
Let’s dive in.
Core Web Vitals Metrics
The Core Web Vitals, introduced in May 2020, are valuable metrics related to site speed, responsiveness, and visual stability.
Performance metrics for each Web Vital statistics are graded according to three outcomes:
Google classifies these three metrics as follows:
(Image Source: Search Engine Journal)
Largest Contentful Paint (LCP)
LCP is measured by the amount of time it takes for a page’s primary content to load. In layman’s terms, it is the time from clicking on a link to seeing the content on-screen. LCP is hugely influenced by the render time of the largest image, video, or text in the viewport. Site owners can improve LCP by:
Removing any unnecessary third-party scripts
Upgrading their web host
Setting up lazy loading
Removing large page elements
The ideal LCP measurement should be 2.5 seconds or faster.
First Input Delay (FID)
FID measures the time it takes for a page to become interactive. In layman’s terms, it is the amount of time it takes for a page to be ready for user interactivity such as clicks, scrolls or keyboard input. Google considers FID important because it takes into account how real-life users interact with websites. Site owners can improve FID by:
Removing any non-critical third-party scripts
Using a browser cache
An ideal measurement for FID is less than 100 ms.
Cumulative Layout Shift (CLS)
CLS measures the visual stability of a page. In layman’s terms, this is the amount of unexpected layout shift of visual page content. Site owners can minimise CLS by:
Using set size attribute dimensions for any media (video, images, GIFs, infographics, etc.)
Making sure ads have a reserved space
Adding new UI elements below the fold
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 define page experience.
As technology improves, the current scores may change based on what users expect a good web experience to be.
Tools to measure and report Core Web Vitals
Now that you know the three signals that go into Core Web Vitals, let’s focus on what’s most important - measuring and reporting. In other words, do you measure how you’re doing with Core Web Vitals, and if you have an issue, how do you go about fixing it?
Since Google believes that the Core Web Vitals are critical to all web experiences, it has made tracking them very simple. Google’s Chrome User Experience Report collects anonymised, real user measurement data for each Core Web Vital. This data enables site owners to quickly assess their performance without requiring them to manually instrument analytics on their pages. It also powers tools like PageSpeed Insights, and Search Console's Core Web Vitals report.
(Image Source: web.dev)
Google Search Console and PageSpeed Reports
The first thing you need to do is look on Google Search Console, where you’ll find a new report called Core Web Vitals Report. This is designed to show how your pages perform based on real-world usage data (sometimes referred to as field data). The report will also tell you which of your URLs are poor, which need improvement, and which are good.
To further diagnose and troubleshoot issues, you’ll want to use Google PageSpeed Insights, which is linked to every report in Search Console. Here is an example of a PageSpeed Insights report for LCP:
(Image Source: Backlinko)
PageSpeed is powered by Lighthouse, a suite of performance metrics tools. These can be pretty technical, so you may need a web developer or page speed expert to address the issues that appear.
How to achieve the perfect Web Vitals score?
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.
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 Web Vitals score.
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.
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 article is going to discuss precisely this.
Resource optimisation for Core Web Vitals
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 Web Vitals score for the client you just saw above.
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.
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.
By enabling this, a single file will be used to deliver all the CSS resources and each resource will be grouped by media type.
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.
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.
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.
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.
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.
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, 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.