Open menu

How I optimized the product page of an e-commerce website

Published on June 1, 2026
E-commerce product customization page
Client Jiffy
Services Provided Frontend Development
Tech Used Vue, Typescript, Ruby on Rails
Country USA
Industries E-commerce

Project Overview

Jiffy is an e-commerce brand where the product page is a decision point. Customers customize items, review pricing, and add to cart.


Several high-traffic product pages were visually unstable on load. Images, prices, and dynamic sections loaded late, so the layout kept shifting while users tried to read or click.


Layout stability on these pages was above the 0.2 target across 6 affected pages. I stabilized loading with placeholder screens and minimum dimensions for late content, converted product images to a lighter format with set image sizes, and loaded key images at the top sooner while delaying images further down the page.

>0.5Cumulative layout shift
E-commerce product design page
6Affected product pages

Process

I started by reviewing each affected page in browser testing tools. They showed which parts moved and when images or server data appeared.


A few sections showed up empty first and then jumped once content arrived. I gave those sections minimum dimensions and replaced loading spinners with placeholder screens so the page kept the same size on screen while content loaded.


Product images caused much of the shift. I converted older image files to a lighter format and set image sizes up front so space was reserved before each file finished loading.


Images visible on first view loaded sooner. Images further down the page loaded only when needed. I checked layout stability before and after on each page and applied the same fixes across all 6 affected pages.

E-commerce cart page

Cart and product areas where images and prices that loaded late caused the most shift.

Outcome

Layout shift on the affected pages dropped by more than 60%. Every page I targeted came in under the 0.2 stability target the team cared about.


The first view of the page felt quicker because key images at the top loaded earlier and images stopped jumping when they appeared. Users were not fighting the page while it loaded.


The placeholder screen and minimum dimension approach worked well enough that I could reuse it on other pages when similar issues showed up.

>60%Drop in layout shift on affected pages
<0.2Stability score on all targeted pages after the fix

Tech Used

Ruby on Rails on the backend with Vue, TypeScript, SCSS, and Tailwind on the frontend pages I changed.

Got a clear picture so far?

If you're wondering whether we are a good fit for your project, a quick 15-minute call can help clarify the next steps. Book a Quick Call Now
OR

Write To Us At Your Own Convenience

What People Say

Shaped by years of experience, our stack includes React, Next.js, TypeScript, Node.js, Python, robust databases, and top-tier cloud services—chosen for stability, scalability, and clean engineering practices.
bg-colon-icon bg-colon-icon
Elizabeth Slavitt
Elizabeth Slavitt Founder/CEO @ Speakeasy

“It’s been such a pleasure working with Parmeet. We’ve been impressed by the quality of his code, his communicativeness, his work ethic, and his passion for making the product intuitive and delightful. We’d recommend him enthusiastically to others and hope to work together again in the future.”

bg-colon-icon bg-colon-icon
Luka Sakun
Luka Sakun Team Lead @ Jiffy

“I worked with Parmeet for half a year, and I can highly recommend him as an experienced front-end developer and a responsible team member. He can quickly understand an issue or a new codebase and provide a solution.”

bg-colon-icon bg-colon-icon
Vaibhav Bhardwaj
Vaibhav Bhardwaj CTO @ Credit Culture

“I got the chance to briefly work with Parmeet and I must say that I enjoyed every single second of that. He is one of the few people (I’ve worked with) who have a zeal to learn more, can quickly adapt to new technology, is a fast learner, highly productive and more important is honest and humble.

He has got a very pleasing personality and is very presentable.

Parmeet is self disciplined, can manage and plan his time very efficiently and can deliver tasks on time.

I would like to recommend him as a Full Stack Developer (JavaScript) who can deliver polished front end applications on ReactJs that are backed by equally capable backend developed in NodeJs (deployed on AWS Cloud)

People like him are an asset to any team.”

bg-colon-icon bg-colon-icon
Safeer Malik
Safeer Malik Project Manager @ Condexo

“He is a hard working individual with good insight into what makes UX work for the end user. A joy to work with.”

bg-colon-icon bg-colon-icon
Isaac Durand
Isaac Durand Lead Engineer @ Speakeasy

“We brought Parmeet onto our team to accelerate development of a new product, and he definitely delivered. Parmeet immediately took ownership over all the stories we assigned to him, thinking carefully about the user experience and ensuring that the components he built would function well on both desktop and mobile. He was also an excellent collaborator, eager to share ideas for how we could improve the product and receptive to feedback on his work. Thanks to Parmeet, our MVP release was smooth and on schedule. We will definitely keep him in mind for future projects!”

bg-colon-icon bg-colon-icon
Jordan Irabor
Jordan Irabor Senior Software Engineer @ Meltwater

“I had the pleasure of working with Parmeet on the same team at Meltwater, and I can confidently say that he is one of the best engineers I’ve worked with. Parmeet brings an exceptional level of attention to detail, a deep understanding of software engineering, and a curiosity that inspires overall team improvements.

He approaches every sprint with a holistic mindset, considering not just the immediate implementation but also the broader product impact. Parmeet consistently contributes thoughtful design suggestions and explores alternative approaches, clearly outlining trade-offs and helping the team make informed decisions.

He’s not one to shy away from challenges and frequently demonstrates leadership through initiative, insight, and collaboration. His ability to balance technical depth with product thinking makes him an invaluable asset to any engineering team.”

bg-colon-icon bg-colon-icon
Rohit Gulati
Rohit Gulati Lead Frontend Engineer @ Jiffy

“Parmeet is an all-star frontend developer and a great teammate. I’ve worked with him on multiple features, and he consistently delivers thoughtful ideas, timely solutions, and pixel-perfect, scalable UI. I’d gladly work with him again!”

