网站速度慢到让人想关页面？这5招让你的博客飞起来

你有没有过这种体验：点开一个博客，等了5秒还在白屏，直接关了？我反正是这样。研究表明3秒内打不开，50%的用户就会离开。

我自己的博客之前也慢，Lighthouse评分只有40多分...后来一通优化搞到了90+，分享下我都做了啥。

最优先做的事——图片压缩。这是最简单收益最大的。我博客首页之前有张Banner图2MB，压缩后200KB，肉眼根本看不出区别。工具推荐TinyPNG，批量压缩贼方便。

还有，别再用JPG了！WebP格式体积小30%-50%，现在主流浏览器全支持了。我写了个脚本自动转换，一键把全站图片都换成WebP。

第二，上CDN。国内的话Cloudflare免费版就够用了。静态资源走CDN之后，首屏加载时间直接砍半。配置也不复杂，改个DNS解析就行，十来分钟的事。

但Cloudflare有个小问题，就是国内有些地区访问不太稳定。如果你的用户主要在国内，也可以考虑又拍云或者七牛，都有免费额度。

第三，懒加载。就是图片滚动到可视区域才加载。加上loading="lazy"属性一行代码的事：

<img src="xxx.webp" loading="lazy" >

这一行代码让我的首屏加载快了1秒多，因为首页有十几张图，但用户打开时只需要加载前两三张。

第四，CSS和JS压缩合并。这个如果你用Hexo或Hugo之类的静态站点生成器，一般有现成插件。WP的话装个Autoptimize就行。

第五，预连接和预加载。在head里加上这些：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.yoursite.com">

告诉浏览器提前建立连接，省掉DNS解析和TCP握手的时间。

好了差不多了。优化这事儿别想着一步到位，先用Lighthouse跑个分，看它建议你改啥就改啥，按优先级来就行。

标签： 网站优化 性能提升 CDN