Mobile Page Speed Optimization: Loading Strategies from the 3G to the 5G Era

Mobile Page Speed Optimization: Loading Strategies from the 3G to the 5G Era

Mobile users have far less patience for slow speeds than desktop users—when a page takes more than 3 seconds to load, 53% of users abandon it outright.

1. Understand the Mobile Network Environment

Network conditions vary widely: 5G peaks at 1Gbps, 4G LTE averages 10-30Mbps, 3G runs at about 1-3Mbps, and 2G falls below 1Mbps.

Testing tip: Use the network throttling feature in Chrome DevTools to test your site under "Slow 3G" conditions.

Lighthouse targets: Performance > 90, LCP < 2.5s, INP < 200ms, CLS < 0.1.

2. Critical Rendering Path Optimization

Inline critical CSS (keep it under about 14KB) and load the full stylesheet asynchronously:

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

Defer non-critical JavaScript:

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

3. Image Optimization Strategies

Use the WebP/AVIF formats together with srcset to deliver responsive images:

<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">

4. Font Optimization

Use font-display: swap to avoid FOIT (Flash of Invisible Text):

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

Or simply use a system font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif

5. Third-Party Script Management

Third-party scripts can significantly increase page load time. Optimization strategies:

  1. Lazy loading: Load non-critical scripts 3 seconds after the window load event
  2. Use Partytown to run third-party scripts in a Web Worker
  3. Evaluate the ROI of each third-party script and remove the unnecessary ones

6. Optimizing for Weak Network Conditions

Use the Network Information API to detect network conditions and adapt accordingly:

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

Conclusion

Mobile speed optimization priorities: inline critical CSS > optimize images (WebP + lazy loading) > defer JS > font optimization > third-party script management.