How to Improve the Usability of JavaScript Web Applications with Web Vitals

Suresh Mohan - Jun 13 '22 - - Dev Community

According to Wikipedia, 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. 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 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

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

Source: web.dev

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.

Eliminate blocking resource when the page is loading

Then move the code from the render-blocking URL to an inline 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.

h1 {
    color: #FFFFFF;
}
h2 {
     color: #FFFFFF;
}
Enter fullscreen mode Exit fullscreen mode

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

h1,h2{color:#FFFFFF;}
Enter fullscreen mode Exit fullscreen mode

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

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

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

Source: web.dev

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 tag with the rel=”preload” property in the HTML header.

<link rel="preload" href="css/style.css">
Enter fullscreen mode Exit fullscreen mode

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 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

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

Source: web.dev

Source: web.dev

The following formula is used to calculate the CLS score.

CLS Score = impact fraction * distance fraction
Enter fullscreen mode Exit fullscreen mode

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 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

Source: web.dev

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 thisarticle 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 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 to evaluate the controls today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
for loop
Image
Conditional operator

cpp, programming, coding, beginners
Image
Untitled

codepen
Image
Git Tracking: Unlock Your Development Potential with devActivity
Image
Building a Robust Frontend Error-Handling System with Axios and Custom Hooks

react, javascript, nextjs
Image
First Open-Source Contribution Hacktoberfest'24 Experience

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Microservices with SpringBoot 🔥

webdev, programming, java, productivity
Image
How to Create a Gamertag Generator App Using Next.js

nextjs, webdev, javascript
Image
apa yang memberikan keuntungan dari slots online?
Image
Apa Bisa Suka Bermain Judi Online?
Image
Tengok Keuntungan Disamping Serunya Tergabung di Agen Judi Online Sah
Image
Logical operator

cpp, programming, coding, beginners
Image
demoprofiles

codepen
Image
C++ dasturlash tilida funksiya.
Image
انواع گروت و کاربرد هرکدام
Image
My First Hacktoberfest experience as a contributor.

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Infinte loop
Image
Creating focused domain applications. A Symfony approach (Extracting and validating data)

php, symfony, ddd, cleancode
Image
Mieszkanie Marzeń: Jak Stworzyć Idealną Przestrzeń dla Siebie
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .