如何优化网站以符合谷歌的Core Web Vitals标准
发表更新33 分钟读完 (大约4883个字)0次访问

如何优化网站以符合谷歌的Core Web Vitals标准

为什么要做Core Web Vitals?

网站响应速度越快，在谷歌中的排名越高的机会就越大

谷歌排名的主要因素（优先级从高到低）

  1. 高质量的内容

    在Google排名因素里绝对以‘内容为王，外链为皇’，如果能创造对用户来说独特、新颖、且有帮助的内容，那么Google搜索引擎会将结果页面排到更高位置。

    Google特别关注内容质量，无论如何优化网站，如果内容没有价值，就不要期望能获得更高的排名。

    那么，什么才算是高质量的内容呢？

    原创、独特、有价值的内容

    如果内容重复或者跟其他网站类似，那么就会对SEO产生负面影响，对于新网站来说Google可能就不会去索引你的页面，网站就不会获得排名。如果经常发布重复内容，Google会减少抓去你的网站内容的频率。

    经常更新内容

    通过定期更新网站，为其添加新东西，通过增加内容新鲜度给搜索引擎发出一个积极的信号。如果内容主题涉及到新闻或者某件事的发展趋势，可以通过Google Trends工具找到最新的信息来保持内容的新鲜度。

    内容长度

    平均长度1890个词的文章会排在第一页，但对字数的限制没有一个硬性规定。更好的解决办法是撰写具有深度的内容，能够完全回答用户的问题并提供详细的解决方案。

    内容结构和组织方式

    组织合理、结构清晰的网页，可以让访客更轻松的、更方便的阅读并找到问题的解决方案。
    优化文章的结构和组织可以使用多个标题和副标题（H2、H3、H4等），还可以使用列表的形式组织内容，好处就是Google会为不同的关键词筛选带列表形式的高质量内容，将其展示为答案盒子。
    通过整理内容的结构和组织方式，内容的可读性将大大提高，正反馈就是提高了用户体验，增加了停留时间（Dwell Time）间接的增加了提高排名的机会。

  2. 反向链接

    Google排名算法中第二优先级排名因素就是反向链接。
    如果你的网站能从权重高的网站获得反向链接，通过这些链接相当于给Google传递了一个信号，即你的内容是值得信赖的，因为有这么多不同的网站都可以为你做担保。
    通过这些反向链接（入站链接）可以为你的网站带来更多流量，就有极大的可能获取更高的排名。

  3. 搜索意图

    你的网站内容是否匹配用户的搜索意图对Google排名的影响非常重要。
    这就意味着如果你想写关于某个主题的内容，一定要匹配搜索意图，如果想为某个搜索关键字排名，则应该制作视频或者信息图表等。
    通过匹配搜索意图，可以回答这些问题并创建人们正在寻找的内容。

  4. 网站加载速度

    提高网站加载速度不仅可以提高Google搜索引擎的排名，还可以降低网站的跳出率，提高其转换率，提供更高的用户体验。
    可以使用Google免费的工具PageSpeed Insights来检查你的网站加载速度，PageSpeed Insights会生成网页的实际性能报告，并能提供如何改进响应网页的建议。
    如何提高网站的加载速度？

  5. 移动友好

    在GSMA智库近日发布了《2023年全球移动经济报告发展》报告，报告显示截至2022年底，全球独立移动用户数为54亿，其中移动互联网用户数为44亿，且自从Google在2019年提出移动优先的口号，所以网站自适应移动端就称为了关键。
    这就意味着Google会优先使用你的网站移动版去索引和排名，如果想快速提升你的网站排名，那么就需要让你的网站变成移动端友好型网站。

  6. 域名权威

    “域名权威”是 SEO 相关的术语，指网站的域名在某领域相关内容具有权威性，一般域名建站时间越久、反链越多、流量越大、搜索引擎点击数越高、跳出率越低，域名就越权威。
    通过专注在自己的领域，创造出更优秀的内容，可以通过关键词分析工具，找到访客感兴趣的主题，围绕这些主题打造高质量内容增加话题的权威性。
    如此，Google变为逐渐把你的网站当作该主题领域的权威专家，提高你的网站的域名权威，从而提高网站在搜索引擎的排名

  7. 关键词优化

    关键词即用户搜索框输入的内容，它如实的反馈了用户的需求，所以找准关键词，也就意味着锁定了目标用户。
    所以你的网站中包含了你的受众群体正在搜索的关键词是非常关键的。

    如何做网站关键词优化？
    ·标题：在SEO标题的开始就包含目标关键词
    ·元描述：写吸引人的描述，然后添加关键词，告诉用户这个页面是做什么的，提高用户的自然搜索点击率
    ·图片alt文字：可以将关键词添加到alt文本中告诉Google这是什么
    ·锚文本：Google使用锚文本来查找页面内容，给关键词加上锚文本链接帮助Google识别页面内容
    ·使用LSI关键词：用户会搜索除主要关键词之外的其他相关词条，这些词条被称LSI（潜在语义索引）关键词，通过在页面上包含这些内容，可以帮助Google找出有关内容。
    ·避免关键词堆砌：不可不断重复主要关键词，这是一种不好的SEO做法。
    ·在H2和H3中添加关键词：通过关键词变体来进一步优化内容组织结构
    ·URL中添加关键词

  8. 网站结构

    站内结构决定了网站是否容易被收录，是否方便用户浏览，是否符合蜘蛛的爬取等等。
    网站结构是指网站中页面之间的层次关系。从用户角度来讲，能够使用户方便快捷的在网站中浏览内容，不至于迷失。对搜索引擎来说，优化网站结构，可以帮助蜘蛛快速抓取网站内容

  9. 网站安全

    HTTPS会影响网站的排名，HTTPS保证了您的站点是否在用户的浏览器和Web服务器之间建立了安全连接，它可以加密网站和用户浏览器之间的数据

  10. 用户体验

    网站的整体的用户体验也是影响Google排名的一个重要因素，但是Google是如何衡量的呢？
    Google使用了一个名为RankBrain的人工智能程序，该程序结合了其他的排名要素，例如：
    ·自然搜索点击率（CTR）：通过提高网站链接的点击率，可以提高排名
    ·停留时间（Dwell Time）：从搜索结果到你的网站后的停留时间
    ·跳出率：进入网站到离开网站没有任何交互，Google会任务该页面不相关，不会对其进行排名

