How will Google’s Latest Update on Page Experience Create a New Web Page Ranking Signal

An overview

Content has always been the king. Site owners rely on high-quality content to rank their websites on search results. Good content is important to gather organic traffic to the site. Besides, the user experience also plays a major role in page ranking. It accounts for the technical part of SEO ranking.

Although user experience has its status, the role will increase many folds once Google’s new page ranking signal launches in 2021. This update talks in detail about the Core Web Vitals and related metrics. And all of this together will account for a page’s overall user experience.

This whitepaper talks about:

  • What is Core Web Vitals?
  • Tools that support Core Web Vitals
  • Optimizing the Core Web Vitals
  • Google’s new Update on Core Web Vitals 2021

What is Core Web Vitals?

Core Web Vitals is an initiative by Google to offer signals that improve your website’s overall user experience. It not only helps to quantify the user experience but also enhances the opportunity for improvements if any.

Google has come up with a new ranking signal that combines with the Core Web Vitals and existing user experience signals. Resulting in a bigger picture of the complete user experience of the website.

Core Web Vitals are a subset of web vitals that measure the performance of all webpages and offer results to the site owners. Every Core Web Vital offers a different trait of user experience. The Core Web Vitals 2020 was focusing on the following three main aspects of user experience and its metrics:

  1. Loading

Largest Contentful Paint (LCP) measures the page’s main content loading performance. To offer a great user experience, the LCP must be within 2.5 seconds of when the first page starts loading.

  1. Interactivity

First Input Delay (FID) measures interactivity and responsiveness. A good user experience means the pages must have an FID of less than 100 milliseconds.

  1. Visual stability

Cumulative Layout Shift (CLS) measures visual stability and possible layout shift. The pages must maintain a CLS of less than 0.1 to provide a good user experience.

Here are the tools that Google offers to support Core Web Vitals and their metrics.

Chrome User Experience Report – This tool efficiently collects real-time user management data for each Core Web Vital. This data is useful to analyze the site performance without having to manually check the instrument analytics of all the web pages separately.

Although the Chrome user experience report offers a faster way of assessing site performance, it does not provide a detailed, per-page view that is necessary to accurately diagnose, monitor, and react to regressions.

PageSpeed Insights (PSI) – This tool measures the site’s performance on mobile as well as desktop devices and offers suggestions for improvements. PSI offers both lab and field data of a specific web page. The former one helps to resolve issues before the release, while the latter helps to look into performance after the release of the website. Google offers a facility wherein you can enter your web page URL and check if it meets the requirements of the Core Web Vitals.

Search Console – This tool determines the site’s performance based on the metrics LCP, FID, and CLS. Generally, the Core Web Vital report shows URL performance grouped by status, metric type, and the URL group. Google has added a Core Web Vitals report in the search console. Users can see how many web pages are “good” or “poor” and how many “need improvement”.

Each of the above-mentioned tools gathers the site’s performance based on the three metrics, LCP, FID, and CLS.

Web Vitals Javascript Library – It helps to measure all the Core Web Vitals in the fastest possible way. The web vitals Javascript library is a small, production-ready wrapper around the underlying web APIs that measures all the metrics accurately.

The Core Web Vitals keep changing every year based on on-site owners’ needs and users’ expectations. Although the Core Web Vitals are field metrics, they can also be tested in the lab before the site is open to the public. This helps to debug the issues during the development phase before the website goes live. Field testing helps to identify the user’s device capabilities, network conditions, and other real-time performance-related factors.

How to make Improvements to the Website Performance?

Core Web Vitals help to identify opportunities to improve the site’s performance. Once you have identified the improvement areas, now is the time to optimize the metrics.

Optimizing Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures the time it takes for the largest content element in the viewport to become visible. In short, it measures the loading performance of a web page.

The most common causes of poor LCP are:

  1. Slow server response times:

One of the reasons for slow loading time is the amount of time it takes the browser to receive content from the server. If the server is fast, then automatically the loading time improves.

To resolve this issue, optimize your server. Improve the way your server handles your content. Use Time to First Byte (TTFB) to measure your server response times. You can improve your TTFB in several different ways mentioned below:

  • Optimize your server – Analyzing and improving the efficiency of your server-side code will improve the time it takes for the browser to receive the data from the server.
  • Route users to a nearby CDN – CDN stands for Content Delivery Network. It is a network of servers distributed in many different locations. If the content on your website is hosted on a single server, then it will take time to load in geographically distant locations. CDN reduces the wait time for such users.
  • Cache assets – If the HTML is static, then caching can avoid unnecessary recreation. Using CDN, configuring, and managing your cloud’s cache behavior, and configuring reverse proxies are some ways in which server caching can be applied.
  • Serve HTML pages cache-first – A service worker can intercept requests from the server once installed. This makes it possible to cache some or all of the HTML page’s content and only changes when the content changes.
  • Establish third-party connections early – Server requests to third-party origins impacts LCP. More so if critical content is displayed on the web page. Establishing third-party connections makes this process faster.
  1. Render-blocking JavaScript and CSS

