Skip to main content

Performance Optimization

Faster checkout = better conversion. This guide covers the essential optimizations that will have the most impact on your checkout performance.

1. Preconnect to Purse CDN​

Add these two lines in your <head> to establish early connections:

<link rel="preconnect" href="https://cdn.purse-sandbox.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.purse-sandbox.com">
Expected Impact

Saves 100-300ms by completing DNS lookup and TLS negotiation early.

2. Load SDK Efficiently​

For most checkouts, use defer to load the SDK without blocking page render:

<script src="https://cdn.purse-sandbox.com/headless-checkout/latest/purse.umd.js" defer></script>
Multi-Step Checkout?

If users go through cart → shipping → payment, add this on the cart page to prefetch the SDK:

<link rel="prefetch" href="https://cdn.purse-sandbox.com/headless-checkout/latest/purse.umd.js" as="script">

The SDK will be cached and ready when users reach checkout.

Performance Checklist​

Use this checklist to verify your integration is optimized:

  • Added preconnect for Purse CDN domain
  • Added dns-prefetch as fallback
  • Used defer for SDK loading (or prefetch for multi-step flows)
  • Created sessions ahead of time server-side

Expected Performance Gains​

Typical improvements from these optimizations:

OptimizationExpected GainDifficulty
Preconnect100-300msEasy
Defer/Prefetch SDK100-200msEasy
Create sessions ahead200-500msMedium
Real-World Impact

Implementing these optimizations can reduce time-to-interactive by 400-1000ms, potentially improving conversion rates by 1-2%.