DEV Community: Sivanesh Shanmugam

7 reasons why frontend web performance optimization is important?

Sivanesh Shanmugam — Wed, 06 Aug 2025 17:29:09 +0000

Web frontend performance and its monitoring are critically important. They directly affect user satisfaction, engagement, and ultimately the success of your online business. 🚀

BBC found they lost an additional 10% of users for every additional second their site took to load.
Statistics indicate that 40% of visitors will leave a website if it takes longer than three seconds to load.
Prefetching contents helped Terra increase ads click-through rate by 30% and speeds up LCP.
RedBus improved their website's Interaction to Next Paint (INP) metric and increased sales by 7%
64% of dissatisfied shoppers do not visit a slow website again

Web Frontend performance and its monitoring is so important as it directly impacts user satisfaction, engagement, and ultimately, the success of your online business.

Performance plays a vital role in the success of any online venture. Websites that load quickly and respond to user input in a timely fashion engage and retain users better than websites that are slow to load, and feel sluggish.

Here are the reasons why web performance is crucial. The first four reasons primarily stem from user psychology.

1. Best User Experience (UX)

Frontend performance directly impacts user experience. Faster loading times and smoother interactions enhance user satisfaction and engagement, leading to higher retention rates and increased conversion rates.

When users encounter swift response times and seamless interactions, they develop a positive perception of the application. This perception extends beyond just speed—it suggests that the developers have invested in creating a polished and dependable product. This perception of quality can enhance user trust and loyalty over time.

✨ Optimized web performance fosters engagement and encourages users to explore further, leading to increased interaction with content and higher retention rates.

2. Customer Retention

Providing a fast and responsive frontend experience enhances customer satisfaction and retention. Users are more likely to return to and recommend a product that performs well and meets their expectations. Positive user experiences contribute to building brand loyalty and long-term customer relationships.

🚀 If you care about retaining users, then you should be focusing on performance!

A slow app, on the other hand, may convey a sense of neglect or incompetence, leaving users with a negative impression of the brand or organization behind it. In today's competitive landscape, where user expectations continue to rise, maintaining a reputation for excellence and proficiency is essential for building trust and credibility.

3. Reduced Bounce Rates

Users are more likely to abandon a website if it loads slowly. By optimizing performance, you can decrease bounce rates and retain visitors for longer periods.

As mentioned above

🐌 Statistics indicate that 40% of visitors will leave a website if it takes longer than three seconds to load.

4. Reduced Cognitive Load

Slow-loading apps impose cognitive burdens on users, requiring them to allocate additional mental resources to process and interpret the delay. Users may experience frustration, impatience, or anxiety while waiting for content to load, detracting from their overall experience.

The stat from above says that the** level of stress caused by the delays in an app is almost equal as watching a horror movie**. This holds particularly true for applications that contain critical updates and information.

😰 I've personally experienced these frustrations while working to complete an important form on a bank or government website.

In contrast, faster apps reduce cognitive load by minimizing wait times and cognitive friction. Users can focus their attention on the task at hand without being distracted by performance-related issues, leading to a more immersive and enjoyable experience.

5. Competitive Advantage

In today's competitive market, businesses need to differentiate themselves from competitors. A fast and responsive frontend can be a significant competitive advantage. Users are more likely to choose a product or service that offers a better user experience and faster performance over slower alternatives.

6. Search Engine Optimization (SEO)

Search engines like Google consider website performance as one of the ranking factors. Faster websites are more likely to rank higher in search engine results pages (SERPs) compared to slower ones. By optimizing frontend performance, startups and businesses can improve their visibility in search engine results and attract more organic traffic to their website.

7. Enhancing Accessibility: Optimizing for Low-End Devices and Sparse Networks

If your website doesn't adhere to web best practices or lacks performance optimizations, there's a significant risk of losing a large segment of potential customers. These customers include individuals who:

Are on the move (e.g., using Metro, Bus, or Car)
Use low-end devices
Reside in areas with limited network coverage
To ensure a seamless user experience for these individuals, our web application should be designed to be easily usable and functional under various challenging conditions.

