Speed Up Your Shopify Homepage in 60 Seconds
Run a free speed test on your homepage to see exactly what's slowing it down. The diagnostics will show which resources block rendering and which images need optimization. For an instant fix, Thunder Page Speed Optimizer tackles the most impactful homepage speed issues automatically:
- Defers render-blocking JavaScript from apps and theme (often 500KB-2MB on homepages)
- Optimizes CSS loading so above-the-fold content renders immediately
- Lazy loads offscreen images in featured collections and below-fold sections
- Preloads critical resources like your hero image
One click install, zero code changes, works with every Shopify theme. The manual optimizations below give you additional wins on top of Thunder's automatic improvements.
Why Your Shopify Homepage Is the Slowest Page
Product pages load 5-10 sections. Collection pages load a grid and some filters. But homepages? They're a showcase of everything — hero banners, featured collections, bestsellers, new arrivals, testimonials, brand stories, Instagram feeds, newsletter popups, and more. Each section adds:
- DOM nodes — more HTML elements for the browser to parse and render. A 20-section homepage can have 3,000-5,000 DOM nodes.
- Images — each featured collection loads 4-16 product images, hero sections load 1-5 slides, testimonials add avatars. A typical homepage loads 40-80 images total.
- JavaScript — slideshow libraries, countdown timers, animation scripts, carousel JS. Homepage-specific JS can add 200-500KB on top of theme and app scripts.
- App widgets — live chat, review badges, cookie consent, announcement bars, pop-ups. Each loads its own JS/CSS bundle.
The result: homepages consistently score 10-20 points lower than product pages on Google PageSpeed Insights. Let's fix that section by section.
Hero Section: The #1 Shopify Homepage Speed Killer
Your hero section is almost always the Largest Contentful Paint (LCP) element — the single most important metric for perceived loading speed. Hero optimization has the biggest impact of any single change.
Single Image vs Slideshow
A hero slideshow looks impressive but murders performance. Here's the real cost:
| Factor | Single Hero Image | 3-Slide Slideshow |
|---|---|---|
| Images loaded | 1 (200-400KB) | 3 (600KB-1.2MB) |
| JavaScript required | 0KB | 30-100KB |
| CLS risk | None | High (different image sizes) |
| LCP impact | Fast (preloadable) | Slow (competing downloads) |
| Conversion data | Higher CTR (focused message) | Lower CTR (banner blindness) |
Hero Image Optimization Checklist
- Use a single static hero image — one clear message, one CTA, no animations
- Preload the hero image — add
<link rel="preload">in the<head>withfetchpriority="high" - Size appropriately — desktop hero at 1920×700-900px, mobile at 750×900px. Don't load a 3000px image.
- Use responsive images — serve different sizes for mobile vs desktop via
srcsetandsizesattributes - Avoid text-on-image overlays where possible — use HTML text over the image so text renders before the image loads
- Never lazy load the hero — this is the LCP element. It should load immediately with
loading="eager"
Featured Collection Sections: Less Is More
Featured collections are the second biggest homepage speed drain. Each collection section loads 4-16 product images, and most homepages have 2-4 collection sections. That's potentially 64 product images on a single page.
Optimization Strategies
- Show 4-8 products per collection instead of 12-16. More products = more images = slower page.
- One collection above the fold, rest below — lazy load all below-fold collection sections
- Use smaller product images — homepage product thumbnails don't need 1000px resolution. 400-600px width is enough.
- Limit to 2 featured collection sections — most visitors click through to collection pages anyway. The homepage just needs to direct them.
- Avoid collection carousels — they load all images upfront for smooth scrolling. A grid with "View All" link is faster and equally effective.
For collection pages themselves (which load many more products), see our collection page speed guide.
Video Backgrounds and Embeds on Your Homepage
A video hero or brand story video can add 2-5MB to your homepage if loaded directly. YouTube and Vimeo embeds are lighter but still load 500KB-1MB of iframe resources. The fix is the facade pattern:
- Show a static thumbnail image instead of the actual video player
- When the visitor clicks the thumbnail, replace it with the real video embed
- This saves 500KB-5MB on initial page load for visitors who never play the video (most of them)
For full implementation details, including YouTube Lite and Vimeo facade code, see our Shopify video optimization guide.
If you use a background video on your hero section: replace it with a static image on mobile. Mobile connections are slower, screens are smaller, and most mobile users have data caps. The visual impact of a background video on a 375px screen is minimal compared to the performance cost.
Homepage App Widgets: The Hidden Speed Tax
Every Shopify app you install can inject JavaScript and CSS into your homepage. Even apps that seem lightweight add up. Here's the real cost of common homepage widgets:
| Widget Type | JS/CSS Added | Speed Impact | Recommendation |
|---|---|---|---|
| Live chat (Tidio, Gorgias) | 200-500KB | High | Defer or load on interaction |
| Review badges (Judge.me, Loox) | 100-300KB | Medium | Only load on product pages |
| Cookie consent (GDPR) | 50-200KB | Medium | Use a lightweight banner |
| Instagram feed | 500KB-1MB | High | Replace with static images |
| Countdown timer | 50-100KB | Low-Med | Use CSS-only or defer JS |
| Newsletter popup | 100-300KB | Medium | Load after page renders |
A store with 5-6 of these widgets is loading 1-3MB of extra JavaScript just for homepage widgets. That's on top of theme JS, Shopify's own JS, and analytics scripts. Learn more about identifying problematic apps in our apps that slow down your store guide.
Thunder defers non-critical app scripts automatically — the page renders first, then widgets load in the background. This is the single highest-impact change for most homepages.
Audit Your Shopify Homepage Sections
Open your Shopify admin → Online Store → Customize → Home page. Count your sections. If you have more than 12, you're likely hurting performance without proportional conversion benefit. Here's a framework for deciding what stays:
✅ Keep (High Conversion Value)
- Hero banner with primary CTA
- 1-2 featured collection grids (4-8 products each)
- Social proof / testimonials (text-based, not embedded widgets)
- Value propositions (shipping, returns, guarantees)
- Footer CTA / newsletter signup
❌ Consider Removing (Low Value, High Cost)
- Instagram feed (high bandwidth, low conversion)
- Multiple slideshows / carousels
- Blog post sections (link to blog instead)
- Map / store locator on homepage
- Redundant collection sections (3+ featured collections)
- Auto-playing video backgrounds
Every section you remove is images that don't load, DOM nodes that don't parse, and JavaScript that doesn't execute. For a deeper site-wide audit, follow our Shopify speed audit checklist.
Mobile Homepage Speed: Where It Matters Most
Over 70% of Shopify traffic comes from mobile devices — and mobile is where homepage speed problems are most severe. Slower connections, less RAM, smaller screens mean every extra kilobyte hurts more. Here's what to focus on:
- Serve mobile-optimized hero images — don't load a 1920×900px hero on a 375px screen. Use
srcsetandsizesattributes to serve a 750px image on mobile. This alone can save 200-400KB. - Reduce visible products on mobile — a 4-column product grid on desktop becomes a 2-column grid on mobile. Show 4 products instead of 8 — the rest require scrolling anyway.
- Disable video backgrounds on mobile — replace with a static image using a CSS media query or theme settings. Background video on mobile wastes bandwidth and battery.
- Simplify mobile navigation — mega menus that load dozens of collection images on hover translate to heavy mobile hamburger menus that pre-load those same images.
- Test on real devices — Chrome DevTools throttling doesn't perfectly simulate real mobile performance. Use our speed test tool or Google's PageSpeed Insights with a real mobile connection.
For comprehensive mobile optimization beyond the homepage, see our mobile speed optimization guide.
Above-the-Fold Optimization for Shopify Homepages
The browser renders your page top-down. What appears "above the fold" (the visible viewport before scrolling) determines your LCP score and the visitor's first impression. Optimize this area ruthlessly:
- Identify your LCP element — run PageSpeed Insights and look for the "Largest Contentful Paint element" diagnostic. It's usually the hero image. Preload this image with high priority.
- Inline critical CSS — the CSS needed to render above-fold content should be inlined in the
<head>, not in an external stylesheet that blocks rendering. Our CSS optimization guide covers this in detail. - Defer below-fold sections — everything after the hero and first visible section should load lazily. Images get
loading="lazy", and JavaScript-heavy sections should use intersection observer to load only when scrolled into view. - Minimize render-blocking resources — every CSS file and synchronous JavaScript in the
<head>blocks the first paint. Thunder eliminates render-blocking resources automatically by deferring non-critical scripts.
⚡ Quick Fix vs Manual Homepage Optimization
| Optimization | Thunder (Automatic) | Manual (Developer Needed) |
|---|---|---|
| Defer render-blocking scripts | ✅ One click | Edit theme.liquid, risk breaking apps |
| Optimize CSS loading | ✅ Automatic | Extract critical CSS manually |
| Lazy load images | ✅ Automatic | Add loading="lazy" per image |
| Preload hero image | ✅ Automatic | Add preload link tag in theme |
| Time to implement | 60 seconds | 4-8 hours developer time |
| Risk | Zero (reversible) | Can break theme/apps |
Install Thunder for automatic homepage optimization, then apply the manual wins (section reduction, hero image swap) for maximum effect. See pricing.
Frequently Asked Questions
Why is my Shopify homepage slower than product pages?
Homepages are typically the heaviest page on a Shopify store because they contain the most sections: hero sliders, featured collections (loading 8-16 product images), promotional banners, video backgrounds, testimonial carousels, Instagram feeds, announcement bars, and app widgets. Each section adds DOM nodes, CSS, JavaScript, and images. A typical homepage has 15-30 sections while a product page has 5-10. This is why homepages usually score 10-20 points lower on PageSpeed Insights than product pages.
Should I use a slideshow or single hero image on my Shopify homepage?
A single hero image is significantly faster than a slideshow. Slideshows load 3-5 full-size images upfront (even though only one is visible), add JavaScript for animation/navigation, and often cause CLS (Cumulative Layout Shift) when images load at different speeds. A single static hero image loads one image, requires zero JavaScript, and is predictable for the browser's preload scanner. If you must use a slideshow, limit it to 2-3 slides and lazy load slides 2+.
How many sections should a Shopify homepage have?
For optimal speed, keep your homepage to 8-12 sections maximum. Each section adds to the DOM size, CSS complexity, and often loads its own images or scripts. The sections above the fold (hero, announcement bar, navigation) should load immediately. Everything below should lazy load. Many high-performing Shopify stores use just 6-8 sections: hero, featured collection, value propositions, testimonials, featured products, and footer CTA.
Do homepage app widgets slow down my Shopify store?
Yes — significantly. Common homepage widgets include live chat (Tidio, Gorgias — 200-500KB JS), review badges (Judge.me, Loox — 100-300KB), cookie consent banners (50-200KB), announcement bars with countdown timers (50-100KB JS), and Instagram feeds (500KB-1MB including images). Each widget loads its own JavaScript and CSS, often render-blocking. A store with 5-6 homepage widgets can easily add 1-2 seconds to load time. Thunder defers these scripts so they load after the page renders.
What is a good PageSpeed score for a Shopify homepage?
On mobile, a score of 50-70 is realistic for a Shopify homepage with featured collections and app widgets. A score of 70-90 is achievable with optimization (Thunder + image optimization + section reduction). Scores above 90 on mobile are rare for homepages with real content. On desktop, aim for 80-95. Don't obsess over the score number — focus on real-world metrics: LCP under 2.5 seconds, CLS under 0.1, and INP under 200ms.
How do I make my Shopify homepage load in under 2 seconds?
To achieve sub-2-second homepage loading: (1) Use a single optimized hero image instead of a slideshow, preloaded with fetchpriority='high'. (2) Limit to 8-10 sections total. (3) Lazy load everything below the fold. (4) Remove or defer non-essential app widgets. (5) Use a fast Shopify 2.0 theme like Dawn. (6) Install Thunder Page Speed Optimizer to automatically defer render-blocking scripts and optimize resource loading order. (7) Limit featured collection sections to 4-8 products instead of 16+.
Make Your Shopify Homepage the Fastest Page on Your Store
Your homepage doesn't have to be your slowest page. The biggest wins are structural: replace the slideshow with a single hero image, cut sections from 20 to 10, limit featured collections to 4-8 products each, and defer app widgets that aren't needed for first render. These changes alone can cut 1-3 seconds off your homepage load time.
For the technical optimizations — script deferral, CSS optimization, image preloading, render-blocking elimination — Thunder Page Speed Optimizer handles them automatically. One click, 27+ point score improvement, works on every theme.
Test your homepage speed now and see where you stand. For the full speed playbook beyond your homepage, see our complete Shopify speed optimization guide.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more