如何为网络慢连接用户提供精简版网站？相关检测方案咨询

一、根据网络速度分发不同版本网站 #

有前端实时检测和后端判断两种思路，可结合使用：

1. 前端检测方案 #

• 利用Network Information API（推荐）
  现代浏览器提供的navigator.connection对象能直接获取网络类型与大致速度，其中effectiveType属性会返回slow-2g、2g、3g、4g这类标识，可直接用来判断是否跳转精简版：

  // 在页面<head>中尽早执行检测
  if ('connection' in navigator) {
    const { effectiveType } = navigator.connection;
    // 针对低速网络跳转精简版
    if (effectiveType === 'slow-2g' || effectiveType === '2g') {
      window.location.replace('/minimal');
    }
  }
  

  注意：Safari对该API支持有限，需搭配降级方案。

• 自定义测速（兼容性更强）
  加载一个极小的资源（如1KB空白图片），通过计算下载耗时估算网络速度：

  function checkSpeedAndRedirect() {
    const testUrl = '/static/1kb-test.png?t=' + Date.now(); // 加时间戳避免缓存
    const startTime = performance.now();
    
    fetch(testUrl, { cache: 'no-store' })
      .then(res => res.blob())
      .then(blob => {
        const endTime = performance.now();
        const duration = endTime - startTime;
        // 计算速度（单位：bps）
        const speed = (blob.size * 8) / (duration / 1000);
        
        // 阈值可按需调整，这里以100kbps为界
        if (speed < 100 * 1024) {
          window.location.replace('/minimal');
        }
      })
      .catch(() => {
        // 加载失败默认跳转精简版
        window.location.replace('/minimal');
      });
  }
  checkSpeedAndRedirect();
  

2. 后端判断方案 #

• 读取Save-Data请求头
  当用户开启浏览器「省流量模式」时，请求会携带Save-Data: on头，后端可直接据此返回精简版内容。比如Nginx配置：

  if ($http_save_data = "on") {
    rewrite ^ /minimal last;
  }
  

  Node.js、PHP等后端语言也能直接读取该请求头做逻辑判断。

• 基于用户历史偏好缓存
  若用户之前选择过精简版，可将偏好存入Cookie或后端数据库，下次访问直接返回对应版本。

二、检测WiFi/移动数据网络类型 #

依赖Network Information API的type属性，能直接获取当前网络连接类型：

if ('connection' in navigator) {
  const connectionType = navigator.connection.type;
  if (connectionType === 'cellular') {
    // 隐藏视频、大图等大文件，替换为轻量内容
    document.querySelectorAll('video').forEach(vid => vid.remove());
    document.querySelectorAll('.high-res-img').forEach(img => {
      img.src = '/low-res-' + img.src.split('/').pop();
    });
  }
}

该属性可能的取值包括wifi、cellular、ethernet等，部分浏览器（如Safari）支持有限，建议搭配Save-Data属性一起判断，提升覆盖度。

三、让用户主动告知下载偏好的方案 #

核心利用浏览器的**Save-Data机制**，同时补充手动切换入口：

1. 前端检测省流量模式：通过navigator.connection.saveData布尔值判断用户是否开启省流量模式，直接调整页面内容：

   if (navigator.connection?.saveData) {
     // 禁用视频自动播放、加载低分辨率资源
     document.querySelector('video').setAttribute('preload', 'none');
   }
   

2. 后端读取请求头：如前文所述，后端通过Save-Data头直接返回适配内容，无需前端处理。
3. 手动切换入口：在网站显眼位置添加「切换精简版/完整版」按钮，将用户选择存入localStorage或Cookie，下次访问自动应用：

   // 切换到精简版
   document.getElementById('switch-minimal').addEventListener('click', () => {
     localStorage.setItem('preferredVersion', 'minimal');
     window.location.reload();
   });
   
   // 页面加载时读取偏好
   window.addEventListener('load', () => {
     const preferred = localStorage.getItem('preferredVersion');
     if (preferred === 'minimal' && window.location.pathname !== '/minimal') {
       window.location.replace('/minimal');
     }
   });
   

内容的提问来源于stack exchange，提问作者FusRoDah