Performance Optimization

Learn how to make your API integrations as fast as possible.

Performance Checklist

Quick wins for better performance:

• Enable caching for all connections
• Set appropriate cache durations
• Limit data with query parameters
• Map only needed fields
• Use pagination for large datasets
• Compress images at source

Optimize API Requests

Fetch Only What You Need

Instead of:

/products
(returns 1000 products with all fields)

Use:

/products?per_page=6&fields=id,name,price,image
(returns 6 products with only needed fields)

Use Efficient Endpoints

Some APIs have optimized endpoints:

Minimize Requests Per Page

Each API call adds latency. Reduce calls by:

• Combining data in one request (use _embed, include, etc.)
• Caching aggressively
• Using efficient endpoints

Caching Strategy

Set Appropriate Durations

Multi-Layer Caching

Optimize all cache layers:

1. API Mapper → Caches raw API response
2. YOOtheme → Caches rendered elements
3. Page Cache → Caches full HTML
4. CDN → Caches at edge locations

Optimize Field Mappings

Map Only Needed Fields

Don't map the entire API response. Choose only fields you'll use:

✓ Good: 5-10 mapped fields
✗ Bad: 50+ mapped fields

Avoid Deep Nesting

Deeply nested paths are slower to parse:

✓ Efficient: product.name
✓ Efficient: images[0].url

✗ Less efficient: data.response.items[0].attributes.images.primary.sizes.large.url

If the API returns deeply nested data, consider:

• Using JMESPath to flatten the structure
• Contacting the API provider about simpler endpoints

Optimize for YOOtheme

Use Grid Instead of Multiple Elements

Instead of:

Element 1 → API Mapper (fetches data)
Element 2 → API Mapper (fetches data again!)
Element 3 → API Mapper (fetches data again!)

Use:

Grid Element → API Mapper (fetches once)
├── Item 1
├── Item 2
└── Item 3

Lazy Load Below-the-Fold Content

For API content below the initial viewport:

• Use YOOtheme's lazy load options
• Consider separate sections with independent caching

Monitor Performance

Measure API Response Times

Test your connections and note response times:

• Under 200ms = Excellent
• 200-500ms = Good
• 500-1000ms = Acceptable
• Over 1000ms = Needs optimization

Check Page Load Impact

Use tools to measure overall impact:

• Browser DevTools → Network tab
• Google PageSpeed Insights
• GTmetrix
• WebPageTest

Track API Usage

Monitor your API calls:

• Many API providers have usage dashboards
• Watch for unexpected spikes
• Ensure you're within rate limits

Troubleshooting Slow Performance

Connection is Slow

1. Test the API directly - Is the source slow?
2. Check your server - Is outgoing request slow?
3. Enable caching - Serve from cache instead
4. Reduce data - Fetch less per request

Page Loads Slowly

1. Check cache status - Is cache working?
2. Count API calls - Too many per page?
3. Check other factors - Images? JavaScript? Database?

Cache Not Working

Advanced Optimization

Preload Critical Data

For above-the-fold content:

• Ensure cache is warm before traffic
• Consider lower cache duration for critical content
• Use CDN for static content

Optimize Images

If API returns images:

• Use CDN for image delivery
• Implement lazy loading
• Consider responsive images
• Compress images at source if possible

Consider API Alternatives

If performance is critical:

• Look for faster API providers
• Consider self-hosting critical data
• Use database caching for frequently accessed data