很多SEO公司说 PageSpeed Insights (PSI) 跟 SEO 无关，其实错了，Google 早已经明确表达“网站使用者体验”与“网站效能”跟 SEO 有关，而 PSI 就是在帮助网站检测“网站使用者体验”、“网站效能”的重要工具，网站架构影响了SEO成效，如果能在PSI拿到高分，就等于在 SEO 有了更好的起跑点，这也是为什麽SEO必须跟网页设计做深度整合的原因。

　　什麽是 PageSpeed Insights (PSI)?

　　PageSpeed Insights (PSI) 是由 Google 提供的网站测试工具，主要是测试“网站使用者体验”与“网站效能”这两项，Google 定义了许多标准，让网站开发者或是网路行销可以依照这些指标去改善网站，让网站可以更符合使用者体验 (UX)，可以更快更好用。

　　PageSpeed Insights 怎麽测试?

　　首先到 PageSpeed Insights 测试网站，输入想测试的网址，按下【分析】按钮，等待结果出来，结果会分成行动装置、电脑结果，通常我们会以行动装置报告为主，因为 Google 自然排名是以手机版网站作为排名依据。

　　1、用 PSI 测试网站效能与使用者体验

　　第一区测试结果是“使用者体验”

　　往下的第二区测试报告是“网站效能”

　　PageSpeed Insights 测试指标有哪些?

　　PSI测试分成“使用者体验”与“网站效能”这两项，使用者体验包含 3 项核心指标 (LCP、FID、CLS) + 3 项其他指标 (FCP、INP、TTFB)，网站效能则有 6 项指标 (FCP、SI、LCP、TTI 、TBT、CLS)，其中的LCP、CLS、FCP在两项测试指标是重複的。

　　什麽是网站体验核心指标?

　　Google 在2020年推出网站体验核心指标 (Core Web Vitals)，用来测量网站的使用者体验是不是良好，以 LCP (最大内容绘制)、FID (首次输入延迟)、CLS (累计版面配置转移) 这三项作为核心指标，测试结果绿色是优良，黄色是待改善，红色是不及格，可以从 PageSpeed Insights 测试中得到数据，如果想更进一步知道哪些页面的 Core Web Vitals (网站体验核心指标) 需要改善，可以到Google Search Console 的网站体验核心指标找到资讯。

　　Core Web Vitals 的三个测试指标

　　GSC 的网站使用体验核心指标

　　PageSpeed Insights 的 9 种优化指标

　　使用者体验、网站效能加起来总共有 9 种指标，包含 LCP (最大内容绘制) 、FID (首次输入延迟) 、CLS (累计版面配置转移) 、 FCP (首次内容绘制) 、INP (下个画面的互动) 、TTFB (跑出第一字节时间) 、SI (速度指数) 、TTI (可互动时间)、TBT (封锁时间总计)，让我们看一下各代表什麽意思，以及该如何优化，因为涉及太多技术，我们尽量深入浅出让大家理解。

　　LCP (最大内容绘制) 如何优化?

　　LCP (Largest Contentful Paint) 最大内容绘制，把网页想像是一块画布，渲染就是作画，LCP 就是画布上最大那一块的绘制时间，LCP 在测试网站最大内容载入的时间，最大内容可能是图片或影片，也可能是文字，LCP 时间越快越好，一般网站为例，LCP 通常是形象大图，或者是影片，这些内容优化就变得非常重要，也是影响 LCP 的最大因素。

　　LCP 是网页中最大内容 (此例是大图)

　　LCP 测试标准最佳是低于 2.5 sec

　　使用PRPL模式做到即时加载

1. 　　Preload：预先加载重要档案。(例如：预先加载 CSS)。
2. 　　Render：加速渲染初始路线。(例如：使用 SSR 伺服器端渲染)
3. 　　Pre-cache：预缓存原本有的档案。 (例如：使用 API 预缓存)
4. 　　Lazy load：延迟加载其他路线和非关键的档案。 (例如：延迟载入图片)

　　优化关键渲染路径

　　精简DOM的架构，优化HTML程式码，与各种路径流程，包含CSS、JavaScrip...

　　优化您的CSS

　　精简CSS提昇载入速度，没有用到的CSS一定要移除，可减少行数并整合语法。

　　优化网站图片

　　压缩图片提昇载入速度，图片压缩到肉眼无法分辨的品质即可，不要使用原图直接上架。

　　优化网页字体

　　使用网页加载速度快的字体，可以的话，尽量用浏览器预设的字体。

　　优化您的JavaScrip

　　优化 Client 端的 JavaScrip，避免使用载入慢的 JavaScrip，尤其是複杂的动画或效果。

　　FID (首次输入延迟) 如何优化?

