网站访问速度优化：从排查到分类的实操指南
摘要
测出慢在哪，再按图片、缓存、插件、CDN、服务器的顺序处理；每一步给出具体操作和判断标准。
网站访问速度优化：从排查到分类的实操指南
网站慢，很多人第一反应是服务器不行。说实话，大多数站还没到那一步。更常见的是图片没压、缓存没开，插件和主题又堆得太多。按这个顺序查，一次只改一个地方。
1. 测速
打开 Edge 浏览器，按键盘上的 F12，点 Lighthouse，选 Mobile，点 Analyze page load。等它跑完，记下四个数：
| 工具里的名字 | 中文意思 | 正常范围 |
|---|---|---|
| LCP | 首屏主要内容出现 | 2.5 秒内 |
| INP | 点击后多久有反应 | 0.2 秒内 |
| CLS | 页面有没有跳动 | 0.1 以内 |
| TTFB | 服务器多久开始回话 | 0.8 秒内 |
不用背缩写，看到红色或黄色就知道那一项要处理。
LCP、INP、CLS 的绿、黄、红区间，先看颜色，不用背数字。
测完把首页、文章页、登录后的页面各测一次，手机 4G 下再测一次。办公室里 WiFi 快，不代表用户手机快。
一次访问从连接、首字节、下载到交互，耗时最长的那一段才是下手处。
2. 处理图片
别急着打开压缩工具。图片在页面上只显示 800px 宽，文件却是 3000px，压得再狠也白搭。
我一般按页面显示宽度的 2 倍准备：博客配图 1200–1600px，全屏大图 1920px 左右。一张 3000px 的图，压到 500KB，还是比 1200px 的 150KB 大。
处理起来不复杂：
- 打开智图，上传图片。
- 宽度填 1600（全屏图填 1920），格式选 WebP，点压缩/转换。
- 下载 WebP，传到网站后台的媒体库。
- 在文章里重新插入这张图，替换原来那张大图。
用压缩图也行，上传后选“压缩”或“转 WebP”。图片多、要批量处理，用Caesium Image Compressor，一次拖几十张进去，输出格式选 WebP。
上传后检查两件事：
- 首屏那张大图，关掉“延迟加载/懒加载”。WordPress 用 LiteSpeed Cache 的话，在“图片优化 → 懒加载”里把首屏图 URL 填进排除列表；用 WP Rocket 的话，在“媒体 → 懒加载”里排除首屏图。
- 图片要有宽高。WordPress 在文章里插入图片时会自动写宽高；主题首页的大图，在“外观 → 自定义 → 首页设置/Header”里重新上传，通常会自动带尺寸。
WordPress 还可以装 ShortPixel、Imagify 或 Smush 自动压图。装一个就够，别三个一起装。
Halo 和 Typecho 在后台上传附件，主题设置里换首屏图；图片本身用上面的工具压好再传。
3. 设置缓存
缓存这事，说白了就是把做好的网页存一份，下个访客来了直接拿走。
WordPress 后台这样设置：
- 后台 → 插件 → 安装插件，搜索 LiteSpeed Cache。
- 点“安装”，再点“启用”。
- 左侧菜单点 LiteSpeed Cache → 缓存。
- 把“页面缓存”打开。
- 找到“排除 URI”或“不缓存 URI”，把这些一行一个填进去：
/wp-admin/wp-login.php/cart//checkout//my-account/
- 点“工具箱 → 清除全部”，清一次缓存。
装 WP Super Cache 也可以：后台 → 插件 → 安装 → 启用 → 设置 → 开启缓存 → 在“不缓存”里填同样的路径。两个缓存插件只能留一个。
Typecho：后台 → 控制台 → 插件，启用 TpCache。没有这个插件，上传插件包再启用。
3.1 缓存插件改了什么
插件会自动发这些缓存头，不需要你手写：
Cache-Control: public, max-age=31536000, immutable
这行的意思是：图片、CSS、JS 可以存一年，文件名变了才换。插件会给这些文件加版本号或 hash，hash 就是文件名里那串随机字符。
Cache-Control: public, max-age=0, s-maxage=60, stale-while-revalidate=86400
这行的意思是：网页每次先问服务器有没有新版，CDN 可以存 60 秒，过期后先用旧版顶一天。
打开插件，确认这几项：
- 图片、CSS、JS 可以长期缓存。
- 网页不要存一年。
- 登录页、购物车、结算页、后台不缓存。
3.2 怎么确认缓存生效
用无痕窗口打开网站两次。第二次明显变快，通常就是生效了。
想看得更准：按 F12 → Network → 刷新页面 → 点图片请求 → 看 Response Headers 里的 x-cache 或 cf-cache-status。
HIT：命中了，CDN 直接返回。MISS：没命中，回源站拿。DYNAMIC：这个请求没走缓存，HTML 或接口常见。EXPIRED：缓存过期，正在重新取。
图片、CSS、JS 出现 HIT 就对了。图片一直是 MISS，检查 CDN 的缓存规则有没有包含 jpg、png、webp、css、js 这些后缀，路径有没有写错。
缓存层级从上到下是：浏览器 → CDN → 页面缓存 → 对象缓存 → 数据库。越靠上命中，用户等得越短。
你实际要做的只有前两层：装缓存插件、开页面缓存；上了 CDN 再配 CDN 缓存。对象缓存需要 Redis，主机支持就开；没有 Redis，页面缓存也够用。
4. 清理插件和主题
后台 → 插件，把插件列出来，标成“在用、不用、不确定”。备份之后，一次停一个，刷新首页、文章页、后台，看有没有变快。
不用的直接删，不要只停用。同类插件只留一个：缓存一个、SEO 一个、图片优化一个。
主题也一样。带粒子、音乐、欢迎语、外部字体的主题，通常比轻量主题慢。换主题前备份，换完测菜单、表单、轮播和支付。
5. 使用 CDN
CDN 是把图片、CSS、JS 复制到各地机房。北京用户从北京拿，伦敦用户从伦敦拿，不用每次都回源站。回源就是 CDN 没存到，回你真正的服务器拿。
压图、开缓存，再上 CDN。一个 3MB 的首页，放到 CDN 还是 3MB。
以阿里云 CDN 为例：
- 登录阿里云控制台，搜索“CDN”，点“域名管理 → 添加域名”。
- 加速域名填
cdn.你的域名.com或www.你的域名.com。 - 业务类型选“图片小文件”。
- 源站填你的服务器 IP 或源站域名。
- 提交后，复制页面上的 CNAME 地址。
- 打开域名解析控制台，添加一条 CNAME 记录：主机记录填
cdn或www，记录值粘贴刚才的 CNAME。 - 回到 CDN 控制台，等状态变成“正常”。
- 在“HTTPS 配置”里上传证书，或申请免费证书，开启 HTTPS。
- 在“缓存配置”里加规则：
jpg,png,webp,css,js缓存 30 天；html缓存 60 秒；/wp-admin/、/cart/、/checkout/、/my-account/不缓存。
腾讯云 CDN 的步骤类似：控制台 → CDN → 域名管理 → 添加域名 → 填加速域名、源站、业务类型 → 提交 → 按提示配 CNAME 和 HTTPS。
CNAME 就是告诉你的域名：以后访问网站先找 CDN，不要直接找服务器。HTTPS 是浏览器地址栏那把锁，证书过期会报警。
配完检查三个地方：网站能正常打开、HTTPS 没报错、登录和购物车正常。
6. 检查服务器
如果主要内容出现慢、服务器回话慢，开缓存；缓存开了还慢，再查服务器。
在电脑终端运行这条命令，把 你的域名 换成自己的：
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" https://你的域名/
多跑几次，TTFB 经常超过 1 秒，再往下查。
登录主机面板，看 CPU、内存、磁盘有没有长期接近 100%。再看数据库：
- 宝塔面板：数据库 → 管理 → phpMyAdmin → SQL，执行
SHOW PROCESSLIST;，看Time很长的查询。 - 宝塔面板：软件商店 → Nginx → 配置修改，确认
gzip on;已开。 - WordPress 装 Query Monitor：后台 → 插件 → 安装 → 启用，刷新页面，看“查询”里哪条 SQL 最慢。
慢查询多，给常用字段加索引；不会加索引，把慢 SQL 复制出来，在 phpMyAdmin 里点“解释”，看 rows 是不是很大。rows 很大，通常是缺索引或一次查太多。
服务器配置不够再升级。别一上来就换最贵的服务器，很多问题只是缓存没开、图片太大、插件太多。
7. 不同网站的做法
六类站点的瓶颈不同，先对号入座，再决定先动哪里。
博客和 CMS：图片压下来、缓存开着、不用的插件删掉。WordPress 只留一个缓存插件；Halo 后台 → 外观 → 主题 → 主题设置，关掉粒子、音乐、外部字体，再停不用的插件；Typecho 在主机面板的 PHP 设置里把版本切到 8.0 以上，再开 TpCache、处理评论头像。
企业官网：首屏图压到 200KB，视频用封面图，轮播留一到两张，在线客服和地图点击后再加载。表单、后台、登录路径不缓存。
电商：商品图压下来，列表用缩略图，详情首图不懒加载。购物车、结算、账户不缓存；结算页只留支付和风控脚本；营销像素能关就关。
内容站：图片和广告是大头。广告位留好高度，别加载后把正文挤下去；热点文章开缓存；评论区、相关推荐延迟加载。
SaaS/后台：登录后的页面不能整页缓存。首屏只加载当前页的 JS，图表、编辑器按需加载；接口慢就查数据库和缓存。
文档和社区：文档站可以整站静态化；社区分游客和登录用户，游客页可以缓存，登录后的消息、设置不能缓存。头像换成本地或代理缓存。
8. 验证效果
改之前记下同一个页面、同一台手机、同一个网络的打开时间。改完清缓存，用无痕窗口再打开一次。
同一类页面优化前后的瀑布：主图提前、JS 延后、第三方脚本不再挡首屏。
一次只改一个地方。不要一次装三个插件、换主题、又上 CDN，结果不知道哪个起了作用。
手机 4G 下再测一遍。登录、购物车、支付、评论各走一遍，确认没被优化弄坏。
9. 从哪下手
优先级放在一张图里：先做高影响、低成本的事。
图片和缓存最值得动：首屏图压到 200KB 左右，换成 WebP；缓存只留一个插件，打开页面缓存，把登录、购物车、结算和后台排除。不用的插件停掉，在线客服、统计、地图改成点击后再加载。做完这些，用手机打开看看首屏要几秒。
10. 小结
网站提速不是把每个技巧都做一遍。大多数站点，把图片压小、缓存开对、插件删减，就能快一大截。
按上面的顺序做，一次只改一个地方；改完用手机打开看看，确认登录、购物车、支付都没坏。