Skip to main content

Performance Optimization Guide

This guide provides technical recommendations for optimizing the performance of Mimeeq configurators. Whether you're developing a simple product page or a complex configuration experience, these techniques will help ensure your implementation delivers the best possible user experience.

Infrastructure Considerations​

Understanding Mimeeq's infrastructure can help you optimize your implementation for the best performance.

CDN and Geographic Distribution​

Mimeeq uses Fastly as its Content Delivery Network (CDN), providing efficient global distribution of static assets:

  • Static assets (JavaScript, CSS, 3D models, textures) are delivered through the CDN
  • Assets are cached at edge locations worldwide for faster delivery
  • Initial HTML/JavaScript loading is typically very fast regardless of user location

However, dynamic data requires communication with our backend:

  • The primary backend is located in Frankfurt, Germany (AWS eu-central-1)
  • API requests (pricing, configuration validation, etc.) must travel to/from this location
  • Users geographically distant from Frankfurt may experience slightly higher latency for dynamic operations

Performance Tip: For applications with a global audience, consider leveraging browser caching and local storage strategies to minimize repeated API calls.

Initial Load vs. Dynamic Data​

Understanding what happens during initial load versus dynamic operations helps optimize the user experience:

  • Initial Load: Primarily JSON configuration data and static assets (fast via CDN)
  • Configuration Changes: Usually handled client-side with minimal server communication
  • Pricing Requests: Require backend communication (potential latency)
  • Add to Cart: Requires backend validation and processing

Performance Tip: Use loading indicators for operations requiring backend communication, especially for users in regions far from Frankfurt.

Optimizing 3D Asset Performance​

3D models and textures typically represent the largest portion of a configurator's download size. Optimizing these assets can significantly improve load times and runtime performance.

Model Loading Strategies​

Mimeeq offers configurable model loading strategies that can be selected in the admin panel:

  1. All - Loads all model assets immediately

    • Benefits: No loading delays when changing configurations; smooth transitions
    • Drawbacks: Longer initial loading time; higher memory consumption
    • Best for: Simple products with few model variations

  2. Lazy - Loads only currently needed model assets

    • Benefits: Faster initial loading; reduced memory consumption
    • Drawbacks: Potential delays when switching configurations
    • Best for: Complex products with many configurations

  3. Lazy with animations (Default) - Loads visible models plus all models with animations

    • Benefits: Balance between performance and animation readiness
    • Drawbacks: Higher memory usage than pure lazy strategy
    • Best for: Products with important animations

Performance Tip: For products with many model variations (some Mimeeq products have thousands of models), use lazy or lazy with animations to optimize loading. For simpler products with few variations, all strategy provides the smoothest experience.

Texture Optimization​

Textures often account for the majority of a configurator's download size:

  • Resolution: Use appropriate texture resolutions
    • Mimeeq allows specifying different texture sizes for mobile and desktop
    • Mobile recommendation: 512px textures for optimal performance
    • Desktop recommendation: 1024px or 2048px depending on detail requirements
  • Compression: Use efficient image formats
    • JPEG for photographic textures (quality 80-90%)
    • PNG for textures requiring transparency
  • Admin Configuration: Set texture sizes in the Mimeeq admin panel
    • Lower resolution textures dramatically reduce download size and memory usage
    • The visual difference is often negligible, especially on smaller screens

Performance Tip: When using the Mimeeq admin panel to configure texture sizes, set mobile textures to 512px for the best balance of quality and performance.

Material and Shader Complexity​

Complex materials and shaders can significantly impact runtime performance:

  • Material Count: Minimize the number of unique materials
    • Combine similar materials where possible
    • Each material switch causes a draw call, which impacts performance
  • Shader Complexity: Simpler shaders perform better
    • Avoid complex procedural textures when pre-baked textures would work
    • Consider performance implications of reflections, refractions, and other expensive effects

Performance Tip: For products with many material options, consider using material variants rather than dynamically computing complex material effects.

Web Integration Optimization​

How you integrate the configurator into your web application can significantly impact the performance users experience.

Loading Strategies​

Strategic loading of the configurator improves perceived performance:

  • Don't Render Immediately: For optimal initial page load speed, avoid rendering the configurator immediately

    • The initial JS bundle is relatively small (100-400KB gzipped from CDN)
    • The full 3D content can be several megabytes depending on models and textures
    • Configure "Render at Mount" setting to "Off" in your embed template
    • Show the configurator only when needed via JavaScript

  • 2D to 3D Progression: Start with a static image and upgrade to 3D

    • Show a high-quality product image immediately
    • Offer a "View in 3D" or "Configure" button to load the 3D experience
    • This gives users immediate visual feedback while the full experience loads

  • Minimal Backend Communication: If not using pricing or basket functionality, the configurator requires minimal backend communication

    • Most operations happen client-side after initial load
    • Only specific actions like shortcode generation require backend calls

