Pebble Theme
Pebble Theme
Faqs

Improve your store speed

8 min read

Keeping your theme fast and optimized is key to higher conversions, better SEO, and a smooth shopping experience.

Pebble — like all FoxEcom themes — is built with performance in mind. However, maintaining that speed over time requires careful setup and maintenance.

Some design choices, apps, or settings can have a bigger impact on performance than others. While certain features may look great, they can slow down your site. This guide will help you find the right balance between design and speed.

🏎️ TL;DR — Quick performance checklist

CategoryBest Practices
AppsRemove unused apps and extra tracking tags. Use built-in theme features whenever possible.
ContentKeep pages clean and focused. Fewer sections = faster loads.
VideosUse small, short MP4 files (under 3 MB). Avoid videos at the very top of your page.
ImagesCompress before uploading. Use correct formats.
RedirectsAvoid unnecessary or chained redirects. Use clean, direct URLs.
Checkout buttonsDisable dynamic checkout buttons if speed is a top priority.
FontsUse minimal fonts — system fonts are fastest.
SwatchesUse hex color codes instead of image-based swatches.
HeaderKeep header simple — logo, nav links, and announcement bar only.

🧭 Before we start

If Pebble is not published as your live theme, speed tests will be running in Preview mode. Shopify’s preview mode adds extra code (the admin preview bar), which can make speed scores appear lower than they actually are.

💡 Tip: For accurate results, publish Pebble as your live theme and check your speed scores using the live version instead.

⚙️ Limit third-party JavaScript & Shopify apps

Shopify apps are great for adding features — but they can also be the biggest cause of slow performance.

Each app adds its own scripts, styles (CSS/JS), and tracking code. These files often load on every page, even when the app isn’t being used. Over time, this buildup slows your store.

For example, in some store audits, we’ve seen large delays caused by third-party scripts like Facebook Pixel or Shopify Boomerang — things that even theme developers can’t fully control.

A Lighthouse audit showing third-party scripts (like Shopify, Google Tag Manager, and Facebook Pixel) contributing to long main-thread blocking times.

As such, consider whether installed apps provide enough value to offset any performance impact.

Best practices:

  • Only install apps that are essential to your business.
  • Uninstall unused apps completely and ask the developer to remove leftover code.
  • If two apps do similar things, keep only one.
  • Where possible, use built-in theme features rather than third-party apps.
  • Audit your tag manager to remove any unused or low-value tags. Learn more about best practices for tags and tag managers.

🧩 Keep content simple and relevant

When it comes to modern store design, less is more. A focused, well-structured page loads faster, looks cleaner, and converts better. The goal is to quickly deliver value and capture your visitors’ attention without overwhelming them.

Too many sections, widgets, or large product grids can overwhelm users and increase your DOM size (the number of elements on the page), which slows rendering.

An example of a Lighthouse report showing an excessive DOM size (2,311 elements).

Best practices:

  • Avoid overcrowding your homepage with too many sections or widgets.
  • Show a limited number of products and collections per page.
  • Keep scrolling short — long pages take longer to load.
  • If you have collections with large amounts of products in them, then consider activating pagination to limit the number of products that load at one time.
  • Rotate sections seasonally (e.g., holiday banners) instead of adding new ones endlessly.
  • Move third-party widgets or feeds (e.g. Instagram apps) to a separate landing page, as they add external resources that can slow load times.

🎬 Optimize videos

Videos tell stories beautifully — but they’re large files that can slow your store. A big background video can especially hurt your Largest Contentful Paint (LCP) score.

Best practices:

  • Avoid placing the Background video section (Video hero section) near the top of your page. Since the browser must wait for the video to load and begin playing, it increases the Largest Contentful Paint (LCP) score, which can slow the perceived load speed.
  • Avoid embedding videos or images directly in rich text areas (such as product descriptions, blog articles, or general pages). Instead, use dedicated video sections provided by the theme (e.g. Video section, Video hero section).
  • For best results, use short MP4 files under 2–3 MB where feasible.
  • Compress videos before uploading, and host them on fast, reliable CDNs if possible.
  • For autoplay videos, keep file sizes under 10 MB and durations around 10 seconds.

💡Tip: Keep both the number and size of videos low. A few lightweight videos will perform better than several large ones scattered across your homepage.

🖼️ Optimize images

