01
Loading: LCP
Make the main content discoverable early. Prioritise the hero asset, right-size images and reduce resources that delay the first useful experience. The good Core Web Vitals threshold for LCP is 2.5 seconds or less.
Shopify performance.
Less friction. More store.
A fast score is useful. A fast store your customers can actually use is the job. We diagnose Shopify performance, fix the code and assets that create friction, and keep the brand experience intact. Built in-house, with CRO in the brief.
Liquid / HTML
—
Hero media
—
Theme CSS
—
Cart module
—
App embeds
—
Page weight
Find the bottleneck. Fix the right thing.
We inspect the buying journey on the templates and devices that matter. Core Web Vitals, lab diagnostics and real-user signals help us separate the visible symptom from the work that will improve the experience.
02
Interaction: INP
Inspect long tasks and expensive scripts around filters, variants, menus and the cart. Reduce unnecessary work and load features when needed. The good INP threshold is 200 milliseconds or less.
03
Stability: CLS
Reserve space for media, fonts and injected UI so the page stays predictable while loading. The good CLS threshold is 0.1 or less. These field thresholds are assessed at the 75th percentile of visits.
04
The third-party footprint
Review app embeds, duplicate trackers, render-blocking resources and unused code. Keep useful functionality, remove unnecessary work and replace suitable storefront apps with code your team owns.
A clear plan. A team that delivers.
The deliverable is a prioritised diagnosis, implemented fixes and a clear measurement approach. We agree the scope around your actual storefront, its constraints and the customer journey.
Profile the storefront
Combine template audits, network and script inspection, lab tests and available real-user data. Identify the biggest sources of delay and instability.
Implement the priorities
Improve critical assets, rendering, code execution and app loading. Validate functionality and the buying journey as part of the release.
Measure and maintain
Recheck the same journeys, watch field performance as data becomes available and define a budget for future changes.
Make performance a budget, not a rescue mission
Adjust the asset budget below. The transfer calculation connects page weight to connection speed; it gives the team a concrete constraint for images, JavaScript and CSS. Then we validate the actual experience in the browser and in field data.
Transfer time
Current build2,400 KB
Optimised build840 KB
- Page weight removed
- 65%
- Page weight
- 840 KB
The fix lives in the code
Right-sized media. Work that runs when needed. Layouts that hold their place. Explore the implementation behind the experience.
hero.liquid
{{ section.settings.image
| image_url: width: 1800
| image_tag:
widths: '480, 750, 1100, 1800',
sizes: '(max-width: 749px) 100vw, 50vw',
loading: 'eager',
fetchpriority: 'high'
}}feature-loader.js
const observer = new IntersectionObserver(
([entry], observer) => {
if (!entry.isIntersecting) return;
import('./cart-drawer.js');
observer.disconnect();
}, { rootMargin: '200px' }
);
observer.observe(cartTrigger);product-media.css
.product-media {
aspect-ratio: 4 / 5;
overflow: hidden;
}
.product-media img {
width: 100%;
height: 100%;
object-fit: cover;
}Measure representative journeys
Audit collection, product and cart behaviour on mobile as well as desktop. Compare the same pages and conditions before and after a change, rather than chasing an isolated homepage score.
Protect the buying experience
Optimise how the feature is built and delivered. Keep important content in server-rendered HTML, size media correctly and defer non-critical work without losing the brand or the commercial functionality.
Keep regressions out
Set a repeatable measurement and release process. New campaign media, theme changes and apps should be reviewed against the same performance expectations.
More product. Less effort to find it
The homepage has a clear job: show the range and get people exploring. Switchable grids bring New in, Best sellers and key categories into the same page. We built the interaction around lean rendering and on-demand media, so a richer catalogue does not mean loading everything upfront.
See how we built itDesigned and developed by Black Comet.
Let’s talk about your next stage.
Tell us where you are, what is getting in the way and where you want to go. We will work out the right next step together.
The rest of your growth engine
Before we get started
Can you guarantee a 100 PageSpeed score?
We set goals around your storefront and its constraints after the audit. Scores vary with page content, apps, devices, network and test conditions. We prioritise a faster, stable buying experience and verify the changes with comparable measurements.
What is the difference between lab and real-user data?
Lab tests run under controlled conditions and are useful for diagnosis and release checks. Real-user data reflects visits on actual devices and networks. Both are valuable, and they answer different questions about the storefront.
Will you remove videos, animations or brand design?
We first improve how assets and features are delivered: responsive images, media loading, script execution and rendering priorities. If a design decision has a material cost, we review the trade-off with your team before changing it.
Can apps be the reason our Shopify store is slow?
They can contribute, but the audit should prove where the work comes from. We inspect the theme, media, scripts and third-party footprint. Some apps remain useful; suitable storefront features can be developed directly in the theme.
Do you improve performance after the initial project?
Yes. Performance can be part of ongoing ecommerce management and development. We keep a measurement routine and review new assets, features and app changes so the store does not gradually accumulate the same problems again.