Theme speed
Ignite is built to be fast, but what you add to it matters more than anything else. These are the changes that make the biggest difference, roughly in order.
Measure first
Test a few key pages, such as your home page, a collection and a product, with Google PageSpeed Insights. Focus on the mobile results, since most visitors are on a phone.
Shopify’s own speed report, in Online Store > Themes, uses real visits over time, so it’s a better long-term guide than a single test.
1. Review your apps
Apps are the most common cause of a slow store. Many add their own code to every page, even pages where they do nothing.
- Remove apps you no longer use.
- Check whether Ignite already does the job. Product compare, countdown timers, flash sales, free shipping bars, popups and back-in-stock alerts are all built in.
- After uninstalling an app, check it hasn’t left code behind. Look in Edit code for files or snippets with the app’s name, or ask the app developer.
2. Keep the top of the page light
What appears first on a page has the biggest effect on how fast it feels. Google measures this as Largest Contentful Paint, or LCP.
- Start with a single image, rather than a video or a slideshow with many slides.
- Upload images in a shape that suits the section, so less gets cropped away. See Image sizing.
- Keep the home page focused. Fewer, stronger sections load faster and often sell better too.
3. Use video carefully
Videos are large files. Place them lower on the page, use Ignite’s video sections rather than embedding videos in rich text, and keep background videos short. In Video banner, leave Lazy load video on unless the video is at the very top of the page. See Video FAQ.
4. Use fewer fonts
Each font and weight is another file to download. Use one or two fonts, and consider a system font for body text. System fonts are already on the customer’s device, so they load instantly. You can set fonts in Typography.
5. Check these theme settings
| Setting | Where | Advice |
|---|---|---|
| Lazy load JavaScript | Theme settings > Extras | Keep it on. Scripts for features further down the page load only when needed. |
| Preload links on hover | Theme settings > Extras | Keep it on. The next page starts loading when a customer hovers over a link. |
| Optimize font loading for | Theme settings > Typography | Speed shows text straight away in a fallback font. Visual stability waits briefly for your font. |
| Products per page | Collection page | Fewer products load faster. 16 to 24 is a good balance. |
| Show second image on hover | Theme settings > Product cards | Turn off if your product images are very large. |
| Show dynamic checkout buttons | Buy buttons block on the product page | These load extra code from payment providers. Turn them off if they don’t help your sales. |
| Animate on scroll | Theme settings > Appearance | A small cost. Turn off if you want the leanest possible store. |
6. Stay up to date
Theme updates often include speed improvements. See Updating your theme.