How to Improve the Usability of JavaScript Web Applications with Web Vitals
Tags: javascript, webdev, productivity, usability
Published: 2022-06-13 11:27:05

---
title: How to Improve the Usability of JavaScript Web Applications with Web Vitals
published: true
date: 2022-06-13 10:30:46 UTC
tags: javascript, webdev, productivity, usability
canonical_url: https://www.syncfusion.com/blogs/post/how-to-improve-the-usability-of-javascript-web-applications-with-web-vitals.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4qila6pwr0jlw4t7s3u.png
---

According to Wikipedia, [usability](https://en.wikipedia.org/wiki/Usability "Wikipedia page for usability") can be described as “the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience.” Usability is one of the most crucial factors to consider in modern web application development. To help analyze the usability of a web app, Google has introduced [Web Vitals](https://web.dev/vitals/ "Web Vitals"). Web Vitals can quickly track and perceive how well your website is doing in terms of performance and usability.

In this article, I will discuss how we can use Web Vitals to improve the usability of a [JavaScript](https://en.wikipedia.org/wiki/JavaScript "Wikipedia page for JavaScript") web app.

## Use of Web Vitals

Google’s Web Vitals program aims to provide unified guidelines for quality signals critical to delivering a great web experience.

Web Vitals has identified certain main benchmarks as Core Web Vitals. In this article, I will focus on the use of those benchmarks to improve the usability of a web app. The Core Web Vitals are:

- [First contentful paint (FCP) — Time to display the content](#first-contentful-paint).
- [Largest contentful paint (LCP) — Loading performance](#largest-contentful-paint).
- [Cumulative layout shift (CLS) — Visual stability](#cumulative-layout-shifts).
- [First input delay (FID) —Interactivity](#first-input-delay).

### First Contentful Paint

The FCP metric is the time it takes to load meaningful content on a webpage. For example, the content could be an image or text. A good FCP score is less than 1.8 seconds.

![Source: web.dev](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/How-to-Improve-the-Usability-of-JavaScript-Web-Applications-with-Web-Vitals.png)
<figcaption>Source: web.dev</figcaption>

To improve the FCP score of your web app, you can follow these techniques:

#### Eliminate blocking resource when the page is loading

First, identify the render-blocking tags using the [Lighthouse tool](https://developer.chrome.com/docs/lighthouse/overview/ "Lighthouse tool").

![Eliminate blocking resource when the page is loading](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Eliminate-blocking-resource-when-the-page-is-loading.png)

Then move the code from the render-blocking URL to an inline **<script>** tag on your HTML page. The page will have all it needs to handle its primary functionality when it loads.

#### Remove unused CSS files

Some CSS files are unnecessarily larger. A developer can minimize the length of these files. For instance, the following CSS code is unoptimized.

```css
h1 {
    color: #FFFFFF;
}
h2 {
     color: #FFFFFF;
}
```

We can optimize this code to a single line like this.

```css
h1,h2{color:#FFFFFF;}
```

As you can see, the excessive length is minimized. Of course, you can use any of the CSS minifier tools to do this, as well.

![Remove unused CSS files](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Remove-unused-CSS-files.png)

Unused CSS files consume loading time. Just remove any unused CSS file.

#### Avoid network payloads

You need to maintain the network payloads below 1600 KiB. If not, it will cause a performance lag on your webpage.

![Avoid network payloads](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Avoid-network-payloads.png)

To avoid higher network payloads:

- Implement a cache, so the webpage does not need to redownload the resources.
- Use compressed images on the webpage.

### Largest Contentful Paint

LCP measures the time it takes to render the most significant percentage of the webpage. An optimal LCP time is less than 2.5 seconds to provide good usability.

![Source: web.dev](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Largest-Contentful-Paint.png)
<figcaption>Source: web.dev</figcaption>

Let’s discuss how to reduce the LCP time to improve usability.

#### Optimize the server response time

Always choose a suitable server to host your application.

#### Use the PRPL pattern for instant loading

PRPL pattern stands for push, render, pre-cache, and lazy load. So, you have to push the critical resources initially. We can use the **<link>** tag with the **rel=”preload”** property in the HTML header.

```html
<link rel="preload" href="css/style.css">
```

To download it faster while keeping the **window.onload** event and not delaying the process:

1. Render the initial page route as soon as the page loads.
2. Pre-cache the remaining resources.
3. Use lazy loading to fetch the remaining assets, which does not affect the performance.

#### Image optimization

In webpages, images are elements that consume more time to load and be displayed. But, to create an appealing webpage, including high-quality images becomes inevitable. There are ways to optimize images without losing their quality, though.

Like any other file format, images contain data that isn’t mandatory to be rendered. This data can be removed from the image and we can still display it with good quality.

There are many image optimizers available on the internet. I would personally recommend [Tiny PNG](https://tinypng.com/ "Tiny PNG") for this purpose.

### Cumulative Layout Shifts

Layout shifting is all about the visual stability of the web app. Most users will feel irritated when there is an unexpected change in the content of the website.

![Cumulative Layout Shifts](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Cumulative-Layout-Shiftsgif.gif)

A good webpage has a CLS score of less than 0.1.

![Source: web.dev](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Cumulative-Layout-Shifts.png)
<figcaption>Source: web.dev</figcaption>

The following formula is used to calculate the CLS score.

```
CLS Score = impact fraction * distance fraction
```

#### Use fixed-size content and resources

Always use images and videos with a fixed size using the size attribute. The attribute will reserve the set space for them so the layout does not shift as they load. You can use the [aspect ratio box](https://css-tricks.com/aspect-ratio-boxes/ "Aspect ratio boxes") inside your CSS to change the size of the content dynamically.

#### Avoid content overflow

Never overlay content over the existing content. It will overflow the content and lead to a high CLS value.

### First Input Delay

FID defines the time between a user’s interaction with a page and when the browser begins the corresponding action. A good FID score is 100 miliseconds or less.

![Source: web.dev](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/First-Input-Delay.png)
<figcaption>Source: web.dev</figcaption>

To maintain an optimal FID score, we can use the following techniques.

#### Reduce third-party code impact

Load third-party resources such as web embeds efficiently to get a good FID score. You can get ideas from [this](https://blog.bitsrc.io/best-practices-for-web-embeds-a65416a21fc2 "Best Practices on Embedding Third-Party Web Widgets")article for best practices for third-party web embeds.

#### Minimize main thread execution time

Optimize third-party JavaScript components to get a fast loading time, and it will help reduce the main thread work.

Also, reducing the styles’ scope and complexity can reduce the thread execution time. Always try to use built-in styles to develop your application.

#### Reduce JavaScript execution time

Make the following changes to the web app to minimize the JavaScript execution time:

- Implement code-splitting. Thus, you can deliver only the code that your consumers require.
- Compress and minify your code.
- Remove any code no longer in use.
- Use PRPL pattern to cache your code. Then you can utilize the network payload.

## Conclusion

Usability is one of the main factors developers needs to consider. Core Web Vitals can help measure the usability of web apps. If you develop apps that meet the standards provided by Web Vitals measurements, you’ll give users a good experience.

Thank you for reading!

Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Syncfusion Essential JS 2 UI controls") is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a [free trial](https://www.syncfusion.com/downloads/essential-js2 "Free evaluation of the Syncfusion Essential Studio") to evaluate the controls today.

If you have any questions or comments, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [JavaScript Higher-Order Functions: A Complete Guide](https://dev.to/syncfusion/javascript-higher-order-functions-a-complete-guide-35g2 "Blog: JavaScript Higher-Order Functions: A Complete Guide")
- [Easily Create a Fillable Form Using JavaScript Word Processor](https://dev.to/syncfusion/easily-create-a-fillable-form-using-javascript-word-processor-2fno "Blog: Easily Create a Fillable Form Using JavaScript Word Processor")
- [Pros and Cons of Using JavaScript Interop in Blazor](https://dev.to/syncfusion/pros-and-cons-of-using-javascript-interop-in-blazor-4k7i "Blog: Pros and Cons of Using JavaScript Interop in Blazor")