How We Built Kohira Diamonds: A High-Performance Jewellery E-Commerce Platform

When Kohira Diamonds approached us to build their online jewellery platform from scratch, the stakes were clear. Lab-grown diamond jewellery is visually rich and detail-driven — customers expect fast, beautiful product pages and a smooth shopping journey. Slow load times or poor SEO directly cost sales.

Here's how we built it, and what we learned.

The Challenge

Kohira needed a platform that could:

• Handle a growing jewellery catalog with complex filtering (metal type, diamond shape, carat, price range)
• Load fast even with high-resolution product images
• Rank well on Google for jewellery and lab-grown diamond keywords
• Work seamlessly on both desktop and mobile

A standard React SPA with client-side rendering wouldn't cut it. Every product page needed to be indexable by search engines, and every millisecond of load time had a direct impact on conversions.

What We Built

We chose Next.js as the foundation, using SSR and SSG strategically depending on the page type:

• Home and collection pages — statically generated at build time for maximum speed and cacheability
• Product detail pages — server-rendered to ensure fresh inventory and pricing data
• Filtered search results — hybrid approach with URL-based filters enabling SSR for common combinations

Advanced Product Filtering

Filtering was one of the trickiest parts. Customers filter simultaneously across multiple attributes — shape, metal, carat range, price, and more — without the UI feeling sluggish.

Our solution: filter state lives in URL query parameters. This gives us three things for free:

1. Filter combinations are shareable and bookmarkable
2. Pages are SEO-crawlable with filtered URLs
3. Common filter combinations can be pre-rendered on the server

Image Performance

Jewellery photos are large, detailed, and numerous. We used the Next.js Image component with automatic WebP conversion, responsive srcset, and lazy loading for below-the-fold products. Listing pages load thumbnails first; the full-resolution image loads only when the user opens a product detail page.

Reusable Component System

We built a shared component library used across the customer website and internal admin tools:

• ProductCard with wishlist and quick-add actions
• FilterPanel with multi-select facets and a mobile drawer mode
• ImageGallery with zoom and thumbnail navigation
• PriceDisplay handling currency and tax configurations

The Results

After launch and continuous optimization:

• ~40% improvement in page load times — measured via Lighthouse and Core Web Vitals
• Improved SEO rankings — collection and product pages began appearing in Google search results for targeted jewellery keywords within weeks of launch
• 100% responsive — tested and refined across iOS, Android, and all major desktop browsers
• High code reusability — the shared component library cut estimated development time for new features by approximately 30%

Key Takeaways

Choose rendering strategy per page type. Mixing SSR and SSG based on what each page actually needs — rather than applying one approach everywhere — made the biggest difference in both performance and SEO.

Put filters in the URL. It costs almost nothing extra and gives you SEO, shareability, and server-rendered filter combinations for free.

Invest in the image pipeline early. Image performance on an e-commerce site is non-negotiable. Next.js Image handles most of it, but you need to define the right sizes and loading strategies per component — especially on mobile.

---

Kohira Diamonds is an ongoing project and we're continuing to optimize it. If you're building a high-performance e-commerce platform and want a team that cares about performance, SEO, and clean code — get in touch with us.