By ensuring that your site loads quickly and functions smoothly across different platforms, you can reach a wider audience.

Implementing effective caching strategies, optimizing the use of Content Delivery Networks (CDNs), and enabling offline access (among other tactics) ensure that users can continue using our application seamlessly, even in the event of a temporary loss of network or adverse conditions.

ℹ️ While you may not directly observe identical statistics between a B2C and a B2B product, as mentioned in this blog. But for sure, the influence of web performance on decision-making processes remains significant across both domains.

In summary, the speed of an app influences user's perceptions, emotions, and behaviors in profound ways. By prioritizing speed and performance, developers can create experiences that empower, delight, and inspire users, fostering long-term relationships and driving business success.

Thanks for reading the blog!

For more case studies like this, follow individual companies Engineering Blogs, or Web dev case studies.

View my original blog post for all the references used in this blog.

Create mock APIs for building frontend apps quickly without the backend.

Sivanesh Shanmugam — Sun, 09 Oct 2022 07:35:12 +0000

Whenever a team plans to build a feature, (If the team has dedicated Backend and Frontend developers), the frontend and backend tasks will be assigned simultaneously.

After confirming the use cases and the API Designs, It will be cool if we (Frontend Developers) have a mock API ready so that we can start building our features, and then it will require 0 to minimal effort when connecting the backend once it is ready. So knowing the methods and tools to create mock APIs will help you build apps faster.

Random Data Generators

In order to create mock APIs, we need some ways to generate mock data. These data will help us a lot in the future as well apart from the initial development. Like **testing, component documentation, **etc. So to create mock APIs we can either use

Mockaroo
FakerJS

Mockaroo

Mockaroo Page with a simple user schema
Create fields with the name and their types. Choose the number of rows and change the format to JSON (Or any format in which your API exists). Download it and import them for usage. The free version is enough for most cases.

You can even create and save schemas so that you can make use of those schemas to get data later.

Faker JS

FakerJS code for generating names and emails
Obtain values with the utility functions they provide and create datasets based on your API design. You can use the utility functions provided by the library to create random data.
Type of utility list provided by the FakerJS Docs
So with the above tools, we can generate the data we needed. So you can use these as datasets for the Mock APIs that you will be creating.

Create Mock APIs

The rest of the blog explains how to create Mock APIs. There are multiple methods mentioned here to create Mock APIs. You can choose a method that suits you based on your requirement.

