2026-10-27 · 技术
用户说网站慢，不一定是带宽或服务器的问题。本文先教用一个指标区分“服务器慢”还是“页面重”，再从图片、JS与CSS、字体、第三方脚本、资源优先级五处给出可执行的优化顺序。
用户说网站慢，第一反应常常是“加带宽”或者“上 CDN”。但在动手之前，得先分清是服务器响应慢，还是页面本身太重。判断方法很简单：看 TTFB（首字节时间）。如果 TTFB 只有两三百毫秒，而页面整体加载要五六秒，那问题基本不在服务器和网络，而在前端。 下面这五处，是前端侧最常见的拖慢原因。 第一处是图片。很多站点直接上传相机原图或设计稿，一张 3MB 的图挂在列表页，十张就是 30MB。处理办法是三件事：按实际展示尺寸裁切、转成 WebP 或 AVIF、非首屏图片加懒加载。仅这一项，通常就能让页面体积下降一大半。 第二处是 JS 和 CSS 的加载顺序。浏览器遇到同步脚本会暂停解析，一个放在 head 里的第三方脚本卡住，整页白屏时间就被拉长。把非关键的脚本改成 defer 或 async，把首屏必需的样式内联，其余样式异步加载，体感差别很明显。 第三处是字体。自定义中文字体动辄几 MB，未加载完时文字要么不显示要么闪烁。可行的做法是只保留实际用到的字重、做字体子集化，或者干脆用系统字体栈。首屏标题用自定义字体、正文用系统字体，是成本最低的折中。 第四处是第三方脚本。统计、客服、广告、热力图，每个都只有几十 KB，加起来可能超过主站代码。建议定期清理：打开浏览器的网络面板按体积排序，把一年没看过数据的工具摘掉。 第五处是首屏关键资源的优先级。首屏用到的字体、主图、关键 CSS，可以用 preload 提前声明；首屏之外的资源，用懒加载延后。优先级排对了，用户感知的“打开速度”会明显改善。 工具上，浏览器开发者工具的网络瀑布图足够用：看谁在阻塞、谁体积大、谁排队久。Lighthouse 可以给一个整体评分和具体建议，适合优化前后对比。 优化的顺序建议是：先减体积，再调顺序，最后才考虑网络层。页面本身有 5MB，再好的 CDN 也只能让这 5MB 到得更快一点。 加速IDC 的 CDN 加速服务覆盖东南亚多个节点，配合合理的缓存策略，可以把静态资源的重复传输降到最低。前端和网络两侧一起优化，效果通常比只做一边更实在。