总结：
以上就是本文的所有内容，希望你能够习惯这篇关于影响Google排名10大因素的文章。

参考：

SEO站内优化：网站结构优化
怎么做网站关键词优化？
PageSpeed Insights
优化网站加载速度的14个技巧
什么是自然搜索点击率（Organic CTR）？
什么是跳出率及如何保持网站较低跳出率

谷歌如何评估网站性能？

性能度量应用程序（如浏览器开发工具）报告技术度量，例如

  • 阻塞时间：等待下载开始所花费的时间。
  • DNS解析：将主机名解析为IP地址以索引资产的时间。
  • 连接时间：初始化TCP连接的时间。
  • 首字节时间（TTFB）：请求和响应第一个字节之间的总时间。
  • 接受时间：检索整个资产的时间
  • DOM加载时间：下载和呈现HTML文档对象模型的时间，分析和修改DOM的脚本可以可靠运行的第一个点。
  • 页面加载时间：下载页面和所有资产（图像、样式表、脚本等）的时间
  • 总页面重量：所有资产总大小，通常报告为压缩（下载）和未压缩大小
  • DOM元素数：页面上HTML元素的总数，元素越多，页面处理时间越长
  • 首次内容绘制（FCP）：浏览器第一个元素像素之前所有的时间
  • 首个有意义慧智（FMP）：主页内容对用户可见之间所花费的时间。
  • 交互时间（TTI）：页面完全交互并能够可靠响应用户输入所花费的时间。
  • 首次CPU空间（FCI）：CPU呈现页面并运行所有初始化脚本，等待进一步输入的时间
  • CPU使用率：呈现页面和响应用户输入时所需的处理活动
  • 每秒布局数：浏览器必须重新计算样式和页面布局的速率

