Performance Issues

Bundle Widget Performance Optimization Summary

Use this checklist to diagnose and improve bundle widget performance:

1. Enable Metafield Sync (Highest Impact)

• Go to Settings → Metafield Defaults
• Turn on:
• Sync Collection Metafields (critical for optimized loading path)
• Optionally Sync Product Metafields and Sync Variant Metafields for faster product data

Benefit:

• Reads bundle config directly from Liquid (no app proxy API call)
• Skeleton renders immediately
• Product data loads in parallel with JS initialization

2. Verify Skeleton Loading

• Skeleton UI should appear instantly and is rendered server-side.
• If it doesn’t show:
• Confirm rlb-bundle.css loads (no 404s in Network tab)
• Ensure skeleton HTML is present if using a custom theme integration

3. Confirm Data Prefetch

• Optimized path uses a prefetch script:

```javascript

window.__bundlePrefetch[bundleId] = fetch(configUrl).then(r => r.json());

```

• In DevTools Network tab, verify:
• Prefetch request exists
• URL format: {appProxyPath}/config/{bundleId}?country=XX&locale=XX
• No app proxy errors

4. Enable App-Level Cache

• Go to Settings → Advanced → Enable Cache
• Caches for ~5 minutes:
• Bundle configuration
• Settings
• Other frequently accessed, mostly static data
• Cache is auto-cleared on save to avoid stale content.

5. Check CDN Asset Loading

• Assets (rlb-bundle.css, JS files) are served via Shopify CDN and should be:
• Cached at edge
• Gzip/Brotli compressed
• Versioned with content hashes
• App embed deduplicates asset loading:

```javascript

if (window.__bundleEmbedLoaded) return;

window.__bundleEmbedLoaded = true;

```

• If slow:
• Inspect Network timings
• Confirm cache-control: public headers
• Confirm crossorigin="anonymous" on assets

6. Extended Product Data Toggle

• sendExtendedProductData increases payload size (descriptions, tags, extra images).
• For large bundles (20+ products), this can noticeably slow loading.
• Recommendation: Disable unless your template actually uses this extra data.

7. Reduce Bundle Complexity

• Aim for 4–12 products per step.
• Prefer collection-based selection over manually listing many products.
• Keep steps to the minimum necessary.
• For bundles with 50+ products, split into multiple bundles.

8. Script Loading Order

The widget loads three JS files in order:

1. bundle-globals.js
2. rlb-bundle-style.js
3. rlb-bundle.js

• On storefront: loaded via app embed block.
• In theme editor: loaded via <script defer>.
• Check:
• All three load (no 404s)
• They load in the correct order
• defer is present so they don’t block rendering

Quick Performance Checklist

| Optimization | Where to Enable | Impact |

|---------------------------|------------------------------|--------------------------------|

| Collection metafield sync | Settings → Metafield Defaults| High — removes config API call |

| Data prefetch | Automatic with metafield sync| High — parallel data loading |

| App-level cache | Settings → Advanced | Medium — less server load |

| Disable extended data | Per-bundle / Settings | Medium — smaller responses |

| Fewer products per step | Bundle editor | Low–Medium — faster rendering |

1if (window.__bundleEmbedLoaded) return;2window.__bundleEmbedLoaded = true;3 4// Fires before the main JS loads5window.__bundlePrefetch = window.__bundlePrefetch || {};6window.__bundlePrefetch[bundleId] = fetch(configUrl).then(r => r.json());