Insights into Google’s new Core Web Vitals ranking signal

Google recently announced changes to its search ranking system with the introduction of Core Web Vitals as a ranking signal. Below, we analyse the new additions to ranking criteria and take a look at a case study to explore what this change mean for your website.

Scheduled to launch in 2021, the new ranking signal, page experience signal, takes into consideration 7 aspects:

  1. Loading time
  2. Interactivity
  3. Visual stability
  4. Mobile friendliness
  5. Safe browsing
  6. HTTPS security
  7. Intrusive interstitials (pop ups)
Loading 
Largest Contentful Paint (LCP) 
Core 
Interactivity 
Web 
First Input Delay (FID) 
Vitals 
Visual Stability 
Cumulative Layout Shift (CLS) 
Mobile Friendly 
Safe Browsing 
H-rrps 
No Intrusive Interstitials 
Search signals 
for page 
experience
Image credit: Search Engine Journal

Core Web Vitals comprises of the first three criteria: loading, interactivity, and visual stability. So, what exactly are they, and why should you care about them?

Largest Contentful Paint

Largest Contentful Paint (LCP) measures the loading time of a page’s main content, such as large graphics or blocks of text. Essentially, it is a measure of how fast a page would potentially feel for the user. LCP does not measure the time it takes for all content on the page to load, but rather just the largest and most important parts

For instance, if a page has a short line of text but a large image which takes up a significant proportion of the page, it would measure the time it takes for the image to fully load, regardless of the load speed of the text. Thus, improving your page’s score for LCP could just simply involve optimising the loading time of a particular image or block of text, as opposed to the entire page. Google considers a score of 2.5 seconds or below as optimal, while 4 seconds or above would be poor.

Who has qualified for 
the September 
debates, so far 
debate by AE 
Who has qualified for 
the September 
debates, so far 
Only 
ABC 
Who has qualified for 
the September 
debates, so far 
eight 
the by nC 
Who has qualified for 
the September 
debates, so far 
debate by ABC 
The 
mal
Image credit: Google

In the above example from CNN, the main piece of content is highlighted by the green box. This shows how a page’s loading time is calculated by Google – the timer does not stop until the main piece of content, which in this case is the image, is fully loaded. This page’s LCP score would be considered optimal if it took 2.5 seconds or less to go from the first to last frame.

Causes and how to improve LCP

According to Google, LCP is affected primarily by the following four factors: (i) slow server response times, (ii) render-blocking JavaScript and CSS, (iii) Resource load times, and (iv) client-side rendering.

To improve LCP, some steps that can be taken include optimising your server, using a CDN (Content Delivery Network), minifying CSS and deferring non-critical CSS, optimising images, and compressing text files.

First Input Delay

First Input Delay (FID) measures the speed at which a page reacts to user input. In other words, it measures the responsiveness of a page when a user interacts with it. FID measures user interaction such as clicks, taps, and key presses, but not interactions such as scrolling through a page or zooming in and out. To put simply, it measures the time which passes between when a particular user first presses a button, to when the browser actually begins processing in response to it

It is important to note that FID only measures the time it takes for event processing to begin, but not the time taken for the processing itself, which is another factor that affects user experience but is not considered in this ranking signal. According to Google a delay time of 100 milliseconds or below is optimal, while 300 milliseconds or above is considered poor.

Image credit: Bitsofcode

Causes and how to improve FID

Delay in event processing is primarily caused by the browser being unable to respond to user input while the main thread is busy. In other words, it occurs when some of the content is already visible for users, but is not yet interactive as the browser is still occupied with loading the rest of the page.

To optimise FID, some steps that can be taken include breaking up long tasks or removing unused JavaScript.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures the shift in layout of a page’s visual content. For example, a user trying to click a button only for an advertisement to unexpectedly appear in its place would be damaging to a page’s CLS score. CLS only measures unexpected shifts. For example, a smaller fold-out menu which appears when a user clicks on a main menu would not sabotage a page’s CLS score.