Images often make up over half of a page’s size. Optimizing them before upload is one of the easiest ways to boost performance.

Best practices:

  • Compress all images before uploading. Tools such as TinyPNG or JPEG Optimizer work well for reducing file size without compromising quality.
  • Use appropriate file formats (JPG for photos, PNG for graphics with transparency) and resize images to match their display size.
  • Keep your page clean — only include images that add value.
  • Refer to Shopify’s Image Optimization Guide for additional best practices.

Even optimized images can impact speed if there are too many on a single page. Use only the images that are essential for your store’s design and storytelling.

⚡ Advanced image optimization: "Enable preload image"

You’ll find an "Enable preload image" option under Advanced settings for some sections — such as Slideshow, or the Image with text overlay section.

image

When enabled, Shopify tells the browser to load that image early in the page lifecycle, improving the Largest Contentful Paint (LCP) for that section — especially when it’s visible at the top of your page.

When to use it:

✅ Enable it for:

  • The main hero section or the first visible image on your homepage.
  • Any large, above-the-fold image that appears as soon as the page loads.

❌ Disable it for:

  • Additional slides or lower sections (e.g., secondary banners, mid-page promotions) to maintain balance between speed and efficiency.
  • Pages with many large images — enabling it everywhere can increase the total number of preloaded files and slow down loading.

In short:

Use image preloading strategically — one well-preloaded image can improve speed, but too many can have the opposite effect.

🔁 Minimize redirects

Each redirect adds an extra step before a page can load — slowing things down, especially on mobile networks.

Redirects occur when one URL automatically routes visitors to another (for example, when a discontinued product link forwards to a new product page). While sometimes necessary, too many redirects can reduce site speed and user experience.

Best practices:

  • Keep redirects to a minimum. Avoid unnecessary “www” or “https” redirect chains.
  • Update old URLs in menus, banners, and marketing campaigns to point directly to the correct page.
  • Maintain your sitemap so search engines and customers reach the right destination efficiently.
  • Repurpose high-traffic pages instead of deleting or redirecting them when possible.

Reducing redirects helps pages load faster, improves SEO, and ensures smoother navigation for your customers.

💳 Accelerated checkout buttons

Accelerated checkout buttons (such as PayPal, Shop Pay, or Apple Pay) offer convenience — but they also load extra external scripts, which can slow your store.
image

If speed is your top goal, consider disabling dynamic checkout buttons. Customers can still choose their preferred payment method at checkout.

In Pebble, this block is named Accelerated checkout.

To disable accelerated checkout buttons in Pebble theme:

  • Product page: Product information > Buy buttons > Accelerated checkout
  • Quick view modal: Quick add drawer > Buy buttons > Accelerated checkout
image

Keep the block visible only if you want faster one-click purchases directly from product pages.

🔧 Adjust other miscellaneous settings

Header group

Keep your header simple — include only key elements like:

  • Announcement bar
  • Logo
  • Navigation links

Avoid adding unnecessary blocks or animations. Fewer elements = faster rendering.

Fonts

Each font and font weight adds an extra file to download.

Best practices:

  • Use as few different fonts as possible.
  • Keep your Heading, Body, and Navigation fonts the same where you can; this minimizes font file requests.
  • Whenever possible, select System fonts (e.g., Arial, Helvetica, or sans-serif). These load instantly and reduce render time compared to web-hosted fonts.

🏁 The bottom line

Pebble theme is designed for speed — but maintaining that performance depends on how you use it.

Always aim to:

  • Keep your homepage simple and focused.
  • Use optimized images and lightweight videos.
  • Limit third-party apps to only what’s essential.
  • Choose built-in theme features instead of external scripts or widgets.

Performance isn’t about doing less — it’s about doing what matters most.

With thoughtful setup and regular maintenance, your Shopify store will stay fast, elegant, and ready to deliver an outstanding experience for your customers.

Last updated

Hide out-of-stock products from your collections

Previous Page

New customer accounts component

Next Page

ON THIS PAGE

🏎️ TL;DR — Quick performance checklist⚙️ Limit third-party JavaScript & Shopify apps🧩 Keep content simple and relevant🎬 Optimize videos🖼️ Optimize images⚡ Advanced image optimization: "Enable preload image"🔁 Minimize redirects💳 Accelerated checkout buttons🔧 Adjust other miscellaneous settingsHeader groupFonts🏁 The bottom line

Was this helpful?