John Singh · Shopify theme development

Speed demo: one product page, before and after

The same product page built twice. The first version has six problems that commonly slow a Shopify store down. The second has them fixed. Nothing else changes: same layout, same copy, same photos, and the same amount of third-party script work.

This is a mock page for a made-up desk brand, built as two static pages: not a Shopify store, not my Shopify demo store, and not a client's store. The "app" script is a stand-in that does 350 ms of work, the way a typical review or upsell app does when it starts up.

Open the before page Open the after page

Results

Measured with Google PageSpeed Insights, mobile, on 22 September 2026: an emulated mid-range Android phone on a slow 4G connection. Both reports are public, so you can check every number.

	Before	After
Performance score	68	96
Main product photo on screen (Largest Contentful Paint)	24.3 s	2.7 s
First text on screen (First Contentful Paint)	2.8 s	1.5 s
Speed Index	4.5 s	1.5 s
Layout shift	0.007	0.001
Page weight	4.4 MB	under 0.4 MB

Before report After report

Two of the six problems barely show up in this test. The app script's delay happens before anything is on screen, and the reviews widget lands late enough that the test's layout-shift score stays low. On a real phone you still feel both: a blank screen, then a button that jumps as you reach for it. I've left the numbers as measured rather than tune the demo to make those rows look worse.

What was wrong, and what I changed

1. Fonts held up the page. Two font families in fifteen weights, with no preconnect and no font-display. Now only the three weights actually used load, the font stylesheet no longer blocks the page, text shows straight away in a fallback font, and the connection to the font server opens early.
2. jQuery and a carousel plugin loaded in the head. Four files had to download and run before anything could appear. The carousel is now CSS scroll-snap: no library at all.
3. An app script blocked the first paint. Its 350 ms of start-up work ran before the page could show. The same work still runs, but after the page has loaded, in 8 ms slices while the browser is idle, so it never gets in the way of the first paint or a tap.
4. The main product photo was a 2.3 MB, 2400 px JPEG, and couldn't appear until the carousel started. It is now AVIF or WebP at 600, 900 or 1200 px (whichever the screen needs), preloaded, marked high priority, with its width and height set.
5. Photos further down loaded straight away at full size. They now load only as you scroll near them, sized for their slot.
6. A reviews widget pushed the page down after it loaded. That is layout shift, the reason people tap the wrong button. The reviews now render with the page, so nothing moves.

Doing this on a real store

On a live Shopify theme the same six fixes are Liquid and asset changes: image_url with image_tag widths, preload: true on the product image, app embeds deferred or removed, and space reserved for anything an app injects. I work on a duplicate theme, measure before and after with the same tool, and send you both reports.

I take on selected work through freelance platforms, such as Upwork, with the scope, price and deadline agreed in writing on the platform before I start. I’m not taking direct orders or bookings through this site.