Theme Speed Tips for Shopify Stores

Hey everyone 👋 I've been with Sleek, Zest, Hyper & Pebble from the very beginning, and I spend a lot of time auditing real stores running them. Honestly, most "my store is slow" tickets we get aren't the theme — they're a handful of setup mistakes that repeat over and over. Here are the real ones, in the order they actually matter 👇

🧪 1. You might be testing speed WRONG

This is the #1 false alarm we see. If the theme isn't set as your published/live theme, you're testing in Preview mode — and Shopify's admin preview bar injects extra code that drags your score down. Your store looks slower than it really is.
→ Publish the theme live (or test the shopifypreview.com link), then run PageSpeed. Don't judge speed from the theme editor preview.

🎬 2. A video at the very top is an LCP killer

Our themes have a beautiful Video hero section — but the browser has to wait for that video to load and start playing, which wrecks your LCP (the metric Google weighs most).

Don't put background/hero video at the very top of the homepage.
Background video: keep under 2–3MB. Autoplay: under 10MB / ~10s.
Never embed videos inside rich text (product/blog/page descriptions) — use the dedicated Video sections.

🎨 3. Use hex swatches, not image swatches

Color swatches are great, but image-based swatches fire an extra image request per swatch. Switch them to hex codes (e.g. #000000) — instant render, zero extra requests.
💳 4. Dynamic checkout buttons cost you scripts
Shop Pay / PayPal / Apple Pay buttons load extra external scripts. If speed is your priority, turn them off — customers still pick their method at checkout.
In Sleek: Product information → Buy buttons → Show dynamic checkout buttons (also under Featured product, Quick view, and Sticky add-to-cart). Same idea in Hyper/Zest/Pebble.

🧱 5. Every section you enable has a cost

We ship a LOT of sections on purpose — but each one you turn on adds DOM elements + its own CSS/JS. Cramming 15 sections on the homepage blows up your DOM size (we've seen 2,000+ elements tank scores) and slows rendering.

Keep the homepage focused. Fewer sections = faster.
Big collections → turn on pagination so you're not loading 100 products at once.
Keep the header simple: logo, nav, announcement bar. Skip extra blocks/animations up there.

The usual suspects still apply (and still the biggest wins for most stores):
🖼️ Compress images before upload (Shopify auto-serves WebP) • 🔤 Max 2 fonts, reuse the same one for heading/body/nav • 🧩 Fewer apps — each injects scripts on every page, and they often leave code behind after you uninstall.
⏱️ Reality check: pages under 2s convert ~2.5x better, and every 100ms of delay ≈ 1% fewer orders. Worth an afternoon.
Got a slow store? Drop your PageSpeed link in the thread and I'll tell you exactly what's dragging it down