Network Issues
Network issues impact user experience, especially for users on slow or unreliable connections. These issues can cause slow page loads, failed requests, and degraded performance.
Why Network Issues Matter
- Mobile users often have variable connectivity
- Global users experience different latency levels
- Slow requests directly impact Core Web Vitals
- Failed requests cause broken functionality
Issues in This Category
- Connection Quality Detection - Adapting to network conditions
- Request Waterfall Issues - Optimizing request chains
- API Timeout Handling - Graceful timeout management
- Retry Strategies - Handling failed requests
Common Network Symptoms
| Symptom | Likely Issue |
|---|---|
| Slow page loads on mobile | Unoptimized resource loading |
| Random request failures | Missing retry logic |
| High TTFB | Server or CDN issues |
| Timeouts on slow networks | Missing timeout handling |
Quick Diagnostics
Network API Usage
// Check connection type
const connection = navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
if (connection) {
console.log('Connection type:', connection.effectiveType);
console.log('Downlink:', connection.downlink, 'Mbps');
console.log('RTT:', connection.rtt, 'ms');
console.log('Save data:', connection.saveData);
}
DevTools Network Analysis
- DevTools > Network tab
- Enable Slow 3G throttling
- Reload page
- Analyze waterfall for bottlenecks
Common Solutions
Adaptive Loading
// Load different resources based on connection
function getImageQuality() {
const connection = navigator.connection;
if (!connection) return 'high';
switch (connection.effectiveType) {
case 'slow-2g':
case '2g':
return 'low';
case '3g':
return 'medium';
default:
return 'high';
}
}
Resource Hints
<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page.html">
Timeout Handling
// Fetch with timeout
async function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
} catch (error) {
clearTimeout(id);
if (error.name === 'AbortError') {
throw new Error('Request timed out');
}
throw error;
}
}