What's new in Web Vitals?

It is very important that the bespoke web app or website New Media Aid develops for you is user-friendly (i.e. intuitive, easy to understand and navigate), loads quickly (i.e. the majority of the visible screen’s content fully loads with 2.5 seconds), responds quickly (i.e. when a user clicks a link or taps on a button the response should be less than 100 milliseconds or a tenth of a second) and should have visual stability (i.e. no unexpected layout shifts, e.g. you are reading an article online when something suddenly changes on the page and you lose your place or you were about to click a link and end up clicking something else because of content movement).

Unexpected movement of page content can happen for a number or reasons, e.g. when there are images or videos with unknown dimensions, a font that renders larger or smaller than its fallback, a third-party ad or widget that dynamically resizes itself. Personalised or third-party content often doesn't behave the same in development as it does in production (i.e. on the live website) as images are often already in the app developer's browser cache, and API calls that run locally are often so much faster than when run from the server that the delay isn't noticeable.

Our experienced app development team use Core Web Vitals to help quantify the experience of your website or web app to users and identify opportunities to improve the website’s or web app’s performance from a user perspective.

The three main metrics we use are as follows:

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded, the faster the better. In the past it was very difficult for our web developers to measure how quickly the main content of a web page loaded and was visible to users. Our web app developers with decades of experience used to rely on older metrics like load or DOMContentLoaded which didn’t really correspond to what users actually saw on their screen and more recent user-centric performance metrics such as First Contentful Paint (FCP) only captured the very beginning of the loading experience which again was not that useful if we were using loading indicators or splash content.

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less across mobile and desktop devices.

First Input Delay (FID)

First Input Delay (FID) measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.

FID measures the time from when a user first interacts with a page (i.e. when they click a link or submit a button) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

As experienced app developers who write code that responds to user actions, we can sometimes take it for granted that our code will run immediately as soon as the user action occurs. However, we've all experienced the opposite, perhaps by opening a web page on our phone and found the links or buttons were not responsive (feeling like the screen was frozen).

Usually such frozen episodes (which we call input delay or input latency) are due to the browser’s main thread being tied up doing something else (e.g. loading a large uncached JavaScript file) and when doing that it cannot run any event listeners because the JavaScript it's loading might tell it to do something else so it waits for that file to load before responding the user actions (link or button clicks, scrolling, etc.)

To provide a good user experience, sites should aim for a First Input Delay of less than 100 milliseconds (a tenth of a second) across mobile and desktop devices.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1 second in between each shift and a maximum of 5 seconds for the total window duration.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

To provide a good user experience, sites should strive to have a CLS score of 0.1 or less across mobile and desktop devices.