Reality check feat. Web Core Vitals in 2021

Google has been trying to keep a healthy competition to uplift the content quality. With the mandarin of SSL across all websites earlier, by 2021, Google will start ranking websites based on the core vitals. As a publisher, you need to ensure that you’re ready for this transition. Get started now, so your page can be competent.

At Quintype, we’re all ready for this change.

Core web vitals are factors that google measures to score page experience. The three primary factors include - Site interactivity, Loading experience, and visual stability.

Keeping track of the WCV, publishers get to work on improving their website at a granular level. They get to access their content assessment, per URL, and get targeted feedback.

Largest Contentful paint, LCP

It indicates the loading performance. Quintype does meaningful server-side rendering. This means that as soon as the page loads, most of the elements are already meaningful or functional.

Some of the causes for poor LCP include- slow server response times, render-blocking javascript and CSS, slow resource load times, and third party javascript.

As mentioned in the Largest Contentful Paint API, the elements considered are:

• <img> elements

• <image> elements inside an <svg> element

• <video> elements (the poster image is used)

• An element with a background image loaded via the url() function (as opposed to a CSS gradient)

• Block-level elements containing text nodes or other inline-level text elements children.

Google’s guideline breaks down the grading into three :

Cumulative layout shift, CLS

The CLS measures visual stability. Let’s say you have an advertisement or an image on your header, it loads slowly, this creates a massive shift on mobile and desktop. At Quintype, we add placeholders for ads and any other visual element. This means that there'll be space left for the element so it doesn’t hinder reader experience. This does not entertain any shift on the screen.

First input delay, FID

The metrics to measure interactivity. The time it takes for a user to interact with the page. An input delay or latency occurs when a browser’s main thread is busy doing something else therefore being unable to respond to the user. A common reason could be because the browser is busy executing a large JavaScript file.

Our teams reduce the javascript that is executed and move most of it to the server-side compilation. This means that there’s no delay in the browser’s initial process. To reduce the time to interactive, lazy loading for all important elements of the page is done first, to allow a quality user experience.

After gathering input on where your website stands, you can then proceed to invest your efforts in areas that grade low. Google Search console can get overwhelming with graphs and numbers. However, with your website on the search console, you get data on search appearance, search traffic, technical status updates, crawl data, and additional educational resources.

How to measure and report Core Web Vitals?

Following are some of the available tools that support Core Web Vitals and can be used to measure them:

At Quintype, steps are taken towards systematically measuring performance. We check the page performance and ensure to keep the levels high. The lighthouse CI, performance measures on different devices before deployment. This is how our clients stay in beat with the trends and improvements.

Watch our latest webinar series on core web vitals

This session covers everything you need to know about Google's page experience update.

• Core Web Vitals 101

• AMP and Page Experience update

• Core Elements of Core Web Vitals

• Measuring Core Web Vitals

• Key Steps and results from the implementation of Core Web Vitals - CASE STUDY

You can watch the session on youtube.

One way to ensure gold standard for having your web page show up in search engine pages, is by using Server-side rendering for your applications. It helps the app be quick and effective while ensuring it is crawled and indexed by search engines. Read more on server-side rendering.