网站性能优化免费手段：不花钱把速度提上来

网站慢，用户直接关，搜索引擎还降权。好消息是：性能优化大部分手段都是免费的，不用买任何服务。这篇的顺序是：先测出瓶颈，再动手。别凭感觉优化，感觉会骗你，数据不会。按这篇走一遍，分数涨几十分是常态，一分钱不花。

先测：PageSpeed Insights 跑一次

打开 PageSpeed Insights，输入网址，跑一次。它会给你手机端和桌面端的分数，以及具体哪里慢：是图片太大、是脚本太多、还是服务器响应慢。记下分数，优化完再跑一次，对比着看。没有测量就没有优化，凭感觉加缓存、换服务器，大概率优化了个寂寞。记住：手机端的分数比桌面端重要，你的用户大多在手机上。

图片：最大的慢，免费治

个人网站慢，十有八九是图片。四个免费手段：压缩（Squoosh 在线压，肉眼看不出区别，体积少一半）；尺寸按需（展示 800 宽就别传 4000 宽的原图，传之前先缩好）；懒加载（首屏之外的图，滚到了再加载，img 标签加个 loading="lazy" 就行）；格式用 WebP 或 AVIF，比 JPEG 小得多，现代浏览器都支持。这四招做完，图片体积能少 70% 以上。

背景大图是重灾区。首屏那张漂亮的背景图，经常占掉一半加载时间。能用文字加纯色代替就代替，实在要用，压到 200K 以内。记住：用户是来看内容的，不是来看你的摄影作品的。为了好看让用户多等 3 秒，这买卖不划算。

首屏：最大内容用文字

PageSpeed 有个指标叫 LCP（最大内容绘制），基本决定了用户觉得「快还是慢」。让首屏最大的那块内容是文字，而不是图片或视频，LCP 直接起飞。标题、副标题用文字写，别做成图片——搜索引擎也看不懂图片里的字，一举两得。首屏只放「让用户做决定」的东西：标题、一句话介绍、一个按钮，其他的都往下放。

第三方脚本：能少一个是一个

统计、客服、聊天、分享按钮……每个第三方脚本都是一次额外的网络请求，还经常阻塞渲染。数一数你加载了几个，砍掉一半，网站能快一截。统计用轻量的（Cloudflare 自带分析就行），不用的社交分享按钮全删了，聊天窗口等用户真需要了再加。每个脚本加之前问一句：它带来的价值，配得上它拖慢的速度吗？配不上就删。

视频也别直接嵌。YouTube、B 站的嵌入播放器，一加载就是一堆脚本。做法：先放一张视频封面图，用户点了再加载真正的播放器。这个小技巧能让带视频的页面快一倍，用户体验还更好——封面图加载快，用户不会对着空白转圈发呆。

静态资源：Cloudflare 免费 CDN 缓存

图片、CSS、JS 这些不变的文件，让 Cloudflare 免费版缓存起来。用户第二次访问，文件从离他最近的节点拿，不用回你的服务器。开了代理之后默认就带缓存，静态资源基本零成本加速。这是免费手段里性价比最高的，十分钟配好，永久受益。动态内容别缓存，登录后的页面、API 接口要排除掉，慢一点比串数据强一万倍。

压缩和缓存头：服务器开一下

文本类的资源（HTML、CSS、JS）开 gzip 或 brotli 压缩，体积能少 70%，Caddy 和 Nginx 都是一行配置的事。再给静态资源加上缓存头，告诉浏览器「这个文件一周内不用重新下载」。这两个都是服务器配一次、永久生效，十分钟搞定。很多人花大钱买 CDN，却连自家服务器的压缩都没开，本末倒置。

服务器响应慢：查数据库

如果 PageSpeed 说服务器响应时间（TTFB）太长，问题多半在数据库：页面一次查了全表、没加索引、或者一个页面发了几十个查询。个人站数据量小，优化空间很大：列表页分页、别 select 出用不到的字段、慢查询加索引。TTFB 从 2 秒降到 200 毫秒，用户感知最明显，因为这是「第一个字节」的时间，后面所有东西都在等它。

字体：系统字体栈，别整包加载中文字体

中文字体文件动辄几兆，整包加载等于给每个用户发个大礼包。用系统字体栈（苹果的苹方、微软的雅黑这些），用户手机电脑自带，零加载时间。英文字体也别贪多，一个字重够用就别加载五个。字体是「慢」得最隐蔽的元凶，因为设计师觉得好看，用户觉得卡。好看和快冲突的时候，选快。

最后提醒：性能优化是持续的事，不是做一次就完。每加一个新功能，跑一次 PageSpeed，分数掉了就知道是这次加的东西拖慢的。把「分数不下降」当成上线的门槛之一，网站会一直快下去。慢都是攒出来的，快也是。

首屏只放三样东西

标题、一句话介绍、一个按钮，首屏只放这三样，其他的都滚下去。首屏每多一个元素，LCP 就慢一分。用户打开网站，前三秒决定去留，这三秒里他只需要知道：这是什么、对我有什么用、点哪里开始。其他的，等他往下滚再说。

延迟加载非关键内容

评论区、地图、视频播放器，这些都不是首屏必需的，滚到了再加载。图片用 loading="lazy"，视频用封面图代替，用户点了再加载真正的播放器。原则：首屏只加载「让用户做决定」的东西，其他的都往后稍稍。延迟加载不是偷工减料，是把好钢用在刀刃上。

减少请求数：合并

每个网络请求都有开销，请求数少了自然快。小图标用 SVG 内联，别一个图标一个文件；CSS 能合并就合并。别为了「模块化」拆出几十个小文件，浏览器一个个去要，慢得肉疼。构建工具会自动做这些，检查一下你的构建配置，别让它偷懒。

预加载关键资源

首屏的图片、关键的字体，用 preload 告诉浏览器「这个最重要，先下它」。别滥用，preload 多了等于没排优先级。只给真正关键的一两个资源用，其他的按正常顺序来。预加载是插队，插队的人多了，队伍就乱了。

动画：少即是多

动画多了低端机直接卡。用 transform 和 opacity 做动画，这两个不触发重排，最省性能；改 width、height、top 的动画，能卡成幻灯片。拿一台三年前的千元机测一遍，流畅了才算过关。你电脑上看着丝滑，不代表用户手机上也丝滑。

统计脚本：选轻量的

重型统计脚本是隐形杀手：一个 GA 加一堆插件，拖慢半秒很常见。个人站用 Cloudflare 自带分析就行，轻量、无 cookie，还快。真需要细数据再上重的，别为了「万一以后要用」的数据，牺牲现在的速度。统计是为人服务的，不是为数据服务的。

缓存策略：让浏览器记住

静态资源加上 Cache-Control，告诉浏览器「这个文件一周内不用重新下载」。发版时文件名带 hash（比如 app.a1b2c3.js），文件变了文件名就变，浏览器自然去拿新的，不会用旧缓存。这个构建工具一般自动做，检查一下就行。缓存配好了，老用户第二次打开，快得像本地应用。

定期体检：每月跑一次分

把 PageSpeed 跑分加进每月的固定动作：月初跑一次，记下分数；新功能上线跑一次，掉了就查。新加的第三方脚本、新上的大图片，都会悄悄拖慢网站。体检的意义是「早发现」：慢 5 分的时候修，是举手之劳；慢 30 分的时候修，是大工程。