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;
}
}