# Performance Optimization Guide

## <mark style="color:purple;">Performance Optimization Guide</mark>

Optimize your dApp for Macro's privacy features.

### Understanding Macro's Performance

Macro adds minimal overhead:

* Signing Sandbox: \~50-100ms analysis time per transaction
* VPN: \~15-25ms added latency on average
* Fingerprint randomization: Negligible
* Privacy Profiles: No performance impact

### <mark style="color:purple;">Optimize for Signing Sandbox</mark>

**Reduce transaction approval time:**

#### Use EIP-712 Typed Data

Faster parsing than raw hex:

```javascript
// Slower: personal_sign with encoded data
await ethereum.request({
  method: 'personal_sign',
  params: [encodedData, address]
});

// Faster: eth_signTypedData_v4
await ethereum.request({
  method: 'eth_signTypedData_v4',
  params: [address, typedDataObject]
});
```

Benefit: Macro can parse structured data faster plus better UX.

#### Verify Contracts on Etherscan

* Verified contracts get faster ABI decoding
* Signing Sandbox can show function names
* Improves user trust and approval speed

#### Minimize Contract Interactions

* Batch operations when possible
* Use multicall patterns
* Reduce number of approvals required

### <mark style="color:purple;">Optimize Network Requests</mark>

**Work with VPN routing:**

#### Use CDNs

* CDN edge nodes reduce latency impact of VPN
* Choose CDNs with global distribution

#### Minimize API Calls

* Batch RPC requests
* Cache blockchain data client-side
* Use WebSocket for real-time data (lower overhead)

#### Optimize RPC Usage

```javascript
// Inefficient: Multiple separate calls
const block = await provider.getBlock('latest');
const balance = await provider.getBalance(address);
const nonce = await provider.getTransactionCount(address);

// Efficient: Batch request
const [block, balance, nonce] = await Promise.all([
  provider.getBlock('latest'),
  provider.getBalance(address),
  provider.getTransactionCount(address)
]);
```

### <mark style="color:purple;">Respect Privacy Profiles</mark>

**Optimize for profile isolation:**

#### Use localStorage Wisely

* Data is scoped per profile
* Don't assume persistence across profiles
* Check `macro_getCurrentProfile` on load

#### Handle Profile Switches

```javascript
ethereum.on('profileChanged', () => {
  // User switched profiles
  // Disconnect wallet and reset state
  window.location.reload();
});
```

### <mark style="color:purple;">Optimize Asset Loading</mark>

**Faster page loads:**

#### Lazy Load Images

```javascript
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy">
```

#### Minimize Bundle Size

* Code-split your application
* Tree-shake unused dependencies
* Use dynamic imports

#### Serve Compressed Assets

* Enable gzip/brotli compression
* Optimize images (WebP format)
* Minify JavaScript and CSS

### <mark style="color:purple;">Optimize for Fingerprint Randomization</mark>

**Work with randomized fingerprints:**

#### Don't Rely on Fingerprinting

* Never use fingerprinting for authentication
* Use wallet signatures for identity
* Don't track users via canvas/WebGL fingerprints

#### Test with Randomization

* Test your dApp with canvas randomization enabled
* Ensure captchas still work
* Verify charts/visualizations render correctly

### <mark style="color:purple;">Caching Strategies</mark>

**Reduce repeated lookups:**

#### Cache Token Metadata

```javascript
const tokenCache = new Map();

async function getTokenInfo(address) {
  if (tokenCache.has(address)) {
    return tokenCache.get(address);
  }
  
  const info = await fetchTokenInfo(address);
  tokenCache.set(address, info);
  return info;
}
```

#### Cache User Preferences

```javascript
// Store in localStorage (profile-scoped)
localStorage.setItem('slippageTolerance', '0.5');
```

### <mark style="color:purple;">Performance Monitoring</mark>

**Measure your dApp's performance:**

#### Web Vitals

```javascript
import {getLCP, getFID, getCLS} from 'web-vitals';

getLCP(console.log); // Largest Contentful Paint
getFID(console.log); // First Input Delay
getCLS(console.log); // Cumulative Layout Shift
```

#### Transaction Timing

```javascript
const start = performance.now();
const tx = await ethereum.request({
  method: 'eth_sendTransaction',
  params: [txParams]
});
const end = performance.now();
console.log(`Approval time: ${end - start}ms`);
```

### Testing on Macro

**Performance testing checklist:**

* Test with VPN enabled (adds latency)
* Test with strict signing policies
* Test profile switches
* Test on different networks (mainnet/testnets)
* Measure signing approval times
* Check for layout shifts with fingerprint randomization

***

Fast privacy. Optimize for both.