Canva Performance Tuning
Overview
Optimize Canva Connect API performance. The REST API at api.canva.com/rest/v1/* has per-user rate limits and async operations (exports, uploads, autofills) that require polling.
Caching Strategy
Design Metadata Cache
import { LRUCache } from 'lru-cache';
const designCache = new LRUCache<string, any>({
max: 500,
ttl: 5 * 60 * 1000,
});
async function getDesignCached(designId: string, token: string) {
const cached = designCache.get(designId);
if (cached) return cached;
const data = await canvaAPI(`/designs/${designId}`, token);
designCache.set(designId, data);
return data;
}
Redis Cache for Distributed Systems
import Redis from 'ioredis';
const redis = new Redis(process.env.REDIS_URL);
async function cachedCanvaCall<T>(
key: string,
fetcher: () => Promise<T>,
ttlSeconds = 300
): Promise<T> {
const cached = await redis.get(key);
if (cached) return JSON.parse(cached);
const result = await fetcher();
await redis.setex(key, ttlSeconds, JSON.stringify(result));
return result;
}
const templates = await cachedCanvaCall(
'canva:brand-templates:list',
() => canvaAPI('/brand-templates', token),
3600
);
Pagination Optimization
async function* paginateDesigns(
token: string,
opts: { ownership?: string; limit?: number } = {}
): AsyncGenerator<any> {
let continuation: string | undefined;
do {
const params = new URLSearchParams({
limit: String(opts.limit || 100),
...(opts.ownership && { ownership: opts.ownership }),
...(continuation && { continuation }),
});
const data = await canvaAPI(`/designs?${params}`, token);
for (const design of data.items) {
yield design;
}
continuation = data.continuation;
} while (continuation);
}
for await (const design of paginateDesigns(token, { ownership: 'owned' })) {
.();
}
Export Polling Optimization
async function pollExport(exportId: string, token: string): Promise<string[]> {
const delays = [500, 1000, 2000, 3000, 5000, 5000, 10000];
let attempt = 0;
while (attempt < 20) {
const { job } = await canvaAPI(`/exports/${exportId}`, token);
if (job.status === 'success') return job.urls;
if (job.status === 'failed') throw new Error(`Export failed: ${job.error?.message}`);
const delay = delays[Math.min(attempt, delays.length - 1)];
await new Promise(r => setTimeout(r, delay));
attempt++;
}
();
}
;
exportQueue = ({ : });
(): <<, []>> {
results = <, []>();
.(
designIds.(
exportQueue.( () => {
{ job } = (, token, {
: ,
: .({ : id, format }),
});
urls = (job., token);
results.(id, urls);
})
)
);
results;
}
Connection Optimization
import { Agent } from 'https';
const agent = new Agent({
keepAlive: true,
maxSockets: 10,
maxFreeSockets: 5,
timeout: 30000,
});
const res = await fetch('https://api.canva.com/rest/v1/designs', {
headers: { 'Authorization': `Bearer ${token}` },
agent,
});
Performance Monitoring
async function measuredCanvaCall<T>(
operation: string,
fn: () => Promise<T>
): Promise<T> {
const start = performance.now();
try {
const result = await fn();
const ms = (performance.now() - start).toFixed(0);
console.log(`[canva] ${operation}: ${ms}ms OK`);
return result;
} catch (error) {
const ms = (performance.now() - start).toFixed(0);
console.error(`[canva] ${operation}: ${ms}ms FAIL`, error);
throw error;
}
}
Performance Benchmarks
| Operation | Typical Latency | Rate Limit |
|---|
| GET /users/me | 50-150ms | 10/min |
| POST /designs | 200-500ms | 20/min |
| GET /designs (list) | 100-300ms | 100/min |
| POST /exports | 100-300ms (job start) | 75/5min |
| Export completion | 2-15s (depending on size) | N/A |
| POST /asset-uploads | 300-2000ms | 30/min |
| POST /autofills | 500-3000ms (job start) | 60/min |
Error Handling
| Issue | Cause | Solution |
|---|
| Stale cache | Long TTL | Reduce TTL or invalidate on write |
| Export timeout | Large/complex design | Increase poll timeout |
| Memory pressure | Cache too large | Set LRU max entries |
| Connection refused | Pool exhausted | Increase maxSockets |
Resources
Next Steps
For cost optimization, see canva-cost-tuning.