　　FID (First Input Delay)首次输入延迟，就是网页被使用者第一次点击 (Click) 所需要等待的时间，无论是点击连结、按钮、下拉选单，等待时间低于100毫秒就算是好的FID，会用首次输入作为指标的是因为首次使用者体验是最重要的感受。

　　FID 测试标准需低于 100ms

　　减少第三方代码的影响

　　把没有用的第三方代码移除，或是减少使用不必要的代码

　　减少JavaScript 执行时间

　　避免使用又大又慢的JavaScript，没用到的JavaScript要移除，压缩程式码，拆解JavaScript程式码分开执行。

　　最小化主线程工作

　　检视网站内容显示的主要流程，将每一个步骤最小化。

　　保持较低的请求数和较小的传输大小

　　减少请求的数量，包含html、CSS、JavaScript、图片、字体、媒体、动画(GIF)

　　CLS (累计版面配置转移) 如何优化?

　　CLS (Cumulative Layout Shift) 累计版面配置转移是在测试网站的“视觉稳定性”，你有没有过一种经验，要点一个按钮或是连结的时候，画面忽然跳掉或是画面错位，甚至跳出广告，造成你无法点击的状况，记录版面配置转移这就是CLS指标存在的目的。

　　CLS 测试标准需低于0.1分以下

　　固定图片或影片尺寸

　　如果网页有图片或是尺寸建议就是设定尺寸，或是使用CSS容器去预留需要的网页配置，避免内容重叠或是跑版，可以用 unsized-media 强制执行此行为(有支援的浏览器才可以)。

　　避免使用跳出视窗功能

　　除非是使用者点击按钮或连结，否则就不要制作自动跳出视窗的任何内容，以免发生内容佈局的偏移，造成不佳的使用者体验。

　　选择简单的动画

　　尽量採用单纯的换图动画，而不是会跳来跳去的动画，避免产生佈局偏移，动画是为了示意与转场，帮助内容的顺畅连续性，而不是花俏动画。

　　FCP (首次内容绘制)怎麽优化?

　　FCP (First Contentful Paint) 是跑出网站第一个内容的时间，FCP的内容可以是文本、图片、元素，把第一个出现的内容时间作为指标，也代表整个网站流程优化的展现。

　　FCP、FID、TTI 指标之间差异

　　FCP 首次内容绘制时间需低于 1.8 sec

　　消除阻塞渲染的资源

　　找出阻碍网页显示内容的原因，并将它排除，包含html、CSS、JavaScript、第三方程式…。

　　优化CSS

　　减少CSS程式码，把没有用到的CSS 移除

　　预连接到所需的来源

　　如果有需要预先连结的第三方网站，可以先预先设定连接。

　　减少服务器响应时间(TTFB)

　　TTFB是资源请求到回应的时间指标，减少TTFB时间就能加速FCP的时间。

　　避免多个页面重定向

　　从一个http跳到另一个http是很耗时间的，所以尽量不要使用页面重定向，尤其是多个页面重定向(301/302)

　　预加载关键请求

　　把关键重要的CSS、JavaScript预先加载进来，可以加快载入的时间。

　　避免巨大的网路负载

　　避免使用需要从外面载入网站的资源，以免连外面网站的时候花费太多时间。

　　高效缓存静态资料

　　利用Cache-Control暂存字型、图像、媒体… 静态资源，加快载入的速度。

　　避免DOM过大

　　写DOM架构的时候，必须精简程式，需要时才创建DOM 节点，不需要时应把节点移除，不要让DOM结构过大。

　　DOM是什麽?

　　DOM全名是Document Object Model 中文称作“文件物件模型”，DOM就是把HTML的各个标籤，包括文字、图片…，定义成物件，物件会形成一个树状结构，DOM也可以说是网站原始码的结构。

　　最小化关键请求深度

　　最小程度的使用关键资源连结数量，或者延迟下载，改变加载顺序，缩短下载路径长度

　　确保文字在网页加载时可以看到

　　字体需要时间才能载入完成，还没载完之前会看不到文字，要先用浏览器预设字体先暂时显示载完再换字体，以免FCP时间拉长。

　　INP (下个画面的互动) 怎麽优化?

　　INP (Time to First Byte) 下个互动画面的时间指标，INP是在测量网页操作流程的所有点击的反应能力，当使用者点击后产生反应的时间，越不顺畅的就会花上更多时间，主要是再测试滑鼠、触控银幕、键盘的点击后的反应时间，跟FID有一点相似，但FID只测量第一次，INP却是测量全部的点击反应，是更全面的指标。

　　INP 测试标准要低于 200ms

　　减少不需要的程式码

　　把多馀的CSS、JavaScript移除，没有用的一定要移除，减少加载的负载

　　把程式码拆开执行

　　在网页加载期间延迟加载比较不重要的JavaScript

　　避免DOM过大

　　精简DOM架构，减少DOM 节点，把不需要的节点移除，不要让DOM过大。

