Top Ranking of Webpage on Search Engine Result Page is the most uplifting experience for the SEO professional as well as the site owner. SEO Professionals have strived to come up with various strategies to get the ranking of the website on the first page of Google.

It has been a trial-and-error method and there has been no set formula, or a program or a manual from Google detailing the procedure to get the top ranking for your website on search engines.

However, in 2020 Google announced that there will be the release of new ranking criteria in 2021 and that is Page Experience. This new page experience algorithm from Google has started to roll out in June 2021 and will be completed by end of August 2021.

Page Experience metrics of the web page will be the standard measure for ranking the page. Page Experience is also referred to as User Experience (UX) metrics as these metrics will be based on the user’s experience of the webpage. UX has always been an integral part of SEO. Henceforth, UX shall be a critical factor and consequently has to be considered by the developer from the planning stage while developing a new website for the customer.

What is Page experience or User experience?

Page experience or User experience is

1. Loading time of the page – Speed with which the website is displayed
2. Seamless transition without any delay on various devices and the reaction time to user’s action by the webpage – Interactivity and Responsive layout of the website
3. Invasive interstitials – Popup display as the user is about to click the button are the Vital factors and will be decisive in the ranking of the page

What are CORE WEB VITALS? – Let us understand Core Web Vitals and the steps needed to improve them.

The metrics associated with the above-mentioned User experience are termed as CORE WEB VITALS.

Core Web Vitals are the metrics that work cohesively with other metrics to enable rank higher on SERP. This combination of existing metrics and the new ones are Web Vitals. Some of these metrics are derived from controlled lab tests, whereas some other are from field data – real-time experience – that is the metrics of the real-time experience the visitor has on the website. These User Experience metrics will now be called Core Web Vitals and Google will assess this every year and make changes in those if required.

It will be the feedback of the user related to the following three points when he browses the website

• Speed of the page – Every user will want to navigate smoothly through the website and is irked if the site does not load immediately and may contemplate or attempt to leave the site for another alternative site.
• Interactivity – clicking on a button with immediate response is a huge plus, however clicking on the button and slow response or no response is not viable
• Stability of the page layout – the webpage is displayed on the mobile with all the sections stable and offering smooth navigation is a good experience and the user tries to click on the button and it gets clicked on something else due to layout shift thus irritating the visitor and offering a bad experience.

The above three factors will be evaluated by checking their score on the following three-core metrics.

• LCP, Largest Contentful Paint will measure the Speed of the webpage: LCP will measure the time taken by the largest piece of content to display on the screen and that can be an image or a text block. Fast loading will result in a higher ranking.

• FID, First Input Delay will measure the Interactivity and Responsiveness: The measure of time taken for the interaction with the user, when he taps a button, for instance, will be decisive in the ranking. An immediate response will yield a higher ranking.

• CLS, Cumulative Layout Shift will be the metric to measure the Stability of the page layout – shift in the layout: CLS will measure the visual stability of the website. It is irritating for the user who clicks a button and an advertisement Popups as there is a shift in layout. It is necessary to prevent such layout shift that causes frustration and earn a higher rank.

LCP, FID, CLS are the Core Web Vitals.

How to improve Core Web Vitals / User Experience?

Google has suggested to the site owners to be focused on LCP, FID and CLS – the Core Web Vitals and ensure that they are up to the required standard. John Mueller from Google has also said that all metrics appearing green will boost the ranking.

Getting the green scores in Core Web Vitals is significant, however, one should not focus only on optimizing the site for the green scores. Fresh and relevant content interspersed with subject-related keywords is the best and easy route to get found on Google. Hence, it is imperative to have fresh and relevant content on a website. Along with fresh and relevant content, these green grades of Core Web Vitals will be a perfect potent combination to achieve a higher ranking.

Let us now further explore each of these vitals and check the set benchmark required.