以上这些可以用于确定特定的瓶颈，如服务器负载、CMS缓存、浏览器缓存、下载速度和javascript效率。但无法确定页面提供的用户体验是否良好。
如：应用程序可以快速下载并显示，但第一次交互后会变得无响应，因为它正在执行大量未优化javascript代码。

什么是Core Web Vitals?

  • 最大内容绘制（LCP）：加载性能
  • 首次输入延迟（FID）：交互性能
  • 累计布局偏移（CLS）：视觉稳定性

最大内容绘制 LCP

本质上代表的是可用内容在页面上呈现的速度有多快？

LCP分数低的常见原因：

  1. 在客户端上生成的页面内容，而不是在服务器上生成的内容需要更长的时间，LCP客户端渲染（CSR） > 服务端渲染（SSR），顺便提一下SSR更有利于首屏渲染，CSR更利于页面交互
  2. 服务端限制，服务端响应慢
  3. HTML中国呢引用了阻塞CSS和javascript，导致延迟页面加载
  4. 大型图像或视频占用网络带宽，导致需要更长的渲染时间

如何提高LCP分数：

  1. 升级服务器和/或主机服务。确保下载速度即使在高使用率时也保持快速。
  2. 激活服务器压缩和HTTP/2+。没有理由不这样做！
  3. 减少服务器工作。删除未使用的代码和CMS插件，然后启用有效缓存。
  4. 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希，以便不再请求文件。
  5. 使用内容交付网络（CDN）在地理位置更靠近用户的服务器上拆分负载和托管资源。
  6. 优化你的图像。将它们减少到最小尺寸，并使用适当的格式来最小化文件大小。确保尽早请求最大内容块中的任何图像；预加载可能会有所帮助。
  7. 通过添加loading=”lazy”属性延迟加载图像。添加宽度和高度属性，以确保在图像完成加载之前在页面上保留适当的空间。
  8. 最小化第三方请求，并将移动资产考虑到主域以避免无关DNS查找。
  9. 最小化请求文件的数量和大小，尤其是在HTML的顶部。
  10. 确保仅加载所需的web字体。切换到web安全字体以获得最佳性能。
  11. 删除未使用的JavaScript和CSS文件。
  12. 连接并缩小JavaScript和CSS文件。
  13. 避免CSS@import语句-它们是串联的渲染块和加载样式。
  14. 避免Base64编码-它会增加文件大小并需要额外的处理。
  15. 考虑关键的联机CSS。在页面顶部的<link>块中嵌入基本的“折叠上方”CSS，然后异步加载更多样式表。
  16. 稍后使用异步、延迟或ES模块JavaScript运行脚本。在服务工作者中执行长时间运行的JavaScript进程。

首次输入延迟 FID

本质上代表网页对用户的输入、点击和滚动等操作的响应速度有多快？

FID分数低的常见原因：

FID和TBT分数低通常是由占用处理器的客户端代码引起的，例如：

  1. 大量的呈现阻塞CSS和JavaScript，这会在下载和解析代码时停止页面加载
  2. 加载页面时立即运行的大型流程密集型脚本
  3. 长时间运行或优化较差的JavaScript任务

默认情况下，浏览器运行在单个线程上，一次只能处理一个任务。如果一个JavaScript函数需要一秒钟的时间来执行，那么所有其他渲染过程都会在这一秒钟内被阻塞。页面无法响应用户输入、更新DOM、显示动画等。甚至GIF动画也可以在旧浏览器中被阻塞。

