今天早上刷到NASA那个生日星系图的网站，突然想试试看效果咋样。结果一打开就傻眼了，网页加载慢得跟老牛拉破车似的，等半天才出来个模糊图片。我这暴脾气当时就上来了，掏出F12开发者工具开始抓包看性能。
第一次优化尝试
先拿谷歌家的测速工具跑分，好家伙，首屏加载居然要8秒！打开瀑布图一看，所有图片都没做压缩，10MB的大图直接往页面上怼。马上打开Photoshop把图片全转成WebP格式，尺寸砍掉三分之二。顺手把三张背景图合并成雪碧图，CSS里直接拼坐标定位。
- 原图尺寸：5184x3456像素
- 压缩后：1920x1280 WebP
- 单图体积从3.7MB降到190KB
改完重新部署的时候手都在抖，生怕把网站搞崩了。结果刷新完当场愣住——网页加载从8秒掉到3.5秒，但星系图位置全歪了！原来NASA的响应式写得稀碎，手机上看图片直接怼出屏幕外。
二度翻车现场
抄起CSS文件就开改，把定位单位全从px换成vw。调了二十多遍百分比，用这个鬼畜代码才搞定：
transform: translate(calc(15vw - 120px), calc(20vh + 30px));
正想夸自己天才，朋友发微信说想看看效果。结果他打开还是显示半个地球！抓头发才想起来没做设备像素适配，苹果视网膜屏要乘2倍系数，赶紧往代码里塞@media查询。等折腾完再测试，得，加载时间又涨回5秒了。
的救命稻草
瘫在椅子上刷论坛，突然看见有人提局部缓存。拍大腿想起NASA每天就更新一张图嘛立马在service worker里写缓存策略：
- 当天图片：强缓存3小时
- 星座数据：每月更新
- 字体文件：永久缓存
顺手把那些花里胡哨的星空粒子特效全关了，反正生日图重点是星系位置。改完打包丢服务器上，手机冷启动2.1秒完成加载，电脑端直接秒开。正想发朋友圈炫耀，朋友发来他原生NASA网站的加载截图——还是8秒！
折腾一整天悟出个理儿：有些官方站点真不如自己魔改。现在谁要看网页转圈圈，优化完生日照片照样刷得飞起。早知道这么简单，当初就不该死磕代码，直接套现成解决方案多省事！