Performance settings directly impact your store’s loading speed, responsiveness, and overall user experience. Proper configuration balances visual quality with fast load times, ensuring customers don’t abandon your site due to slow performance.
What these settings control
- Image loading strategies
- Animation and motion effects
- Resource loading priorities
- Mobile performance optimization
- Core Web Vitals optimization
How to access
Open the Theme Customizer
From your Shopify admin, go to Online Store → Themes → Customize.
Navigate to performance settings
In the theme editor sidebar, select Theme settings → Performance.
Configure optimization
Adjust image loading and animation settings based on your priorities.
Save and test
Click Save and test performance using PageSpeed Insights or similar tools.
Settings
Image Optimization
Animations
Fine-tuning
Image loading: Controls how and when images load on your pages.
- Eager: All images load immediately. Use for critical above-fold hero images.
- Lazy (recommended): Images load when scrolling into view. Improves initial load speed and Core Web Vitals. Best for pages with many images.
- Auto: Browser decides loading strategy automatically.
Use Lazy for collection pages with 20+ images. Use Eager only for critical hero images.
WebP support is built-in. No action needed on your part.
Enable animations: Controls scroll-triggered animations for sections and elements. When enabled, elements fade in or slide when scrolling into view. Automatically disabled for users with prefers-reduced-motion accessibility setting. Animations use CSS transforms (GPU-accelerated) with minimal performance impact.Animation style (when animations are enabled):
- Subtle: Gentle fades and small movements. Professional and understated.
- Standard: Noticeable but balanced animations (recommended default).
- Bold: Dramatic entrances. Best for creative/fashion brands.
Preload key resources: Tells the browser to load critical resources (fonts, hero images) early in the page load process. Improves First Contentful Paint (FCP) and prevents flash of unstyled text. Keep enabled for better perceived speed.Only the most critical resources are preloaded. Don’t manually add preload tags for every asset.
Best practices
- Prioritize above-fold content: Use Eager loading for hero images, Lazy loading for everything below fold
- Test on real devices: Test on budget Android phones, older iPhones, and tablets with slow 3G connections
- Monitor Core Web Vitals: Track LCP (< 2.5s), FID (< 100ms), and CLS (< 0.1) using Google PageSpeed Insights
- Balance quality and speed: Use high quality + eager loading for hero images, good quality + lazy loading for product images
- Optimize images before upload: Resize to display size, compress to 100-200KB per image using ImageOptim or TinyPNG
- Consider your audience: International customers need aggressive optimization, premium audiences can support more features
- Test after changes: Measure performance impact using PageSpeed Insights, GTmetrix, or WebPageTest
Aggressive performance optimization can harm user experience. Don’t sacrifice essential animations or image quality just to hit perfect scores.
Start with recommended defaults (lazy loading, animations enabled, defer JavaScript). Only adjust if you have specific performance issues.
- Images - Best practices for preparing and uploading images
- Features - Disable unused features to improve performance
- Layout - Page width affects image loading requirements