Example: Button-Triggered Loading

<div class="product-visualization">
  <!-- Show immediately -->
  <img src="product-image.jpg" class="product-image" id="productImage">
  
  <!-- Add button to load configurator -->
  <button id="configureButton" class="configure-btn">Configure Product</button>
  
  <!-- Pre-load but don't render (using a template with "Render at Mount" disabled) -->
  <mmq-embed 
    id="configurator"
    short-code="YOUR_CODE" 
    template="non_auto_render_template"
    style="display: none;"></mmq-embed>
</div>

<script>
  // When Configure button is clicked
  document.getElementById('configureButton').addEventListener('click', () => {
    // Hide image and button
    document.getElementById('productImage').style.display = 'none';
    document.getElementById('configureButton').style.display = 'none';
    
    // Show and render configurator
    const configurator = document.getElementById('configurator');
    configurator.style.display = 'block';
    configurator.show();
  });
</script>

This approach is the standard pattern used in many Mimeeq integrations, including the Shopify app.

Caching Strategies​

Effective caching improves repeat visits and navigation:

  • Browser Cache: Mimeeq assets have appropriate cache headers
    • Static assets (JS, CSS, 3D models) are cached by the browser
    • Dynamic data is not cached by default
  • Application Cache: Consider implementing application-level caching
    • Cache configuration codes, prices, and other frequently accessed data
    • Use localStorage or IndexedDB for client-side persistence
    • Implement cache invalidation strategies for price or configuration updates

Example: Caching Recent Configurations

// Save configuration when user submits or saves
document.addEventListener('mimeeq-add-to-cart', (event) => {
  const configData = {
    productId: event.detail.productId,
    code: event.detail.configurationCode,
    timestamp: Date.now()
  };
  
  // Get existing configurations
  let recentConfigs = JSON.parse(localStorage.getItem('recentConfigurations') || '[]');
  
  // Add new configuration
  recentConfigs.unshift(configData);
  
  // Keep only the 10 most recent
  recentConfigs = recentConfigs.slice(0, 10);
  
  // Save back to storage
  localStorage.setItem('recentConfigurations', JSON.stringify(recentConfigs));
});

// Load recent configuration when returning to the site
document.addEventListener('mimeeq-app-loaded', () => {
  const productId = getCurrentProductId(); // Your function to get current product
  const recentConfigs = JSON.parse(localStorage.getItem('recentConfigurations') || '[]');
  
  // Find most recent configuration for this product
  const recentConfig = recentConfigs.find(config => config.productId === productId);
  
  if (recentConfig && recentConfig.code) {
    // Apply the saved configuration
    window.mimeeqApp.actions.setConfigurationCode(recentConfig.code);
  }
});

Content Preloading​

Strategic preloading can improve perceived performance:

  • DNS Prefetching: Add DNS prefetching hints for Mimeeq domains

    <link rel="dns-prefetch" href="https://cdn.mimeeq.com">

  • Resource Preloading: Consider preloading critical resources

    <link rel="preload" href="https://cdn.mimeeq.com/read_models/embed/app-embed.js" as="script">

  • Preconnect: Establish early connections to required origins

    <link rel="preconnect" href="https://cdn.mimeeq.com">
    <link rel="preconnect" href="https://jrdgrq09nk.execute-api.eu-central-1.amazonaws.com">

Performance Tip: Be selective with preloading to avoid competing for bandwidth with more immediately needed resources.

Mobile-Specific Optimizations​

Mobile devices present unique performance challenges that require specific optimizations.

Built-in Responsive Design​

Mimeeq's interface is already fully responsive and optimized for mobile:

  • Automatic UI Adaptation: The UI automatically simplifies on mobile devices

    • Panels and controls rearrange for touch interaction
    • Text and controls resize for better visibility
    • Option presentation adapts to screen size

  • Mobile-Optimized Controls: Touch-friendly controls are available by default

    • No need to create separate mobile templates in most cases
    • The interface is designed for both mouse and touch input

Performance Tip: In most cases, creating separate templates for mobile and desktop is unnecessary as Mimeeq's UI automatically adapts. Focus on optimizing texture and model settings instead.

Mobile-Specific Asset Optimization​

Optimize assets specifically for mobile performance:

  • Texture Sizes: Configure mobile-specific texture sizes in the admin panel

    • 512px textures are recommended for mobile
    • This setting can be configured separately from desktop texture sizes
    • Significantly reduces download size and memory usage

  • Canvas Size: Consider limiting canvas size on mobile

    • Smaller render targets use less GPU memory
    • Better performance on lower-end devices
    • Can be controlled through CSS or in the embed template

Performance Tip: Even a minor reduction in texture resolution (e.g., from 1024px to 512px) can have a major impact on mobile performance while being visually imperceptible on small screens.

