Network Information
Detect connection type, speed, and data saver mode. See how apps deliver adaptive content based on network conditions.
Browser Support
Browser Support
❌ Your browser does not support Network Information API.
This API is supported in Chrome 61+ and Edge 79+. Not available in Safari or Firefox.
How Network Information API Works
- Effective Type: Browser estimates connection quality (4g, 3g, 2g, slow-2g) based on observed RTT and downlink
- Downlink: Effective bandwidth estimate in Mbps based on recently observed throughput
- RTT (Round Trip Time): Time in milliseconds for data to travel to server and back
- Save Data: User has enabled "Data Saver" mode in browser/OS settings
- Change Events: Browser fires events when connection type or quality changes
Connection Types Explained
4G / LTE / WiFi
>2 Mbps downlink, <200ms RTT
Excellent for HD video, large file downloads, real-time gaming. Load full-quality content.
3G
~1.5 Mbps downlink, ~300ms RTT
Good for SD video, web browsing, social media. Compress images, reduce video quality.
2G
~0.4 Mbps downlink, ~800ms RTT
Text-based content only. Disable images/video auto-load. Show loading placeholders.
Slow 2G
<0.1 Mbps downlink, >2000ms RTT
Extremely limited. Text-only mode, disable all media. Consider offline mode.
Developer Code Example
// Get network information
const connection = navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection;
if (connection) {
console.log('Effective Type:', connection.effectiveType); // '4g', '3g', '2g', 'slow-2g'
console.log('Downlink Speed:', connection.downlink + ' Mbps');
console.log('RTT:', connection.rtt + ' ms');
console.log('Data Saver:', connection.saveData);
// Adaptive content loading
if (connection.effectiveType === '4g') {
loadHighQualityImages();
enableVideoAutoplay();
} else if (connection.effectiveType === '3g') {
loadCompressedImages();
disableVideoAutoplay();
} else {
loadTextOnly();
}
// Listen for connection changes
connection.addEventListener('change', () => {
console.log('Connection changed to:', connection.effectiveType);
adjustContentQuality(connection.effectiveType);
});
// Respect data saver mode
if (connection.saveData) {
disableAutoplay();
useCompressedImages();
deferNonEssentialResources();
}
}Real-World Network Information Use Cases
Smart applications adapt content quality and loading strategies based on network conditions to provide the best experience across all connection speeds.
📺Adaptive Video Streaming
Automatic Quality Adjustment
YouTube and Netflix use Network Information API to set initial video quality. On 4G, they start with 1080p. On 3G, they start with 480p. On 2G, they show a warning: 'Your connection is slow. Video may buffer frequently. Switch to audio-only?' This saves users from manually adjusting quality and prevents buffering frustration.
const connection = navigator.connection;
if (connection.effectiveType === '4g') {
setVideoQuality('1080p');
} else if (connection.effectiveType === '3g') {
setVideoQuality('480p');
} else {
setVideoQuality('360p');
showSlowConnectionWarning();
}Preloading Strategy
Disney+ preloads the next episode on fast connections (4G/WiFi) so there's zero delay when you binge-watch. On 3G, they preload just 30 seconds. On 2G, no preloading. This intelligent buffering saves bandwidth for slower connections while maintaining seamless playback on fast ones.
🖼️Responsive Image Loading
Adaptive Image Quality
Instagram serves different image sizes based on connection. On 4G: full 1080x1080px images. On 3G: 640x640px. On 2G: 320x320px thumbnails. This reduces data usage by 75% on slow connections while still showing the content. Users on limited data plans especially appreciate this.
const connection = navigator.connection;
const imageElement = document.querySelector('img');
if (connection.effectiveType === '4g') {
imageElement.src = 'photo-1080.jpg'; // 500KB
} else if (connection.effectiveType === '3g') {
imageElement.src = 'photo-640.jpg'; // 150KB
} else {
imageElement.src = 'photo-320.jpg'; // 50KB
}Lazy Loading Behavior
Pinterest adjusts lazy loading distance based on connection speed. On 4G, they load images 2 screens ahead. On 3G, only 1 screen ahead. On 2G, images load only when scrolled into view. This prevents wasting bandwidth on images users might never see.
💾Data Saver Mode Respect
Reduced Data Usage
When you enable Data Saver in Chrome (connection.saveData = true), websites like Twitter stop auto-playing videos, load lower-resolution images, and defer loading below-the-fold content. Users report 50-70% reduction in data usage. This is crucial in countries with expensive mobile data or limited plans.
if (navigator.connection.saveData) {
// Disable video autoplay
videos.forEach(v => v.removeAttribute('autoplay'));
// Use compressed images
images.forEach(img => {
img.src = img.dataset.lowResSrc;
});
// Defer non-critical resources
deferAnalytics();
deferThirdPartyScripts();
}User Preference Indicator
Facebook shows a banner when Data Saver is on: 'Data Saver mode active. We've reduced image quality and disabled video autoplay to save your data.' This transparency helps users understand why the experience is different and confirms their settings are working.
📱Progressive Web App Optimization
Selective Offline Caching
Google Maps Progressive Web App (PWA) adjusts what it caches based on connection. On WiFi, it caches high-resolution map tiles for your entire city (500MB+). On 4G, only your neighborhood. On 3G, just your current route. This intelligent caching means offline maps work everywhere but don't fill your phone's storage unnecessarily.
Background Sync Frequency
News apps like The Guardian sync articles in the background. On 4G, they fetch new articles every 15 minutes. On 3G, every hour. On 2G, only when you open the app. This keeps you updated without draining battery/data on slow connections.
Why Network Information Matters
Benefits of Adaptive Content Delivery:
- Faster page loads on slow connections (text-only mode)
- Better video experience (appropriate quality from the start)
- Reduced data usage (especially important on metered connections)
- Respect user preferences (Data Saver mode)
- Improved battery life (less data processing on slow networks)
Browser Support (2026):
- ✅ Chrome/Edge: Full support since 2017
- ❌ Firefox: Not supported (privacy concerns)
- ❌ Safari: Not supported
- Limited browser support, but covers ~60% of global traffic
The Bottom Line:
Network Information API enables websites to adapt to varying connection speeds, providing optimal experiences for users on both fast and slow networks. While not universally supported, progressive enhancement means you can use it to improve experiences for supported browsers while maintaining basic functionality everywhere.
🔒 Your Privacy Matters
This demo runs entirely in your browser. No data is sent to any server. All information shown is generated locally from browser APIs. You can verify this by checking your browser's network tab.
How to protect your privacy:
- • Only grant permissions to trusted websites
- • Review active permissions in browser settings
- • Clear site data to reset permissions
Browser Settings:
- • Chrome: Settings → Privacy and security
- • Firefox: Settings → Privacy & Security
- • Safari: Preferences → Privacy