Skip to main content

Performance Optimization

Overview​

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 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

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

Use Modern Formats​

  • Upload WebP format images when possible
  • When uploading through the theme editor, Shopify will automatically create WebP versions

Match Image Size to Purpose​

  • Full-width banners: 2000px width maximum
  • Half-width sections: 1200px width maximum
  • Background images: optimize for compression over resolution

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
  • If search is rarely used, consider disabling "Predictive search" in Theme Settings > Search
  • When enabled, limit the content types searched (products, articles, pages, collections)

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

Loading Optimization​

Preloading Critical Resources​

  • The theme preloads CSS files using preload: true attributes
  • Don't remove these preload directives in your custom code

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

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)

Consolidate Functionality​

  • Choose multi-purpose apps over multiple single-purpose apps
  • Example: Use one reviews app instead of separate reviews and UGC apps

App Placement​

  • Place non-critical app widgets below the fold
  • Use "load on click" options for heavy widgets when available

Collection Page Optimization​

Pagination Settings​

Adjust products per page based on complexity:

  • Simple products: 24-36 per page
  • Complex products with many variants/options: 12-24 per page

Filter Optimization​

  • In Theme Settings > Borders, enable "Show filter apply button"
  • This prevents multiple filter refreshes when customers select multiple options

Product Card Content​

  • Limit the information displayed on product cards
  • Disable vendor information if not crucial for purchasing decisions

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)

Floating Search Optimization​

  • In Theme Settings > Search, disable "Show floating search button" if search isn't frequently used

Header Configuration​

  • Consider using the "Inline" header layout for fastest mobile performance
  • Disable "Sticky header" to reduce memory usage on mobile devices

Technical Optimizations​

Use Shopify CDN Effectively​

Always use Liquid's built-in image filters:

  • image_url: width: 400
  • image_tag: loading: 'lazy'
  • Avoid linking directly to assets without these filters
  • Keep recommended products limit low (3-4 maximum)
  • Consider disabling recommendations for mobile users

Custom Code Audit​

  • Regularly review any custom code additions
  • Remove unnecessary jQuery plugins or legacy code

Monitoring Performance​

Regular Testing​

  • Use Google PageSpeed Insights monthly to track performance
  • Test on both mobile and desktop devices

Track Key Metrics​

  • Largest Contentful Paint (LCP): should be under 2.5 seconds
  • First Input Delay (FID): should be under 100ms
  • Cumulative Layout Shift (CLS): should be under 0.1

User Experience Metrics​

  • Monitor bounce rates for landing pages
  • Track time-on-site metrics after performance changes

Seasonal Optimizations​

High-Traffic Periods​

Before major sales events, temporarily:

  • Reduce animation effects
  • Simplify product recommendations
  • Consider enabling Shopify's accelerated checkout

Feature Scheduling​

  • Use more interactive features during lower-traffic periods
  • Simplify the site during peak sales periods

By implementing these optimization strategies, you'll significantly improve your store's performance while maintaining the design integrity and conversion-focused features of the Label One theme.