Resource Limitations​

Mobile devices have more constrained resources:

  • Memory Management: Be mindful of memory limitations
    • Hide the configurator when not in active view
    • Use mmq-embed.hide() to properly release resources
  • Low-Power Mode: Some devices throttle performance in low-power mode
    • Consider simplifying the experience when battery is low
    • Disable animations or other resource-intensive features

Performance Tip: For multi-page applications, hide the configurator when navigating away from the product page and re-initialize it when returning, rather than keeping it in memory.

Network Conditions​

Mobile users often have variable network conditions:

  • Initial Load Size: Be aware of the initial download size
    • The full configurator with 3D assets may be several megabytes
    • Users on limited data plans or slow connections may have issues
    • Consider offering a lightweight 2D alternative for these situations
  • Connection Detection: Consider implementing connection quality detection
    • The navigator.connection API can provide information about network conditions
    • Adjust quality settings based on connection type and speed
    • Example: Load lower resolution textures on slow connections

Performance Tip: Test your implementation under throttled network conditions (using browser developer tools) to ensure acceptable performance for users on slower connections.

Monitoring and Optimizing Performance​

Continuous monitoring and optimization are essential for maintaining optimal performance:

Performance Metrics​

Key metrics to monitor include:

  • Initial Load Time: Time to first meaningful display
  • Time to Interactive: When users can begin configuring
  • Response Time: How quickly the UI responds to user input
  • Memory Usage: Browser memory consumption over time
  • Frame Rate: Smoothness of 3D rendering (aim for 60fps)

Performance Tip: Use browser developer tools (Performance and Memory tabs) to monitor these metrics during development and testing.

Common Performance Bottlenecks​

Watch for these common issues:

  • Multiple Instances: Running multiple configurator instances simultaneously
  • Memory Leaks: Not properly disposing of configurators when no longer needed
  • Excessive Observers: Creating too many observers without cleanup
  • Large Textures: Using unnecessarily high-resolution textures
  • Complex Materials: Implementing overly complex material effects

Performance Tip: Regularly profile your application to identify potential performance issues before they impact users.

Advanced Optimization Techniques​

For applications requiring maximum performance:

Custom UI Integration​

  • Canvas-Only Mode: Use a template configured for canvas-only mode
    • Create a template with Custom UI enabled in the admin panel
    • Create custom, lightweight UI controls in your application
    • Connect directly to Mimeeq observers and actions
  • Progressive Feature Loading: Configure templates for different feature sets
    • Create a basic template for initial experience
    • Create an advanced template with additional features for upgrade on demand

Example: Canvas-Only Implementation

<!-- Using a template configured with Custom UI mode enabled and controls hidden -->
<mmq-embed 
  id="canvas-only" 
  short-code="YOUR_CODE" 
  template="custom_ui_template"></mmq-embed>

<div class="custom-controls">
  <!-- Your lightweight custom UI -->
</div>

<script>
  document.addEventListener('mimeeq-app-loaded', () => {
    // Connect custom UI to Mimeeq actions and observers
    
    // Example: Connect a color selector
    document.querySelectorAll('.color-option').forEach(option => {
      option.addEventListener('click', () => {
        const blockName = option.dataset.block;
        const optionCode = option.dataset.option;
        
        // Apply the selection to the configurator
        window.mimeeqApp.actions.markOptionByBlockNameAndOptionCode(
          blockName, 
          optionCode
        );
      });
    });
  });
</script>

2D Fallback Strategy​

For situations where 3D visualization isn't critical or network conditions are poor:

  • Configurator with 2D Images: Use pre-rendered product images
    • Swap images based on configuration selections
    • Provide the core configuration experience without 3D overhead
  • Hybrid Approach: Offer both 2D and 3D experiences
    • Start with 2D by default
    • Provide an option to "View in 3D" for users who want the full experience

Performance Tip: Despite the visual appeal of 3D, many configuration tasks can be accomplished with 2D images while using significantly less bandwidth and processing power.

Conclusion​

Optimizing Mimeeq configurator performance requires attention to multiple factors including asset preparation, integration approach, and runtime management. By applying the techniques in this guide, you can deliver a fast, responsive product configuration experience that delights users and drives business results.

Key takeaways:

  • Choose appropriate model loading strategies (ALL, LAZY, or LAZY_WITH_ALL_ANIMATIONS)
  • Configure texture sizes appropriately (512px for mobile, 1024px-2048px for desktop)
  • Consider delaying configurator rendering until needed
  • Leverage 2D to 3D progression for better perceived performance
  • Utilize Mimeeq's built-in responsive design rather than creating separate templates
  • Test thoroughly on actual mobile devices and varied network conditions

Remember that performance optimization is an ongoing process. Regularly test your implementation across different devices and network conditions, and continue refining your approach based on real-world usage data.