DEV Community: Himanshu

Fixing Performance of My React App — Step 1: Measuring What’s Slow

Himanshu — Sat, 19 Jul 2025 11:00:25 +0000

Part 1: Measuring LCP & Latency — Where’s My React App Slow?

TL;DR: If your React app feels slow, two key metrics to check are Latency and Largest Contentful Paint (LCP). In this post, I’ll show you how to measure them using tools like Lighthouse, Chrome DevTools, and GTmetrix.

As developers, we love to create software with our ideas that come to mind.
That's how we work, right? Many times, we focus so much on optimising code : using the best algorithms, scalable libraries, or modern technologies, that we forget something critical: actual runtime performance.

Have you ever wondered, despite doing so much, your website is loads slow, it takes seconds as compared to others, which took a few milliseconds.

When I notice that a lot of questions came into my head, such as:

Do they do something extraordinary?
Do they know more than I?
Do they use some advanced techniques or libraries?

Then I researched it with my portfolio website and came up with two major issues: Latency and LCP. What are they? Let me explain to you:

Latency -: It’s the time a website takes for a user’s action (like clicking a link) to result in a response (like the server starting to send data).

Think of it as:

How long do I wait before the website starts responding after I do something?

Types of latency in web:

Network latency – Time taken for data to travel from browser to server and back.
Server latency – Time taken the server takes to process and respond.
Input latency – Delay between a user’s interaction and the browser’s response.

LCP (Largest Contentful Paint) -: LCP measures the time it takes for the largest visible element (like an image or text block) to appear on the screen after a page starts loading.

In simple words:

How fast can the user see the main content of the page?
It reflects how quickly the user feels the page is useful, not just loaded, but visually complete.

Now you have a question about how to measure this, right?
Ideal LCP value:

Good: Less than 2.5 seconds
Needs Improvement: Between 2.5s and 4s
Poor: More than 4s

How to Measure Latency:

Lighthouse (in Chrome DevTools):

Open DevTools → Go to Lighthouse tab.
Run an audit (mobile/desktop).
You’ll get metrics like:
- Time to First Byte (TTFB) (indicates server latency)
- First Input Delay (FID) (interaction latency)

WebPageTest.org:

Go to https://www.webpagetest.org
Enter your URL and run a test.
It will show detailed latency breakdowns, including TTFB, DNS time, and more.

How to Measure LCP (Largest Contentful Paint) :

Google Lighthouse (DevTools or PageSpeed Insights):

Open Chrome → DevTools → Lighthouse tab → Run audit. OR
Go to PageSpeed Insights
Enter your URL
You’ll get the LCP time and suggestions to improve it.

2.Chrome DevTools → Performance Tab:

Open DevTools → Go to the Performance tab.
Click the Record button (top-left circle), then reload the page.
Stop recording after the page loads.
Hover over the LCP marker in the timeline to see what element was the LCP and how long it took.

If you don't want to do all this or Found this complex you can use a web tool called GTmetrix. GTmetrix is a great tool to measure both latency and LCP, along with many other web performance metrics. It’s beginner-friendly and free for basic use.

Steps -:

Go to GTmetrix.com
Enter your website URL in the input box.
Click on "Test your site" (you can create a free account to choose test location and browser).
Wait for the analysis to complete — takes 15–30 seconds.

What GTmetrix Shows:
1.Under the "Performance" tab:

LCP (Largest Contentful Paint):
Directly listed with a time (e.g., 1.8s)
Click on it to see what element caused the LCP.
1. Under the "Timings" tab:
Time to First Byte (TTFB):
- Indicates server latency
- A high TTFB means your server is slow to respond.
Other useful timings:
- First Contentful Paint (FCP)
- DOMContentLoaded
- Fully Loaded Time

Fixing performance issues like Latency and LCP starts with one simple thing: knowing what’s slow and what the causes are.
In this post, I shared how I investigated these two metrics in my React app and what tools helped me uncover the problems.

Whether you're working on a portfolio or a full-scale product, understanding how to measure performance is the first real step to improving it.

This was Part 1, where I focused on identifying the performance bottlenecks — specifically Latency and Largest Contentful Paint (LCP).

In Part 2, I’ll share the actual fixes that helped improve my metrics — from lazy loading, image optimization, to React-specific tweaks that made a real difference.

Stay tuned!

🎉 𝗚𝗶𝘁 𝗖𝗵𝗲𝗮𝘁 𝗦𝗵𝗲𝗲𝘁 𝗳𝗼𝗿 𝗛𝗮𝗰𝗸𝘁𝗼𝗯𝗲𝗿𝗳𝗲𝘀𝘁 2024! 🎉

Himanshu — Wed, 16 Oct 2024 15:01:13 +0000

Hacktoberfest is in full swing, and whether you’re a Git newbie or a seasoned contributor, we all know managing your Git workflow can be tricky sometimes. But don’t worry—I’ve got your back!

💡 Here’s a handy Git Cheat Sheet to make your open-source contributions smoother and faster. 💪

1. Git Configuration

- Set Your Name and Email

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

- Set the Default Branch Name

git config --global init.defaultBranch master

Many developers are switching to main as the default branch name, but master, trunk, or develop are also common options.

- Set the Default Pull Policy to Rebase

git config --global pull.rebase true

- Enable Auto-Stashing During Rebase

git config --global rebase.autoStash true

This automatically stashes local changes during a rebase and re-applies them afterward.

- Set Push Behavior to the Current Branch

git config --global push.default current

This will ensure that git push only pushes the current branch.

2. Basic Git Workflow

These are the fundamental Git commands you'll use for everyday repository management:

- Cloning a Repository
To copy a remote repository to your local machine:

git clone <repository-url>

You can find the repository URL on the GitHub or GitLab page of the repository you want to clone.

- Check Repository Status

Check the current state of your working directory:

git status

This shows which files have changes, which are staged, and which are ready for commit.

- Adding Changes
Stage changes by adding files to the staging area:

git add <file-name>

It's generally best to avoid using git add . to stage everything, as it's more precise to add specific files.

- Commit Changes

After staging changes, commit them with a meaningful message:

git commit -m "Your commit message"

For tips on writing effective commit messages, check out Ten Commandments of Git Commit Messages.

- Viewing Commit History

To see a log of your commits:

git log

For a simpler, one-line summary of each commit:

git log --oneline

- Push Changes to Remote

Send your committed changes to the remote repository:

git push

3. Branching and Merging

Branching allows you to work on different features or bug fixes independently. Here’s how to handle branches effectively:

- Create a New Branch

To create and switch to a new branch:

git switch -c <branch-name>

Or, if you just want to create the branch without switching:

git branch <branch-name>

- Switch to Another Branch
To change to a different branch:

git switch <branch-name>

- List All Branches

View all branches in your repository:

git branch

- Merge a Branch

Integrate changes from another branch into your current branch:

git merge <branch-name>

- Delete a Branch
Once a branch is no longer needed, you can remove it:

Locally:

git branch -d <branch-name>

Remotely:

git push origin --delete <branch-name>

4. Stashing Changes

Stashing is useful for temporarily saving changes that you don’t want to commit yet:

- Save Changes to a Stash
If you need to switch branches but aren’t ready to commit your work:

git stash

- Apply Stash
To reapply the stashed changes later:

git stash apply

- List Stashed Changes
If you have multiple stashes, view them with:

git stash list

By following these tips and using the commands effectively, you can manage your Git workflow more efficiently and keep your repository clean and organized. Happy coding! 🚀

GitHub LinkedIn Portfolio