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)

Metric Before After
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 web design and development how we work with enterprise clients

All case studies

FAQ

Frequently asked questions

What did shakalakaa build for Lifnex?
A custom Shopify theme in native Liquid: 14 app scripts replaced with built-in features, product specifications rendered from metafields, vanilla web components in place of jQuery, and image, CSS, rendering and layout work on every template.

What were the results?
Mobile Lighthouse score from 31 to 98, largest contentful paint from 4.6 s to 0.9 s, interaction to next paint from 420 ms to 48 ms, layout shift from 0.380 to 0.004, and JavaScript from 2,840 KB to 340 KB.

Why does store speed matter for an e-commerce brand?
Most shoppers arrive on a phone, and Core Web Vitals are part of how Google assesses page experience. A store that paints fast and responds instantly loses fewer visitors before the product page even appears.

Do you build Shopify themes from scratch or customise existing ones?
Either, depending on the store. For Lifnex we wrote the sections and product templates in native Liquid and removed the app scripts the old theme depended on.
Let's talk

Want results like this for your own audio retailer?

Book a free strategy call Chat on WhatsApp (opens in a new tab)