Scripts and stylesheets are both render-blocking resources that delay FCP, and eventually LCP. To resolve this matter, defer any non-critical JavaScript and CSS to speed up the loading of the main content of your web page.

Reduce CSS blocking time

The CSS blocking time can be reduced with the following:

  • Minify CSS

For easier legibility, CSS files can contain characters such as spacing, indentation, or comments. These characters are all unnecessary for the browser and minifying these files will ensure that they get removed. Ultimately, reducing the amount of blocking CSS and improving LCP.

  • Defer non-critical CSS

The Coverage tab in Chrome DevTools finds any unused CSS on your web page. To optimize, remove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site.

  • Inline critical CSS

Inlining important styles eliminate the need to invest time in fetching critical CSS. This eventually improves LCP. If you cannot manually add inline styles to your site, use a library to automate the process.

  1. Slow resource load times

Although an increase in CSS or JavaScript-blocking time directly impacts the performance, the time it takes to load many other types of resources can also affect LCP.

Here are a few ways to ensure these files are loaded as fast as possible:

  • Optimize and compress images – Images are generally the largest element in view when the page has finished loading. Hero images, large carousels, or banner images are all common examples of this.
  • Preload important resources – At times, important resources that are declared or used in a certain CSS or JavaScript file may take more time to load than you think.
  • Compress text files – Compression algorithms, like Gzip and Brotli, can significantly reduce the size of text files (HTML, CSS, JavaScript) as they’re transferred between the server and browser. This improves the LCP.
  • Deliver different assets based on the network connection (adaptive serving) – When loading the main content of a page, LCP can be improved by fetching different assets based on the user’s network conditions.
  • Cache assets using a service worker – Service workers can be used to cache any static resource which can be served to the browser.
  1. Client-side rendering

Client-side JavaScript logic is commonly used to render pages directly in the browser. Frameworks and libraries, like React, Angular, and Vue, have made it easier to build single-page applications. These applications are capable of handling different aspects of the web page completely on the client rather than on the server. This can impact the LCP especially if a large Javascript bundle is used.

In this case, users may not be able to interact with any content on the page unless the critical JavaScript has finished downloading and executing. Hence, while building a client-side rendering site, consider the following points.

  • Minimize critical JavaScript – If the content on your site only becomes visible after a certain amount of JavaScript is downloaded, then it is a wise decision to minimize the size of your Javascript bundle. You can do this by:
    • Minifying JavaScript
    • Deferring unused JavaScript
    • Minimizing unused polyfills
  • Use server-side rendering – In addition to minimizing the Javascript bundle size, focus on combining a server rendering experience to improve LCP. However, there are some drawbacks to this:
    • Maintaining the same JavaScript-rendered application on the server and the client can cause complexity.
    • Executing JavaScript to render an HTML file on the server will always increase server response times (TTFB)
    • A server-rendered page cannot respond to any user input until all the client-side JavaScript has been executed. This can impact the LCP.
  • Use pre-rendering – Pre-rendering is a less complex technique than server-side rendering that improves LCP in your application. A browser without a user interface, also known as a headless browser, is used to generate static HTML files of every route during build time. With pre-rendering, TTI is still negatively impacted but server response time is not impacted as much.

Optimizing First Input Delay (FID)

First Input Delay measures the interactivity and responsiveness of a web page. It measures the time when a user is first able to interact with the content of the page. It is a field metric and hence cannot be measured in the lab environment. Real user interaction is required to measure the response delay.

It is seen that an improvement in Total Blocking Time (TBT) usually leads to improved FID. Here are some ways to optimize the FID of a web page.

  1. Break Up Long Task

This simply means to break down long-running code into smaller, asynchronous tasks. Long tasks can lead to an unresponsive user interface. Any piece of code that blocks the main thread for 50 ms or more can be characterized as a Long Task. Splitting up long tasks reduces FID.

  1. Optimize the page for Interaction Readiness

Poor FID and TBT can be because of heavy execution times, inefficient chunking, or user interactions being blocked by large script executions. These factors can increase the page response time. Data fetching can impact FID. Minimizing data can impact the First Input Delay (FID). Additionally, third party script execution can keep the network busy and make the web page unresponsive. Avoiding third-party scripting can improve the web page response.

  1. Using a Web Worker

A blocked main thread can cause input delay. Using a web worker makes it possible to run Javascript in the background. This cuts down the main thread blocking time and improves FID.

  1. Reduce Javascript Execution Time

Limiting the amount of Javascript on your web page eventually decreases the time that the browser needs to spend on executing the Javascript code. You can follow the below two ways to reduce the Javascript on your page.

  • Defer unused Javascript – By default, all Javascript is render-blocking. If the browser encounters a Javascript, it must pause its actions and download and execute the script. Hence, make sure that only the necessary scripting of your web page is done.
  • Minimize Unused Polyfills – The main concern about polyfills is that new browsers must not download them. Hence, minimize the unused polyfills so that the Javascript size is reduced.