Largest Contentful Paint will check the time at which the Largest Content is Painted.  Largest Contentful Paint is simple and easy to understand – it is the time taken by the largest content and this largest content can be text, image, videos or other content to be displayed on the screen. Importantly, LCP does not measure the time taken by the webpage to load. For instance, if the page consists of text and a large image, it becomes necessary to optimize the image as it is the largest content. If the image is loaded quickly, it will imply that the site will also load fast. Some of the other critical steps to get a green score on LCP is to minify unused non-critical CSS and JavaScript, Optimize the text files, etc.

What is the benchmark time required in the LCP?

As per Google, LCP should be displayed within the first 2.5 seconds of the page loading. If it is under 2.5seconds to 4 seconds then it will require improvement and time to load the LCP if is more than 4 seconds then it is a poor score.

                                                          Image 1: LCP benchmark time measurement

The FID – First Input Delay is the time taken by the browser to respond to the user’s first interaction.  The speed with which the browser reacts to the user’s action such as click a link, press a key, or tap a button will indicate the responsiveness of the webpage.

The FID measures input actions like taps, clicks and key presses and this does not include scrolling or zooming. Your aim should be to offer the best experience to the user and the road to that ideal experience is created by working on improving the responsiveness of the page.

FID is the field data because it is calculated during real users experience when the user interacts with your page and experiences the delay.

This data is not controllable as there are various parameters to take into consideration such as the multiple devices, using of devices in different ways and in a different environment and hence there is a change in data.

The benchmarks for FID set by Google states that if the display is in 100ms then it is rated as good, between 100ms to 300ms it requires improvement, and if the time measured is above 300ms then the performance is termed as poor.

                                                           Image 2: FID benchmark time measurement

When the website gets displayed on the screen and the user clicks the link and there is a delay in response or there is no response, that will imply a bad Page experience – not appropriate to achieve a higher ranking.  It can be because the browser is performing several tasks and hence needs to put a few of those tasks on hold. However, you can sort these issues by evaluating the reasons using various tools and ensure the FID score is up to the desired level.

CLS: Cumulative Layout Shift – The third Core Web Vital measures visual stability, i.e., it shows how stable is the content when it is loads on the user’s screen. This metric measures the cumulative score of all unexpected layout shifts on all types of devices of the page.  This layout shift may be due to the Popups ads that crop up when the user is about to click a button causing frustration and thus portraying a bad page experience.

To understand the scale of the movement of the elements CLS compares the frames. CLS considers all the points where layout shift is occurring and calculates the magnitude of the movements. Google has set the standard measure of below 0.1 as appropriate, anything from 0.1 to 0.25 requires improvement and above 0.25 is considered poor.

                                                                            Image 3: CLS benchmark score

These layout shifts occur in the case of websites having a lot of ads. These websites load poorly and thus cause inconvenience for the users. In some cases, the complex sites are heavy to load and the browser takes time to load the site impacting the CTAs button to change its position.

In some of the websites, web developer while writing code does not write the width and height of the image. And when the website is loading, the text appears first because the browser takes time to find the slot for the image without the requisite details.  The image will load later and emerge in the slot, where text is placed to create disruption resulting in a dismal page experience and bad CLS score. Hence, specifying the width and height of an image in the code helps to improve the CLS score.

Page Speed Insights is a tool to measure Core Web Vitals. You can measure the metrics and accordingly make changes to better the ranking using Page Speed Insights – tool from Google. Page Speed Insights is one of the many tools provided by Google that analyses the content of a web page and then offers significant insights and recommendations that will help improve the page speed.

Type the URL of the webpage you intend to test in https://developers.google.com/speed/pagespeed/insights/ and within the next few seconds, you will get the report from Page Speed Insights detailing the insights on a scale of 100.

In this, you will have two separate metrics – Mobile and Desktop and can be viewed by switching the tabs. Also, the data is divided into two different sets –

Field Data and Lab Data.

Field Data

                                                                              Image 4: Field Data

Field Data is collected in Real-Time and hence is the collection of actual loading speeds over a period of 28 days also called Chrome User Experience – CRUX Report. Field Data will alter due to many reasons (such as internet speed, location, device type, etc.) as it is from real users.

Lab Data

                                                                                  Image 5: Lab Data

Lab Data is measured under fixed conditions and hence it is collected under the ideal conditions.