CLS score is calculated by multiplying the proportion of the screen that shifted unexpectedly when loading by the distance it travelled, and a score of 0.1 or below would be considered optimal while 0.25 or above would indicate poor visual stability.

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Sed nec 
lacus commodo. rnolestie est ncm, 
dapibus leo. Pellentesque volutpat 
nec libero nec cursus. Maecenas 
vulputate ultrices libero. vitae 
tincidunt mi sodales ac. Suspendisse 
potenti. Vivamus enim nisl, mollis at 
pretium at, laoreet d est. ln sit amet 
ex a ligula pulvinar ultrices sed a 
nulla. Donec et vulputate orci. 
Suspendisse non lacus fringilla, 
dignissim eros a, euismod tellus. 
Curabitur sit amet ultrictes lectus. 
Lorem ipsurn dolor sit amet, 
adipiscing elit. Sed nec 
lacus commodo, molestie est non, 
dapibus leo. Pellentesque volutpat 
nec libero nec cursus. Maecenas 
vulputate ultrices libero, vitae 
tincidunt mi sodales ac. Suspendisse 
potenti. Vivamus enim nisl, mollis at 
pretium laoreet id est. ln sit amet 
ex a ligula pulvinar ultrices sed a 
nulla. Donec et vulputate orci. 
Suspendisse non lacus fringilla, 
dignissim eros a, euismod tellus. 
Curabitur sit amet ultricies lectus.
Image credit: Google

For example, in this image, the red, dotted rectangle indicates the union of the element’s visible area in both frames, which, in this case, is 75% of the total viewport. Meanwhile, the unstable element (movement shown by the blue arrow) moved by 25% of the viewport height. Its CLS score is calculated by 0.75 * 0.25, which gives a result of 0.1875. According to Google, this score indicates that further improvements can be made to optimise CLS.

Causes and how to improve CLS

Advertisements and other large graphics are the main causes behind poor CLS scores. To minimise information moving around unexpectedly on a webpage, one thing which can be done is to always specify the dimensions of images in the CSS, thus reserving the right amount of space for graphics to load after text appears.

Pacific Smiles Dental: A Case Study

PacificSmiles 
DENTAL. 
Locations • 
Services • 
For Patients • 
For Dentists • 
Q Ask us 
Book an appointment 
Enter your suburb
Image credit: Pacific Smiles Dental

Using the Google Lighthouse chrome extension, we analysed the website of Pacific Smiles Dental as an example and discovered the following findings:

Metrics 
• First Contentful Paint 
A Speed Index 
A Largest Contentful Paint 
3.5 s 
8.7 s 
11.9 s 
A 
A 
Time to Interactive 
Total Blocking Time 
Cumulative Layout Shift 
11.4 s 
520 ms 
0.263

Lighthouse’s analysis results tells us that the website does not show a good trend towards the Core Web Vitals. For instance, we can see from the result of Largest Contentful Paint that the page took 11.9 seconds to fully load its main content, far slower than the 2.5 seconds recommended by Google. Likewise, its Cumulative Layout Shift score of 0.263 also exceeds the optimal score of 0.1 or below. While Lighthouse does not give a score for First Input Delay, the 11.4 seconds reported for Time to Interactive (TTI) implies a poor score for the FID criterion.

Opportunity 
A Serve images in next-gen formats 
A Effciently encode images 
A Remove unused JavaScript 
Remove unused CSS 
A Reduce initial server response time 
• Eliminate render-blocking resources 
Estimated Savings 
16.5 S v 
11.55 v 
o_75S v 
0.35s v 
0.3 s v

Lighthouse also provides recommendations for SEO. In the case of Pacific Smiles Dental, we can see that the three most crucial improvements to be made are: (i) serving images in next-gen formats, (ii) efficiently encoding images, and (iii) removing unused JavaScript.

Why are Core Web Vitals important?

A good score not only helps your website rank higher in Google’s search results, it also provides a much more pleasant user experience with the web page, leading to less cases of user frustration. A fast loading time, short delay in processing commands and a stable layout all provide a much more professional impression of the company to site visitors.

Although Google is yet to confirm the official date, Core Web Vitals is set to become the new ranking signal in 2021. Now more than ever, ensuring a smooth user experience is crucial for search engine optimisation.

To see what you can do to improve your website’s rankings with Google’s new Core Web Vitals, contact us at SEO Melbourne.

For more information, check out these useful videos and articles:

One thought on "Core Web Vitals: Google’s New Ranking Signal"

  1. kanokammo says:

    Interesting article. I have faced the same issue from last month. luckily I have found this guy on fiverr.

Leave a Reply

Your email address will not be published. Required fields are marked *