WordPress凭借其易用性和灵活性，成为全球最受欢迎的内容管理系统（CMS）
尽管内容管理系统功能强大，但仍有可能创建出外观精美却难以吸引大量受众的网站。内容审核固然重要，但发布商首先应该考虑进行技术审核，以确保网站后台不存在任何阻碍其覆盖范围的瓶颈。.
他们应该衡量的主要性能指标是 Google 核心 Web 指标 (CWV)。.
在 2020 年推出后不久，就被谷歌转化为排名信号，它们在衡量网页用户体验 (UX) 方面发挥着关键作用。
CWVs包含三个既独立又相互关联的指标：
- 最大内容颜料（LCP）
- 首次输入延迟 (FID)
- 累积布局偏移 (CLS)
这些信号分别衡量网页的感知加载速度、交互性和视觉稳定性。.
让我们仔细研究一下这些 CWV，了解它们为何如此重要，如何准确地衡量它们，然后权衡我们可以采取哪些切实可行的步骤来提高它们的分数。.
核心网站指标有哪些？
Google 的三大核心网页指标 (CWV) 评估网站的用户体验 (UX) 质量，深入了解网页在加载速度、交互性和视觉稳定性方面的表现。.
- 最大内容绘制时间 (LCP)：该指标衡量网站加载速度，具体指的是加载过程中主要内容可能已经加载完毕的时间点。
例如，一篇关于热门新科技产品的博客文章。如果主图（例如产品图片）和介绍文字加载迅速（谷歌建议的 LCP 阈值为 2.5 秒内），访客更有可能停留、阅读并与内容互动。
相反，加载速度慢会导致访客放弃访问，从而造成流量下降。
- 首次输入延迟 (FID)：它反映了网页在用户首次交互（例如点击链接或按下按钮）后的响应速度，通过测量用户执行此操作到浏览器开始处理响应事件处理程序之间的时间来实现。以
“立即订阅”按钮为例。如果访客点击此按钮后，网站响应存在延迟（超过 100 毫秒即被视为较差），访客可能会认为网站无响应，从而导致糟糕的用户体验，甚至可能导致订阅流失。
谷歌计划于2024 年 3 月，以取代 FID 作为内容权重指标 (CWV)。
- 累积布局偏移 (CLS)：该指标量化了视觉稳定性，即网页上可见内容意外布局偏移的程度。
如果新闻网站的文本、图像或广告在页面完全加载时突然发生偏移，访问者可能会迷失方向，或者意外点击到不相关的链接或按钮。这会造成令人沮丧的体验，并可能导致访问者不再访问该网站。
来源： Web.dev - 交互到下次绘制时间 (INP)：该指标评估页面对用户交互的整体响应速度。它监控用户访问网页期间所有鼠标和键盘交互的延迟，并以观察到的最长交互（忽略异常值）作为最终的 INP 值。
由于设备性能差异很大，实现理想的 INP 分数可能具有挑战性。但是，对于发布商而言，将 INP 分数控制在页面加载速度的 75% 分位数（按移动设备和桌面设备划分）仍然是合理的目标。INP
值在 200 毫秒或以下的网站被认为具有良好的响应速度。如果 INP 值在 200 毫秒到 500 毫秒之间，则网站的响应速度需要改进。最后，如果 INP 值大于 500 毫秒，则其响应速度被认为较差。
来源： Web.dev
核心网络指标评分为何如此重要？
用户要求加载速度快、交互流畅、视觉环境稳定，而核心网站指标评估对于帮助发布商了解其网站在这方面的表现至关重要。.
谷歌发现，当页面加载时间从1秒增加到3秒时，跳出率上升了32% 放弃率比未通过测试的网站低22%。
1. 影响搜索结果
内容访问量指标 (CWV) 是谷歌衡量网站性能的标尺。它们为谷歌提供网站服务用户体验方面的洞察，这直接影响该网站在搜索结果中的排名。.
简单来说，更高的 CWV 分数可以帮助 WordPress 网站在 Google 搜索排名中获得更高的排名。.
2. 提升流量
优化了内容权重值（CWV）的网站可以提升流量。例如，热门职业指导网站 LearnHowToBecome.org将其平均加载时间从 7 秒缩短至 2.9 秒，月流量也从 50 万增加到 75 万。
3. 提高收入
如果用户遇到加载时间过长 (LCP)、交互响应延迟 (FID) 或布局不稳定 (CLS) 等问题，他们阅读文章的可能性就会降低。在所有这三项指标上都表现出色的网站，不仅能够吸引用户注意力，还能引导他们完成转化流程，最终为企业带来更多收益。.
本质上，CWV指标不仅仅是数字。它们从用户的角度提供网站性能的洞察，使品牌能够改进对访客而言最重要的方面。.
如何查看 WordPress 网站的核心 Web 指标评分
了解如何查看 CWV 分数是提升网站性能的第一步。有两种方法可以测量这些分数：一种是使用 Google 官方工具自行测量，另一种是寻求经验丰富的 WordPress 专家的帮助，他们擅长优化性能指标。.
对于那些选择自行测量的人来说，重要的是要了解测量 CWV 需要结合现场数据和实验室数据。.
现场数据是指从真实环境中收集的实际用户体验数据。这类数据有助于更好地了解在各种设备、网络连接和其他真实世界条件下与网站互动
例如，如果用户主要通过 3G 网络在移动设备上访问 WordPress 网站，则现场数据可以揭示在受控实验室环境中可能不会出现的性能问题。.
另一方面，实验室数据是在受控环境下生成的，用于调试性能问题。它虽然无法全面反映真实世界的用户体验，但可以提供可复现的结果，用于调试和优化网站性能。.
在开发环境中Lighthouse等工具模拟慢速网络，从而识别性能瓶颈。
从 Google Search Console (GSC) 到 Google Analytics (GA)，Google 所有流行的开发者工具都可以衡量 CWV 分数。.
来源： Web.dev
不过，今天我们要介绍的是谷歌的PageSpeed Insights工具，原因很简单，它是最简单、最全面的入门工具之一。
如何利用 PageSpeed Insights 发现并改进 FID 和 TBT
到目前为止，我们一直在讨论首次输入延迟 (FID) 作为衡量网站响应能力的手段，但在下一节中，我们将实际研究 FID 和总阻塞时间 (TBT)。.
两者都是衡量用户交互的指标，衡量和优化这两项指标可以对网站的用户体验产生积极的影响。.
1. 什么是TBT？它与FID有何不同？
TBT（超时时间）指的是网站因忙于其他任务而无法响应用户交互（例如按钮点击）的时间段。TBT 衡量的是网页“阻塞”的总时长——这相当于网页在处理其他任务时说：“稍等，我正在忙。”.
TBT 是实验室指标，用于在开发阶段进行性能评估；而 FID 是现场指标，可提供对实际用户体验的深入了解。.
在用户点击网页上的按钮的场景中，FID 会衡量用户操作与网站响应之间发生的延迟。.
这两个指标是相互关联的——如果出版商在测试期间成功优化了 TBT，他们很可能会在实际情况下观察到对 FID 分数的积极影响。.
2. 如何使用 PageSpeed Insights 衡量 FID 和 TBT
要使用 PageSpeed Insights 衡量这些指标，请按照以下步骤操作：
- 导航至PageSpeed Insights工具
- 分析目标网页
- 向下滚动即可找到该网站的FID和TBT评分
3. 如何改进 WordPress 网站的 FID 和 TBT
提升用户体验（FID）和目标用户访问量（TBT）需要优化网站的响应速度和交互性。以下是一些建议：
- 压缩并优化 CSS 和 JavaScript 代码：这有助于减小文件大小并提高网站的响应速度。许多工具（例如 WPRocket）都提供文件优化选项卡，可以压缩代码，从而显著提高 FID 和 TBT 分数。
- 消除耗时任务：耗时任务是指阻塞主线程 50 毫秒或更长时间的任务。将这些耗时任务拆分成更小的异步任务可以释放主线程，并改善 FID 和 TBT。
- 优化 JavaScript 执行： JavaScript 的解析、编译和执行是导致 FID 和 TBT 过高的主要原因。延迟执行未使用的 JavaScript、异步加载必要的大文件、尽量减少未使用的 polyfill 并确保 JavaScript 高效执行，都可以降低 FID 和 TBT。
- 充分利用 WordPress 主题的性能设置：许多 WordPress 主题都内置了性能设置。充分利用这些设置来优化网站。
- 资源预加载和后加载：图像延迟加载、延迟加载非关键 CSS、预加载关键资源和预取第三方资源等技术可以提高 TBT 性能，进而提高 FID。
专业提示：优化时，应着重关注整体用户体验，而非单个指标得分。这种整体方法能更有效地提升网站性能。
提升FID评分是一个复杂的过程，因为它涉及到网站代码。因此，发布商首先应该做的是限制繁重的JavaScript执行，并删除不必要的JS文件，从而使浏览器能够快速响应用户交互。
通过解决影响 WordPress 网站交互性的关键问题，发布商可以有效地改善 FID 和 TBT，从而提升整体用户体验和性能。.
如何利用 PageSpeed Insights 发现并改进 LCP
LCP 得分低意味着访客需要等待更长时间才能看到内容，这通常会导致更高的跳出率。.
1. 什么是LCP元素？
LCP 评估网页主要内容的加载时间：内容在屏幕上出现得越快，用户体验就越好。.
LCP 分数的主要贡献者主要是较大的元素，例如图像元素、视频元素或通过 URL 函数加载背景图像的元素。.
此外，块级元素（如标题、副标题和表格）和基于块的元素（如文本）在塑造 LCP 中也发挥着至关重要的作用。.
2. 如何使用 PageSpeed Insights 衡量 LCP
要计算 LCP 分数，请按照以下步骤操作：
- 导航至PageSpeed Insights
- 分析目标网页
- 滚动至“诊断性能问题”部分
- 将“显示与以下项目相关的审核”设置为 LCP
- 用户现在可以查看相关的商机和诊断信息。.
发布商还可以通过在 PageSpeed Insights 报告的“诊断”部分找到“最大内容绘制”元素建议并展开查看更多详细信息来识别 LCP 元素。.
3. 如何提升 WordPress 网站的生命周期成本 (LCP)
优化 LCP 涉及多个步骤，每个步骤都有助于提升网站速度和流畅度。以下是一些关键策略：
- 优化 LCP 元素：此步骤取决于 LCP 元素的性质。例如，如果 LCP 元素是一张图片，则可以对其进行压缩（而不会降低质量）。其他解决方案包括预加载首屏图片和占位符图片、根据用户屏幕尺寸使用srcset 属性，以及确保不要延迟加载首屏图片。
- 提升服务器响应时间： LCP（生命周期成本）衡量的是用户访问页面到浏览器收到服务器响应之间的时间。投资更高质量的虚拟主机方案、在服务器端和浏览器端实施合适的缓存机制，以及迁移到功能强大的内容管理系统（CMS）平台（例如 WordPress），都有助于缩短服务器响应时间。
- 减少阻塞渲染的元素：阻塞渲染的元素，例如 HTML、字体和 CSS，都是浏览器在加载内容之前需要先处理的静态文件。减少阻塞渲染的元素意味着浏览器渲染这些元素的时间会更少，从而加快加载速度并提高 LCP 得分。例如，发布商可以使用简单的字体来创建网页，或者预加载模块化的网页字体。
- 移除未使用的插件： WordPress 网站可以使用插件来管理许多技术方面的内容。但是，重要的是只保留那些直接提升网站功能的插件及其特性，而移除未使用的插件。这可以简化网站并提高 LCP 评分。
专业提示：缓存是一项强大的技术，可以显著提高LCP得分。实施缓存解决方案，将网页的静态副本保存在访客的设备上，这样他们每次访问网站时就无需下载相同的数据。
需要注意的是，LCP 是所有 CWV 指标中最难改进的。这是因为 LCP 依赖于 TTFB（首字节时间），而 TTFB 又取决于服务器的响应速度。根据所使用的框架，缩短服务器响应时间可能非常困难。.
出版商需要记住，改进的空间会因他们所使用的基础设施而异。.
通过专注于优化主页内容元素、提高服务器响应时间、减少 JavaScript 和 CSS 阻塞时间以及谨慎使用插件，发布商可以显著提高其 LCP 分数。.
如何利用 PageSpeed Insights 发现并改进 CLS
累积布局偏移 (CLS) 的核心在于视觉稳定性，它衡量网页加载过程中视觉内容的任何意外变化。视觉不稳定的网页会降低用户体验，导致跳出率上升。.
1. 什么是CLS元素？
CLS（页面加载稳定性）衡量的是视觉稳定性，因此影响CLS的元素是那些在页面加载过程中可能意外改变位置的元素。这些元素可能包括未指定尺寸的图片、广告、嵌入内容以及未固定尺寸的iframe。.
从本质上讲，任何在页面加载时可以移动的元素都可能影响 CLS 得分。.
2. 如何使用 PageSpeed Insights 衡量 CLS
使用 PageSpeed Insights，按照以下步骤识别和衡量网页的 CLS：
- 导航至PageSpeed Insights
- 分析目标网页
- 滚动至“诊断性能问题”部分
- 将“显示与以下系统相关的审核”设置为 CLS
这种方法使我们能够找出导致布局变化的原因，为改进提供起点。.
3. 如何改进 WordPress 网站的 CLS
提高 WordPress 网站的 CLS 值需要采取一些策略性步骤，这些步骤可以显著提高页面的视觉稳定性：
- 编辑元素布局：检查并调整元素布局，确保页面加载期间元素不会发生位移。此步骤包括为图片和视频设置特定的宽度和高度属性，并使用占位符静态预留空间，用于延迟加载的广告或 iframe。
- 使用关键 CSS 或移除未使用的 CSS：未使用的 CSS 会导致布局偏移。考虑使用仅包含首屏以上样式的关键 CSS，或删除冗余的 CSS 代码，以防止不必要的布局偏移。内联较小的样式并预加载重要样式也有助于改善布局偏移。
- 避免使用滑块插件：滑块插件的动态特性可能会导致布局偏移。如果可以，请尽量避免使用。
- 正确设置图片和div元素尺寸：精确设置尺寸并使用相同宽高比的响应式图片可以防止页面加载时元素发生偏移。务必在图片CDN （内容分发网络）中指定这些元素的尺寸。
- 将 CSS 从主题编辑器移动到子主题 style.css：将 CSS 转移到子主题可以确保样式正确加载，从而有助于减少布局偏移。
- 使用支持变换动画的主题和插件：与其他类型的动画相比，这些工具对布局变化的影响较小。
通过进行这些调整，WordPress 网站所有者可以大幅降低其页面的 CLS 分数，从而带来更稳定、更愉悦的用户体验。.
专业提示：对屏幕外的图片实现懒加载。这种策略可以让图片仅在即将进入视口时才加载，从而避免因图片延迟加载而导致的布局偏移。
请注意，CLS 是一项重要的以用户为中心的指标，它衡量页面加载过程中网站内容的偏移程度。CLS 值越低，用户体验越好。.
归根结底，提高CLS评分需要多管齐下的方法。定期使用PageSpeed Insights等工具进行检查、保持一致的布局实践以及认真使用主题和插件，这些都有助于降低CLS评分，并使网站更加稳定、用户友好。.
总结
衡量核心网站指标 (CWV) 的发布商将更有利于优化其网站的用户体验。.
优化内容窗口不仅能显著提升读者体验，还有助于搜索引擎优化 (SEO)。加载速度快、视觉效果稳定、响应用户操作迅速的页面不仅对用户有吸引力，对搜索引擎算法也同样有利。.
除了学习 PageSpeed Insights 等工具的使用方法外，出版商还应密切关注数字出版趋势、搜索引擎算法更新和专家见解，以持续提供世界一流的阅读体验。