FCP, TTI, Speed Index and TBT are the other metrics from Lab Data apart from LCP and CLS as seen in the above image of Lab Data.

What is FCP, TTI, Speed Index and TBT? 

First Contentful Paint metric measures the time from when the page is requested by the user to the time the first object of the website is visible on the mobile screen. FCP is the first non-white object seen on the mobile screen. Check the image 6 below.

                                                                                      Image 6: FCP and LCP

Time to Interactive is the time duration from the time the page is requested by the user to the appearance of the page on the screen to enable the user to interact on the page.

Speed Index measures the time taken to visually display during the page load.

Total Blocking Time measures the amount of time it takes between FCP – first content to appear on the screen and TTI – the time user can interact with the webpage, wherein between there is a lag time when the server performs some tasks. This blocking time occurs when the page is executing some JavaScript.

Steps to improve the score projected by Page Speed Insights

Optimizing Image to improve LCP – To optimize the image, you can use shortpixel.com – insert the image and get a compressed image that is lighter and will improve the loading speed of the website.  You can optimize 100 free images per month on Shortpixel.com, or if feasible you can opt for a pro package.

Following is the example of the improved score of LCP by image optimization only.

The Services page of a digital marketing agency – DigitalSpeedX had a score of 53 when checked in the Page Speed Insights. The LCP was 13.9s as seen in the image 7 below.  The image below also shows the LCP element – Largest Contentful Paint – are the two images as displayed in the Diagnostics of Page Speed Insights.

                                             Image 7: Page Speed Insights score before optimizing the LCP

I compressed the two images using shortpixel.com and then again checked in Page Speed Insights and the score was 82 – a huge improvement. The LCP loading time has considerably reduced to 2.6s as seen in the image 8 given below.

                          Image 8: Page Speed Insights score and LCP score after compressing the two images.

The LCP metric score indicates that optimizing the image by compressing will definitely increase the uploading speed of the largest element of the webpage. One can further reduce the loading time by removing unused CSS and JavaScript.

Optimizing the two images (LCP element) as suggested in the Diagnostics section of Page Speed Insights has also resulted in significant improvement in the Time to Interactive and Total Blocking Time.

Time to Interactive in the Lab Data was 10.0s and in the red zone and the Total Blocking Time is 220ms and later after optimization of images the TTI is 3.7s and TBT is 50ms as is shown in the image 9 below.

                                                                         Image 9: TTI and TBT comparison

Improvements in TBT – Total Blocking Time is linked to improvements in TTI (Time to Interactive) and FID (First Input Delay).

Compressing is helpful in minimizing the delivery size and increasing the load speed thus improving the LCP score. However, most Host Providers provide server that compresses files automatically.

How to improve on FID:

The reason for FID is the use of JavaScript. JavaScript is used in the majority of websites to create amazing interactions using complex codes. The browser hence needs time to respond to input as it is busy executing the complex code.

FID can be improved by removing unused JavaScript. Similarly minifying, compressing and removing unused CSS code will also help in achieving the desired Page experience.

The score in Page Speed Insights and the details provided in the Opportunities section such as Eliminate render-blocking resources, Reduce unused CSS and Reduce unused JavaScript are very helpful to improve the FID as seen in the image 10 below. You can get the further details of the related tasks for implementation by clicking on the drop arrows shown alongside.

                          Image 10: Opportunities Section from Page Speed Insights states the details to improve the FID.

Tools to minify unused CSS and JavaScript, and help improve the upload speed. – CSSnano having many powerful features used to compact the CSS. CSSO (CSS Optimizer) is another CSS minifier that cleans by removing unused CSS, compresses and restructures to minify the CSS.

UglifyJS is a toolkit to minify JavaScript. Closure Compiler is another tool to minify JavaScript. It has various features. This tool parses the JavaScript, further analyses it to remove the redundant part and rewrite the rest of the script.

Improve the CLS by specifying the image and width – Some of the websites built using JavaScript are really pleasing for the eyes, the design and the interaction created are really amazing. However, this – complex code – also is the reason for the slowness of the websites. Tools to minify are already mentioned above. Parsing code and removing the unused can help improve the CLS.

