Typecho博客图片懒加载实战：让页面加载速度提升数倍的技巧

52JinY 助手

最近折腾博客的时候遇到了一个老问题——页面加载太慢，翻了翻后台发现主要原因是首页把所有文章里的图片全部一次性加载了，有些文章配了七八张图，用户可能根本没有往下翻，这些图片就白白占用了带宽和时间。于是花了几天研究了一下Typecho的图片懒加载方案，把自己的折腾过程记录下来，希望对有同样需求的朋友有用。

懒加载的核心逻辑其实很简单，就是让图片在进入浏览器视口之前不去加载真实的src，等用户滚动到该图片附近时再动态替换src开始加载。实现这个需要前端配合，主流方案有两种，一是用JavaScript监听scroll事件手动判断位置，二是用浏览器原生的Intersection Observer API，后者性能更好也更简洁，现代浏览器支持都很不错，推荐优先用这个。

在Typecho里落地这个功能，最关键的步骤是把文章内容里img标签的src属性替换掉。具体做法是在主题的functions.php里写一个自定义函数，用正则表达式匹配所有img标签，把src的值暂时存到data-src属性里，然后把原来的src设置成一张占位图（可以是一张极小的透明gif，base64内联也行）。这个函数要挂载到Typecho的内容输出过滤器上，也就是在适当位置调用，让每篇文章的内容在输出到页面前都经过这个处理。

写正则的时候要注意几个细节，首先要处理src属性前后有没有空格的情况，其次img标签本身可能已经带了loading属性，避免重复处理。另外有些主题会在文章列表页用$this->excerpt()输出摘要，这部分同样会包含图片，也需要一并处理，不然懒加载只在单篇文章页生效，首页的效果就没了。

前端JS部分可以直接用一个小脚本，不需要引入任何第三方库。用document.querySelectorAll('img[data-src]')选出所有待加载的图片，创建一个IntersectionObserver实例，每当图片进入视口时把data-src的值赋给src，赋值完成后取消对该元素的观察，避免重复触发。这段JS放在主题的footer.php末尾，等DOM加载完毕再执行效果最稳。整个脚本压缩后也就不到一KB，几乎没有任何额外负担。

还有一个容易忽略的地方是图片的占位样式。如果只是把src换成一个透明像素，图片在加载之前会塌缩成很小一块，页面布局会跳动，用户体验比较差。解决方法是在CSS里给img设置一个最小高度，或者用padding-bottom百分比技巧撑起固定宽高比的容器，等真实图片加载完再还原。当然如果你的图片尺寸不固定，最简单粗暴的处理是设置一个背景色占位，至少视觉上不会太奇怪。

我自己测试下来，加了懒加载之后首页的初始加载请求数从三十多个降到了个位数，LCP（最大内容绘制）时间明显缩短，Google PageSpeed的分数也提升了不少。当然这里面也有缓存策略的功劳，但懒加载确实是减少首屏无效请求最直接的手段之一。

最后说一点，如果你用的是Typecho插件市场里现成的懒加载插件，安装一下就能用，省事很多。但如果主题本身做了一些特殊的内容输出处理，插件可能会失效，这时候手动实现反而更可控。自己写的代码知道每一行在干什么，出了问题也好排查，这也是我喜欢手动折腾的原因。有问题欢迎留言交流。