Optimizing Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the visual stability of a web page. Layout shifts can be very disturbing to the readers. CLS is a core web vitals that measures the instability of layouts that don’t occur within 500ms of user input. Here are the common causes of poor CLS:

  • Images with Dimensions – Improper inputs to size attributes on your web page images and video elements can cause poor CLS. The best way to resolve this is to set a default aspect ratio of images based on an image’s width and height to prevent layout shifts.
  • Ads, Embeds, and iframes without Dimensions – Ads, embeds are one of the biggest issues that cause layout shifts. Ad sizes increase the performance of the web page due to higher click rates but reduce the visual stability of the page. Embeddable widgets allow you to embed portable web content on the page such as YouTube videos, Maps, Social Media Posts, etc. This issue can be resolved by reserving space for an ad or embed slot and avoid collapsing of the reserved space if there is no ad placed in the placeholder.
  • Dynamically injected content – Ensure that you do not insert new content over the old one. This might also lead to a layout shift. Some examples of Dynamically injected content includes:
    • “Sign up for our weekly newsletter”
    • “Follow our social media page”
    • “We are still taking orders”
  • Web fonts causing FOIT/FOUT – Downloading and rendering the web fonts can cause layout shifts in two ways. Firstly, the fallback font is swapped with a new font. This is called FOUT – Flash of Unstyled Text. Secondly, the invisible text is seen until a new font is rendered. This is called FOIT – Flash of Invisible Text.
  • Actions waiting for a network response before updating DOM.

Updates on Core Web Vitals 2021

Web Vitals and Core Web Vitals are the best signals available to measure the site’s performance. Although the signals are not perfect in providing improvements, developers are making full use of them. With the Core Web Vitals, the metrics also play a major role. Any changes to these metrics tend to have a huge impact on the site’s performance.

Google’s upcoming update on Core Web Vitals 2021 focuses not only on the existing Core Web Vitals and metrics mentioned earlier but also some additional metrics such as:

  • Mobile-friendliness – Using Google’s mobile-friendly test
  • Safe browsing – Check the security issues related to safe browsing, using the Search Console tool
  • HTTPS security – Page that has HTTPS security shows a lock icon in the address bar
  • Intrusive interstitial guidelines – Any time of extraneous content, for example, pop up ads. They block most of the main content and spoil the user experience.

Google intends to combine the Core Web Vitals with the existing user experience to form a new ranking signal that offers the overall experience of a given web page. The new ranking signal will make the interaction of users with the web more delightful. Additionally, it will enhance the overall experience of users with websites across mobile and desktop devices. This new ranking signal is supposed to be launched by May 2021.

The new ranking signal by Google will not only enhance user experience but will also help Google to rank the web pages. For instance, if a web page is providing a high-quality user experience, then it will be ranked higher on Google search results. Of course, the content will play an important role in page ranking too. However, if two pages offer the same high-quality content, then the ranking will be based on user experience.

Google has incorporated the metrics for users to check the performance of a particular web page. However, with its upcoming update on Core Web Vitals next year, this factor seems to be more interesting to the site owners. It will help the site owners to fix all technical limitations related to user experience. Site owners will be intimated at least 6 months before the release of the update.

Conclusion

In conclusion, the Core Web Vitals are essential for page ranking, just like good content. However, if two websites have similar content quality, then their page experience determines the page ranking. By combining Google’s Core Web Vitals with other user experience signals, Google is trying to help more site owners by enhancing the user performance of the websites. It is not easy to upgrade the page experience by offering rich content; however, content needs to be equally engaging.

According to experts, if you are a business owner, then you need not worry much about Google’s update. On the other hand, if you are a local service provider or an online retailer, then you must be extra cautious about the upcoming update on Google’s Core Web Vitals. Since your sales rely completely on your online presence, you must focus on user experience as well as the content. As per Google “A good page experience does not override having great, relevant content.”

Although we are not sure of the level of impact Google’s upcoming update will have on web page ranking signals, we are sure none of the site owners would want to risk their website traffic. Your site might be ranking on the top page without the presence of good content, still, that does not mean that it will continue to rank high after the update is launched.

We recommend you check the Core Web Vitals report of your website now. And, if the pages rank as “poor” or “need improvement”, then you immediately start to work on it. Google has deliberately given the facility of reports and metrics to website owners so that they can work on the shortcomings of the site and retain their SEO value. Therefore, make wise use of it.

About Prolore

Prolore is a holistic digital marketing SEO agency. We have skilled resources that work explicitly in areas like SEO, eCommerce, Cloud hosting, Social Media campaigning, and more. We offer varied marketing services that include

  • Creating highly customizable and engaging social marketing campaigns for your brand
  • High-end technology to power your digital marketing efforts
  • Data analytics techniques that enhance your branding

Get in touch with us now and avail a free SEO audit.

www.prolore.com