开头废话几句

今天折腾自己那破博客主页的时候，突然发现用电脑打开的速度跟老牛拉车似的。掐着秒表一算，好家伙，加载完要7秒！这体验别说读者了，我自己都想砸键盘。寻思着得动刀子改改，顺手把踩过的坑记下来。

第一步：揪出拖后腿的玩意儿

掏出浏览器自带的开发者工具（按F12那个），直接点开Network标签页刷新页面。好家伙，密密麻麻四五十个请求，光是那些小图标就占了二十多个。还有个3MB的首页大图在裸奔，这能不慢吗？

硬着头皮给代码瘦身

先把css和js文件捋了一遍：

• 把五个零散的css揉成一个文件
• 三个js脚本让它们排队加载
• 顺手删了七百多行根本用不着的代码

压缩的时候发现个插件叫啥"Minify"的，直接点两下就完事。压缩完瞟了眼，文件小了快一半！

让图片轻装上阵

之前傻乎乎直接把单反拍的原图往上怼：

• 掏出在线压缩网站，把首页大图从3MB压到200K
• 所有小图标拼成一张图，加载次数直接从20+变成1次
• 给图片统统加上懒加载，往下滑的时候再动

跟字体文件死磕

当初为了好看用了三种字体，结果每个字体文件都2MB往上跑。咬牙做了两件事：

• 中文就留一个字体，其他全砍了
• 打开woff2格式转换器重新打包

折腾完字体请求从9个变成1个，舒坦！

测试环境走一圈

在本地服务器改完不敢直接上线，做了几手准备：

• 用旧手机开热点模拟慢网速
• 把笔记本分辨率从4K调到1366x768
• 特意用IE11打开试试（差点被卡死机）

发现侧边栏在小屏幕上会挤成麻花，赶紧加了max-width限流。

最终效果

熬夜改到两点钟上线，早上用办公室电脑试了下：

• 首屏加载从7秒砍到1.3秒
• 页面请求数从48降到16
• 我妈用老年机都说滑动顺溜了

不过评论区有读者反馈表单提交卡顿，得，下次再接着折腾。反正做网站就是个修修补补的活计，你们有啥优化妙招也扔过来呗！