Why Mobile and Desktop Scores Are Different
If you've ever run your Shopify store through PageSpeed Insights, you've seen the gap: your desktop score might be in the 80s or 90s while your mobile score languishes in the 30s or 40s. This isn't a bug — it's by design.
Google tests mobile and desktop under completely different conditions. The mobile test simulates a mid-range smartphone with limited processing power and a slow network connection. The desktop test uses full CPU speed and your actual connection.
📱 Mobile Test Conditions
- ● CPU: 4x slowdown (simulates mid-range phone)
- ● Network: Throttled 4G (~1.6 Mbps, 150ms RTT)
- ● Viewport: 412 x 823px (typical mobile)
- ● Device: Simulated Moto G Power
🖥️ Desktop Test Conditions
- ● CPU: No throttling (full speed)
- ● Network: No throttling (actual speed)
- ● Viewport: 1350 x 940px (typical desktop)
- ● Device: Modern desktop/laptop
The result? The exact same page, same code, same assets — tested under wildly different conditions. A JavaScript file that parses in 200ms on desktop takes 800ms on the throttled mobile CPU. An image that downloads in 100ms over your broadband takes 500ms on simulated 4G.
This is why a 30–50 point gap between mobile and desktop is completely normal for Shopify stores. It doesn't mean your store is broken on mobile — it means Google's mobile test is deliberately harsh. Want to check your gap? Run a free speed test on your store.
The Easy Fix: Boost Both Scores Instantly
Before diving into manual mobile optimizations — there's a faster way. Thunder Page Speed Optimizer dramatically improves mobile scores by addressing the exact factors that Google's mobile test penalizes most.
Why Thunder hits harder on mobile:
Script Deferral Reduces CPU Load
Non-critical JS is deferred — massive impact on throttled mobile CPUs
Critical CSS for Fast First Paint
Above-the-fold CSS loads inline — no render-blocking requests on slow networks
Font Optimization
Preloads and optimizes font delivery to reduce mobile LCP
Mobile-First Resource Prioritization
Prioritizes resources that matter most for mobile rendering
Average mobile improvement: +27 PageSpeed points
Because mobile is more sensitive to JavaScript and render-blocking resources, Thunder's optimizations have an outsized impact on mobile scores.
Free plan available · No credit card required · 30-second setup · Works with all themes
How Google Tests Mobile vs Desktop (In Detail)
PageSpeed Insights uses Lighthouse under the hood. Here's exactly what happens differently between mobile and desktop tests:
| Factor | Mobile Test | Desktop Test | Impact |
|---|---|---|---|
| CPU Throttling | 4x slowdown | None | JS execution takes 4x longer on mobile test |
| Network Speed | ~1.6 Mbps (4G) | No throttling | Resources take longer to download on mobile |
| Network Latency | 150ms RTT | ~40ms RTT | Each request has more overhead on mobile |
| Viewport Width | 412px | 1350px | Different responsive layouts, image sizes |
| User Agent | Mobile Chrome | Desktop Chrome | May trigger different server responses |
| Scoring Weights | TBT: 30%, LCP: 25% | Same weights | Same formula, but throttling amplifies issues |
The CPU throttling is the biggest factor. Total Blocking Time (TBT) — which measures how long the main thread is blocked by JavaScript — counts for 30% of the PageSpeed score. With 4x CPU slowdown, every millisecond of JS execution becomes four. A script that blocks for 150ms on desktop blocks for 600ms on the mobile test.
💡 Key insight: This means JavaScript optimization has 4x more impact on your mobile score than on your desktop score. Every kilobyte of JS you defer or remove gains you more on mobile than desktop. This is exactly why Thunder's script deferral has such a dramatic effect on mobile scores.
Why Mobile Speed Matters More for SEO
Since 2019, Google has used mobile-first indexing for all new websites, and since 2021, it applies to the entire web. This means:
- Google primarily crawls and indexes the mobile version of your site
- Mobile Core Web Vitals are the primary signal for the ranking boost
- If content exists only on desktop (not in the mobile view), Google may not index it
Beyond SEO, your traffic data likely confirms why mobile matters: over 70% of Shopify store traffic typically comes from mobile devices. Your mobile experience is the default experience for most of your customers.
70%+
of Shopify traffic is mobile
53%
of mobile users leave if load > 3s
100%
of sites use mobile-first indexing
The bottom line: if you have to choose between optimizing for mobile or desktop, always choose mobile. Improvements on mobile almost always improve desktop too (but not vice versa). For a broader SEO perspective on speed, see our Core Web Vitals guide.
The JavaScript Problem on Mobile
JavaScript is the #1 reason mobile scores are lower than desktop. Here's why it hits so much harder on mobile:
Parsing Time
Before JavaScript can run, the browser must parse it. With 4x CPU throttling, a 500KB JS bundle that parses in 100ms on desktop takes 400ms on the mobile test. Shopify themes typically ship 200–600KB of JavaScript.
Execution Time
Every event handler, initialization routine, and third-party script takes 4x longer to execute. App scripts that feel instant on desktop become noticeable delays on mobile.
Main Thread Competition
On mobile, the main thread handles JS execution, layout, painting, and user input. With a throttled CPU, these tasks compete more aggressively, leading to longer Total Blocking Time and worse INP.
What You Can Do
- Defer non-critical JavaScript: Load analytics, chat widgets, and review scripts after the initial render. This is Thunder's primary optimization.
- Remove unused apps: Every front-end app adds JavaScript. Audit apps you're not using and uninstall them.
- Use modern JavaScript: ES modules with
type="module"are parsed more efficiently by modern browsers. - Code split: Don't load product page JavaScript on collection pages and vice versa.
For detailed JavaScript optimization techniques, see our guide to fixing render-blocking resources and managing third-party scripts.
Responsive Images: The Biggest Mobile Win
After JavaScript, images are the second biggest contributor to the mobile-desktop speed gap. Without responsive images, your mobile phone downloads the same massive hero image that your desktop displays at full width — a huge waste on a 412px-wide viewport.
Use Shopify's Built-In Responsive Images
Shopify's CDN automatically serves images in modern formats (WebP/AVIF) and can resize them on the fly. Use the image_url filter with image_tag to generate responsive srcset attributes:
{{ product.featured_image | image_url: width: 1200 | image_tag:
widths: '200,400,600,800,1000,1200',
sizes: '(max-width: 768px) 100vw, 50vw',
loading: 'lazy'
}}This tells the browser: "On mobile (under 768px), this image fills the full viewport width, so download a ~400px version. On desktop, it fills half the viewport, so download a ~600–700px version." The difference can be enormous — a 1200px image might be 150KB, while a 400px version is just 25KB.
Hero Image Optimization
Your hero image is typically your LCP element — the largest content element that determines your Largest Contentful Paint score. On mobile, this image needs special attention:
- Use different image crops for mobile: A wide desktop banner cropped to mobile loses impact. Consider a separate, taller mobile hero.
- Preload the mobile LCP image: Add a preload hint for the mobile image size to speed up LCP.
- Don't lazy-load the hero: The hero image should load eagerly (
loading="eager") since it's above the fold. - Use fetchpriority="high": Tell the browser to prioritize downloading the hero image over other resources.
For a complete image optimization playbook, see our Shopify image optimization guide.
Mobile-Specific Optimizations for Shopify
Beyond JavaScript and images, here are optimizations that specifically target mobile performance:
Reduce DOM Size on Mobile
Many Shopify themes render duplicate elements — a desktop menu AND a mobile menu, both always in the DOM. On mobile, hide the desktop elements with display: none — but even better, wrap them in a Liquid condition or use content-visibility: auto so the browser can skip their layout calculations entirely.
Minimize Above-the-Fold Content on Mobile
Mobile viewports show less content above the fold (823px vs 940px height, and most of that is occupied by the header and hero). Simplify your mobile above-the-fold: one hero image, one headline, one CTA. Less content = less to render = faster LCP.
Reduce Font File Count
Each font file is an additional network request — which hurts more on throttled 4G. Use no more than 2 font families with 2–3 weights each. Consider using system fonts for body text and only loading a custom font for headings. This saves 100–300KB and eliminates font-swap layout shifts.
Preconnect to Critical Origins
With 150ms RTT on the mobile test, each new server connection adds significant latency. Add preconnect hints for your most important external domains:
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>Use CSS Media Queries for Mobile-Only Styles
Don't ship desktop-only CSS to mobile browsers. Use media attributes on link tags so mobile browsers can prioritize mobile CSS and defer desktop styles.
Touch Event Handling and INP on Mobile
Mobile devices use touch events instead of mouse clicks — and this introduces unique INP challenges:
The 300ms Tap Delay (Legacy Issue)
Older browsers added a 300ms delay after a tap to detect double-taps. Modern browsers eliminate this if your page includes <meta name="viewport"> with width=device-width — which all Shopify themes include. But some older app scripts may add touch event listeners that reintroduce delays.
Passive Touch Listeners
Touch events that don't call preventDefault() should be marked as passive: true. This lets the browser start scrolling immediately instead of waiting to see if the handler cancels the scroll. Many older Shopify apps don't do this.
Touch Target Sizing
Google recommends tap targets be at least 48x48px with 8px spacing. Targets that are too small lead to mis-taps and frustration — not a direct speed issue, but it affects the perceived responsiveness of your store.
PageSpeed Insights flags non-passive touch listeners and undersized tap targets. Fixing these improves both your score and the real mobile experience. For more on mobile-specific optimization, see our mobile speed optimization guide.
Realistic Mobile Score Targets for Shopify
Don't chase a perfect 100 on mobile — it's virtually impossible for a real Shopify store with apps, analytics, and rich product content. Here are realistic targets:
| Store Type | Realistic Mobile Target | Desktop Target | Notes |
|---|---|---|---|
| Minimal store (1–2 apps) | 60–80 | 90–98 | Dawn theme, minimal customization |
| Average store (3–5 apps) | 45–65 | 80–92 | Premium theme, reviews + analytics |
| Feature-rich store (6+ apps) | 35–55 | 70–88 | Custom theme, many front-end apps |
| Enterprise store (10+ apps) | 25–45 | 60–80 | Complex customization, ERP integrations |
Remember: The PageSpeed score is a synthetic benchmark. What actually matters for SEO and conversions are the Core Web Vitals (LCP, CLS, INP) from real user data. A store scoring 40 on mobile but passing all Core Web Vitals in the field is in a better position than a store scoring 60 but failing INP.
For more context on what your score means, see our guides on Shopify speed benchmarks and understanding PageSpeed Insights. Ready to optimize? Start with our complete optimization guide.
Frequently Asked Questions
Why is my Shopify mobile speed score so much lower than desktop?
Google PageSpeed Insights tests mobile with aggressive throttling: 4x CPU slowdown to simulate a mid-range phone and throttled network to simulate 4G conditions. Desktop testing uses your actual connection speed and full CPU power. This means JavaScript that runs in 200ms on desktop can take 800ms+ on the simulated mobile device. The same page with the same code will always score lower on mobile — typically 20–40 points lower.
Does Google use mobile or desktop scores for SEO ranking?
Google uses mobile-first indexing, meaning the mobile version of your site is what Google primarily crawls and uses for ranking. Core Web Vitals from mobile field data (real Chrome users on mobile devices) are the ranking signal. This makes mobile performance more important for SEO than desktop. However, Google evaluates Core Web Vitals (LCP, CLS, INP) separately for mobile and desktop — your desktop pages are ranked using desktop metrics and vice versa.
What mobile device does Google PageSpeed Insights simulate?
PageSpeed Insights uses Lighthouse, which simulates a mid-range Moto G Power (or equivalent) with 4x CPU throttling on a throttled 4G connection (~1.6 Mbps download, 150ms RTT). This is intentionally harsh — it represents the experience for users with average, not high-end, devices. Real-world mobile performance for your customers depends on their actual devices and connections, which is why field data (CrUX) is more important than lab scores.
Should I optimize for mobile or desktop speed first?
Optimize for mobile first. Since Google uses mobile-first indexing, your mobile Core Web Vitals directly impact rankings. Additionally, over 70% of Shopify traffic is typically from mobile devices. If your mobile speed is good, your desktop speed will almost always be good too — the reverse isn't true. Focus on reducing JavaScript execution time, optimizing images for mobile viewports, and ensuring fast LCP on smaller screens.
Can I have different PageSpeed scores for mobile and desktop?
Yes — and you almost certainly will. It's extremely common for a Shopify store to score 35 on mobile and 85 on desktop. The 30–50 point gap is normal and caused by the different testing conditions (CPU throttling, network simulation, viewport size). Don't panic about a low mobile score if your desktop score is healthy — the gap indicates normal JavaScript overhead, not a broken site.
How do responsive images affect mobile vs desktop speed?
Responsive images (using srcset and sizes attributes) let the browser download appropriately sized images for each device. Without them, a mobile phone downloads the same 2000px-wide hero image as a desktop monitor — wasting bandwidth and increasing LCP by seconds. Shopify's image_url Liquid filter supports responsive sizing, and most modern themes implement srcset automatically. This is one of the biggest wins for closing the mobile-desktop speed gap.