# Performance Guide

The SDK is optimized out of the box. These tweaks help reduce load time and layout shift.

## 1) Load Non-Blocking

```html
<script defer data-liquid-commerce-elements ...></script>
```

## 2) Use the Checkout-Only Build When Appropriate

If you only need checkout, use the tree-shaken build:

```javascript
import { ElementsCheckout } from '@liquidcommerce/elements-sdk/checkout';
```

## 3) Inject Components When Needed

Inject above-the-fold products first, then load the rest:

```javascript
await client.injectProductElement([
  { containerId: 'hero-product', identifier: '001' }
]);

setTimeout(async () => {
  await client.injectProductElement([
    { containerId: 'related-1', identifier: '002' },
    { containerId: 'related-2', identifier: '003' }
  ]);
}, 1000);
```

## 4) Reserve Space to Prevent Layout Shift

```css
#product {
  min-height: 600px;
}
```

## 5) Let the SDK Handle Media Optimization

The SDK automatically:
- Lazy loads carousel/thumbnail images (native `loading="lazy"`)

## Related Docs

- [Best Practices](../guides/best-practices.md)
- [Product Component](../guides/product-component.md)