我的网站从3秒降到0.8秒，就靠这几招笨办法
上个月有个客户找我，说他的电商网站打开要等三四秒，用户流失严重。我一看后台数据，跳出率高达68%，确实吓人。
说实话，这种问题我见得太多了。很多老板觉得网站慢是服务器的问题，一上来就问要不要换更好的主机。其实大部分时候，问题出在那些不起眼的细节上。
先说图片这个坑
我接手那个电商网站后，第一件事就是检查图片。好家伙，首页一张banner图8MB，产品图平均2MB一张。这谁受得了？
很多人不知道，浏览器下载图片是并行的，但数量有上限。Chrome最多同时下载6张图片，如果你的页面有20张图，剩下的就得排队。更糟的是，这些图片还占带宽，其他资源也得等着。
我的做法很简单：
第一步，用TinyPNG批量压缩。这个工具我用了三年，从来没让我失望过。8MB的banner压到800KB，画质几乎看不出区别。产品图从2MB压到200KB左右，20张图总共省了36MB。
第二步，上WebP格式。这玩意儿比JPEG小30%左右，但很多老板不知道。我写了个脚本，把全站图片自动转成WebP，然后用标签做兼容。老浏览器自动回退到JPEG，新浏览器享受WebP的红利。
第三步，懒加载。首屏以下的图片，等用户滚动到可视区域再加载。这个改动立竿见影，首屏加载时间直接砍掉一半。
CSS和JS的优化，没你想的那么复杂
很多教程把CSS和JS优化讲得很玄乎，什么关键渲染路径、什么阻塞渲染。其实核心就两点：减少体积、减少请求。
我把全站CSS合并成一个文件，然后用PurgeCSS清理没用到的样式。你猜怎么着？原来120KB的CSS，清理完只剩35KB。为什么？因为主题自带了一堆用不到的样式，比如RTL支持、旧浏览器兼容，全被打包进去了。
JS方面，我把非首屏需要的脚本都加了defer属性。比如统计代码、分享按钮、评论系统，这些等页面渲染完再加载也不迟。还有个狠招：把jQuery换成了原生JS。那个电商网站用jQuery就为了几个DOM操作，为了这碟醋包了顿饺子。换完之后，JS体积从180KB降到45KB。
缓存策略，一劳永逸
这个我强烈建议所有人都做。原理很简单：告诉浏览器，某些文件短期内不会变，你就缓存着，下次别来服务器拿了。
我在Nginx配置里加了几行：
图片、CSS、JS这些静态资源，缓存一年。反正文件名带hash，内容变了文件名也变，不用担心用户拿到旧版本。HTML文件缓存10分钟，保证内容更新能及时生效。
就这么简单一个改动，二次访问的速度提升了70%。因为浏览器直接从本地缓存读取，根本不用走网络。
服务器端的优化，看情况来
如果你的网站面向国内用户，CDN是必须的。我用的是阿里云CDN，全国节点加速，一个月几十块钱。配置完之后，新疆用户访问速度和上海用户差不多，这在以前不敢想。
还有个容易被忽略的点：数据库优化。WordPress的wp_options表会越来越大，各种插件留下的临时数据、过期缓存全堆在里面。我装了WP-Optimize插件，一键清理，表体积从50MB降到8MB。查询速度明显变快。
如果预算充足，可以考虑升级PHP版本。PHP 8.1比7.4性能提升30%左右，这个提升是实打实的，不用改一行代码。
移动端优化，现在不做就晚了
现在70%以上的流量来自手机，但很多网站还是先做PC版，然后”适配”移动端。这种思路大错特错。
我的建议是移动优先。先保证手机端体验，再扩展到大屏。具体怎么做？
响应式图片是基础。用srcset属性，手机加载小图，平板加载中图，PC加载大图。别让用户手机下载2K分辨率的图，流量不要钱啊？
触摸目标要够大。按钮至少44×44像素，间距至少8像素。我见过太多网站，按钮做得跟蚂蚁似的，点一下误触三次，用户体验极差。
字体大小别小于16px。手机上14px的字看着费劲，16px是底线。行高也要调大一点，1.5到1.8之间比较舒服。
监控不能停
优化不是一锤子买卖。我每个月都会用PageSpeed Insights跑一次，看看分数有没有掉。还会用GTmetrix监控加载时间，设置告警，超过2秒就发邮件提醒。
还有个土办法：自己每天用手机访问一遍网站，感受一下。数据是死的，体验是活的。有时候数据看着没问题，但实际用起来就是卡，这种时候就得深挖了。
最后说两句
网站优化这事，没有银弹。不是什么高深技术，就是把一个个细节做到位。图片压缩、代码精简、缓存策略、移动端适配，这些都是基本功。
我见过太多人追求新技术、新框架，却连最基本的优化都不做。与其花时间折腾新东西，不如先把现有的网站打磨好。用户不在乎你用的什么技术，他们在乎的是打开速度快不快、用起来顺不顺手。
那个电商网站，优化完之后跳出率从68%降到32%，转化率提升了15%。客户高兴坏了，给我介绍了三个新客户。你看，网站优化不是成本，是投资。
如果你也在为网站速度发愁，不妨试试我这些笨办法。不保证立竿见影，但肯定有用。