If you’re new to Live Core Web Vitals, check out my previous post:

Live core web vitals (local metrics) in browser devtools

Shidhin ・ Dec 22

#webdev #devtools #corewebvitals #inp

What Are We Going to Do?

Namshi is one of the largest e-commerce websites in the UAE. Having worked at Namshi before, I was curious to test the Core Web Vitals scores of their mobile website and evaluate the user experience.

I started with their most visited webpage:

Namshi: Women's Fashion

Using a high-speed Wi-Fi network and an M3 Pro MacBook, I conducted the test without any network or CPU throttling. The LCP (Largest Contentful Paint) score was 2.84 seconds, indicating room for improvement. The LCP metric primarily points to the banner image in the carousel.

Suggestions for improvements:

• Use smaller placeholder images for banners.
• Preload banner images(using link preload directive).

As I interacted with the page, the other metrics appeared satisfactory.

Finding slowness

Namshi’s website heavily relies on modal components for features like Sort, Filter, and Search. While most modals opened and closed quickly, I noticed occasional slowness patterns. The INP (Interaction to Next Paint) score fluctuated between 60-100ms, which is generally acceptable.

However, I discovered main-thread blocking code when toggling the “New Arrivals” modal and attempting to close it. This directly impacted the INP score. You can see the behavior in the video below:

A Worse Version?

Yes, I found an even worse scenario where the INP score turned completely RED.

This occurred when I opened the “Filter” modal, applied some filters, and then clicked “Reset Filters”. The page froze momentarily, resulting in a poor user experience.

Suggestions for improvements:

• Avoid blocking the main thread during user interactions, especially while applying filters.
• Use Web Workers for computationally intensive tasks

Another Observation

By recording a Performance Profile, the issue was clearly visible in the flame chart. This method is invaluable for identifying and addressing performance bottlenecks.