如何提高FID分数：

  1. 在服务器上生成并缓存尽可能多的静态HTML内容。尽量不要依赖客户端JavaScript框架为每个人呈现相同的HTML。
  2. 确保浏览器可以有效缓存文件。在HTTP头中设置适当的Expires、Last Modified和/或ETag哈希，以便不再请求文件。
  3. 采用渐进式增强技术，因此在JavaScript运行之前，该界面可以在HTML和CSS中使用。
  4. 删除未使用的JavaScript和CSS文件。
  5. 连接并缩小JavaScript和CSS文件。
  6. 避免过度使用昂贵的CSS属性，如框阴影和过滤器。
  7. 稍后使用异步、延迟或ES模块JavaScript运行脚本。
  8. 最小化对分析、社交媒体小部件、论坛等的第三方JavaScript请求。这些请求可以快速加载到数兆字节的JavaScript。
  9. 根据需要延迟加载JavaScript组件，例如聊天窗口小部件、视频播放器等。
  10. 延迟加载不太重要的脚本，如分析、广告和社交媒体工具。
  11. 将长时间运行的JavaScript任务分解为一系列较小的作业，这些作业在短时间的requestIdleCallback、setTimeout或requestAnimationFrame延迟后执行。
  12. 考虑在Web工作者中使用一个后台线程来执行长时间运行的JavaScript进程。

累计布局偏移 CLS

本质上代表页面内容是否会意外移动或者跳转尤其是在初始加载期间

通过以下指标相乘计算累计布局偏移CLS：

  • 影响分数：视口中国呢所有不稳定元素的总面积（%）
  • 距离分数：不稳定元素移动的最大距离（px），移动像素/视口大小

手动测测CLS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let cls = 0;

function onLayoutShiftEntry(entry: any) {
  if (entry.hadRecentInput) {
    cls += entry.value;
  }
  console.log(cls);
}

const observer = new PerformanceObserver((entries) => {
  for (const entry of entries.getEntries()) {
    onLayoutShiftEntry(entry);
  }
});

observer.observe({ type: "layout-shift", buffered: true });

//  主动触发
observer.takeRecords().forEach((entry) => onLayoutShiftEntry(entry));

累积布局偏移分数低的常见原因：

CLS分数低通常是由于加载页面资产和动态或未调整大小的DOM元素速度慢造成的：

  1. 页面上的空间不用于图像、iFrame、广告等。
  2. 内容被动态地注入DOM，通常是在网络请求广告、社交媒体小部件等之后。
  3. Web字体加载会导致不可见文本（FOIT）或未设置样式文本（FOUT）的明显闪烁。

如何提高累积布局偏移分数：
客户端审计可以发现问题，但通常是确保在内容下载之前为内容预留空间。为最大内容绘制建议的服务器优化提示将有一些好处，但可能会有进一步的改进：

  1. 在HTML的<img>和<iframe>标记中添加宽度和高度属性，或者使用新的CSS纵横比属性确保在下载资产之前在页面上保留适当的空间。
  2. 为封装第三方内容（如广告和小部件）的容器元素设置适当的尺寸。
  3. 确保尽早请求显示在页面顶部的图像和其他资产-预加载可能会有所帮助。
  4. 尽量减少Web字体的使用，并考虑在可能的时候使用常用的OS字体。
  5. 加载web字体并将CSS字体显示设置为可选或交换。确保使用大小相似的回退字体，以最小化布局偏移。
  6. 避免向页面顶部插入元素，除非页面响应用户操作（如单击）。
  7. 确保在输入触发器的500毫秒内完成用户交互。
  8. 使用CSS变换和不透明度可以获得更高效的动画，而不会导致重新布局。
  9. 考虑关键的联机CSS。在页面顶部的<link>块中嵌入基本的“折叠上方”CSS，然后异步加载其他样式表。
  10. 必要时，考虑包容，一种新的CSS特性，允许您识别页面的孤立子树。浏览器可以通过渲染或不渲染特定的DOM内容块来优化处理。
#

评论

×