首屏 1.4 秒:我们给一个建材站做的 11 项提速调整
同样的页面,改之前移动端首屏 5.8 秒,改之后 1.4 秒。没有换服务器,动的是图片、脚本和加载顺序。
先量,再改
用浏览器开发者工具的网络面板录一次移动端加载,发现首屏 4.1MB,其中三张轮播图占了 2.6MB,另外有四个第三方脚本合计 600KB。慢的原因很具体,不用猜。
把加载瀑布图打印出来贴在屏幕上,按「谁阻塞渲染、谁体积最大」排序,改的顺序就出来了。
图片是第一位
三张横幅从 1920 宽的 JPEG 重新压到 1280,质量 78,体积从 2.6MB 降到 420KB。手机屏幕宽度通常不到 420 逻辑像素,1920 的图是浪费。
首屏以下的图片全部加懒加载,滚动到再请求。产品图统一按容器比例裁切,不再用 CSS 缩放原图。
图标从 PNG 换成内联 SVG,颜色能跟主题走,也少了几次请求。
脚本与请求
四个第三方脚本只留一个统计,其余砍掉。轮播从插件换成手写的一段 JS,代码不到 30 行,省掉一个 jQuery 依赖。
CSS 拆成关键与非关键两部分,首屏样式内联,其余延后加载。字体只保留中文子集,去掉不用的字重。
服务器开了 gzip 与静态缓存,图片走 CDN。这几项改动加起来不到两小时。
结果
移动端首屏从 5.8 秒到 1.4 秒,整页加载从 9.2 秒到 3.1 秒。搜索引擎的抓取频次在两周后有小幅上升,这个变化不一定全是速度带来的,但至少不再是短板。
本文写于 2026 年 4 月15 日,数据与做法来自本项目现场记录。转载请注明出处。