Work Theme 2.0 · Performance
Informatica storefront
A customised Dawn theme in Liquid for a large Ukrainian electronics catalogue, with a Lighthouse harness that decides what ships.
- Client
- Informatica
- My role
- Sole developer · employee
- Period
- 2024 — present
| Mobile Lighthouse, live | 71 / 83 / 88 | |
|---|---|---|
| Perf hypotheses measured | 6 | |
| Kept after measurement | 2 | |
Problem
The store had moved off a headless Hydrogen build back onto a theme, and the theme needed to carry a big electronics catalogue on mobile without the performance sliding every time an app or a widget was added.
Constraints
A live storefront — changes go through a theme branch and a preview, never straight to live. Apps the business depends on (reviews, analytics) can't be removed and cost real main-thread time.
Hard part
Telling a real optimisation apart from one that only looks good in a single Lighthouse run.
Stack
- Liquid
- Online Store 2.0
- Web Components
- Ajax & Section Rendering API
- theme-check
Links
Measuring before claiming
Performance work on this theme runs through a small harness: a script that takes five Lighthouse runs per page and reports the median FCP, LCP, TBT and CLS, alongside a written log of every change and what it did. The log has about as many reverts in it as wins — that’s the point of keeping it.
Home, product and collection sit at roughly 71 / 83 / 88 on live mobile. Those are the numbers I work from, not a target I’ve claimed to have hit.
What the measurements said
- Kept:
fetchpriority="high"on the first two collection-card images. Free, and it lets the browser discover the LCP image sooner. - Kept: removing a dead CSS variable for a background image that was never fetched — no measurable effect, but no reason to leave it in.
- Reverted: deferring the cart-drawer CSS. No FCP gain, and it pushed CLS from 0.02 to 0.5.
- Reverted: preloading the hero image. It cut load delay but added the same time back as render delay, because the image is gated behind CSS — net zero.
- Reverted: turning animations off. No score or LCP change; Dawn’s opacity-0.01 trick already avoids the LCP penalty.
- Skipped: minifying CSS and JS. Shopify’s CDN already does it — 122KB of source CSS ships as about 17KB gzipped.
Where the time actually goes
Once the theme code was tuned, the remaining cost is third-party: the reviews widget is roughly 700ms of main thread plus render-blocking CSS, and Shopify’s own analytics stack is another second or so and can’t be removed. The honest read is that the theme is close to done and the next gains are in app configuration, not Liquid.
On the Hydrogen decision
The store ran on Hydrogen and Oxygen before this. Moving back to a theme was a deliberate call: for a team this size, a Liquid theme is the more common, better documented, easier-to-hire-for path, and the headless build wasn’t earning its maintenance. The previous storefront is written up separately.