Improve your store speed ⚡
Practical tips to keep your Shopify store fast and ready to convert
Keeping your theme fast and optimized is key to higher conversions, better SEO, and a smooth shopping experience.
Hyper — 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 your site down. This guide will help you find the right balance between design and speed.
🏎️ TL;DR — Quick performance checklist
Apps
Remove unused apps and extra tracking tags. Use built-in Hyper 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.
🧭 Before we start
If Hyper 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 makes speed scores appear lower than they really are.
💡 Tip: For accurate results, publish Hyper 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.
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.
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.
🖼️ 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.
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.
If speed is your top goal, consider disabling dynamic checkout buttons. Customers can still choose their preferred payment method at checkout.
In Hyper, this setting is named Show dynamic checkout buttons.
Keep them enabled 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.
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.
For more detailed guidance, see the Swatches guide in Hyper.
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
Hyper 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 Hyper 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