页面体验

页面体验是一组信号，包括核心网页指标 (CWV)、移动友好性、HTTPS 和侵入式插页广告指南，Google 使用这些信号来推断网站上的用户体验。.

页面体验是对网站性能而非内容的评估。虽然谷歌在回答用户查询时仍然优先考虑内容相关性，但当多个网站提供的内容水平相近时，页面体验实际上就成了决定性的因素。.

页面体验的四个关键指标是：

1. 核心网络指标（CWV）
2. 移动友好性
3. HTTPS
4. 无侵入性间质 

什么是核心网络指标（CWV）？

用户体验指标 (CWV) 通过关注页面加载速度、对用户输入的响应速度以及视觉稳定性来衡量用户体验。这方面有三个指标：

• 最大内容绘制时间 (LCP)：这是指页面开始加载到首屏可见的最大文本或图像完全加载完毕之间的时间差。谷歌建议 LCP 不超过 2.5 秒。
• 首次输入延迟 (FID)：该指标衡量用户点击链接到浏览器开始处理页面事件处理程序之间的时间。谷歌建议 FID 不超过 100 毫秒。
• 累积布局偏移 (CLS)：该指标衡量用户浏览页面期间页面可见布局发生偏移的频率。布局偏移并不罕见，通常是由于图片、视频、API 或第三方内容对实时环境做出意外响应所致。Google 建议 CLS 值上限为 0.1。

什么是移动友好性？

谷歌在 2015 年 4 月的更新中引入了移动友好性指标，该指标可以提高移动友好型页面在移动搜索结果中的排名。.

实际上，谷歌将优先考虑那些确保其内容在移动设备上易于阅读的网站——这意味着无需缩放，登录按钮等触摸目标之间的距离不会太近，无需水平滚动，并且避免出现无法播放的内容。.

此次更新适用于单个页面，而非整个网站，也不会影响在台式机/笔记本电脑浏览器上查看的内容。.

什么是HTTPS？

HTTPS，即超文本传输​​安全协议，是HTTP互联网通信协议的安全版本。.

HTTPS 或 HTTP 构成每个 URL 的第一部分，称为“协议”。它位于域名之前，域名是 URL 中称为“权威机构”的部分。.

HTTPS 和 HTTP 的区别在于前者是安全的，而后者则不安全。实际操作中，这意味着用户通过 HTTP 连接登录网站时，会以未加密的明文形式发送个人信息。.

HTTPS 协议可以保护这种连接，这意味着用户浏览器和网站服务器之间传输的任何数据都会被加密。需要安全连接的网站需要 SSL 证书，用户的浏览器会检查并验证该证书。.

什么是侵入性间质性肺癌？

插页式广告是一种仅限移动设备使用的广告格式，它只会在内容自然切换时出现——例如当用户从一篇文章切换到下一篇文章时——并且在此过程中会覆盖整个屏幕。.

当插页式广告阻挡或部分遮挡用户对内容的视线时，会被视为一种干扰。移动网站上行为类似的对话框也属于此类。.

2.3.2 出版商在页面体验方面面临的挑战

大多数出版商最擅长的技能往往是内容创作、出版和营销，因此很少有时间去理解和优化各种页面体验支柱。.

资源有限意味着出版商很难证明投入时间和金钱去深入研究单个网页的后端是值得的，更不用说整个网站的后端了。.

即使出版商能够投入时间来解决这个问题，正如我们从上面看到的，页面体验是一个多方面的问题，需要采取整体方法才能带来有意义的性能提升。.

知道应该从四个页面体验信号中的哪一个入手着手处理，本身就是一件令人头疼的事情。.

2.3.3 页面体验对 SEO 重要吗？

页面体验对于发布商的 SEO 至关重要，因为优质的内容并不足以保证在搜索引擎结果页面 (SERP) 中获得靠前的位置。.

谷歌仍然将最佳信息放在首位，这意味着即使页面体验“欠佳” 。然而，在多家出版商提供优质主题报道的情况下，页面体验就成为影响搜索结果排名的重要决定因素。