Diagnostics of Page Speed Insights also indicate in the Diagnostics section that there are an image-elements without the details of width and height – check image 11. You can further check the details of images by clicking on the drop arrow alongside. This helps to make the necessary amendments to avoid the layout shift.

                                                  Image 11: Diagnostics detailing image element to avoid CLS.

Tools to measure Core Web Vitals

Page Speed Insights: As seen above it is a free tool to find and help to fix issues that reduce the speed of the website. 

Lighthouse – an open-source tool that collects and analyses lab data to combine with real-world data from the Chrome User Experience Report. This combination output is a score that reflects the performance with valid recommendations to improve the ranking.

Visit the link – https://web.dev/vitals-tools/ for some more information on tools from Google to measure the Core Web Vitals.

Google Search Console: Page Speed Insights is useful to test a few pages, however the Core Web Vitals report in Google Search Console will provide a detailed idea of how complete site loads.

The Core Web Vitals report from Google Search Console gives us the information of the speed with which your web pages are loading at any given time – Image 12.

                                                           Image 12: Core Web Vitals from Google Search Console

Google Search Console’s Core Web Vitals checks their scores and segregates the pages according to the speed of loading into three different categories and those categories are good speed, poor in loading and requires improvement.

Some More tips to improve the Core Web Vitals–

CDN or Content Delivery Network offered by the Host Provider is a very good remedy to speed up the loading of the page.

Host Providers install CDN – a network of servers across the globe to deliver the content of the website. CDN delivers the static content – images, CSS, etc, however, the main host server will load the website’s database, etc.

What CDN will do? CDN will store the content of servers and is available all around the world. The advantage of CDN in delivering the content when requested from the server closest to the visitor as there is a reduction of disk space and bandwidth. Time spent will be less as the distance is less is the simple logic. HOSTINGER provides a reliable CDN service with impregnable security along with a quality performance. HOSTINGER also provides Cloudflare for free. Cloudflare is an effective CDN network to increase and enhance the security and performance of the website.

CDN using an edge server can cache your content so it is not reloaded every time, again saving vital time and resulting increase in speed.  

A good reliable and fast Host Provider is the best option for getting the website load faster. Host providers offer various options for hosting websites and those are- Shared Hosting, Virtual Private Server (VPS), Dedicated Hosting.

Shared Hosting is the cheapest option available. It is a viable option for a small start-up business. As the title Shared Hosting you will be sharing the server place with other websites. Server resources such as RAM, CPU and disk space are shared on Shared Hosting.

In VPS Hosting you will get your own dedicated portion of the server’s resources even though you are sharing the server with other websites.

In Dedicated Hosting, you have a dedicated server with more space and obviously, there will be no sharing of resources.

HOSTINGER is the best option as a Host Provider as it is the fastest and reliable Webhost and is perfect for any of the above options. One of the reasons HOSTINGER can be the preferred host provider is that it offers SSD (Solid State Drive Hardware) for faster loading time.

Some more benefits of HOSTINGER as host provider along with the budget-oriented pricing for various plans.

• 24 x 7 excellent customer service
• An SSL certificate – Secure Sockets Layer- is the digital certificate that authenticates the website and it also encrypts sensitive information. This is helpful to protect any passwords, addresses or the credit card details or any other user’s data. SSL is a security protocol that conveys trust to the users.
• Free scan protection for your WordPress Blogs

WordPress Theme – For a good lightweight and user-friendly WordPress theme I will suggest ASTRA. It has a user-friendly clean and elegant interface. The ability to enable or disable features as per your preferences is another virtue of ASTRA. Available in free and pro versions it is the best theme. Along with drag and drop page builder, you can develop a professional-looking website as desired.

Conclusion: All the suggestions mentioned above will help you improve your page experience. Initially, it may appear a complex task to achieve. However, my thinking is if you create an easy to navigate responsive website with fresh relevant content, Core Web Vitals metrics will automatically show a good score. Hence, it is necessary to focus on what users will expect and set it up accordingly because eventually user experience matters.

I would like to know your experience of Core Web Vitals and the steps you have taken to improve them in the comments section.