　　移除没有用到的第三方程式码

　　检查是不是有没用到的第三方程式，如果有就移除，或者用更精简的方式使用。

　　TTFB (跑出第一字节时间) 怎麽优化?

　　TTFB (Time to First Byte) 是测量从网站请求到回应完成的时间指标，主要在测试从主机、系统、程式之间的效能速度，从这个指标就能知道网站主机效能、频宽速度。

　　TTFB 测试标准需低于800 ms

　　选择好的网站主机

　　网站代管商的主机效能会影响TTFB数据，所以有足够效能与频宽是非常重要的。

　　採用专业的程式

　　好的网站设计公司可以写出效能好的程式，连接外速稳定的资料库。

　　使用CDN服务

　　如果希望全世界的节点都有一定的反应速度，可以採用CDN服务，可以让速度加快，以提昇TTFB效率。

　　避免多次重定向

　　网站重定向很浪费时间，一定要避免多次的网址重定向，将CLS预先提交给HSTS预载列表，减少HTTP 重定向到HTTPS的时间。

　　预先连结网站外的资源

　　如果有需要外连的资源，可以提前预先连结，减少加载时间

　　使用HTTP/2 或 HTTP/3

　　使用新一代的网页伺服器，可以提昇反应时间。

　　预先加载需要的资源

　　把关键重要的CSS、JavaScript预先加载进来，可以加快载入的时间。

　　SI (速度指数) 怎麽优化?

　　SI (Speed Index) 指数是测量“内容的视觉显示速度”，就是从没有到看到完整视觉页面的时间，是跟身体感觉的速度是很接近的数值，速度要低于3.4秒才算快。

　　SI 标准需低于 3.4秒

　　最小化主线程工作

　　这个主线程优化工作范围是很大，包含html、CSS、JavaScript、图片、动画，整个流程都是。

　　减少JavaScript执行时间

　　JavaScript 是一个很吃时间的程式，载入过多複杂的JavaScript (动画效果)，都会严重影响SI数值。

　　确保字体保持显示状态

　　字型载入是需要时间的，尤其是非浏览器预设的字型，都是需要时间载入的，如果无法使用预设字体，至少要先让网页显示，避免画面缺字，也会影响SI的时间。

　　TTI (可互动时间) 怎麽优化?

　　TTI (Time to Interactive) 可互动时间是指“网页进入可互动状态”所花费的时间，简单来说就是网站要载入完成才能开始互动，HTML、CSS、JavaScript、图片…必须都已经载入完成，互动的点击或功能才能真正使用，而TTI就是载完可互动时所花的时间。

　　TTI 标准需低于 3.8秒

　　减少不必要的JavaScript

　　删除不需要JavaScript，或是延后载入不重要的JavaScript，都可以提昇TTI的效能。

　　以PRP模式减少负载

　　Preload：预先加载重要档案 (例如：预先加载CSS)。

　　Render：加速渲染初始路线。(例如：使用SSR伺服器端渲染)

　　Pre-cache：预缓存原本有的档案。(例如：使用API预缓存)

　　Lazy load：延迟加载其他路线和非关键的档案 (例如：延迟载入图片)

　　优化第三方JavaScript

　　很多第三方JavaScript都会拖垮网站速度，可以试著整理一下第三方JavaScript，不需要的JavaScript移除，或者与先载入需要的JavaScript。

　　TBT (封锁时间总计) 怎麽优化?

　　TBT (Total Blocking Time) 是测量用户输入后的延迟累计的时间，包含滑鼠点击、银幕点击、按下键盘的等待时间，主要是把FCP(首次内容绘制)、TTI(可互动时间)的时间加总。

　　TBT 标准需低于 200毫秒

　　优化网站程式

　　程式码包含HTML、CSS、JavaScript、图片压缩、第三方程式码…，只要会延迟时间的因素都要排除。

　　提昇主机与系统效能

　　主机效能与反应时间，资料库的回应效率，都会影响TBT数值，所以要把主机、系统都提升到一定程度的规格跟效能。

　　结论

　　PageSpeed Insights(PSI) 不只对“网站速度做测试”，还包含了前端程式、主机效能、使用者体验、网站内容…，进行全面性的测试，把PSI分数优化到高分，就代表“网站符合 Google 定义的优良网站条件”，要做Google的SEO当然要按照Google的网站标准来优化，PSI的分数低不代表网站速度慢，也不代表SEO完全没有希望，但如果网站跟产业是高竞争，那PSI检测与调教肯定是不能马虎了，必须找真正可以制作PSI高分的网页设计公司。

延伸阅读

• PageSpeed Insights 是什麽？ 对SEO有影响？

  很多SEO公司说PageSpeedInsights(PSI)跟SEO无关，其实错了，Google早已经明确表达“网站使用者体验”与“网站效能”跟SEO有关，而PSI就是在帮助网...