页面体验的四大支柱对网站的SEO影响各不相同。最直接的影响来自于关注内容价值（CWV），这将直接提升网站的加载速度。.

大量研究表明，网站加载时间越长，观众失去兴趣的速度就越快，跳出率也就越高。.

例如，谷歌在 2018 年的一项研究发现，当页面加载时间从 1 秒增加到 3 秒时，跳出率上升了 32%

来源

谷歌2020年的另一项研究发现，通过CWV测试的新闻网站的放弃率比未通过测试的网站低22%。与此同时，雅虎日本的CLS得分提高了0.2分，每次会话的页面浏览量增长了15.1%，会话时长增长了13.3%。

虽然谷歌已经明确表示，它不会将跳出率作为排名信号，但高跳出率反映了谷歌确实关心的一些因素——即页面加载速度、响应速度和视觉稳定性。

面向移动设备用户的发布商需要确保其网站发出移动友好信号，以便谷歌和必应都能识别。这两家搜索引擎在向移动用户呈现搜索结果时，都会优先考虑对移动设备友好的网站。.

与内容访问量 (CWV) 和移动友好性相比，实施 HTTPS 对发布商 SEO 的影响要小得多。谷歌在 2014 年表示会将 HTTPS 作为排名信号，并在 2018 年开始在 Chrome 浏览器中将所有 HTTP 网站标记为“不安全”。然而，HTTPS 的最大优势在于增强数据安全性，尤其对于依赖订阅收入的商业模式而言更是如此。.

与此同时，侵入式插页广告或对话框会限制网络爬虫抓取和索引页面的能力，从而阻止搜索引擎对其进行排名，更不用说在搜索结果中排名靠前了。.

2.3.4 衡量页面体验

提升页面体验的第一步是评估您网站当前的有效性。.

有很多第一方和第三方工具可以实现这一点，但在本指南中，我们将着重介绍谷歌的第一方工具。.

评估 CWV

我们现在知道，内容访问量 (CWV) 是一个重要的排名因素。但是，如何衡量 CWV 呢？下表列出了最佳 CWV 值应落在哪些参数范围内，才能获得最佳页面体验。.

既然我们知道了需要衡量什么以及需要衡量多少，我们就可以看看如何衡量页面体验了。.

以下列出一些最常用的方法。.

1. Google Analytics 4 和 RUM 

对于出版商而言，第一个选择在技术上最具挑战性，除非您有优秀的开发人员协助实施，否则我们甚至不建议您考虑这个选择。.

我们这里指的是从您的网站收集用户数据，这个过程称为真实用户监测 (RUM)，然后使用 Google Analytics 4 (GA4) 分析结果。Google 还提供其他工具，例如 PageSpeed Insights (PSI)，它们使用数据抽样来评估您的网站。但是，如果您的目标是全面了解网站的用户体验，那么您需要从网站收集真实用户数据。.

我们建议使用 GA4 来完成这项任务，原因很简单，因为 Google 计划从 2023 年年中开始逐步淘汰上一代 Google Analytics（通用分析）(UA)。.

作为发布商，您应该已经设置好 GA4 帐户，以应对即将到来的切换。如果您还没有设置，请按照 Google 的指南进行操作，了解如何首次设置或将其添加到已启用 UA 的网站。

完成上述步骤后，下一步是从 Analytics 管理后台将 Google 的 BigQuery 数据仓库链接到 GA4。链接 BigQuery 后，您就可以使用 SQL 查询数据了。以下是关于如何链接这两个数据库的指南。

完成这些步骤后，我们现在可以将 Google 的网络指标库到您的网站。

该库是一个非常小的模块化 JavaScript 数据收集库，可在 GitHub 上获取。.

可以通过两种方式安装该库：一是通过在命令行终端运行“npm install web-vitals”从开源的 npm 在线仓库安装；二是……<script> tags on a content distribution network (CDN).

以下是此类脚本的示例：

来源

安装好 web-vitals 库后，即可使用Simo Ahava 创建和维护的 Google 推荐的自定义模板代码

标签安装完成后，CWV 指标和相关的归因数据就可以转发到 GA4。

设置好用于跟踪 GTM 数据的分析工具后，您就可以在 BigQuery 界面中查看事件数据。然后，您可以按如下方式查询这些数据：

来源

查询结果返回后，报告应该类似于这样：

来源

我们必须再次强调，这是一个开发者解决方案，实际上要复杂得多。但是，采用这个方案能让你获得最准确的网站性能数据。.

有关此过程的更详细解释，请查看 Google 的GA4 中查看 CWV 的指南。

虽然这是监测 CWV 最准确的方法，但也有更简单的方法来解决这个问题。.

2. PageSpeed Insights (PSI)

虽然 PSI 的准确性不如使用 GA/RUM 方法，但由于其易于使用，它经常被认为是测量 CWV 的最重要工具之一。.

虽然PSI可能仅使用来自Chrome用户体验报告（CrUX）中过去28天的真实用户体验样本，但它提供了一个简洁易懂的用户界面。这意味着解读数据的过程要简单得多。

正如您在下面的示例中所看到的，查看福布斯网站可以立即获得有关该出版商桌面和移动网站的大量信息。.

PSI 在评定“良好”、“需要改进”和“差”绩效等级时，会使用上述的绿色、黄色和红色类别。.

CrUX 的抽样方法意味着，虽然上述对福布斯的评估考虑了该网站的一些真实用户体验，但它无法考虑该网站的所有用户数据。

对于较小的地点来说，这种抽样方法会变得很成问题，因为其中许多地点不会出现在 CrUX 的现场数据中。.

不过，PSI 仍然可以利用从 Google开源 Lighthouse 工具。请参见以下示例：

这种方法的弊端在于，Lighthouse 使用预设的设备和网络设置来收集数据，而这些设置并不能反映用户的实际设置。这意味着它远不能替代真实的数据。.

3. Google 搜索控制台

GSC 是一款旨在为出版商提供网站内容、价值和可用性 (CWV) 问题概览的工具，为全面改进网站性能打开了大门。.

它通过根据状态、指标类型或主题相似性对URL性能报告进行分组来实现这一点。但它不会识别单个页面的问题，因此无法进行细致的修复。.

这就是PSI发挥作用的地方。不过值得注意的是，PSI的单页报告可能与GSC的汇总结果有显著差异。这是因为单页数据只是GSC汇总结果中的一个组成部分。.

登录GSC控制面板后，用户会在左侧看到“核心网络指标”选项卡。点击此选项卡，即可分别查看针对不同URL组的移动端和桌面端核心网络指标报告。.

尽管 CWV 指标有三个——LCP、FID 和 CLS——但 URL 将根据其在特定设备上表现最差的指标获得总体评分，这也会影响组报告。.

例如，如果移动端的 URL 收到较差的 FID 和良好的 LCP，则该 URL 在移动端将被标记为较差。.

再次强调，GSC 并非用于细粒度的修复。然而，它非常适合拥有大量相似页面的发布商。例如，新闻网站的文章页面可能采用相对标准的设计和布局，并将图片作为首屏最大的元素。在这种情况下，GSC 可以快速帮助识别一系列 URL 中的 LCP 问题。.

4. 灯塔

谷歌性能测量工具包中的最后一个工具是Lighthouse 。该工具与之前的工具完全不同，它基于一组预设参数来模拟用户性能。

它不使用现场数据，因此在实际应用方面较为有限。例如，现场数据会受到用户网络连接及其与站点服务器距离的影响，而 Lighthouse 则模拟中端设备在受控环境中收集数据。.

需要注意的是，Lighthouse 的评分并非仅仅是 CWV 评分的简单叠加。它排除了 FID（最终用户交互），因为实验室数据本身就不包含最终用户的交互，同时加入了总阻塞时间 (TBT)、速度指数 (SI) 和交互时间 (TTI) 等指标。对于那些希望在实验室中模拟 FID 体验的用户来说，TBT 可以作为 FID 的替代指标。.

但是，我们不建议将 Lighthouse 作为主要的测量工具。它更应该与 PSI 配合使用，作为辅助工具来帮助排查特定的页面问题。.

希望在测试中使用 Lighthouse 的发布商可以通过Chrome Devtools （直接内置于 Chrome 浏览器中）、Chrome 浏览器的扩展程序或访问web.dev/measure。

Lighthouse 将审核您的网页，并从四个方面给出 100 分制的评分：

• 表现

• 无障碍

• 最佳实践

• SEO

以下是我们通过 web.dev 选项设置主页后的效果。.

评估移动设备友好性

移动网页设计与传统的桌面网页设计不同，因为移动设备的屏幕较小，硬件性能通常较弱，并且完全依赖触摸输入。.

移动友好型网站会优先考虑用户体验，并遵循一系列最佳实践，我们稍后会详细介绍。目前，检查网页是否适合移动设备的最佳方法是使用 Google 的移动设备友好性测试工具。

输入适合移动设备访问的网页网址，将返回以下结果：

未能通过此测试的页面将显示一系列修复选项供您选择。我们稍后会详细介绍这些选项。.

评估 HTTPS

检查您的网站是否具有安全连接是一个极其简单的过程，只需打开浏览器，查看地址栏中 URL 左侧的符号即可。.

在Chrome浏览器中，安全连接会用一个闭合的挂锁图标表示，如下所示：

不安全的连接会显示如下信息符号：

评估间质

判断插页式广告是否具有侵入性，并非像将网站地址输入在线工具并等待其返回勾选或不勾选结果那么简单。.

这需要研究您网站上的插页式广告和对话框，并确定它们是否符合某些参数。.

可以将这些参数视为问题，例如：

• 插页广告是否覆盖了页面的全部或大部分内容？

• 关闭间质是否困难？

• 插页广告是否会在未征得用户同意的情况下出现？

如果您对以上任何问题回答“是”，则可能表明该广告或对话框具有侵入性。.

2.3.5 如何优化页面体验

现在我们已经充分了解了构成页面体验的四个组成部分及其各自的特性，以及监控它们性能的方法，接下来让我们探讨如何才能真正提升网站的排名信号。

我们将首先研究 CWV，因为调试和优化 LCP、CLS 和 FID 将对您在竞争激烈的 SERP 排名中争夺领先位置的能力产生最大的影响。.

虽然移动友好性对于面向移动用户的网站来说非常重要，但无论用户是在移动设备还是桌面设备上查看，改进 CWV 都能提升网站的页面性能。.

解决 HTTPS 和侵入式插页广告问题被留到最后，因为它们更容易解决，而且收益也较低。.

冷水压力优化

在提高 CWV 性能方面有很多选择，我们根据我们认为它们的重要性顺序进行了分类。.

优化任何页面的核心网页指标是一个涵盖一系列操作的过程，重要的是要知道从哪里开始才能最大限度地利用资源。.

1. 分析和优化 LCP

正如我们上面已经提到的，最大内容绘制 (LCP) 衡量的是完全加载首屏可见的最大文本或图像资源所需的时间。.

使用 PSI 来确定触发 LCP 测试的页面内容，方法是前往报告的诊断部分并点击“最大内容绘制元素”。以下是我们从 SODP 首页看到的情况：

LCP 得分低通常可以归因于服务器响应时间慢、渲染阻塞的 JavaScript 和 CSS、资源加载时间或客户端渲染，甚至可能是这四者的组合。.

页面优化实际上涉及优化 LCP 加载过程的四个不同子部分：

1. 首字节时间 (TTFB)：这是 LCP 过程的第一阶段，衡量用户请求页面到接收该页面第一个字节数据之间的时间。

2. 资源加载延迟：这是在 TTFB 之后开始加载资源所需的时间。

3. 资源加载时间：加载资源本身所需的时间。

4. 元素渲染延迟：资源加载后渲染所需的时间。

要提高您的LCP评分，所有这些步骤都必须进行优化。但这并不意味着所有子步骤都同等重要。.

Google 建议将 LCP 总时间分解为 TTFB 和资源加载时间各占约 40%，而资源加载和元素渲染延迟各占不到 10%。.

理想情况下，最后这两个值应该尽可能接近于零，并且优先于其他两个阶段。.

有两种方法可以帮助将资源加载延迟降至接近于零：

1. 优化资源发现
2. 优化资源优先级

我们先说明一点，建议您在进行这些修复之前先咨询您的网站开发人员。这是一项后端操作，需要经验丰富的专业人员才能使其按预期运行。.

资源发现

每个网络浏览器都带有一个预加载扫描器，其作用是帮助浏览器的主要 HTML 解析器检测页面内容。.

主 HTML 解析器处理原始标记，直到遇到阻塞资源（例如不包含async或defer属性的脚本），而预加载扫描器则扮演着更具推测性的角色。

换句话说，预加载扫描器会在主 HTML 解析器到达资源之前查找需要获取的资源，即使解析器被阻塞，它也能继续工作。预加载扫描器可用于尽可能在初始页面请求时找到并加载 LCP（局部控制点）。.

为了确保可以从 HTML 源中发现 LCP 资源，开发人员有针对特定资源的选项。.

例如，如果 LCP 是一张图片，那么它的src或srcset属性必须存在于源代码中。而 CSS 背景图片则可以通过包含以下代码进行预加载：在 HTML 标记或页眉中。最后，字体也可以通过类似的方式加载。 。

然而值得注意的是，使用预加载来缩短 LCP 加载时间可能会引入新的问题，例如降低异步元素的优先级。因此，我们建议您就此与开发人员进行沟通。

有关此主题的更多信息，请查看 Google 对LCP 优化和预加载扫描器。

资源优先级

浏览器会通过分配优先级，尽可能以最优方式下载 CSS、字体、脚本、图像和 iframe 资源。浏览器在确定资源优先级方面表现出色，但这并不意味着它们完美无缺。.

为了优化资源优先级，开发者可以使用基于标记的优先级提示来告知浏览器哪些资源具有更高的优先级。例如，开发者可以使用 JavaScript 和 Fetch API，为 LCP 图片添加fetchpriority=”high” HTML 属性，从而加快该 CWV 指标的加载速度。

值得注意的是，优先级提示仅适用于基于 Chromium 的浏览器，例如 Google Chrome 和 Microsoft Edge。

您的开发人员可能已经为首屏下方的资源实现了延迟加载，请与他们确认，但让他们对首屏上方的资源使用优先级提示也是值得的。.

有关优先级加载的更多信息，我们强烈建议您查看Google 的资源加载指南。

在对 Google Flights 的测试中，这家搜索巨头的开发团队利用优先级提示功能，将 LCP 从 2.6 秒缩短至 1.9 秒。.

2. 分析和优化FID

FID 跟踪用户浏览器开始处理第一个输入所需的时间——不包括滚动和缩放。.

这项指标旨在衡量用户与网页交互的体验，这意味着响应速度慢的网页得分会很低。目标是将 FID 得分控制在 100 毫秒以下。.

响应速度慢通常是由于过度使用 JavaScript 造成的，浏览器会优先处理 JavaScript 代码，而不是处理用户输入的内容。.

占用浏览器焦点 50 毫秒或以上的代码被称为“长任务”，这被视为 JavaScript 代码臃肿的标志。将这些长任务拆分成更小的代码块可以解决性能缓慢的问题，并提高 FID（首帧延迟）。.

但这并非唯一值得与开发人员讨论的方面。同样重要的是，要探讨第一方和第三方脚本的执行如何拖慢网站速度。代码和功能的渐进式加载有助于解决前者带来的挑战，而按需加载和加载优先级排序则有助于解决后者带来的问题。.

另一种选择是使用Web Worker在后台运行 JavaScript，防止浏览器因处理脚本而过载。

3. 分析和优化CLS

CLS（页面布局稳定性）本质上衡量的是网站的视觉稳定性。如果由于加载广告和图片而导致页面内容移动，使访客迷失方向，那么网站的CLS评分就会很低。.

页面布局跳动越少，CLS 得分就越高。谷歌会根据视口内的页面扰动程度以及元素相对于视口的跳动幅度来评判网站。.

尽量减少意外的布局变化，关键在于为广告、图片和嵌入式视频预留空间。.

还记得src或srcset属性吗？它们对于提高 CLS 分数至关重要。

src设置宽度和高度，告诉浏览器为加载速度较慢的资源预留空间，从而避免布局偏移。

请参见下方来自谷歌的示例代码：

来源

响应式图片需要使用srcset 属性来定义浏览器可选择的最大宽度和高度。请确保使用宽高比相同的图片。

再举一个例子：

来源

处理广告时，您可以采取以下几个步骤：

• 务必预留广告位，并确保预留足够的空间以投放尺寸最大的广告。.
• 如果广告请求未得到满足，请使用占位符，以避免预留空间被占用。请注意，在较大的容器中投放较小的广告会造成空白区域。.
• 避免在视口顶部附近放置广告和弹出窗口。.

如果您打算实施 iFrame、嵌入式内容和动态内容（例如行动号召 (CTA)），建议预留静态空间。.

当浏览器下载并渲染网页字体时，可能会出现两种情况：一是未样式文本闪烁（FOUT），二是文本不可见闪烁（FOIT）。前者是由于备用字体被新字体替换所致，后者则是由于新字体渲染延迟造成的。.

你可以通过使用以下方式解决这两个问题：指示预加载扫描器更快地获取网页字体。预加载的字体更有可能在首次渲染时就被加载。

CLS 故障排除指南中还有其他解决方案，并且深入探讨了如何使用预加载来防止 FOIT 。

4. 使用 CDN

如果您正在寻求提高网站速度，并且仍然使用传统的单服务器托管方案，那么现在可能是时候考虑切换到内容分发网络 (CDN) 了。.

CDN（内容分发网络）由分布在全球各地不同数据中心的服务器组成，用于分发网站内容以提升性能。虽然单服务器方案（也称为本地托管）和 CDN 都能向访问者提供网站内容，但只有 CDN 能够考虑用户的地理位置，并选择距离最近的服务器来缩短加载时间。.

然而，地理位置并非唯一的优势，因为 CDN 也更有能力管理突发的流量高峰以及带宽等根服务器资源。.

最终，更快的浏览体验会向谷歌发出强烈的CWV信号。虽然Cloudflare是市场上最知名的CDN提供商之一，但还有许多实力强劲的竞争对手值得考虑。

5. 检查您的硬件限制 

无论你使用哪家主机服务商，他们的服务器都会受到一定的硬件限制。.

服务器的核心组件与笔记本电脑/台式机基本相同，主要包括CPU和内存（RAM），它们负责处理您账户的所有任务。您可以使用主机提供商的控制面板查看服务器上安装的CPU和内存，甚至可以申请额外的资源来提升网站性能。.

如果您正在查看服务器的 CPU，那么需要了解的是，服务器通常只使用单个核心来处理访客对网页的请求。这意味着更快的单核时钟速度始终是必要的。多核 CPU 能够处理多个页面浏览量和其他服务器服务。.

6. 数据库优化

这是给你们开发人员的另一个问题。.

定期检查数据库，确保其中没有堆积大量无用的照片和文件。删除不必要的文件可以清理数据库，加快页面加载速度。.

7. 图像优化

使用过大的图片会降低网站速度。多大才算大呢？超过 1MB 的图片就太大了。.

我们都知道，加载速度越慢，跳出率就越高，并且会向谷歌发出不必要的信号。.

对于 WordPress 用户来说，有很多图片优化插件可供选择，它们可以简化原本繁琐的手动操作。此外，许多插件还提供其他功能，例如延迟加载和自动调整大小。

移动友好性优化

网站是否适合移动设备浏览，取决于你是否针对移动浏览体验简化和优化了网站。.

移动用户与网页的交互方式不同，他们对加载速度慢、导航困难的网站容忍度更低。如果您的网站未能通过上述移动友好性测试，或者即使通过了测试但您希望进一步优化，那么让我们一起来探讨一些最佳实践。.

易用性

这应该是每位出版商的首要关注点。解决易用性问题的一个简单方法是问自己以下问题：

• 我的网站导航是否便捷？
• 阅读或查看内容有多容易？
• 我的用户最常执行的任务是什么？
• 完成这些任务有多容易？

这些答案将有助于我们识别用户痛点。例如，您肯定不希望用户为了查看您的内容而调整屏幕。您可以在下面的示例中看到我们的意思。.

来源

设计选项

为了优化移动设备上的内容，有三种开发方案可供选择：

1. 响应式设计
2. 动态设计
3. 移动子域名

我们已按实施难易程度对它们进行了排序，建议采用响应式设计，因为它是三种选项中要求最低的。.

开发者只需在网页的现有代码中meta name=”viewport”

这样做的好处是，你只需要维护一个网站，它就可以轻松地在任何类型的屏幕上显示。.

来源

相比之下，动态设计的工作原理是根据用户设备提供不同的 HTML 代码。页面需要使用 Vary HTTP 标头来防止将错误的代码发送到错误的设备。.

最后，还有移动子域名，但鉴于有效实施移动子域名需要大量资源，我们不建议使用。移动子域名是完全独立的网站，需要单独的托管服务。为了确保搜索引擎爬虫能够识别域名和子域名之间的关系，您需要添加rel="canonical"标签。

由于响应式设计是最简单的选择，因此我们推荐发布商采用这种设计。如需更详细地了解响应式设计，请查看谷歌的实施指南。

注意事项

以下是任何设计都需要考虑的一些技术因素：

• 请使用 HTML5 而不是 Flash、Java 或 Silverlight，因为大多数移动浏览器不支持后者。.

• 确保字体可以自动调整大小，并且点击目标足够大，且目标之间有足够的间距。.

• 避免使用下拉导航菜单，因为它们在移动设备上难以有效实现。.

HTTPS 优化

最后一步是改善页面体验的最简单方法，但对于提升用户的安心感也大有裨益。.

切换到 HTTPS 可以保护和加密用户信息，还有助于防止中间人攻击 (MitM)。此外，拥有 SSL 证书还可以消除浏览器关于安全漏洞的警告。.

您的主机提供商理应能够提供 HTTPS 安全服务，如果他们不提供，那么或许值得考虑更换一家提供该服务的主机提供商。目前已有不少知名的主机提供商免费提供 HTTPS 服务。此外，提供 SSL 证书的主机提供商通常使用自己的服务而非外部服务，这使得部署过程更加便捷快速。

如果您想从证书颁发机构 (CA) 申请并安装 SSL 证书，需要遵循以下四个步骤：

1. 创建一个 2048 位 RSA 公钥/私钥对
2. 生成嵌入公钥的证书签名请求 (CSR)
3. 将 CSR 提供​​给 CA 以获取 SSL 证书。
4. 将最终证书安装在无法通过网络访问的位置。.

将网站迁移到 HTTPS 时，务必确保其不会影响您的广告收入策略。问题在于 HTTP在采用 HTTPS 的网站上无法运行。

我们建议您在对网站进行任何更改之前，先咨询您的广告技术合作伙伴。.

更多详情请查看谷歌关于此主题的综合指南。

间隙优化

侵入式插页广告和对话框会使搜索引擎难以理解网页内容，从而影响搜索结果排名。.

如果能找到一种既能制作插屏广告又不干扰用户体验的方法就好了，但这类广告的意义就在于此。它们会在内容播放间隙占据整个屏幕，以吸引用户的注意力。.

因此，出版商最好使用横幅广告而不是插页式广告，因为横幅广告只占用屏幕的一小部分空间。与其让用户感到沮丧，不如冒着用户对横幅广告视而不见的风险。.

发布商可以使用浏览器支持的横幅广告或链接到 CTA 目标页面的简单 HTML 横幅广告。.

对话框也可以用于推广活动，但应设计得不干扰用户。您需要确保用户能够不受干扰地访问内容。.

2.3.6 锦上添花

优化页面体验没有捷径可走，解决上述问题至关重要。话虽如此，值得一提的是，虽然 WordPress 是最流行的发布平台，但这并不意味着它在提升 CWV 性能方面就是最佳的内容管理系统 (CMS)。

查看 CWV 技术报告可知，只有约 29% 的 WordPress 网站拥有良好的 CWV，而 41% 的 Wix 网站获得了绿色勾号。.

值得权衡一下，切换到专门的 CMS 是否可以从根本上改善您的 CWV。.

2.3.7 避免这些常见陷阱

优化页面体验涉及的内容很多，入门可能会让人有些不知所措。但是，重要的是要记住，吃大象要一步一步来。.

追求所有CWV指标都达到“良好”水平并非提升网站搜索引擎排名的必要条件。更重要的是，设定如此高的目标反而会适得其反，令人沮丧。.

相反，在进行社区工作价值评估 (CWV) 时，应该着眼于取得小的进步，专注于解决“差”的结果，而不必过分担心“需要改进”的指标。后者可以稍后再考虑，等到您有更多的时间和资源投入到这项工作中时再进行。.

2.3.8 页面体验优秀案例

我们已经讨论过雅虎日本的CLS评分提升情况，让我们来看看另外几个网站，从中我们可以学到一些经验教训。.

案例研究1：《经济时报》

印度日报《经济时报》每月活跃用户超过 4500 万，其 CLS 评分从 0.25 降至 0.09，降幅达 250% ；LCP 时间从 4.5 秒降至 2.5 秒，降幅达 80%。

2020年10月至2021年7月期间，该出版商将“差”级LCP评分降低了33%，同时将“差”级CLS值降低了65%。这些成果使《经济时报》在其所有来源网站均达到了CWV阈值，同时将整体跳出率降低了43%。.

该发行商通过多种方式实现了这一目标，首先是利用优先级提示来设定资源下载优先级。此外，他们还解决了耗时较长的任务问题，将代码块拆分，以确保首屏渲染的关键资源优先加载。.

案例研究2：电讯传媒集团

英国新闻网站的 CLS 得分从 0.25 提高到 0.1 ，同时获得及格分数的 URL 数量从 57% 增加到 72%。

《每日电讯报》使用 Chrome DevTools 来识别布局偏移的具体实例。.

来源

在此之前，使用 WebPageTest 来查找布局变化在时间线上发生的位置。.

来源

有了这些数据，团队开始着手解决以下几个方面，以减少布局偏移。

• 广告
• 图片
• 标题
• 嵌入式

《每日电讯报》开始预留广告版面，并采用最常见的广告尺寸来规定尺寸规格。这也有助于防止广告在平板电脑上显示时出现缩回现象。.

该团队还解决了文章顶部插入图片时遇到的类似问题，这些图片没有指定尺寸。.

《每日电讯报》还进行了一些其他调整，例如将标题移到标记的顶部，以及使用占位符来嵌入视频，但最终将这一过程描述为“相当容易”，同时仍然产生了重大影响。.

2.3.9 行动与要点

提升页面体验并不需要花费太多精力。衡量页面体验的四大支柱，然后决定可以投入哪些资源来改善结果。.

如果你是一家规模较小的出版社，资源平衡至关重要，我们建议你的第一个项目先选择一些比较容易实现的项目。.

从《每日电讯报》的做法来看，他们只关注了CWVs中的某一方面，而不是全部三方面，并取得了显著的改进。《经济时报》则专注于其中两项，也取得了令人瞩目的成果。.