我把网页加载速度从8秒降到0.5秒，老板以为我换了服务器。

上周老板突然找我，说用户反馈网页打开太慢，能不能优化一下。

我说行，给我两天时间。

结果半天就搞定了，老板以为我换了服务器。

问题排查 先用Chrome DevTools的Network面板看了一下，发现主要卡在三个地方：

1. 首屏图片加载（3.2秒）
2. JavaScript文件执行（2.8秒）
3. 第三方字体加载（1.5秒）

其他资源加起来0.5秒，总共8秒。

优化过程

第一步：图片懒加载

原来页面一打开就加载所有图片，包括首屏看不到的。

改成懒加载，首屏只加载可视区域内的图片，其他等滚动到再加载。

<img src="placeholder.jpg" data-src="real.jpg" loading="lazy">

或者用Intersection Observer API更精确控制。

图片加载从3.2秒降到0.8秒。

第二步：JavaScript延迟执行

原来JS文件放在head里，阻塞了页面渲染。

改成defer异步加载，不阻塞首屏：

<script src="app.js" defer></script>

非必要的JS（如统计代码、广告）放到页面底部，或用setTimeout延迟执行。

JS执行从2.8秒降到0.6秒。

第三步：字体预加载

原来用的Google Fonts，每次都要从海外服务器加载，慢且不稳定。

改成font-display: swap，先显示系统默认字体，等自定义字体加载完再替换：

  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

同时把字体文件放到CDN，减少传输时间。

字体加载从1.5秒降到0.3秒。

数据对比

优化前总加载时间8秒，优化后0.5秒。

首屏渲染时间从4.1秒降到0.3秒。

老板的反应

我把数据给老板看，他问是不是换了新服务器。

我说没有，就是把图片懒加载了，JS延迟执行了，字体预加载了。

他愣了一下，说"这么简单？"

我说"简单，但之前没人做。"

总结

网页优化没有黑科技，就是：

1. 图片懒加载，首屏只加载可见区域。
2. JavaScript异步执行，不阻塞渲染。
3. 字体预加载，先显示后备字体。

关键是先抓数据，找到瓶颈，再针对性优化。别一上来就换服务器、加CDN，可能根本没必要。