E-commerce Malaysia

Lifnex: A Custom Shopify Theme for an Audio Brand, from a 31 to a 98 Mobile Lighthouse Score

A custom Shopify Liquid theme for Lifnex, which sells Urbanista and JVC headphones, earbuds and speakers in Malaysia: native Liquid in place of app scripts, product specifications rendered from metafields, and Core Web Vitals work on every template.

The client

Lifnex sells Urbanista and JVC headphones, earbuds and speakers in Malaysia through its own Shopify store. Audio buyers compare before they buy — drivers, battery life, noise cancelling, colourways — so the product pages carry spec tables, filters and variant selectors, and most visitors arrive on a phone.

The problem

The store ran on a heavy pre-built theme with a stack of app scripts. On mobile it scored 31 out of 100 on Lighthouse, its largest contentful paint took 4.6 seconds and failed Core Web Vitals, it shipped 2.8 MB of JavaScript, the page jumped as it loaded (a layout shift of 0.380), taps took 420 ms to respond, and the server took 820 ms to render each page's Liquid.

What we did

  • Custom Liquid sections. Reusable sections written in native Liquid, and 14 app store scripts replaced with features built into the theme.
  • Fast first paint. The hero product photo loaded with Shopify's image tag at high fetch priority, AVIF and WebP served through the Shopify CDN, and above-the-fold CSS inlined in the layout templates.
  • Less JavaScript. jQuery, polyfills and redundant trackers removed, sliders, drawers and tabs rebuilt as vanilla web components, and the spec-comparison code loaded only on product pages.
  • Faster server rendering. Nested product loops in the collection grid refactored, snippets written to cache well, and audio specifications read directly from product metafields.
  • Instant interactions. Long tasks broken up during filter interactions, spec accordions built in pure CSS, and colour and variant switching driven by data attributes.
  • A page that holds still. Fixed aspect ratios on every media container, font-display swap with fallback font metrics matched, and reserved space for spec sheets and ratings.

What we delivered

  • 14
    app store scripts replaced with native Liquid
    Features rebuilt inside the theme instead of injected by apps.
  • 340 KB
    total JavaScript, down from 2,840 KB
    Vanilla web components for sliders, drawers and tabs.
  • 0.004
    cumulative layout shift
    Every image, spec table and banner has reserved space.
  • 48 ms
    interaction to next paint
    Filters, spec toggles and colour switches respond on touch.

Deliverable counts, supplied by shakalakaa. Not performance metrics.

Results (legacy theme compared with the custom theme)

MetricBeforeAfter
Mobile Lighthouse performance score 31 98
Largest contentful paint, mobile 4.6 s 0.9 s (−80%)
First contentful paint — 0.5 s
Interaction to next paint 420 ms 48 ms (−88%)
Total blocking time (lab) — 0 ms
Cumulative layout shift 0.380 0.004
Total JavaScript payload 2,840 KB 340 KB (−88%)
Server response (Liquid render time) 820 ms 180 ms (−78%)

Sources: Google PageSpeed Insights and Lighthouse v11 mobile audits (score, first contentful paint, total blocking time), Chrome UX Report field data and WebPageTest (largest contentful paint), Google Search Console Core Web Vitals and the Chrome UX Report (interaction to next paint), PageSpeed Insights and the WebPageTest filmstrip (layout shift), Chrome DevTools network waterfall and bundle analysis (JavaScript payload), and Shopify Theme Inspector for Liquid (server render time). The Lighthouse score and total blocking time are lab measurements; the Core Web Vitals figures come from field data.

What this means for your audio retailer

The plain-language version. Lifnex's store went from one of the slow ones to one that loads its main product image in under a second on a phone, responds to a tap in under 50 milliseconds and does not jump around while it loads. It carries about an eighth of the JavaScript it used to, and every Core Web Vital now passes.

What this says about shakalakaa: we build Shopify stores in native Liquid, with speed and stability designed in rather than patched on, for brands whose customers shop on their phones. Our e-commerce marketing page sets out how the store and the advertising work together.

Related at shakalakaa: See our web design and development or the pricing guide. Working with a large brand? See how we work with enterprise clients.

Frequently Asked Questions

Want results like this for
your own audio retailer?

Book a free strategy call
← All case studies

LET'S START
THE CONVO.