A slow store rarely has one big problem. More often it is a dozen small ones: a hero image several times larger than it needs to be, three apps loading scripts on every page, a chat widget, two tracking pixels, four font weights and a slideshow nobody clicks. Each looked harmless when it was added.
This checklist works through the usual causes in a practical order, starting with how to measure, so you can tell which changes actually help. It is written with hosted platforms such as Shopify in mind, where the platform handles servers and hosting and you control the theme, apps and content.
Key takeaways
- Use both lab tests and real-user data. Lab scores vary between runs; real-user data shows what shoppers actually experience.
- Images are the most common heavy item on store pages, and the easiest to fix.
- Every app and third-party script has a cost. Remove what you do not use and load the rest only where needed.
- Fonts and layout shifts are smaller fixes that make a store feel faster and more stable.
- Re-test after every change and keep a simple log of results.
Step 1: Measure properly
Pick your test pages
Test the same set of pages every time:
- Home page
- Your busiest collection page
- Your best-selling product page
- The cart, if it is a separate page in your theme
Lab data and field data
A tool such as PageSpeed Insights shows two kinds of results:
| Type | What it is | Strengths | Limits |
|---|---|---|---|
| Lab data | A single simulated page load on a set device and connection | Repeatable enough for before-and-after tests; points to specific problems | Varies between runs; does not reflect your real visitors |
| Field data | Measurements from real visits over recent weeks, where enough data exists | Shows what shoppers actually experience | Only available for pages and sites with enough traffic; changes slowly |
Some platforms, Shopify among them, also include a performance report in the admin based on real visits. Use it alongside page tests.
The three metrics to watch
Google’s Core Web Vitals are a useful shared vocabulary:
| Metric | What it measures | Google’s “good” threshold |
|---|---|---|
| Largest Contentful Paint (LCP) | How long until the main content, often the hero image or product photo, appears | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How quickly the page responds when someone taps or clicks | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much the layout jumps around while loading | 0.1 or less |
These thresholds are Google’s published guidance and can change; check the current values when you test.
Record a baseline
Run each page several times on mobile and note the typical result, not the best one. A simple log is enough:
| Date | Page | LCP | INP (field) | CLS | Change made |
|---|---|---|---|---|---|
| Example | Product page | Baseline before changes |
Step 2: Images
Images are usually the largest files on a store page.
- Upload images at a sensible size. Very large originals waste upload time and storage. Most themes and platforms resize images for display, but only if the theme requests appropriate sizes.
- Use responsive images. Modern themes serve smaller versions to phones. If your theme loads one huge image everywhere, that is a theme problem worth fixing or a reason to update.
- Let the platform convert formats. Many hosted platforms serve modern formats such as WebP automatically where the browser supports them.
- Do not lazy-load the main image. Lazy loading below-the-fold images helps; lazy loading the hero or first product photo delays the most important content.
- Set image dimensions (most themes do this) so the browser can reserve space and the layout does not jump.
- Limit slideshows and carousels. Each slide is another image, and an auto-rotating slider at the top of the home page is often the slowest part of the page. A single strong image usually does the job.
- Be careful with video. Autoplaying background video is heavy on mobile. If you use it, consider showing a still image on phones.
- Trim the home page. Every section adds images and code. Remove sections that do not help shoppers find products.
Step 3: Apps
Apps that add storefront features often load scripts and styles on every page.
- List every app that touches the storefront and remove the ones you no longer use. Our Shopify app audit walks through this step by step.
- Check for overlap. Two apps doing similar jobs, such as two pop-up tools, double the cost.
- Load features only where they are used. A size chart app is needed on product pages, not on the home page or blog. App blocks placed only in the templates that need them help here.
- Clean up after uninstalling. Apps that edited theme files directly can leave scripts behind. See our guide to removing leftover app code.
- Measure before installing new apps. Our checklist on how to choose Shopify apps includes a before-and-after test.
Step 4: Third-party scripts
Chat widgets, tracking pixels, heatmaps, review widgets, social feeds and embedded maps all load code from other servers. They compete with your own content for the browser’s attention, and they often affect responsiveness (INP) as much as load time.
- List every third-party script. Open your browser’s developer tools, look at the network tab, and note the domains that are not your store or your platform.
- Remove what nobody uses. Old tracking pixels for ad accounts you closed, heatmap tools from a past project, a social feed nobody looks at.
- Avoid duplicate tracking. The same pixel added both through an app and manually in the theme sends duplicate data and loads twice.
- Load chat widgets on interaction if your tool allows it, so the full widget loads only when someone clicks the chat button.
- Replace heavy embeds with a link or image, for example a static map image linked to the full map, or a thumbnail linked to a video.
- Be wary of tag managers as a dumping ground. They make adding scripts easy, which also makes it easy to forget them.
Step 5: Fonts
- Limit font families and weights. As a rule of thumb, two families and a handful of weights cover most store designs. Every extra weight is another file.
- Consider system fonts for body text. They need no download and look clean on every device.
- Avoid loading fonts from several sources, such as the theme and an app both loading the same font family.
- Make sure text stays visible while fonts load, so shoppers can read the page even if the custom font arrives late. Most current themes handle this.
Step 6: Layout shifts
Layout shift is when content moves after the page appears: a banner pushes the page down, an image loads and shoves text aside, a review widget expands under the price. Shoppers tap the wrong thing, and the store feels unreliable.
- Reserve space for images and embeds, with dimensions set in the theme.
- Avoid announcement bars and banners that load late and push content down. If you need one, make it part of the theme, not a script that inserts it after the page loads.
- Watch app widgets on product pages. Review stars, badges and upsell boxes that appear after load are common causes.
- Delay pop-ups or make them overlay the page rather than push content, and do not show them the moment someone arrives.
Step 7: Theme and content
- Keep the theme up to date. Theme updates often include performance fixes. Test updates on a duplicate first.
- Reduce products per collection page if pages are very long. Pagination or “load more” keeps the first view light.
- Turn off theme features you do not use, such as quick view, animations or predictive search, if they add weight and nobody uses them.
- Avoid heavy custom code pasted in from tutorials without knowing what it loads.
A sensible order of work
As a rule of thumb, this order gives the most improvement for the least effort on a typical small store:
| Priority | Task | Effort |
|---|---|---|
| 1 | Remove unused apps and their leftover code | Low to medium |
| 2 | Remove unused third-party scripts and duplicate pixels | Low |
| 3 | Fix the hero image and slideshow on the home page | Low |
| 4 | Trim home page sections | Low |
| 5 | Reduce fonts and weights | Low |
| 6 | Fix layout shifts from banners and widgets | Medium |
| 7 | Update or replace an outdated theme | Medium to high |
Re-test after each step and write the result in your log. If a change makes no measurable difference, that is still useful to know.
What you cannot control on a hosted platform
On hosted platforms, server speed, hosting and content delivery networks are managed for you. Checkout pages are often managed by the platform too, with limited room for theme changes. Spend your effort on what you control: theme, apps, scripts and content.
FAQ
Why does my score change every time I test?
Lab tests simulate a single page load, and small differences in network conditions, server response and third-party scripts change the result. Run several tests and look at the typical value, and rely on field data where it exists.
Does speed affect search rankings?
Google has said that page experience, including Core Web Vitals, is one of many signals it considers. Relevant, useful content matters more. Speed matters most for shoppers: a slow, jumpy page is harder to buy from.
Do I need a developer?
Not for most of this checklist. Removing apps, scripts, slides and fonts can be done in the admin and theme editor. Deeper theme changes or a theme rebuild are where a developer earns their fee.
Bottom line
Measure a fixed set of pages first, using both lab tests and real-user data. Then work through images, apps, third-party scripts, fonts and layout shifts, starting with what is easiest to remove. Re-test after each change, keep a log, and repeat the checklist whenever you add apps or redesign the home page.