bg-colon-icon bg-colon-icon
Yogesh Kumar
Yogesh Kumar Senior Frontend Developer @ Jiffy

“I worked with Parmeet at Jiffy, and he is a dependable frontend developer who delivers high-quality work. He writes clean and easy-to-maintain code and always focuses on good user experience and performance. Parmeet is skilled in JavaScript, TypeScript, React, and modern CSS (SCSS, Tailwind). He works well with the team, takes ownership of his tasks, and can be trusted to deliver. He would be a strong addition to any frontend team.”

bg-colon-icon bg-colon-icon
Neha Kapur
Neha Kapur Project Manager @ Classic Informatics

“I really enjoyed working with Parmeet. Highly recommended for React-based web development projects with the rich user interfaces.

He is eager to learn and improve in all areas. He has excellent communication and technical skills. He is hard-working, ensures deadlines are duly met, and never compromises with product quality.”

bg-colon-icon bg-colon-icon
Davinder Singh
Davinder Singh CEO & Co-Founder @ Harmindra International

“It was our pleasure to work with Parmeet. He worked on creating the online identity of our business. He got not just the development of the website done but got the copywriting and product photography work done as well. The website created by him is fast and responsive. It has helped us land many new international clients and increase our sales by a whopping 25%. I would strongly recommend hiring him.”

bg-colon-icon bg-colon-icon
Elisa Fiorenzani
Elisa Fiorenzani UX/UI Designer @ Condexo

“It was a pleasure to work with Parmeet, an honest and reliable Dev!”

bg-colon-icon bg-colon-icon
Nikhil Singh Gangwar
Nikhil Singh Gangwar Lead Developer @ Classic Informatics

“Parmeet was my junior at classic informatics and we have worked closely on numerous task alongside. His attention to detail and eagerness to learn sets him apart from anyone that I have worked with.

Parmeet’s ability to handle any challenge thrown at him with utmost level of calmness and sincerity makes him an asset for organisation. When it comes to front end I have never seen someone so excited about the things they are developing, Parmeet is keen to make a noticeable impact on anything he picks up.

He was an remarkable colleague and I still miss working with him. As a lead, Parmeet earns my highest recommendation.”

bg-colon-icon bg-colon-icon
Naveen Dharni
Naveen Dharni Senior Associate @ Classic Informatics

“Parmeet is an excellent developer and a great friend, he is really good in React and has been a real gem to our last company. His technical skills are impressive as per his experience. He always makes sure to meet all the deadlines within a given time frame & with the top standards. He is hardworking & dedicated in his work. It is a pleasure and honor to recommend Parmeet to anyone who wants to hire him.”

bg-colon-icon bg-colon-icon
Purnima Lamba
Purnima Lamba Senior Associate @ Classic Informatics

“I am pleased to write a letter of recommendation for Parmeet Singh. I highly recommend Parmeet Singh to your organization.

I have known Parmeet Singh for the past 3 years as he was working with me in the same project at Classic informatics. During our time together, his collaboration and leadership skills were truely impressive, and his UI & design work on a project won glowing reviews from peers and client both.

Parmeet Singh is well equipped to grow from challenges that he is presented with. His strong computer programming skills prepare him beautifully for your company. I strongly endorse making Parmeet Singh a member of your team.”

bg-colon-icon bg-colon-icon
Pranav Bansal
Pranav Bansal Software Engineer @ Classic Informatics

“There is no better colleague than Parmeet. He is one of the most dedicated professionals I’ve worked with and is willing to put that extra help whenever you need it. His expertise as a developer is considerable, and it helped our team come up with more efficient solutions on different projects. He is a great asset to our company.”

bg-colon-icon bg-colon-icon
Sunny Tyagi
Sunny Tyagi Full Stack Developer @ Classic Informatics

“Parmeet is a good and technical sound is his work. I worked with him on 2 projects and he developed the project proficiently on frontend and backend. I hope to get work opportunities with him in future so we can connect the world together for the betterment.”

bg-colon-icon bg-colon-icon
Deepansh Bhardwaj
Deepansh Bhardwaj Full Stack Developer @ Credit Culture

“I worked with Parmeet in Credit Culture. He possesses great abilities in UI/UX. He always brings new ideas to the table and shows great dedication to work. He’ll be a good addition to any team.”

bg-colon-icon bg-colon-icon
Ashish Mehra
Ashish Mehra Full Stack Developer @ Credit Culture

“I’ve worked with Parmeet for short period of time. He is very skillful frontend developer. He don’t limit himself to one thing always love to explore new things and share with others.”

bg-colon-icon bg-colon-icon
Prashant Saxena
Prashant Saxena Lead Developer @ Classic Informatics

“He is a good coder and has a humble attitude. His work quality is really good. I got a chance to work with him and we both learnt a lot.”

bg-colon-icon bg-colon-icon
Sarabjot Singh
Sarabjot Singh Full Stack Developer @ Classic Informatics

“Parmeet is a creative developer with fantastic eye for unique and innovative designs in addition to his great problem solving skills and zeal to be acquainted with new inclusions to JS.

He is an excellent team player who can outshine independently as well.”

Let's Bring Your Next Big Idea to Life

Whether you're brainstorming ideas, looking to bolster capabilities, rapidly expanding your team, or delegating projects, count on us to meet your needs effectively any or every step of the way
Accepted: PDF, JPG, WEBP, PNG, DOC, DOCX (max 5MB, up to 5 files)

OR

Write To Us At Your Own Convenience

You can expect a response from us within 48 hours