昨天晚上喝了杯美式，睡不着，就扒在床上用手机看自己站点的加载速度。用Pagespeed一测，好家伙，移动端只有49分。我这个气啊，一大早就起来搞优化。

其实之前一直用的WP Rocket，感觉还行吧，但是最近发现图片多的页面加载还是慢。我想着要不换个插件试试，就装了个LiteSpeed Cache。听说这个对服务器要求低，功能还全。

结果这一换，坑出来了。

刚激活完，网站直接打不开了。屏幕白屏，什么都没有。我还以为是我刚才那杯咖啡喝多了眼花呢，刷新了三次都是白屏。后来登录FTP，把插件文件夹重命名了，站点才恢复正常。

后来查了下日志，是因为LiteSpeed默认开启了一个叫做”CSS关键渲染路径”的功能，跟我主题不兼容导致的。我主题是自己改过的，之前为了做一些定制化效果，动了不少CSS文件的加载逻辑，结果跟这个自动优化功能撞上了。

关掉这个功能之后站点能打开了。但是问题来了，我发现所有的图片缺失了alt文字的，都被自动加上了一个占位符图片，而且是每张图都是同一个base64的小图片。这个设置藏得挺深的，在”图片优化”里面有个”Responsive Placeholder”，默认是开启的。我之前用WP Rocket也没遇到这种情况。

这个功能本意是好的，就是在图片加载之前先占个位，避免页面布局跳动。但是我觉得这个base64的做法有点懒，尤其是对于那种本来就不大的图片，完全没必要。我把它关了，改回传统的等比缩放占位，页面看着舒服多了。

再说说图片本身的优化。我之前一直活在梦里，觉得WebP格式是神，所有图都要转WebP。但是有一次我用老旧的Safari浏览器打开站点，发现好几张图片直接破图了。一查才知道，旧版本Safari对某些WebP的支持不太好，特别是那种带alpha通道的。后来我改用了一个策略：小图、icon之类的用PNG，照片类的用压缩后的JPEG，哪些页面确实需要的才手动转WebP。

其实很多人包括我自己，容易陷入一个误区，就是追求所有指标都要漂亮。像Pagespeed那个分数，看着心里爽，但是为了追几分去把站点搞坏了就得不偿失。我这次的经历就是，从49分搞到70分的时候很容易，清理几个插件、压几张图、开个缓存就能上去。但是从70往90冲的时候，每一分都要牵涉很多东西，有时候甚至要动到代码层面。对于我这种个人博客来说，真的没太大必要。加载个一秒两秒，内容好看，比什么都强。

说返回来，最后我还是换回了WP Rocket。倒不是说LiteSpeed不好，只是我这个环境比较特殊，自定义东西多，用熟悉的工具更省心。不过从这次踩坑里我也学到了几个东西，比如一定要在测试站点试过再上线，不要大半夜脑子一热就改生产环境。这个坑我踩不止一次了，每次都是血的教训。

今天下午又用GTmetrix测了一下，加载时间从之前的3.2秒降到1.8秒了，还算满意。晚上准备喝杯啤酒庆祝一下，不喝咖啡了。