Speed Optimization Revamp for Comet

Comet, a fast-growing Shopify Plus brand, is known for bold designs and high-quality product visuals. With strong brand loyalty and a reputation for innovation, Comet wanted its storefront to deliver a fast, seamless, and premium digital experience matching its products.

Problem Statement

Comet's Shopify Plus storefront, while visually impressive, faced serious performance challenges on low-bandwidth networks. Pages took longer than expected to load, which often led to high bounce rates, frustrated users, and reduced conversions.

These performance issues not only disrupted the shopping journey but also created a disconnect between Comet's premium brand image and the actual online experience. The challenge was to optimize performance at the core to deliver a faster, more seamless, and reliable digital experience without compromising on high-quality visuals.

Solutions Implemented

The optimization revamp was approached in multiple layers: code efficiency, asset strategy, rendering improvements, and user experience refinements.

Code & Resource Efficiency

Redundant Code Removal: Eliminated unused JavaScript and CSS across templates. This reduced overall bundle size, cutting down network payload.

jQuery to Vanilla JavaScript: Migrated functionality away from jQuery dependencies, replacing heavy functions with native browser APIs. This improved execution speed and reduced blocking time.

Page-Specific Asset Loading: Instead of loading global CSS/JS for all templates, resources were scoped to relevant pages (e.g., product vs. checkout). This reduced unused code execution on each request.

Asset Loading Strategy

Lazy Loading: Applied native loading='lazy' for images, videos, and iframes outside the first fold. Non-critical visuals now load only when needed, improving initial paint times.

Responsive Media Optimization: Configured separate image sets for desktop vs. mobile, ensuring devices receive appropriately sized assets.

Preloading Critical Assets: Preloaded first-fold hero images, webfonts, and key CSS rules to guarantee quick rendering of the most visible content.

Optimized Banner/Video Strategy: Replaced autoplay-heavy hero banners with lightweight alternatives, loading full-resolution only after user interaction or idle time.

Rendering & Execution Optimization

Critical Rendering Path Optimization: Prioritized CSS required for first-fold rendering while deferring non-essential stylesheets and scripts.

Asynchronous JS Loading: Used async and defer attributes to prevent render-blocking scripts from delaying paint.

Library Replacement: Replaced heavy sliders (e.g., jQuery Slick) with Swiper, reducing JS size and execution cost by >30%.

Tree Shaking & Minification: Optimized build pipeline to strip dead code and compress assets without losing fidelity.

Layout & UX Improvements

CLS Reduction: Explicitly defined width/height ratios for images and iframes, preventing reflows and layout jumps.

Static Loader Refinement: Instead of using the loader as a mask for slowness, it was redesigned to show only for 1 second, ensuring branding impact without hiding delays.

Interaction Responsiveness: Improved TBT (Total Blocking Time) by reducing long tasks and ensuring event listeners executed quickly.

The Outcome

Faster page loads, even on low bandwidth

Smoother, more stable browsing across devices.

Better engagement, lower bounce rates, and stronger conversions.

Noticeable gains in Core Web Vitals.

For Mobile devices	SCORE	FCP	LCP	TBT	CLS	SPEED INDEX
Before Optimization Metrics	32	4.45	9.8	1435 ms	0.045	10.65
After Optimization Metrics	80	2	3.4	460 ms	0.005	4.55

For Desktop devices	SCORE	FCP	LCP	TBT	CLS	SPEED INDEX
Before Optimization Metrics	56	1.1	1.6	875 ms	0.0028	3.95
After Optimization Metrics	85	0.45	0.9	325 ms	0.001	1.65

Client PoC

Akash

Let's connect!

Bring your D2C brand vision to life-connect with our tech team to create seamless, scalable solutions today!