Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (36)Angular  (65)ASP.NET  (48)ASP.NET Core  (73)ASP.NET MVC  (88)Azure  (31)Blazor  (134)DocIO  (22)Essential JS 2  (76)Essential Studio  (169)File Formats  (25)Flutter  (121)JavaScript  (167)Microsoft  (109)PDF  (64)React  (47)Succinctly series  (126)Syncfusion  (550)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (30)Windows Forms  (57)WinUI  (40)WPF  (131)Xamarin  (148)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (53)Development  (335)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (277)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (8)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (34)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (88)UI  (190)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (302)What's new  (179)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Improve the Usability of JavaScript Web Applications with Web Vitals

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

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

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.

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

  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

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 this 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 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 forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top