Next.js API (Ignore this if you aren't using Next.JS)
JSON Server
Mirage JS

Next.js API

Next.js is a full-stack framework on top of React. So if you are using Next.js you know we can create API Routes. No new setup is required. We'll just make use of it for mock API.

For eg: Just create a file under pages/api/candidate.js and send the data you created. API Endpoint: /api/candidate

`json-server`

This is the most widely used approach for creating Mock APIs. It has 63K Github Stars and around 200k npm weekly downloads. Getting started with json-server is very easy. You can refer the docs.
A screenshot from the docs describes creating a mock API

Mirage JS

If you are building an enterprise-level product with complex app logic then Mirage JS would be the perfect fit for you.

It takes some time for setting up Mirage. Once done, It’ll provide a perfect developer experience. As you can use Mirage to create APIs for both new and existing projects allowing existing APIs to pass through.

These were the methods that I use when creating mock APIs for Frontend Development. If you have some better ideas please let us know. 😃

For more blogs like these, you can visit my blog sivanesh.dev.

Add Google Login to your React Apps in 10 mins

Sivanesh Shanmugam — Sat, 27 Jun 2020 12:49:34 +0000

As a client developer, Creating apps with authentication might be a tedious process. As we need to handle authentication in the server and maintain the code. It does have some multiple cases to be maintained based on authentication mechanisms. (Basic, OAuth, etc) This blog helps you create a standalone backend less authentication for your react app. (or additionally) you can add server configurations too to authenticate with your server.

Why OAuth?

There are many reasons to use OAuth.

It is secure.
It doesn't require any credentials from the user. So no need of remembering multiple passwords.
Websites can also get essential information about users without spending much time in forms.

And specifically in our case, we don't need a server to authenticate or to get initial details of the user. 😉

I found a package which is called as react-google-login. Which provides simple mechanisms to add the Google login. You can either directly use their GoogleLogin component or you can use custom buttons. They also provide custom hooks like useGoogleLogin and useGoogleLogout so it will be easy for hooks lovers. (Both methods are described below)

The documentation they provided for this repository is awesome. But it's missing in some ways which are addressed in this blog. Like in detail, this blog helps in creating your application in the Google developer console and access clientId. The initial access_token obtained by this package will last for only one hour (For security reasons). And we need to iterate the process to access the new access_token using refresh_token. So you can make a production-ready application.

Steps

We need to create an application in the Google developer console. It provides clientId is used to identify your application for authentication details. Follow the below steps to get the client ID.
1. Go to the Credentials page. ( if you are new, then create a project and follow these steps)
2. Click Create credentials > OAuth client ID.
3. Select the Web application type.
4. Name your OAuth 2.0 client and click Create
Make sure you provided your domain and redirect URL. So that Google identifies the origin domain to which it can provide authentication.

You can also add your local route for development. Now authentication setup in Google developer console is ready.

Lets code

Let's start with code. View my repo for accessing all code snippets. View Demo.

In your CRA install react-google-login package



npm i react-google-login

Create a Login component that acts as a login button.

Similarly, create a Logout component

And add both in the required location of your app. Mine is in App.js

Now running your application will show profileObj in the console after logging in.

Congrats 🎉 You successfully made it 😃.

But after 1 hour your tokenId gets expired and hence it won't be used to access data or authenticate users. And hence we need to generate new tokenId. To make things work we need to add some additional cases in the Login component.

refreshTokenSetup function will take care of handling new tokenIds

This function checks for expires_in timestamp or our custom time (before the token expires) and calls reloadAuthResponse which is a util function provided by the library and it handles refresh_token and obtains new tokenId.

And Yeah 😃 Google login is added to your application successfully 🎉. So now you can access the user's name, photo URL, email, google Id, etc.

Additional

The above way uses the Google Login default button. You can also use your custom button using render prop.

We can also implement the same functionality using React Hooks. ❤️

LoginHooks.js

LogoutHooks.js

Server-side verification

If you wish to add Server side verification, Send the tokenId from client to server once onSuccess in Login component called.

So while handling authenticated routes, All requests from the client need to send the tokenId of the user in the header as Bearer token. At Server, once token received it must be verified either this tokenId

belongs to the current application.
Has it expired

You can do them manually but google suggests using their authentication library (Minimal effort required).

In the Server side (Here Node.js is used).

Install Google's official supported library google-auth-library package which is used to authenticate and verify OAuth apps.

Here, With our GOOGLE_CLIENT_ID sent it verifies whether this token belongs to our application or not. And it parses them and provides profile details in the getPayload function. And you can use them to access user data.

Any queries feel free to comment or chat with me personally in my social media accounts below.

I love to be connected with developers. 😃

Twitter | LinkedIn | GitHub

A Minimalistic Web Portfolio for all devs 😎

Sivanesh Shanmugam — Sun, 22 Mar 2020 10:15:51 +0000

This is for developers who think

"My work and code speak more than a Portfolio website"

A small minimal Portfolio for developers who are tiring of thinking about creating their own new portfolio website. Due to the Pandemic outbreaks (as staying at home), I was thinking of creating a weekend fun project. While searching for ideas I came up with this. So that anyone can pull/fork this repo and use it to showcase their talents.

NO WEB DEVELOPMENT SKILLS NEEDED (If you do have, then can customize with your skills and ideas. 😄)

Responsive

It is fully responsive.

Demo

Laptops

Tabs

Mobile

Data for the Portfolio

You don't need to surf through HTML docs and update the data. All the data needed for your portfolio must be updated in data.js.