今天想聊聊做静态网页那点事儿。上个月接了个小项目，甲方非要做个展示型官网，说是要“高大上但加载快”。我寻思着静态网页不是最合适吗？结果一脚踩进坑里。

第一版直接翻车

撸起袖子就干，图片全上高清大图，样式表塞满酷炫动画，第三方插件咔咔往里怼。本地测试美滋滋，传到服务器直接傻眼——首页加载要11秒！手机打开更离谱，进度条卡得像老牛拉破车。

半夜被甲方电话轰醒

“你们做的什么玩意儿？！客户说点开网页等半天，扭头就跑了！” 赶紧爬起来折腾。把电脑亮度调到最低，挂着开发者工具开始抠性能：

• 图片杀人：首屏5张banner图加起来18MB，直接给网页灌水泥
• 字体作妖：引了三个字体库，每个都三四百KB
• 脚本扎堆：统计代码+轮播插件+弹窗组件，光初始化就耗掉3秒

抡起斧头砍成本

第二天顶着黑眼圈开干：

• 所有图片扔进压缩工具，18MB变1.8MB，肉眼根本看不出差别
• 把字体库砍到只剩一个，中文用系统默认字体
• 第三方插件只留核心功能，轮播图自己手写css动画
• CSS和JS文件统统合并压缩，跟挤牙膏似的抠出每KB

偷学浏览器缓存套路

改完还是觉得差点意思，又给服务器加了个缓存规则：

• 让浏览器把CSS/JS/图标这类文件存七天
• 图片弄成“指纹版本”，文件名里带串乱码，更新时才重新加载
• 小图标全部合成雪碧图，省得浏览器来回请求

效果直接炸裂

一顿操作后电脑首屏1.2秒全加载完，手机4G网络也只要3秒。最搞笑的是上周路过甲方公司，发现前台电脑开着他们官网——原来人家把网页当屏保用了。

所以别小看静态站优化，客户流失往往就卡在加载那几秒。现在每接新项目，我都先开无痕模式测加载速度，慢于3秒的项目根本不叫成品。