EP05. “手机模拟（Device Mode）与 Lighthouse 性能报告”
🔒 登录后可标记已读- 马来西亚大部分网站流量来自手机，但很多人只在电脑上检查网站——Device Mode 让你在电脑上直接看手机版长什么样
- Device Mode 可以选 iPhone、Galaxy 等机型尺寸、转横屏、模拟慢速网络，改 Elementor 手机版排版时边改边看
- Lighthouse 一键跑出 Performance、Accessibility、Best Practices、SEO 四项分数，还会列出具体怎么改
- Lighthouse 是实验室数据（在你电脑上模拟），跟 PageSpeed Insights 里的真实用户数据不一样，两个一起看才准
适用版本
- Google Chrome 桌面版，界面以 2026-09 为准
重点内容
打开 Device Mode
- DevTools 左上角的手机图标（Toggle device toolbar）
- 或在 DevTools 里按
Ctrl+Shift+M（macOSCmd+Shift+M） - 网页上方会出现一条设备工具列
设备工具列
| 选项 | 作用 |
|---|---|
| Dimensions 下拉 | 选机型（iPhone、Pixel、Galaxy 等）或 Responsive（自己拖拉宽度） |
| 宽 × 高输入框 | 直接打像素尺寸，例如 375 × 812 |
| 缩放百分比 | 屏幕放不下时缩小显示 |
| 旋转图标 | 切换直屏 / 横屏 |
| 节流下拉 | 模拟 Mid-tier mobile / Low-tier mobile 的网络和 CPU 速度 |
| ⋮ 更多选项 | Show media queries（显示断点）、Show rulers、Capture screenshot、Add device pixel ratio |
💡 ⋮ → Show media queries 会在上方显示网站 CSS 的断点色条，点一下就跳到那个宽度，找出「刚好在哪个宽度开始跑版」。
常用测试宽度
| 设备类型 | 宽度（CSS 像素） | 对应 Elementor 断点 |
|---|---|---|
| 小手机 | 360 | Mobile |
| 一般手机（iPhone） | 390–430 | Mobile |
| 平板直屏 | 768 | Tablet |
| 平板横屏 / 小笔电 | 1024 | Tablet / Desktop 交界 |
| 桌面 | 1366–1920 | Desktop |
📌 Elementor 默认断点：Mobile ≤ 767px、Tablet ≤ 1024px，可以在 Site Settings → Layout → Breakpoints 修改。
⚠️ Device Mode 只是模拟屏幕尺寸和触控，不是真的 iOS Safari 或 Android 浏览器。字体渲染、Safari 独有的 bug、真实的手机性能都模拟不出来，上线前还是要用真手机看一次。
Lighthouse：一键网站体检
跑一份报告：
- 打开 DevTools → Lighthouse 分页（在 » 里面）
- Mode 选 Navigation（默认，测试页面从头载入）
- Device 选 Mobile 或 Desktop
- Categories 勾选要测的项目
- 按 Analyze page load，等大约 30–60 秒
💡 用无痕模式（Ctrl+Shift+N）跑，避免浏览器插件（广告拦截、翻译）影响分数。
| 模式 | 用途 |
|---|---|
| Navigation | 测页面载入（最常用） |
| Timespan | 录一段时间内的互动，例如点菜单、滚动 |
| Snapshot | 测当下这个画面的状态，例如打开弹窗后的无障碍检查 |
四项分数
| 类别 | 检查什么 |
|---|---|
| Performance | 载入速度、互动反应、版面稳定度 |
| Accessibility | 无障碍：颜色对比、图片 alt 文字、按钮标签、字体大小 |
| Best Practices | HTTPS、Console 错误、过时的 API、图片比例 |
| SEO | 基本 SEO：title、meta description、可被索引、链接文字、手机友善 |
| 分数 | 颜色 | 意思 |
|---|---|---|
| 90–100 | 🟢 绿 | 良好 |
| 50–89 | 🟠 橙 | 需要改进 |
| 0–49 | 🔴 红 | 差 |
Performance 的关键指标
| 指标 | 意思 | 良好标准 |
|---|---|---|
| LCP（Largest Contentful Paint） | 最大的内容（通常是横幅图或大标题）出现的时间 | ≤ 2.5 秒 |
| CLS（Cumulative Layout Shift） | 版面跳动的程度（例如图片载入后把文字推下去） | ≤ 0.1 |
| TBT（Total Blocking Time） | JavaScript 卡住页面、不能互动的总时间（实验室指标） | 越低越好 |
| FCP（First Contentful Paint） | 第一个内容出现的时间 | 越快越好 |
| Speed Index | 页面内容看起来填满的速度 | 越快越好 |
📌 Google 的 Core Web Vitals 是 LCP、INP、CLS 三项。INP（互动反应时间，良好 ≤ 200 毫秒）要真实用户操作才量得到，Lighthouse 的 Navigation 模式用 TBT 当参考。
看报告：往下找「怎么改」
- 分数下面的 Diagnostics / Insights 会列出具体问题，例如「图片没有设定尺寸」「移除未使用的 JavaScript」「使用新一代图片格式」
- 点开每一项会列出是哪些文件、可以省多少时间或 KB
- WordPress 网站常见的建议和对应做法：
| Lighthouse 建议 | WordPress 上的做法 |
|---|---|
| 图片太大 / 用新格式 | 图片压缩插件、转 WebP |
| 移除阻塞渲染的资源 | 缓存插件的 CSS/JS 延迟载入设定 |
| 减少服务器回应时间 | 页面缓存、升级主机 |
| 图片没有 width / height | 让 CLS 变差，在图片上设定尺寸 |
| 按钮 / 链接没有可读名称 | 在 Elementor 图标按钮加上 aria-label |
Lighthouse vs PageSpeed Insights
| DevTools Lighthouse | PageSpeed Insights（pagespeed.web.dev） | |
|---|---|---|
| 在哪里跑 | 你自己的电脑 | Google 服务器 |
| 数据类型 | 只有实验室数据 | 实验室数据（同样是 Lighthouse）+ 真实用户数据（Chrome 用户体验报告，流量够大的网站才有） |
| 能不能测本地 / 需要登录的页面 | ✅ 可以 | ❌ 只能测公开网址 |
| 分数稳定度 | 受你的电脑和网络影响 | 较一致 |
💡 分数每次跑都会有些浮动，比较优化前后时，同一个工具、同样设定跑 3 次取中间值比较准。
学完你会
- ✅ 用 Device Mode 检查手机、平板版面
- ✅ 用 Show media queries 找出跑版的断点
- ✅ 跑 Lighthouse 报告并看懂四项分数
- ✅ 看懂 LCP、CLS、TBT 等指标，并知道对应的 WordPress 优化方向
常见错误
- ❌ 只用 Device Mode 检查，不看真手机：Safari 的问题模拟不出来。
- ❌ 开着一堆浏览器插件跑 Lighthouse：插件会拖低分数，用无痕模式。
- ❌ 只追求 Performance 100 分：真实用户数据（Core Web Vitals）过关比实验室分数更重要。
- ❌ 只测首页：产品页、结账页、文章页也要测，常常问题更多。
- ❌ Lighthouse 只跑一次就下结论：分数会浮动，多跑几次比较。
Sources
官方文档：