EP557-562. “UI/UX/CX 概念 + 网站速度优化（上）”

• Pat Flynn 的网站加载只要 0.3 秒、体积 630KB——这就是专业优化过的网站和普通网站之间的真实差距
• PNG 转 JPG 再压缩，一张背景图能从 2.7MB 缩到 465KB，加载速度直接快 8 倍多
• UI 好看但 UX 难用，或者 UX 顺手但 UI 难看，两个都不算好体验——CX 才是两者加起来的综合分数

重点内容

EP557：UI / UX / CX 是什么

这三个概念经常被混用，但各自有明确的含义：

三者的关系：

• UI 和 UX 是 CX 的两个组成部分
• UI 好但 UX 差 → 好看但难用（像好看却功能混乱的 App）
• UX 好但 UI 差 → 好用但不吸引人（像简陋但导航清晰的老网站）
• 两者都好 → CX 才好 → 才能留住客户、产生转化

为什么 CX 对 WordPress 网站重要：

• 好的 CX → 用户停留更久 → 跳出率（Bounce Rate）降低 → 搜索引擎认为你的内容有价值 → SEO 排名提升
• 好的 CX → 用户更愿意订阅、购买、分享

EP558：网站测速工具与基准

在开始优化之前，先测速——找出问题在哪。

推荐测速工具：

课程演示的测速结果：

参考对比（Pat Flynn 的网站）： 加载 0.3 秒、体积 630KB——这就是专业优化过的网站的水平。

[截图：uptime.com 测速工具结果页，加载时间/体积/请求数量指标]

EP559：图片加载速度优化

图片通常占网页总体积的 60–80%，是最值得优化的地方。

核心工具：imagecompressor.com（也叫 Optimize Zilla）

压缩质量参考表：

操作流程：

1. 上传图片到 imagecompressor.com
2. 拖动质量滑块（从 100 往下）→ 对比左右两张图片，找肉眼看不出差别的最低质量

[截图：imagecompressor.com 质量滑块与压缩前后对比效果]

1. 下载压缩后的图片
2. 回 WordPress 媒体库 → 替换原图

Elementor 图片尺寸设置： 在 Elementor 里添加图片时，Image Size 不要选「Full」，选「Medium（300×300）」 原因：Full 加载原始分辨率图片，即使压缩了文件大小，像素过多依然占用带宽。Medium 足够屏幕显示用。

EP560：PNG 转 JPG（体积再减 70%+）

PNG 格式支持透明背景（Logo 用），但文件体积比 JPG 大很多。不需要透明背景的图片全部应该用 JPG。

工具：png2jpg.com

课程演示效果： 一张 PNG 背景图：

• 原始 PNG：2.7MB，加载 4.2 秒
• PNG → JPG → 再压缩至 quality 25：465KB，加载 0.5 秒
• 体积缩小 83%，速度提升 8.4 倍

操作步骤：

1. png2jpg.com → 上传 PNG → 下载 JPG
2. 把下载的 JPG 再扔进 imagecompressor.com → quality 25（背景类图片可以更激进压缩）→ 下载
3. 替换媒体库中的原图

EP561：消除渲染阻塞 JavaScript & CSS

浏览器加载页面时，遇到 JS 和 CSS 文件会暂停渲染，等文件加载完才继续——这叫「渲染阻塞」，会显著拖慢首屏速度。

推荐方案：双插件组合

插件 1：Autoptimize

• WordPress 后台 → Plugins → Add New → 搜索「Autoptimize」→ Install → Activate
• 设置 → Autoptimize → 勾选：
  • ✅ Optimize JavaScript Code
  • ✅ Optimize CSS Code
  • ✅ Optimize HTML Code

[截图：Autoptimize 插件设置页勾选项]

插件 2：Critical CSS（将 CSS 分为关键和非关键两部分）

• 安装 Critical CSS 插件
• 你需要先生成「Critical Path CSS」代码：
  1. 前往 sitelocity.com/critical-path-css-generator
  2. 输入你的网站 URL → Generate
  3. 复制生成的 CSS 代码
  4. 回到 WordPress → Critical CSS 设置 → 粘贴到相应字段
• 效果：只把首屏需要的 CSS 优先加载，其他 CSS 延后加载

课程优化结果： 请求数量从 60 个 → 31 个（减少了 48%）

可选插件：Async JavaScript

• 让 JS 文件异步加载（不阻塞渲染）
• 适合不使用 jQuery 的主题；如果你的网站依赖 jQuery 则谨慎使用

EP562：服务器响应时间（TTFB）与 CDN 选择

TTFB（Time To First Byte）= 浏览器发出请求到收到服务器第一个字节的时间。TTFB 高意味着服务器本身慢，图片压缩再好也帮不了多少。

托管类型对 TTFB 的影响：

CDN（Content Delivery Network，内容分发网络）： CDN 把你的网站静态资源（图片、JS、CSS）缓存到全球各地的节点服务器，访客从最近的节点获取资源，大幅减少 TTFB。

CDN 选项对比：

核心概念速查

行动步骤

1. 打开 uptime.com/freetools/website-speed-test → 测你的网站速度，记录：加载时间、体积、请求数
2. 媒体库里的 PNG 图片（不需要透明背景的）→ png2jpg.com 转 JPG → imagecompressor.com 压缩至 quality 40–70
3. 背景大图 → quality 60–70；缩略图 → quality 25–40
4. Elementor 图片尺寸全部改为 Medium（非 Full）
5. 安装 Autoptimize → 开启 JS + CSS + HTML 优化
6. 安装 Critical CSS → sitelocity.com 生成 Critical Path CSS → 粘贴到插件设置
7. 考虑安装 Cloudflare CDN（下几讲详细讲）

工具 & 资源

常见误区

• ❌ 压缩图片后仍用 Full 尺寸显示——体积减小了但像素依然过多，Elementor 里改为 Medium
• ❌ 所有图片一律压缩到 quality 25——背景大图质量太低会模糊，按图片类型选质量
• ❌ Logo 和透明图标也转 JPG——JPG 不支持透明，Logo 必须保留 PNG
• ❌ 只优化首页，不测其他页面——每个页面都是独立 URL，每个都需要单独优化

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 557
2. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 558
3. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 559
4. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 560
5. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 561
6. The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 562

Blog / Website：

1. uptime.com/freetools/website-speed-test
2. imagecompressor.com
3. png2jpg.com
4. sitelocity.com/critical-path-css-generator