Shopify Speed Optimization: How to Pass Core Web Vitals on Mobile
By Shaheer Khan, founder of Markify Ecommerce
Most Shopify traffic for Pakistani and international brands now comes from phones, often from Instagram, TikTok or Meta ads. A slow product page wastes that paid click before the shopper sees the price. Speed also feeds into Google Search through Core Web Vitals, although content and relevance matter much more for ranking.
This guide covers how to measure speed properly and the fixes that make the biggest difference on a typical Shopify store.
The three Core Web Vitals in plain English
Google measures real visitors' experience with three metrics. A page passes when at least 75% of visits meet the "good" threshold.
| Metric | What it measures | Good |
|---|---|---|
| LCP (Largest Contentful Paint) | How long until the main image or heading appears | 2.5 seconds or less |
| INP (Interaction to Next Paint) | How quickly the page responds when someone taps, for example "Add to cart" or a variant button | 200 milliseconds or less |
| CLS (Cumulative Layout Shift) | How much the page jumps around while loading | 0.1 or less |
INP replaced the older FID metric in March 2024, so guides that still talk about FID are out of date.
Measure before you change anything
- PageSpeed Insights (pagespeed.web.dev): test your homepage, one collection page and your best-selling product page on mobile. Look first at the "Discover what your real users are experiencing" section. That is field data from real Chrome users. The lab score below it (the 0 to 100 number) is a simulation on a slow phone and is useful for finding problems, but it is not what Google uses.
- Search Console > Core Web Vitals: shows which groups of URLs pass or fail, once your store has enough traffic.
- Shopify admin > Analytics > Web performance: Shopify's own report of LCP, INP and CLS from your visitors.
Write down the numbers. Change one thing at a time and re-test, so you know what helped.
Do not chase a perfect 100 lab score. A store with tracking, reviews and chat will rarely reach it, and you do not need it. Aim to pass the three field metrics.
Fix 1: Remove apps you do not use, and their leftovers
Apps are the most common cause of a slow Shopify store. Each one can add JavaScript and CSS to every page.
- List every installed app and ask: did this make us money in the last 90 days? Uninstall the ones that did not.
- Some older apps leave code in your theme after you uninstall them. Search your theme files (Online Store > Themes > Edit code) for the app's name and remove leftover snippets, or ask the app developer for removal instructions. Duplicate your theme first so you can roll back.
- Prefer apps that use Shopify's theme app extensions (app blocks you add in the theme editor). They can be switched off per page and remove cleanly.
- Avoid stacking several apps that do the same job, such as two review apps or three popup tools.
Fix 2: Make the main image load fast
On product pages the LCP element is usually the first product image. On the homepage it is often a hero banner.
- Upload images at a sensible size. A 4000-pixel, 5 MB photo straight from the camera is far larger than any phone screen needs. Shopify's CDN serves resized WebP or AVIF versions when the theme uses its image tags correctly, but starting from a reasonable file still helps.
- Do not lazy-load the first visible image. Lazy loading is right for images further down the page, but on the hero or first product image it delays LCP. Most modern themes handle this, but customised themes often break it.
- Avoid sliders and auto-playing carousels at the top of the page. A single strong image loads faster and usually converts as well or better.
- Replace background videos in the first screen with an image on mobile.
Fix 3: Keep the theme lean
- Use a recent Online Store 2.0 theme. Shopify's free Dawn-family themes are fast starting points.
- Remove sections you are not using from the homepage instead of hiding them.
- Limit custom fonts to one or two weights. Each extra font file is another download. System fonts are fastest.
- If a developer has added custom code, ask them to load scripts with
deferand to avoid loading large libraries such as full jQuery on every page.
Fix 4: Control tracking and marketing scripts
Pixels for Meta, TikTok, Google, Pinterest and Snapchat, plus heatmaps, chat widgets and popups, all compete with your product page for the phone's processor. This mostly hurts INP: the page looks loaded, but the "Add to cart" button is slow to respond.
- Use Shopify's built-in sales channel integrations and Customer Events (web pixels) for Meta, Google and TikTok instead of pasting pixel code into the theme. They run in a sandbox and are lighter on the main page.
- Remove pixels for platforms you no longer advertise on.
- Load chat widgets after a delay or only on certain pages.
- Use heatmap tools for a few weeks when you need the insight, then switch them off.
Fix 5: Stop the page jumping (CLS)
- Give images and video embeds fixed dimensions so space is reserved before they load.
- Avoid announcement bars or banners that are injected after the page loads and push everything down.
- Popups should overlay the page, not insert themselves into it.
- Review widgets that load late should have a reserved space.
A sensible order of work
- Measure the three key pages and save the results.
- Remove unused apps and their leftover code.
- Fix the hero and first product image.
- Move pixels to Shopify's integrations and remove old ones.
- Fix layout shift.
- Re-measure. Field data in PageSpeed Insights and Search Console updates over a rolling 28 days, so give it a few weeks before judging.
Frequently asked questions
Will speed work change how my store looks?
It should not. Most fixes are about how things load, not how they look. The exception is replacing a slider or background video at the top of the page, which is a design decision worth making for speed.
Is a faster store guaranteed to rank higher?
No. Core Web Vitals are one of many signals, and relevance and content matter more. The main benefit of speed is that more of the visitors you already pay for stay and buy.
Do I need a developer?
App clean-up, image sizes and pixel settings can be done by a careful store owner. Theme code changes are safer with a developer, and always on a duplicate theme first.
For more ways to turn visits into orders, see our Shopify conversion rate checklist and Shopify SEO checklist. If you would like us to audit your store, our Shopify agency team includes a speed review in every audit.
Work with Markify Ecommerce
Markify Ecommerce (listed on Google Maps as Markify Ecommerce - Unicored Technologies) is an ecommerce marketplace management agency in Bahria Orchard, Lahore. We manage Amazon, eBay, Walmart, Shopify, Etsy and TikTok Shop accounts, and we set up US LLCs and UK Ltd companies for Pakistani sellers.
- Office: Central Block, Bahria Orchard, Raiwind Road, Lahore 55150, Punjab, Pakistan
- Phone & WhatsApp: +92 321 3131641
- Free account audit: Send us your store or account details and we will reply with the first fixes we would make.
