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.
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:
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.
To improve the FCP score of your web app, you can follow these techniques:
First, identify the render-blocking tags using the Lighthouse tool.
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.
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;
} We can optimize this code to a single line like this.
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.
Unused CSS files consume loading time. Just remove any unused CSS file.
You need to maintain the network payloads below 1600 KiB. If not, it will cause a performance lag on your webpage.
To avoid higher network payloads:
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.
Let’s discuss how to reduce the LCP time to improve usability.
Always choose a suitable server to host your application.
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.
<link rel="preload" href="css/style.css">
To download it faster while keeping the window.onload event and not delaying the process:
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.
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.
A good webpage has a CLS score of less than 0.1.
The following formula is used to calculate the CLS score.
CLS Score = impact fraction * distance fraction
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.
Never overlay content over the existing content. It will overflow the content and lead to a high CLS value.
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.
To maintain an optimal FID score, we can use the following techniques.
Load third-party resources such as web embeds efficiently to get a good FID score. You can get ideas from this article for best practices for third-party web embeds.
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.
Make the following changes to the web app to minimize the JavaScript execution time:
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!