移动端页面速度优化：从3G到5G时代的加载策略

移动端用户对速度的容忍度远低于PC用户——页面加载超过3秒，53%的用户会直接离开。

一、了解移动网络环境

网络条件多样性：5G峰值1Gbps，4G LTE平均10-30Mbps，3G约1-3Mbps，2G < 1Mbps。

测试建议：使用Chrome DevTools的网络限速功能，在"Slow 3G"条件下测试你的网站。

Lighthouse目标：Performance > 90，LCP < 2.5s，INP < 200ms，CLS < 0.1。

二、关键渲染路径优化

内联关键CSS（约14KB以内），异步加载完整样式表：

<style>/* 首屏关键CSS */body{margin:0}  </style>
<link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'">

延迟非关键JavaScript：

<script src="analytics.js" defer></script>
<script src="widget.js" async></script>

三、图片优化策略

使用WebP/AVIF格式配合srcset实现响应式图片：

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="主图" width="800" height="400" fetchpriority="high">
</picture>

<!-- 非首屏图片懒加载 -->
<img src="photo.jpg" loading="lazy" alt="描述" width="600" height="400">

四、字体优化

使用font-display: swap避免FOIT（隐形文字闪烁）：

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-display: swap;
}

或直接使用系统字体栈：-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif

五、第三方脚本管理

第三方脚本会显著增加页面加载时间。优化策略：

1. 延迟加载：在window load事件后3秒加载非关键脚本
2. 使用Partytown在Web Worker中运行第三方脚本
3. 评估每个第三方脚本的ROI，移除不必要的

六、弱网环境优化

使用Network Information API检测网络状况并适配：

const conn = navigator.connection;
if (conn && (conn.effectiveType === "2g" || conn.saveData)) {
  // 弱网模式：禁用视频自动播放，使用低分辨率图片
  document.querySelectorAll("video").forEach(v => v.removeAttribute("autoplay"));
}

总结

移动端速度优化优先级：内联关键CSS > 优化图片（WebP+懒加载）> 延迟JS > 字体优化 > 第三方脚本管理。