dev-resources.site
for different kinds of informations.
Performance Audit: Analyzing Namshi’s Mobile Website with Live Core Web Vitals
If you’re new to Live Core Web Vitals, check out my previous post:
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:
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.
Featured ones: