页面体验

页面体验是一组信号，包括核心网络生命力 (CWV)、移动设备友好性、HTTPS 和侵入性插页式指南，Google 用它们来推断网站上的用户体验。

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

这四个页面的体验信号是：

1. 核心网络生命 (CWV)
2. 移动设备友好性
3. HTTPS
4. 无侵入性插页式广告 

什么是核心网络生命 (CWV)？

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

• 最大内容绘制 (LCP)：这是页面开始加载与首屏可见的最大文本或图像完全加载之间的时间差。 Google 建议 LCP 不超过 2.5 秒。
• 首次输入延迟 (FID)：测量用户单击链接和浏览器开始处理页面事件处理程序之间的时间。 Google 建议 FID 不超过 100 毫秒。
• 累积布局变化 (CLS)：这衡量用户在页面上的时间期间页面可见布局变化的频率。由于图像、视频、API 或第三方内容对实时环境做出意外反应，布局变化并不罕见。 Google 建议 CLS 分数最高为 0.1。

什么是移动友好性？

Google的2015年4月更新推出了搜索巨头的移动友好度量，该指标促进了移动SERP上移动友好的页面的排名。

有效地，Google将优先考虑那些在移动设备上易于阅读的网站，这意味着无需缩放，触摸目标（例如登录按钮）彼此之间的间距不太靠近，没有水平滚动和不可玩的内容。

该更新适用于各个页面，而不是整个网站，也不影响台式机/笔记本电脑浏览器上查看的内容。

什么是HTTP？

HTTP或超文本传输协议安全，是HTTP Internet通信协议的安全版本。

HTTP或HTTP构成了每个URL的第一部分，称为“方案”。这是在域名之前，即URL的段，称为“权威”。

HTTPS和HTTP之间的区别在于，前者是安全的，而后者却不是安全。实际上，这意味着通过HTTP连接登录站点的用户以未加密的纯文本发送其个人详细信息。

HTTPS确保了连接，这意味着在用户的浏览器和网站服务器之间发送的任何数据沿途加密。想要安全连接的网站需要SSL证书，用户的浏览器检查和验证。

什么是侵入性间隙？

间质是一种仅移动广告格式，仅出现在内容中的自然中断中（例如，当用户从一篇文章移动到下一篇文章时）涵盖了过程中的屏幕。

当间隙被视为侵入性时，当它们阻止或部分掩盖用户对内容的看法。手机网站上的对话框也类似地属于此类别。

2.3.2挑战出版商面临着页面经验

大多数出版商最强大的技能往往是内容创建，发布和营销，几乎没有理解和优化各种页面体验支柱的空间。

有限资源意味着出版商将难以证明挖掘单个网页的后端所需的时间和金钱合理，更不用说整个网站了。

即使出版商能够花时间解决问题，正如我们可以从上面看到的那样，Page Experience是一个多方面的问题，需要一种整体方法来提供有意义的绩效提高。

知道要开始进行四个页面体验信号中的哪个可能会令人头疼。

2.3.3页面经验对SEO重要吗？

页面体验对发布者SEO非常重要，因为出色的内容不足以保证SERP中的最高位置。

Google仍然在其他任何内容之前都重视最佳信息，这意味着唯一的内容或新闻“勺子”也会表现良好，即使页面体验是“不足的” 。但是，如果几个发布者提供出色的主题覆盖范围，则页面经验成为影响SERP排名的重要决定因素。

四页体验支柱中的每一个对网站的SEO都有不同的影响。最直接的影响来自关注CWV，该CWV将转化为加载速度更快的网站。

许多研究表明，网站加载的时间越长，观众失去兴趣越快，跳出率就越高。

例如，2018年的Google研究发现，当页面加载时间从1秒至3秒攀升时，弹跳概率上升了32％

来源

2020年的另一项Google研究发现，通过CWV测试的新闻网站的放弃率比失败的新闻网站低22％。雅虎！同时，日本的CLS得分提高了0.2 ，每节课的页面浏览量增加了15.1％，会议持续时间增加了13.3％。

尽管Google明确表示，它不使用跳出率作为排名信号，但高出弹跳率对Google确实关心的因素表示 - 即页面的负载速度，响应率和视觉稳定性。

针对移动设备上的受众的发布者需要确保其网站发送移动友好的信号，表明Google和Bing都可以掌握。两个搜索引擎在向移动用户交付搜索结果时都将优先考虑友好的网站。

与CWV和移动友好性相比，实施HTTP对发布者的SEO的影响要小得多。 Google在2014年表示，它将其用作排名信号，并开始将所有HTTP网站标记为2018年Chrome中的所有HTTP网站。但是，这里最大的好处是增强了数据安全性，尤其是如果您的业务模块基于订阅收入。

同时，侵入性的间质广告或对话框可以限制网络爬网的能力爬网和索引页面，以防止搜索引擎甚至能够对其进行排名，独自一人以搜索结果较高。

2.3.4测量页面经验

改善页面体验的第一步始于评估网站当前的效力。

有各种各样的第一和第三方工具可以实现这一目标，但是，对于本指南，我们将研究Google的第一个派对工具。

评估CWV

我们现在知道CWV是重要的排名因素。但是如何测量？下表列出了最佳CWV编号以获得最佳页面体验的参数。

现在，我们知道了我们需要测量的内容，并且通过多少，我们可以研究如何进行测量页面体验。

以下是一些最常用的方法的列表。

1。谷歌分析4和朗姆酒 

向发行商开放的第一个选项是迄今为止最具挑战性的最具挑战性的选择，除非您有一个好的开发人员来协助其实施，否则我们也不建议您考虑。

我们正在谈论从您的网站收集用户数据，该过程称为真实用户监视（RUM），然后分析Google Analytics（GA4）中的结果。 Google还有其他工具，例如PagesPeed Insights（PSI），可以使用数据采样来评估您的网站。但是，如果目标是为您的网站提供完整的用户体验图片，那么您需要从您的网站收集的真实数据。

我们建议使用GA4执行此任务，其简单原因是Google打算开始“日落”上一代Google Analytics（Universal Analytics（UA）），从2023年中期开始。

作为发布者，您应该已经在切换后已经设置了一个GA4帐户。如果没有，请遵循Google的指南，以了解如何第一次进行设置，或者如何将其添加到已经具有UA的网站中。

完成此操作后，下一步就是将Google的BigQuery Data Warehouse与Analytics Admin的GA4联系起来。链接BigQuery将允许您使用SQL查询数据。这是有关如何链接两者的指南。

通过这些步骤，我们现在可以将Google的Web-Vitals库到您的网站。

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

可以通过在命令终端或通过“ NPM安装Web-Vitals”或通过<script> tags on a content distribution network (CDN).

这是这样一个脚本的示例：

来源

一旦安装了Web-Vitals库，就可以使用Simo Ahava创建和维护的Google启用的自定义模板标签

安装标签后，CWV指标和关联的归因数据可以将其转发至GA4。

设置分析以跟踪GTM数据后，您将能够在BigQuery接口中查看事件数据。然后可以像这样查询这些数据：

来源

返回查询后，报告应该看起来像这样：

来源

我们确实必须再次强调，这是一个开发人员解决方案，实际上比这更复杂。但是，采用此解决方案将为您提供网站性能中最准确的阅读。

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

尽管这是监视CWV的最准确方法，但有更简单的方法可以解决此问题。

2。页面洞察力（PSI）

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

虽然它只能使用前28天期间Chrome用户体验报告（CRUX）简单易懂的用户界面。这意味着解释数据是一个更简单的过程。

如您在下面的示例中所见，检查《福布斯》网站立即为发布者的桌面和移动网站提供了大量信息。

分配良好时，PSI使用上面的绿色，琥珀色和红色类别，需要改进和表现不佳。

CRUX的抽样方法意味着，尽管上述福布斯评估摄入了网站的一些现实世界用户体验，但它不能考虑所有网站的用户数据。

对于较小的站点而言，这种采样方法变得有问题，其中许多站点在Crux的字段数据中不存在。

开源灯塔工具中获取的实验室数据对您的网站进行虚拟诊断。请参阅以下示例：

这种方法的问题在于，灯塔使用预定的设备和网络设置收集数据，这将无法反映您的用户的设置。这意味着这是真实事物的差异。

3。谷歌搜索控制台

GSC是一种工具，旨在为出版商提供有关其网站CWV问题的鸟眼的视图，为改善网站的性能的整体方法打开了大门。

它通过根据状态，度量类型或局部相似性对其URL性能报告进行分组来做到这一点。它没有确定各个页面的问题，否认有机会在粒状层面上实施修复程序。

这是PSI进入的地方。不过，值得注意的是，PSI的个人页面报告可能与GSC的组结果明显不同。那是因为单个页面只是GSC汇总组结果的一个组成部分。

登录GSC的仪表板，用户将在左侧看到“核心Web Vitals”选项卡。单击此选项卡显示URL组的单独的移动和桌面CWV报告。

尽管有三个CWV指标（LCP，FID和CLS），URL将根据其对特定设备的表现最差的指标获得总成绩，这也会影响组报告。

例如，如果在移动设备上的URL收到较差的FID和良好的LCP，则在移动设备上将标记为较差。

同样，重要的是要注意，GSC并非用于颗粒状固定。但是，对于拥有许多类似页面的出版商来说，这非常有用。例如，新闻网站可能具有相对标准的设计和布局，其文章页面将图像用作折叠的最大元素。在这种情况下，GSC可以快速帮助识别一系列URL的LCP问题。

4。灯塔

Google性能测量工具包的最终工具是灯塔。该工具与之前的工具完全不同，因为它基于已建立的一组参数来模拟用户性能。

它不使用现场数据，因此在实际用途方面更具限制。例如，字段数据受用户网络连接及其与站点服务器的距离的影响，而灯塔则模仿了中端设备，以在受控环境中收集数据。

同样重要的是要了解灯塔的得分不仅是CWV分数的合并。它不包括FID，因为实验室数据的性质数据不包括最终用户相互作用，同时添加了总阻塞时间（TBT），速度索引（SI）和交互式（TTI）指标的时间。对于那些想在实验室中模拟FID体验的人，TBT可以用作代理。

但是，我们建议不要将灯塔用作主要测量资源。相反，它应与PSI一起用作伴侣工具，以帮助解决特定页面问题。

希望在测试中使用灯塔的发行商可以通过Chrome DevTools直接烘烤到Chrome浏览器中，这是该浏览器或web.dev/measure。

Lighthouse将审核您的网页，并在四个领域提供100分的分数：

• 表现

• 无障碍

• 最佳实践

• 搜索引擎优化

这就是我们将主页放在Web.dev选项上时的样子。

评估移动友好性

移动网络设计与传统台式网络设计不同，因为移动设备的屏幕较小，通常具有功能较小的硬件，并且仅依靠触摸输入。

移动友好的网站通过遵循一组最佳实践来确定用户体验的优先级。现在，检查您的页面是否对移动设备友好的最佳方法是使用Google的移动友好测试。

输入移动友好网页的URL会返回以下结果：

未能通过此测试的页面将显示许多要追求的修复选项。我们稍后再介绍。

评估HTTPS

检查您的网站是否具有安全的连接是一个非常简单的过程，涉及打开浏览器并查看地址栏中URL左侧的符号。

在Chrome中，将通过这样的封闭挂锁符号表示安全连接：

不安全的连接将具有类似的信息符号：

评估间隙

确定您的间质广告是否侵入性不像将网站输入在线工具中并等待其返回tick的简单。

它需要研究网站上的间隙广告和对话框，并决定它们是否通过某些参数。

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

• 间隙是否涵盖了页面内容的全部或大部分内容？

• 关闭间质很难吗？

• 没有用户提示而出现间隙吗？

如果您对这些问题中的任何一个都回答是，这可能是一个指示广告或对话框是侵入性的。

2.3.5如何优化页面体验

现在，我们对算在页面体验的四个组成部分的不同组成部分以及监视其性能的手段，让我们继续探索如何确切地提高网站的排名信号

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

尽管移动友善对于针对移动用户的网站非常重要，但无论是在移动设备还是台式机上查看它们，改进CWV都会提高网站的页面性能。

解决HTTP和侵入性的间隙已经结束了，因为它们更容易且有意义的胜利。

CWV优化

在提高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. 优化资源优先级

我们会立即说出这一点，我们建议您在研究这些修复程序之前与您的网络开发人员进行咨询。这是一个后端操作，需要经验丰富的手来使其根据需要工作。

资源发现

每个Web浏览器都配有预紧扫描仪，其工作是为了帮助浏览器的主要HTML解析器检测页面内容。

异步或延期的脚本），预读扫描仪占据了更具投机性的作用。

换句话说，预努加载扫描仪正在寻找资源在主要HTML解析器到达它们之前获取并继续工作，即使解析器被阻止。预紧扫描仪可用于查找和加载LCP尽可能靠近初始页面请求。

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

例如，如果LCP是图像，则需要在源代码中存在SRC或SRCSET同时，可以通过包括在HTML标记或标题中。最后，字体可以通过类似地通过。

但是，值得注意的是，使用预加载来减少LCP负载时间可以将新问题引入混合物，例如剥夺异步元素。我们提倡与您的开发人员讨论此事是有原因的。

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

资源优先级

通过分配优先级，浏览器尝试下载CSS，字体，脚本，图像和iframe资产。浏览器擅长弄清资产优先级，但这并不意味着它们是完美无瑕的。

为了优化资产优先级，开发人员可以使用基于标记的优先级提示向浏览器发出信号，这些浏览器具有更高的优先级。例如，开发人员可以使用JavaScript和Fetch API使用FetchPriority =“ High” HTML属性来标记LCP图像，从而加快了该特定的CWV度量。

值得注意的是，优先提示仅在基于铬的浏览器（例如Google Chrome和Microsoft Edge）上起作用。

您的开发人员可能已经在折叠资产下方实施了懒惰的加载，请与他们进行检查，但也值得让他们使用优先提示来对折叠上方的资产进行优先提示。

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

搜索巨头的开发团队能够使用优先提示将LCP从2.6秒提高到1.9秒，这是在Google Flights测试中。

2。分析和优化FID

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

该措施是关于捕获用户与网页互动的体验，这意味着缓慢的网页得分差。将FID分数保持在100毫秒以下是目标。

响应性不佳通常归结为过度使用JavaScript，浏览器将在输入之前进行处理。

将浏览器重点放在50毫秒或以上的代码被称为一项艰巨的任务，被视为JavaScript膨胀的标志。将这些长期任务分解为较小的代码块可以解决性能缓慢并提高FID。

但这并不是唯一值得与您的开发人员讨论的领域。重要的是要讨论第一方和第三方脚本执行如何使您的网站降低。代码和功能的逐步加载可以帮助应对前者的挑战，而按需加载和负载优先级可以帮助后者。

另一个选择是使用网络工作者在后台运行JavaScript，并防止您的浏览器陷入处理脚本。

3。分析和优化CLS

CLS基本上是对您网站的视觉稳定性的测量。如果您的访问者因内容而移动以为广告和图像加载的内容而失去了页面上的位置，那么您的网站将得分很差。

您的页面布局弹跳越少，您的CLS得分就越好。 Google评判网站通过考虑视口内的中断以及资产相对于该网站的跳跃。

最大程度地减少意外布局基本上会围绕为广告，图像和嵌入式视频指定空间。

还记得我们在谈论资源发现时查看的SRC或SRCSET好吧，这对于提高CLS分数非常关键。

SRC设置宽度和高度，以告诉浏览器为较慢的加载资产保留空间，从而避免布局偏移。

请参阅下面的Google中的示例代码：

来源

响应式图像需要SRCSET来定义浏览器可以选择的最大宽度和高度限制。确保使用具有相同纵横比的图像。

这是另一个例子：

来源

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

• 始终为广告保留空间，并确保您为最大的广告保留足够的保留空间。
• 如果无法满足广告请求，请使用占位符以避免保留的空间崩溃。请记住，在较大的容器中提供的较小广告将创建空白空间。
• 避免将广告和弹出窗口放在视口顶部附近。

如果您打算实现IFRAME，嵌入式内容和动态内容，例如“行动调用（CTA）”（CTA），请建议保留静态空间。

当浏览器下载且渲染Web字体时，可能会出现一系列未风格的文本（fout）或出现无形文本（FOIT）的闪光灯。前者发生的是后备字体用新字体换成，而后者是由于呈现新字体的延迟的结果。

您可以使用告诉预加载扫描仪以更快地获取网络字体。预装的字体有更大的机会与第一批油漆相遇。

CLS故障排除指南中还有其他解决方案，以及它深入研究使用预紧力来防止FOIT 。

4。使用CDN

如果您正在寻找改进站点速度，并且仍在使用传统的单服务器托管选项，那么可能是时候考虑切换到内容输送网络（CDN）了。

CDN由位于世界各地不同数据中心的服务器网络组成，该服务器分发网站内容以提高性能。虽然两个服务器选项（也称为本地托管）和CDN将网站内容交付给访问者，但只有CDN可以在用户的地理位置中考虑到，然后选择最接近的服务器以减少加载时间。

但是，地理并不是唯一的优势，因为CDN也可以更好地管理突然的流量尖峰以及带宽等根服务器资源。

最终，更快的浏览体验向Google发送了强大的CWV信号。尽管CloudFlare是市场上最著名的CDN提供商之一，但仍有许多认真的竞争对手需要考虑。

5。检查您的硬件限制 

无论您使用哪种托管提供商，它们的服务器都将受某些硬件约束的约束。

服务器在很大程度上包含相同的密钥组件，这些密钥组件允许您的笔记本电脑/台式机起作用（即CPU和RAM），它们可以处理所有帐户的任务。您应该能够使用托管提供商的仪表板检查服务器上安装的CPU和RAM，甚至能够请求其他资源来提高网站的性能。

如果您正在查看服务器的CPU，那么重要的是要了解只使用单个核心来满足访问者对网页的请求。这意味着更快的单核时钟速度始终是一个。多核CPU能够处理多个页面视图和其他服务器服务。

6。数据库优化

这是您的开发人员的另一个。

半频繁地查看您的数据库，以确保其没有被未使用的照片和文件肿。删除不必要的文件会将其整理，从而加快平均页面加载时间。

7。图像优化

使用非常大的图像可以并且会减慢您的网站。多大？超过1MB的任何东西都太大了。

众所周知，较慢的加载时间将导致更高的跳出率，并向Google发送不需要的信号。

对于WordPress上的人，有许多图像优化插件可供选择，可以简化原本繁琐的手动任务。此外，许多人还具有其他功能，例如懒惰的加载和自动化。

移动友好优化

网站是否对移动设备友好，是否围绕您简化和简化网站以获得移动浏览体验。

移动用户与页面的交互方式不同，并且对缓慢的加载时间和难以导航站点的耐心较小。如果您的网站未通过上述移动友好的测试，或者即使通过了，但您对进一步的优化感兴趣，那么让我们介绍一些最佳实践。

易用性

这应该是每个出版商的主要问题。解决易用性的一种简单方法是问自己问题，例如：

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

这些答案将在识别用户疼痛点方面有很长的路要走。例如，您不想让用户调整他们的屏幕以查看您的内容。您可以在下面的示例中看到我们的意思。

来源

设计选项

为了优化移动设备的内容，有三个开发选项：

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

我们已经按照易于实施的方式订购了它们，我们建议采用响应式设计，因为这是三种选项的要求最小。

在网页的现有代码中添加元名称=“ viewport”

这里的优势是您只需要维护一个网站，该网站可以在任何屏幕类型上轻松显示。

来源

相比之下，动态设计通过基于用户设备提供不同的HTML代码来工作。页面需要使用变化的HTTP标头来防止将错误的代码送达错误的设备。

最后，有移动子域，鉴于有效实施所需的资源数量，我们不建议这样做。移动子域是完全独立的站点，分开托管需求。为了确保爬行者了解域与子域之间的关系，您需要包括REL =“规范”标签。

由于响应式设计是最简单的选择，因此我们为发布者推荐的选择。要仔细研究响应式设计，请查看Google的实施指南。

做和不做

以下是任何设计的快速技术注意事项列表：

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

• 确保字体可以自动调整大小，并使您的水龙门目标足够大，并且可以将其分开足够的空间。

• 避免下降导航菜单，因为它们难以有效地实施移动使用情况。

HTTPS优化

最后一步是改善页面体验的最简单方法，但对于改善用户的安心也有很大的帮助。

切换到HTTPS保护和加密用户的信息，它还有助于防止中间人（MITM）攻击。最重要的是，拥有SSL证书会消除有关缺乏安全性的浏览器警告。

您的托管提供商确实应该能够为您提供HTTPS安全性，如果不是这样，那可能值得考虑搬迁。已经有几个著名的托管提供商免费提供HTTPS 。此外，那些提供SSL证书的托管提供商使用自己的服务而不是外部服务提供商，从而使过程变得更加容易，更快地实现。

如果要请求并安装来自证书机构（CAS）的SSL证书，则需要遵循四个步骤。这些都是：

1. 创建一个2048位RSA公共/私钥对
2. 生成嵌入公共密钥的证书签名请求（CSR）
3. 与CA分享CSR以接收SSL
4. 将最终证书安装在无法通过Web访问的地方。

重要的是要确保将您的网站迁移到HTTP时不会影响您的广告收入策略。问题是HTTP无法使用HTTPS在网站上工作。

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

有关更多详细信息，请查看Google的有关该主题的综合指南。

间质优化

侵入性的间质广告和对话框使搜索引擎很难理解网页的内容，这可能会破坏SERP性能。

如果有一种创建没有破坏用户体验的间隙的方法，那将是很棒的，但这就是此类广告的全部点。他们在内容中接管整个屏幕，以吸引用户的注意力。

因此，出版商最好使用横幅广告而不是间隙广告，因为它们只占用了屏幕房地产的一小部分。比用户挫败感更好的横幅失明风险。

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

对话框也可以用于促销活动，但可以设计为没有引人注目。您需要确保用户可以访问内容而不会中断。

2.3.6很高兴有

没有真正的快捷方式来优化您的页面体验，并且至关重要的是，您必须修复上述要点。话虽如此，值得注意的是，尽管WordPress很容易成为最受欢迎的出版平台，但这并不一定意味着它在提高CWV性能时是最好的CMS。

查看CWVS技术报告显示，只有大约29％的WordPress网站具有良好的CWV，而41％的Wix网站获得了绿色tick。

值得一提的是，切换到专门的CMS是否可以在本地改善您的CWV。

2.3.7避免这些常见的陷阱

优化页面体验和入门可能会有些艰巨。但是，重要的是要记住，您一次咬一口就吃了大象。

为了帮助您的网站攀登SERP，目标不是所有CWV指标的“良好”分数。不仅如此，设定这样的崇高目标可能会反对生产力，因为这可能是一种令人沮丧的追求。

相反，在CWV方面，目标是为了小小的胜利，专注于解决“糟糕”结果，而不必过分担心“需求改善”栏。稍后，当您有更多的时间和资源用于该过程时。

2.3.8页面经验的示例做得很好

我们已经谈论过Yahoo！日本的CLS得分提高，让我们看一下我们可以从中学到一些课程的另一个网站。

案例研究1：经济时期

印度每日经济时期每月有4500万个活跃用户的服务，其CLS得分从0.25降至0.09 ，LCP时间从4.5秒至2.5秒降至80％。

在2020年10月至2021年7月之间，出版商将LCP的分数在“差”范围内缩小了33％，而“差”范围的CLS值下降了65％。这些收益使经济时期能够通过其整个起源的CWV阈值，同时将总体跳出率降低43％。

发布者以多种方式实现了这一目标，其中首先是使用优先提示优先考虑资产下载优先级。它还解决了长期任务，分解了大量代码，以确保首先加载了折叠页面渲染至关重要的资源。

案例研究2：电报媒体组

英国新闻网站将其CLS得分从0.25提高到0.1 ，同时将及格率从57％提高到72％的URL数量。

电报使用Chrome DevTools确定了转移布局的单个实例。

来源

在此之前，请使用WebPageTest查找时间轴在位置的位置移动发生的位置。

来源

借助此数据，团队开始专注于通过解决这些领域来减少布局变化

• 广告
• 图像
• 标题
• 嵌入

对于广告，电报开始为他们保留空间，并使用最常见的广告大小来指定尺寸。这也有助于阻止广告在平板电脑上查看时崩溃。

该团队在文章顶部的内联图像中解决了类似的问题，该图像没有指定维度。

电报进行了其他调整，例如将标头移至标记的顶部，并使用占位符进行嵌入式视频，但最终将该过程描述为“非常容易”，同时仍产生重大影响。

2.3.9行动和外卖

改善页面体验并不需要压倒性。测量页面体验的四个支柱，然后确定可以投入哪些资源来改善结果。

如果您是一个较小的出版商，资源平衡将是至关重要的，我们建议您为您的第一个项目确定相当低的悬挂果实。

从电报的方法看，他们专注于CWV的一个方面，而不是所有三个方面，并取得了重大改进。 《经济时报》集中于三个中的两个，以取得令人印象深刻的结果。