Performance Optimization
Website performance is critical for conversion rates, customer satisfaction, and SEO.
This guide provides practical steps to optimize your Label One theme for maximum performance without sacrificing functionality or aesthetics.
Image Optimization
Product Images
Optimize Before Upload:
- Resize images to the maximum dimensions needed (Label One's product cards use specific aspect ratios)
- Use image compression tools like TinyPNG or Squoosh before uploading
- Aim for file sizes under 200KB for product images
- Use WebP format when possible for better compression
Use Appropriate Aspect Ratios:
- In Theme Settings → Product Cards, select an appropriate aspect ratio (9/13 is default)
- Consistent aspect ratios prevent layout shifts during page load
- Match aspect ratio to your product photography style
Limit Secondary Images:
- While "Show second image on hover" enhances UX, too many secondary images can slow down collection pages
- For large collections, consider disabling this feature
- Test with and without to measure impact
Product images over 500KB will significantly slow down your collection pages. Always compress images before uploading to Shopify.
Banner and Section Images
Use Modern Formats
- Upload WebP format images when possible
- When uploading through the theme editor, Shopify will automatically create WebP versions
- Use progressive JPEGs for photos
- Use SVG for logos and icons
Match Image Size to Purpose
| Image Type | Maximum Width | Recommended |
|---|---|---|
| Full-width banners | 2000px | 1920px |
| Half-width sections | 1200px | 1000px |
| Background images | 2000px | Optimize for compression |
| Product images | 1200px | 800-1000px |
Use Shopify's mobile image feature in sections to serve smaller images to mobile devices. This can cut mobile page weight by 50% or more.
JavaScript Optimization
Animation Settings
In Theme Settings → Animations:
- For fastest performance, set "Page animation" to "None"
- Disable "Animate dropdowns" if not essential
- Turn off non-critical animations
- Keep only animations that add value to UX
Predictive Search
- If search is rarely used, consider disabling "Predictive search" in Theme Settings → Search
- When enabled, limit the content types searched (products, articles, pages, collections)
- Test the impact on page load time
Product Quick Add
- For large collections, consider disabling "Enable quick add to cart" in Theme Settings → Product Cards
- This reduces JavaScript execution on collection pages
- Test conversion impact before permanently disabling
Animations improve user experience but come with a performance cost. Enable only the animations that significantly enhance your store's feel and brand identity.
Loading Optimization
Preloading Critical Resources
- The theme preloads CSS files using
preload: trueattributes - Don't remove these preload directives in your custom code
- Ensure critical fonts are preloaded
Lazy Loading Configuration
- The theme uses native lazy loading for images
- Images above the fold should not be lazy-loaded
- In large sections, consider setting the first few images to eager loading
Deferred Loading
- Third-party scripts should use the "defer" attribute
- Add this in Theme → Actions → Edit code → layout/theme.liquid
- Defer non-critical JavaScript to improve initial page load
Third-Party Apps
Audit App Impact
- Use Chrome DevTools Performance tab to identify slow-loading apps
- Remove unused apps completely (uninstalling isn't enough; remove code snippets)
- Check for apps that load on every page vs. specific pages
Consolidate Functionality
- Choose multi-purpose apps over multiple single-purpose apps
- Example: Use one reviews app instead of separate reviews and UGC apps
- Limit total number of apps to 10-15 maximum
App Placement
- Place non-critical app widgets below the fold
- Use "load on click" options for heavy widgets when available
- Disable apps on pages where they're not needed
When you uninstall an app, manually check your theme code for leftover snippets. Orphaned app code can significantly slow down your store.
Collection Page Optimization
Pagination Settings
Adjust products per page based on complexity:
| Product Type | Recommended Count |
|---|---|
| Simple products | 24-36 per page |
| Complex products with many variants | 12-24 per page |
| Image-heavy products | 16-20 per page |
Filter Optimization
- In Theme Settings → Borders, enable "Show filter apply button"
- This prevents multiple filter refreshes when customers select multiple options
- Reduces server requests and improves perceived performance
Product Card Content
- Limit the information displayed on product cards
- Disable vendor information if not crucial for purchasing decisions
- Consider disabling quick add for collections with many products
Mobile Optimization
Mobile-Specific Settings
- Test your site on actual mobile devices, not just device emulators
- Pay attention to tap target sizes (buttons should be at least 44×44px)
- Verify touch interactions work smoothly
- Check that text is readable without zooming
Floating Search Optimization
- In Theme Settings → Search, disable "Show floating search button" if search isn't frequently used
- This removes one JavaScript component from mobile pages
Header Configuration
- Consider using the "Inline" header layout for fastest mobile performance
- Disable "Sticky header" to reduce memory usage on mobile devices
- Simplify mobile menu for better performance
Mobile users typically have slower connections than desktop users. Prioritize mobile optimization by reducing image sizes and limiting JavaScript on mobile views.
Technical Optimizations
Use Shopify CDN Effectively
Always use Liquid's built-in image filters like image_url, image_tag, and the loading: 'lazy' parameter.
Avoid linking directly to assets without these filters.
Recommended Resource Loading
- Keep recommended products limit low (3-4 maximum)
- Consider disabling recommendations for mobile users
- Load recommendations after main content
Custom Code Audit
- Regularly review any custom code additions
- Remove unnecessary jQuery plugins or legacy code
- Minimize and concatenate custom CSS/JS
Monitoring Performance
Regular Testing
- Use Google PageSpeed Insights monthly to track performance
- Test on both mobile and desktop devices
- Monitor Core Web Vitals trends
- Compare before/after when making changes
Track Key Metrics
| Metric | Target | Impact |
|---|---|---|
| Largest Contentful Paint (LCP) | Under 2.5 seconds | Page load speed |
| First Input Delay (FID) | Under 100ms | Interactivity |
| Cumulative Layout Shift (CLS) | Under 0.1 | Visual stability |
User Experience Metrics
- Monitor bounce rates for landing pages
- Track time-on-site metrics after performance changes
- Review conversion rates to ensure optimizations don't hurt sales
- Monitor cart abandonment rates
Studies show that a 1-second delay in page load time can reduce conversions by 7%. Performance optimization directly impacts your bottom line.
Seasonal Optimizations
High-Traffic Periods
Before major sales events, temporarily:
- Reduce animation effects
- Simplify product recommendations
- Consider enabling Shopify's accelerated checkout
- Increase CDN caching where possible
- Test under load to identify bottlenecks
Feature Scheduling
- Use more interactive features during lower-traffic periods
- Simplify the site during peak sales periods
- Schedule theme updates during off-peak hours
- Test changes on staging before deploying during busy seasons
Performance Checklist
Quick wins:
- ✓ Compress all images before upload
- ✓ Disable unnecessary animations
- ✓ Limit products per page to 24 or less
- ✓ Remove unused third-party apps
- ✓ Enable "Show filter apply button"
Advanced optimizations:
- ✓ Use WebP images throughout
- ✓ Add mobile-specific images to sections
- ✓ Defer non-critical JavaScript
- ✓ Audit and clean up app code
- ✓ Monitor Core Web Vitals monthly
Performance optimization is ongoing. Schedule monthly reviews to identify new opportunities and track the impact of your changes.