Poorly optimized AJAX calls
- JavaScript
Problem Summary
Poorly optimized AJAX calls occur when asynchronous requests to the server are made inefficiently—through excessive requests, large payloads, missing caching, or poor request handling.
Performance Impact
- Increased TTFB: Each unoptimized AJAX call adds server processing time
- Waterfall degradation: Multiple sequential AJAX requests extend page load time
- Client-side CPU strain: Frequent polling consumes browser resources
How to Detect
- Browser DevTools Network Tab: Filter by XHR/Fetch
- Query Monitor plugin: Shows AJAX requests and triggers
- PageSpeed Insights: Check for JS execution issues
Solutions
1. Batch Requests
Combine multiple API calls into single requests.
2. Implement Caching
const cache = new Map();async function fetchWithCache(url) { if(cache.has(url)) return cache.get(url); const r = await fetch(url); const d = await r.json(); cache.set(url, d); return d; }3. Add Debouncing
function debounce(fn, w) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), w); }; }