# Improve your store speed
All FoxEcom themes
Store speed affects your customers' shopping experience and can impact your store's SEO.**** [**FoxEcom**](https://foxecom.com/?utm_source=foxecom\&utm_medium=shared_docs\&utm_campaign=anchor_text\&utm_term=foxecom) **themes** are built with performance in mind, but your apps, media, and theme settings also affect loading speed.
This guide explains the most common factors that impact performance and shares best practices to help you keep your store fast.
### Before you start
If your theme isn't published yet, Shopify runs speed tests in **Preview mode**. Preview mode adds the Shopify admin preview bar, which can lower your speed score.
Publish your theme before testing its performance to get more accurate results.
## TL;DR - Quick performance checklist
| Category | Best practices |
| ---------------- | ------------------------------------------------------------------------------------------ |
| Apps | Remove unused apps and extra tracking tags. Use built-in theme features whenever possible. |
| Content | Keep pages clean and focused. Fewer sections \= faster loads. |
| Videos | Use small, short MP4 files (under 3 MB). Avoid videos at the very top of your page. |
| Images | Compress before uploading. Use correct formats. |
| Redirects | Avoid unnecessary or chained redirects. Use clean, direct URLs. |
| Checkout buttons | Disable dynamic checkout buttons if speed is a top priority. |
| Fonts | Use minimal fonts — system fonts are fastest. |
| Swatches | Use hex color codes instead of image-based swatches. |
| Header | Keep header simple — logo, nav links, and announcement bar only. |
## Limit third-party JavaScript & Shopify apps
Shopify apps add useful features to your store, but they can also affect loading speed.
Most apps load their own JavaScript, CSS, and tracking scripts on your storefront. Even if an app isn't used on every page, its assets may still load, increasing page load time.
In many cases, third-party scripts such as analytics or marketing pixels have a greater impact on performance than the theme itself. As such, consider whether installed apps provide enough value to offset any performance impact.
An example of a store speed test run by PageSpeed Insights
**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
Keep your page layout **simple**. Fewer sections and blocks help your pages load faster and make it easier for customers to find what they need.
Avoid adding too many sections, widgets, or large product grids. They increase the number of elements on the page (DOM size), which can slow down rendering.
**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
**Use background videos carefully.** Large video files can slow down your store and increase your **Largest Contentful Paint (LCP)**, which measures how long it takes to display the largest visible element on the page.
Use only the videos you need, and **keep file sizes as small as possible**. Fewer, optimized videos load faster than multiple large videos.
**Best practices:**
* Avoid placing the **Background video** section (Video hero section). 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**.
## Optimize images
**Optimize your images before uploading them.** Large image files can slow down your pages.
**Use only the images your page needs.** Even optimized images can affect performance when too many are loaded on a single page.
**Best practices:**
* Compress all images before uploading. Tools such as [TinyPNG](https://tinypng.com/) or [JPEG Optimizer](https://jpeg-optimizer.com/) 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](https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips) for additional best practices.
## Enable "Preload image"
Some image-based sections include an **Enable preload image** option under **Advanced settings**, such as Slideshow, Image with text overlay, Image card, and Image card overlay...
Turn on this option for images that appear near the top of your page. Shopify loads these images earlier, helping visitors see the main content sooner and improving **Largest Contentful Paint (LCP)** — the time it takes to display the largest visible element on the page.
**Use image preloading selectively.** Turn it on for the most important images only, as preloading too many files can affect performance.
✅ When to turn it on
Turn on **Enable preload image** for images that visitors see as soon as the page loads (**on top of the page**), such as:
* The hero banner on your homepage.
* Large images displayed above the fold (the part of the page visitors see without scrolling).
❌ When to leave it off
* Images **further down the page**, such as secondary banners or promotional sections.
* Additional slideshow images that aren't visible when the page first loads.
* Pages with many large images, as preloading too many files can reduce the performance benefit.
## Minimize redirects
Reduce unnecessary redirects to improve your store's loading speed.
A redirect sends visitors from one URL to another before the page loads. While redirects are sometimes necessary, using too many can slow down your store, especially on mobile devices.
Review your redirects regularly and remove any that are no longer needed to improve page speed and create a smoother browsing 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.
## Dynamic checkout buttons/Accelerated checkout buttons
[Accelerated checkout buttons](https://help.shopify.com/en/manual/online-store/dynamic-checkout) (such as **PayPal**, **Shop Pay**, or **Apple Pay**) offer convenience — but they also load **extra external scripts**, which can slow your store.
Get to know dynamic checkout buttons
If improving page speed is your priority, consider disabling dynamic checkout buttons. Customers can still choose their preferred payment method at checkout.
### How to disable dynamic checkout buttons?
Keep them enabled only if you want faster one-click purchases directly from product pages.
* **Product page:** `Product information > Buy buttons > Show dynamic checkout buttons`
* **Featured product section:** `Featured product > Buy buttons > Show dynamic checkout buttons`
* **Quick view modal:** `Quick view > Buy buttons > Show dynamic checkout buttons`
* **Sticky Add to cart bar:** `Product information > Sticky Add to cart bar block > Standard Style > Show dynamic checkout buttons`
* **Product page:** `Product information > Buy buttons > Accelerated checkout`
* **Quick view modal:** `Quick add drawer > Buy buttons > Accelerated checkout`
* **Product page:** `Product information > Buy buttons > Show dynamic checkout buttons`
* **Featured product section:** `Featured product > Buy buttons > Show dynamic checkout buttons`
* **Quick view modal:** `Theme settings > Product quick view > Show dynamic checkout buttons`
* **Sticky Add to cart bar:** `Sticky Add to cart bar > Show dynamic checkout buttons`
* **Product page:** `Product information > Buy buttons > Show dynamic checkout buttons`
* **Featured product section:** `Featured product > Buy buttons > Show dynamic checkout buttons`
* **Quick view modal:** `Quick view > Buy buttons > Show dynamic checkout buttons`
* **Sticky Add to cart bar:** `Sticky Add to cart bar > Show dynamic checkout buttons`
* **Product page:** `Product information > Buy buttons > Show dynamic checkout buttons`
* **Featured product section:** `Featured product > Buy buttons > Show dynamic checkout buttons`
* **Sticky Add to cart bar:** `Product Information > Sticky Add to cart > Show dynamic checkout buttons`
## Adjust other miscellaneous settings
### Header group
Keep your header **simple** — include only key elements such as:
* Announcement bar
* Logo
* Navigation links
**Use only the blocks and animations your store needs.** Fewer elements help your pages render faster.
### Swatches
When using colour swatches, choose **hex-based colours** (e.g. `#000000`) instead of **image-based swatches**. They load instantly and avoid extra image requests.
* [Hyper theme](https://docs.foxecom.com/hyper-theme/theme-settings/color-swatches)
* [Pebble theme](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards#swatches)
* [Sleek theme](https://docs.foxecom.com/sleek-theme/theme-settings/color-swatches)
* [Zest theme](https://docs.foxecom.com/zest-theme/theme-settings/color-swatches)
* [Minimog theme](https://docs.foxecom.com/minimog-theme/theme-settings/product-options-swatches)
* [Megamog theme](https://docs.foxecom.com/megamog-theme/theme-settings/product-options-swatches)
### Fonts
Each font and font weight adds an extra file to download.
* **Use as few font families as possible.** Reuse the same font for headings, body text, and navigation whenever you can. This reduces font requests and helps pages load faster.
* **Choose system fonts** such as **Arial**, **Helvetica**, or **Sans-serif** whenever possible. These fonts are already available on most devices, so they load instantly and improve page speed.
## Key takeaways
Your theme is built for performance, but your apps, media, and page design all affect loading speed.
**To keep your store running smoothly:**
* Keep your homepage simple and focused.
* Optimize images and videos before uploading them.
* Install only the apps your store needs.
* Use built-in theme features instead of third-party apps or custom scripts whenever possible.
Review your store regularly and remove anything you no longer use to maintain good performance over time.
### Swatches
When using colour swatches, choose **hex-based colours** (e.g. `#000000`) instead of **image-based swatches**. They load instantly and avoid extra image requests.