作为网站所有者或发布者，您一定在 Google 搜索控制台上看到过核心网络重要指标部分。大多数人会忽略这些指标，继续照常营业，认为它们只是 Google 的建议。然而，核心网络重要指标是 Google 用来衡量网页体验和网站排名的关键指标。
良好的用户体验可以提高排名，进而为您带来更多收入。在本文中，我们简化了有关 Google 核心网络重要指标的所有内容以及如何优化它们。
通过特定的 WhatsApp 消息传递，您可以直接与牙买加的用户联系，提高品牌曝光度和业务增长。牙买加 WhatsApp 号码数据 牙买加 WhatsApp 号码 库提供有效的用户联系信息，帮助企业轻松进军加勒比市场。 数值数据经过严格审核，确保高效沟通和真实反馈，成为海外市场拓展的理想工具。
内容
[展示]
核心网络生命力是什么？
Google Page Speed Insights 示例
核心网页指标是评估网站用户体验的页面体验信号。简而言之，这些信号表明用户能够多快与您的网站互动以及他们将获得的体验类型。这些指标——最大内容绘制 (LCP)、累积布局偏移 (CLS) 和首次输入延迟 (FID)——还表明用户浏览您的网站有多简单。
回到目录 ↑
核心网络指标如何影响 SEO
页面体验是 Google 官方的排名因素。页面上的用户体验是 Google 认为重要的多种因素的组合，包括：
使用 HTTPS 保护网站
移动友好性
以及核心网络指标
可以肯定地说，核心网页指标将占网页体验得分的大部分。但较高的网页体验得分不会自动将您带到搜索结果的顶部。Google 澄清说，网页体验是他们在搜索中对网站进行排名时考虑的几个（大约 200 个）因素之一。
因此，如果您想通过简单具体的步骤提升您的核心网络生命力，那么本文适合您。让我们详细了解它们。
回到目录 ↑
最大内容绘制（LCP）——加载
最大的内容绘画
LCP 衡量的是屏幕上最大元素（以像素高度计算）的加载时间。例如，如果您在首屏上方有一个大徽标、照片或一段文字，那么它们就是最大的元素。LCP 是视口中加载的最大可见元素。视口是网页中用户可见的区域。它因设备而异，在手机上，它会比在电脑屏幕上小。
最大的元素通常是特色图片或 h1> 标签，但它可以是以下任何一种：
使用 URL() 函数加载背景图像
文本块
<img> 元素
<svg> 元素内的 <image> 元素
<video> 元素内的图像
回到目录 ↑
如何查看网页的 LCP
LCP 元素在PageSpeed Insights的诊断部分中指定。
Google PageSpeed Insights 诊断部分
回到目录 ↑
优化 LCP
您必须做什么来确保您的 LCP 在建议的 2.5 秒内完成渲染？
确保您的 LCP 在移动设备上仅包含文本。将所有图片置于折叠下方。文本比图片加载速度更快，因为它们就是文本。
在第一张图片前使用 3-4 段文字。使用较短的句子和较大的段落。
增加字体大小和更大的行距与段落间距以优化可访问性。
在页面加载后的前 5-10 秒内，不要显示电子邮件选择加入弹出窗口。
切换到系统字体或 WebSafe 字体，如 Roboto 和 Arial。避免使用 Google 字体或自定义字体，因为它们很重，如果您的 LCP 是一堵文字墙，可能会降低页面的加载速度。
使用内容分发网络 (CDN) 缓存您网站的资产。内容分发网络 (CDN) 是一组遍布全球的服务器。如果您的网页内容托管在一台服务器上，那么对于距离较远的用户来说，您的网站加载速度会更慢。但是使用内容分发网络 (CDN)，您的用户无需等待网络请求到达远程服务器。
回到目录 ↑缓存资源
如果您的 HTML 是静态的且不会随着每次浏览器请求而改变，那么缓存可以为您节省时间。服务器端缓存可缩短 TTFB（到达第一个字节的时间）并通过在磁盘上存储生成的 HTML 副本来节省资源。
首字节时间 (TTFB) 表示 Web 服务器或其他网络资源的响应能力。TTFB 测量 HTTP 请求（由用户或客户端发出）与收到页面首字节之间的时间。
根据您的工具链，有多种方法可以实现服务器缓存：
设置反向代理（Varnish、Nginx）来提供缓存内容。
管理您的云提供商的缓存行为（Firebase、AWS、Azure）。
使用带有边缘服务器的 CDN 将内容缓存到更靠近用户的地方。
回到目录 ↑
更多步骤
优化和压缩图片。最好使用WEBp格式。
减小背景图像的大小和尺寸。（或删除背景图像）
如果可能，请在 CMS 设置中启用延迟加载图像。每个 CMS（包括 WordPress）在主题设置中都有附加组件（插件/应用程序）或内置延迟加载功能。
压缩 CSS 和 JavaScript
浏览器在呈现任何内容之前会将 HTML 标记解析为 DOM 树。如果遇到任何外部样式表 (<link rel=”stylesheet”>) 或同步 JavaScript 标记 (<script src=”main.js”>)，HTML 解析器将暂停。
脚本和样式表都会阻塞资源，从而延迟 FCP 和 LCP。推迟非关键 JavaScript 和 CSS 以加快页面加载速度。
减少 CSS 阻塞时间 # 使用以下命令确保只有最少的 CSS 阻止您的网站渲染：
CSS 文件可以包含空格、缩进和注释等字符，以使其更易于阅读。这些字符对于浏览器来说是不必要的，通过压缩这些文件，它们将被删除。减少阻塞 CSS 将减少其完全呈现页面主要内容 (LCP) 的时间。
回到目录 ↑累积布局偏移（CLS）——视觉稳定性
累计布局偏移
CLS 衡量元素在页面上的移动情况以及页面布局的稳定性。它考虑内容的大小以及加载时移动的距离。该指标的一个主要缺陷是，即使页面已完全加载，它仍会继续跟踪布局变化。
如果您尝试点击某个内容，但最终却点击了其他内容，那么页面的移动可能会令人烦恼。这会让用户感到恼火。
CLS 的常见原因包括：
使用 JavaScript 注入内容
无维度图像
无尺寸的嵌入和 iframe
较晚应用字体或样式
回到目录 ↑
如何检查 CLS
在 PageSpeed Insights 的诊断下，您可以看到移动元素的列表。
优化 CLS
在网络发展的早期，开发人员常常将宽度和高度属性添加到 img> 标签中，以确保在浏览器开始获取图像之前在页面上分配足够的空间。这将减少重排和重新布局。
<img src=”adsterra-logo.jpg” width=”640″ height=”360″ alt=”Adsterra 标志” />
可以看到示例中的宽度和高度不包含单位。这些“像素”尺寸自动保留了 640×360 的区域，无论实际尺寸是否匹配，图像都会拉伸以适应该空间。
当响应式网页设计出现后，网页开发人员开始忽略宽度和高度，而是使用 CSS 来调整图像大小：
图片 {
宽度：100%；/* 或最大宽度：100%；*/
高度：自动；
}
这种方法的缺点是，只有在图像开始下载并且浏览器确定其尺寸后才能为其分配空间。随着每幅图像加载并出现在屏幕上，页面会重新布局。文本突然出现在屏幕上变得很常见。这不是一个愉快的用户体验。
幸运的是，宽高比在这里发挥作用：图像的宽高比。这通常写成两个用冒号分隔的数字（例如 16:9 或 4:3）。宽高比为 x:y 的图像宽为 x 个单位，高为 y 个单位。
这意味着，如果我们知道其中一个尺寸，我们就可以算出另一个尺寸。对于 16:9 的宽高比，请使用以下公式：
如果 adsternra-logo.jpg 的高度为 360px，则宽度为 360 x (16 / 9) = 640px
如果 adsternra-logo.jpg 的宽度为 640px，则高度为 640 x (9 / 16) = 360px
当给定纵横比时，浏览器可以计算并为高度和相关区域保留足够的空间。
回到目录 ↑
最佳实践
为避免布局偏移，请将图片的宽度和高度属性设置为默认值。CSS 工作组简化了宽度和高度的设置：
<!– 设置 640:360，即 16:9 – 宽高比 –>
<img src=”adsterra-logo.jpg” width=”640″ height=”360″ alt=”Adsterra-logo” />
…并且所有浏览器 UA 样式表都会根据元素的宽度和高度添加默认的纵横比：
图片 {
纵横比： attr(宽度) / attr(高度)；
}
在加载图像之前，会使用宽度和高度属性来计算宽高比。它会在布局计算开始时提供这些数据。当为图像指定宽度（100%）时，宽高比会计算高度。
如果您的图片位于容器内，您可以使用 CSS 调整其大小以适应容器的宽度。要阻止图片高度为固定值，请设置 height: auto（例如 360px）。
图片 {
高度：自动；
宽度：100％；
}
回到目录 ↑
响应式图像
对于响应式图像，srcset指定浏览器可以选择哪些图像以及每幅图像应为多大尺寸。每幅图像应具有相同的纵横比，以设置 img>width 和 height 属性。
<图片
宽度=”1000″
高度=”1000″
来源=”adsterra-1000.jpg”
srcset=”adsterra-1000.jpg 1000w, adsterra-2000.jpg 2000w, adsterra-3000.jpg 3000w”
alt=”Adsterra 横幅”
/>
无尺寸的广告、嵌入内容、字体和 iframe
好消息是，网站可以通过采用最佳做法来减少广告转移。网站可以通过以下方式缓解 CLS 变化：
静态保留广告位的空间。
在加载广告标签库之前设置元素的样式。
避免在视口顶部附近放置非粘性广告。
通过保留尽可能大的广告位尺寸，您可以消除移动。
这种方法有效。但是，如果该位置被较小的广告创意填充，则可能会留下空白。根据过去的数据，确定最有可能的广告位尺寸。
如果广告位不太可能填满，一些网站可能会发现首先压缩广告位可以减少布局更改。除非您自己处理广告投放，否则没有直接的方法来每次选择准确的尺寸。
静态预留广告位空间
使用与标签库相同的大小静态设置插槽 DOM 元素的样式。这可以帮助确保库加载时不会发生布局偏移。如果不这样做，库可能会在页面布局后调整插槽元素的大小。
还要考虑较小广告的尺寸。如果投放的是较小的广告，则可以设计（较大的）容器以尽量减少布局偏移。这种策略的缺点是它增加了空闲空间的数量。
靠近视口顶部的广告可能比中间的广告改变布局更多。这是因为靠近顶部的广告往往包含更多下部内容，这意味着随着广告的变化，更多元素会发生变化。位于视口中间的广告不太可能像其上方的内容那样取代许多元素。
我们有Popunder格式。它的代码需要添加到网站头部。它不会在页面上打开广告，而是在新标签页中打开。
我们还有社 以色列 WhatsApp 地址 交栏，它会以推送通知或聊天窗口的形式出现。您可以设置其出现的延迟时间。
不要立即在第一个屏幕上放置大量横幅。从超轻量级格式开始：Popunders 和 SB。如果您认为安全系统的外观会影响速度，请让管理员配置延迟。
嵌入和 iframe
您可以使用可嵌入的小部件将可移植的 Web 内容添加到您的页面中（例如 YouTube 视频、Google 地图、Instagram、FB 媒体帖子等）。这些嵌入可以以多种形式出现，包括：
iframe 嵌入内联 HTML 代码片段
HTML 回退和将回退转换为花哨嵌入的 JavaScript 标签
这些嵌入通常事先不知道嵌入的大小。例如，社交媒体帖子中是否嵌入了图片或视频？是否有多行文本？因此，提供嵌入的平台可能并不总是为它们保留足够的空间，导致最终加载时布局发生变化。
为了解决这个问题，请为嵌入的占位符或后备提供足够的空间以减少 CLS。
使用浏览器的开发人员工具测量最终嵌入的高度。嵌入加载后，iframe 的内容将调整大小以适应。记下尺寸并相应地设置嵌入占位符的样式。使用媒体查询，您可以解释不同外形尺寸之间广告/占位符大小的细微差异。
回到目录 ↑
字体
当包含元素（例如 <div> 或段落）的大小随着网络字体的下载而发生变化时，字体会导致布局偏移。当网络字体的高度或段落长度与系统字体不同时，就会发生这种情况。即使您使用 font-display: block! 声明网络字体来阻止系统字体，浏览器也会使用后备字体的尺寸和属性来确定渲染页面时包含元素的大小。
检测由 Web 字体引起的布局偏移的最简单方法是使用WebPageTest和幻灯片视图运行您的网站。有一个显示布局偏移的开关，您可以将其与“大”示例图像和 0.1 秒间隔结合使用，以很好地了解您的网站呈现时发生的情况。（在 URL 末尾添加此内容：&highlightCLS=1&thumbSize=600&ival=100&end=visual&text=000&bg=fff”
秘诀在于，您只需一行 CSS 即可修复与字体相关的布局偏移：
字体显示：可选
此指令位于您的 font-face 声明中，并指示浏览器在呈现文本时（加上 100 毫秒）网络字体不可用时使用系统字体作为后备字体。这意味着后备字体可能在未缓存的页面加载时使用，但网络字体将被下载并在缓存中供所有后续页面加载使用。
回到目录 ↑
动态内容
除非用户提示，否则避免在现有内容上方添加新内容。这可确保任何布局更改都是可预见的。
尝试加载网站时，视口顶部或底部显示的 UI 可能会导致布局偏移。与广告、横幅和表单类似，页面内容的偏移通常会发生以下情况：
以下是可以采取的一些优化 CLS 的步骤。
对于任何媒体（视频、图像、GIF、信息图表等），请使用特定的大小属性：用户的浏览器可以通过这种方式查看该元素在页面上占用多少空间。
直到页面完全加载之前它才会随机出现
确保为广告元素预留足够的空间。否则，它们可能会突然出现在页面上，将内容向下、向上或向侧面推挤。
在折叠下方添加新的 UI 元素：这样，他们就不会将用户“期望”停留在原处的内容推到下方。
概括：
预加载网络字体。
为图片、视频、地图元素添加宽度和高度尺寸属性。大多数 CMS 都会自动设置该属性。但是，如果您的 CMS 默认不设置宽度或高度属性纵横比，则可以使用 CSS 来包含该属性。
在折叠下方添加新的 UI 元素（复选框、弹出窗口等）。
定义广告位、嵌入和 iFrames 的空间和大小。
为您的广告分配固定尺寸，以便有足够的空间来加载它们。
为广告、嵌入和 iframe 留出尽可能多的空间。
为尚未显示的元素保留足够的空间。换句话说，视口的任何区域都不应折叠。请使用占位符或后备元素。
回到目录 ↑
首次输入延迟 (FID)
FID 是用户与网站互动时页面响应所需的时间。这不包括滚动或缩放。
互动包括：
从菜单中选择点击导航链接
在字段中输入电子邮件
Google 重视 FID，因为它考虑了真实用户如何与网站互动。与 FCP 一样，他们对可接受的 FID 有特定的标准。
是的，FID 衡量的是某个页面上某项操作所花费的时间。所以它是一个页面速度分数。它还衡量用户在您的页面上执行某项操作所花费的时间。
对于仅包含内容（如博客文章或新闻文章）的页面来说，FID 并不是什么大问题。
FID 对于登录、注册和其他需要用户快速点击的页面很重要。
考虑以下页面的加载体验：
对于这样的登录页面，加载时间并不重要。重要的是用户能多快完成登录过程。
因此，您可以采取以下一些措施来提高网站的 FID 分数。
最小化（或推迟）JavaScript
删除所有不重要的第三方脚本
使用浏览器缓存
回到目录 ↑
衡量核心网络指标的工具
实验室数据 WS号码 和现场数据之间的区别在于，现场数据考虑真实用户、网络条件、设备、缓存等，而实验室数据在相同条件下反复测试，以期获得可重复的结果。
字段 d
现场数据
液晶聚合物 火焰离子化 中立证券
Chrome 用户体验报告 是的 是的 是的
PageSpeed 洞察 “ “ “
Google 搜索控制台（核心网络生命力报告） “ “ “
Web-vitals JavaScript 库 “ “ “
网络开发 “ “ “
Web Vitals 扩展 “ “ “
实验室数据
液晶聚合物 火焰离子化 中立证券
Chrome 开发者工具 是的 否（使用 TBT） 是的
灯塔 “ 否（使用 TBT） “
网页测试 “ 否（使用 TBT） “
PageSpeed 洞察 “ 否（使用 TBT） “
网络开发 “ 否（使用 TBT） “
总阻塞时间 (TBT) 测量首次内容绘制 (FCP) 和交互时间 (TTI) 之间的总时间（以毫秒为单位），在此期间主线程被阻塞的时间足够长，以至于对用户输入没有响应。
Google Search Console 报告很有用，因为它可以同时显示多个页面的数据，但数据有延迟，并且是 28 天的滚动平均值，因此更改可能需要一段时间才能显示出来。Lighthouse 的评分权重可以随时找到并随时间进行跟踪。
灯塔得分计算器回到目录 ↑
最后的想法
对于网络开发者和出版商来说，核心网络指标仍然是一个复杂的话题。但它们是让互联网成为更多用户更好的平台的关键一步。这些指标将永远是 Google 排名算法的一部分。
即使您现在没有发现任何问题，也应该密切关注它们。关于这一点，下面简要介绍一下将来需要注意的事项：
根据前 28 天的数据，Google 会确定您的网站是否通过了核心网络指标审核。因此，请每月至少测试一次您的网站。
测试时关注现场数据，因为它准确反映了真实用户与您的网站的互动方式。
使用 PageSpeed Insights 了解特定页面的运行情况。
使用 Google Search Console 识别页面组中常见的网络生命体征问题。
查看Google 指南以了解更多信息。
