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:
- Loading time
- Interactivity
- Visual stability
- Mobile friendliness
- Safe browsing
- HTTPS security
- Intrusive interstitials (pop ups)
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.
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.
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.
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
Using the Google Lighthouse chrome extension, we analysed the website of Pacific Smiles Dental as an example and discovered the following findings:
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.
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, find us at SEO Company Melbourne.
