如何针对 Core Web Vitals (Adsense) 优化您的网站

提高 Core Web Vitals 的竞赛并非易事。 如果您依靠像 Google AdSense 这样的广告程序来通过您的网站获利，那就更难了。

运行 Google AdSense 的网站未通过 Core Web Vitals 测试的可能性是没有使用 Google AdSense 的同一网站的 10 倍。 这主要是由于 Google AdSense 添加到您的网站的第三方请求和资产的数量。 这些资产中的大多数都是未经优化的、庞大的和非用户友好的。

在 AdSense 和广告平台之外，如果您有很多未经优化的图片、JavaScript 和 CSS，尤其是在首屏，那么您也很可能无法通过 Core Web Vitals 测试。

如果您一直在努力通过 Core Web Vitals 测试并提高您的搜索引擎排名潜力，您将在本文中找到实用的解决方案。

什么是 Core Web Vitals？

Core Web Vitals 是由 Google Lighthouse 提供支持的指标，用于确定网站如何提供良好的页面体验。 虽然运行测试时有许多指标，但最重要的指标是最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。

谷歌宣布，从 2021 年 5 月起，这些指标将成为其排名信号的一部分，用于确定网页在搜索结果中的排名。

总之，您可以说 Core Web Vitals 并不是要让网站管理员感到恐惧，而是一种改善网站页面体验的手段。

最大内容绘制时间 (LCP)：LCP 衡量网页上最大可见图像或文本块的加载时间。如果最大可见图像或文本加载速度快，则表明其余图像和文本的加载速度也很快。LCP 的合格加载时间为2.5 秒。

首次输入延迟 (FID)：FID 用于衡量网页交互性。它由用户点击网站后浏览器开始处理事件处理程序所需的时间决定。这通常被称为网站的第一印象。所需的延迟时间为100 毫秒。

累积布局偏移 (CLS)：CLS 用于衡量网页上发生的布局偏移。当网页加载后，如果突然出现或消失某些内容，导致页面需要调整大小，这种偏移就是 CLS 所测量的。这会严重影响用户体验，我同意这一点。及格分数应该是0.1。

如何针对 Core Web Vitals 优化您的网站

请按照以下步骤优化您的网站：

1.从一个快速的网络主机开始

如果您有一个响应时间很糟糕的网络主机，那么我将在此处列出的所有其他内容都可能不会产生预期的结果。 服务器响应请求的速度越快越好。

为什么具有快速首字节时间 (TTFB) 的网络主机很重要？ 有些人会争辩说 TTFB 无关紧要，但确实如此。 这是其他一切的基础。 如果您的用户位于互联网速度较慢的城市，那么您的网络托管服务商的响应速度将意味着一切。 如果您的用户主要来自拥有超快互联网的城市，那么任何网络主机都可以表现良好。

尝试测试您的虚拟主机将如何响应 3G 或 2G 而不是 4G。 因为如果您有很多用户通过 3G 或 2G 进行连接，那么它就会增加您的 Core Web Vitals 分数。 因此，每一毫秒都很重要。 在 FID 中获得 100 毫秒和获得 101 毫秒之间的区别在于，在 100 毫秒时，你通过了，但在 101 毫秒时你失败了。 所以，如果有人告诉你 1 毫秒无关紧要，那他可能就错了。

选择网站主机时，务必确保数据中心离您网站的大多数用户更近。您可以通过查看分析数据来确定用户的位置。您的用户主要来自哪里？选择离他们更近的数据中心。越近越好。

我个人注意到，在更改虚拟主机后，网站的 Core Web Vitals 字段数据发生了显着变化。 我什么也没做。

如果您正在寻找速度快的网站主机，市面上有很多推荐，但其中很多都缺乏真诚，纯粹是联盟营销的结果。如果您使用 WordPress 并且预算充足，我强烈推荐Kinsta。他们是 WordPress 用户的最佳选择。如果您需要更经济实惠的方案，或者您不使用 WordPress，那么Cloudways也非常有效。

2.使用轻量级和速度优化的主题

这个技巧对非编码人员甚至对时间较少的编码人员特别有用。 特别是如果您使用的 WordPress 有很多选项，请确保您使用轻量级和速度优化的主题。

因为主题就像你网站的骨架，如果骨架坏了，身体就会坏掉。 仅此而已。

选择主题时，有很多最佳实践需要注意。一些常见的错误做法包括过度依赖 jQuery、加载过多不必要的 CSS/JS、主题体积过大等等。您可以使用Yellow Labs之类的工具来测试演示版本。

如果您正在使用 WordPress，您可以查看速度最快的 WordPress 主题列表。

3。 优化您的图像

图像很酷。 他们使内容如此吸引人。 但是，如果未进行优化，它们可能会成为负担。 拥有像 3 MB 这样的大图像肯定会影响您的速度。 如果在滚动之前访问您的网站时可以看到这些图像，它们肯定会影响您的 LCP 指标。

事实上，未经优化的图像会增加页面的大小。 页面越大，加载时间越长。

我个人更喜欢在上传之前优化每张图片。 我不使用任何外部服务进行图像优化。 但是，如果您使用 WordPress 或类似的 CMS，则有插件和解决方案可以自动优化图像。 无论您使用什么，也有云解决方案。

4.删除或减小背景图像的大小

背景图像通常非常大。 它会减慢您的加载时间，因为必须先加载它才能显示有意义的内容。

您可以完全删除背景图像以拥有更快的网站。 如果它们如此重要，则考虑将它们优化到尽可能小的尺寸或使用图案而不是图像。

5.使用浏览器缓存

如果您有很多忠实的读者，那么您应该考虑浏览器缓存。 当用户第一次访问您的网站时，浏览器会缓存该网站。 对于其他每次访问，它将立即加载。 从第二次访问向上，这可以大大提高 FID 和 LCP。

对于 WordPress 用户，大多数缓存插件都可以帮助您实现这一目标。

6. 缩小 JavaScript 并推迟未使用的 JavaScript

虽然 JavaScript 很神奇，但它经常是渲染阻塞。 这意味着它会影响您的加载时间并最终影响您的 FID。

尝试通过删除空格和注释来缩小 JavaScript 以减小文件大小。 此外，请确保您推迟了非关键 JavaScript。 这应该会改善您的 FID。

对于 WordPress 用户来说，可以使用Autoptimize、WP Rocket等插件来做到这一点。

7. 设置 AdSense 尺寸属性

如果您在自己的网站上运行 AdSense，并且遇到了 CLS，那么这可以解决您的所有问题。 它对我有用，也应该对你有用。

如果您有一个靠近用户访问时可见的标题的广告单元，则一个问题是广告可能不会立即加载。 它可能会在页面已经加载后加载，并且当它加载时，布局会发生变化。 这对于自适应广告单元很常见。 发生这种情况后，就不可能通过 CLS 指标。

处理此问题的最佳方法是稍微修改一下您的 AdSense 代码。 不用担心，这是非常合法的。 只需指定广告的尺寸属性，尤其是高度。 完成此操作后，您将不会再注意到广告加载时的布局变化。

下面是我在博客标题下方使用的响应式广告单元示例。 我已将我的发布商 ID 和广告位替换为 XXXXXX。 注意到我添加了高度属性（最小高度：300px）。 我这样做的那一刻，所有 CLS 问题都一去不复返了。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

这样做是为了在页面上保留该大小。 因此，无论何时出现广告，布局都不会发生变化，因为您已经设置了尺寸。

8.为您的图像和其他媒体设置大小属性

就像广告一样，图片和其他媒体在加载到您的网站时可能会导致布局变化。 您可能只是在阅读某些内容，然后加载了图像，突然布局发生了变化，您正在阅读的内容不在视野范围内，您所看到的只是其他内容，或者您​​甚至错误地单击了其他内容。

您可以通过为媒体文件设置大小属性来避免所有这些。 您的 CLS 指标会很高兴您这样做。

9. 延迟加载图片。

您可能在 PageSpeed Insights 上看到过关于延迟加载屏幕外图片的建议。这其实就是延迟加载图片。

延迟加载的作用是减少页面大小，并减少用户访问时页面的加载时间。 这对 CWV 指标有好处。

这将特别有助于改善 LCP。

10. 通过缩小和生成关键 CSS 来优化 CSS

CSS 使网站看起来很酷，但是大型 CSS 文件可能是一个大问题，因为它会延迟向用户呈现页面。

当用户访问您的网站时，浏览器通常会延迟向用户呈现您的网页，直到它已加载、解析并执行您网页标题中引用的所有 CSS。 如果你有一个大的 CSS 文件，这可能是一个大问题。 它会减慢您的网站速度。

关键 CSS 可以通过仅加载页面加载所需的 CSS 来提供帮助。 而其余的 CSS 可以异步加载。

通过删除空格和注释以减小文件大小来缩小 CSS 也会有所帮助。

您还可以删除未使用的 CSS。如果您使用的某个服务推送了未使用的 CSS，可以安全地将其删除。

如果您使用 WordPress，可以使用WP Rocket 、LiteSpeed Cache、FlyingPress等插件来帮助您实现此目的。

11. 实现 AdSense 智能加载

如果 AdSense 导致您的网站速度变慢，则此方法几乎可以完全消除所有挑战。

这是关于以一种智能的方式加载 AdSense。 在用户执行滚动或点击等操作之前，不会加载 AdSense。 这将大大缩短加载时间以及受 AdSense 影响的任何核心网络生命周期。

有很多 WordPress 插件可以帮助你做到这一点，例如WP Rocket和 Flying Scripts。据我所知，这种方法并不违反 Google AdSense 政策。

注意：虽然这种方法可以帮助提升页面加载速度和页面评分，但可能会影响您的 AdSense 收入。我建议您进行实验，以确定这种方法是否值得。

12. 如果可以，请使用 System Stack 字体

字体会在任何网站上增加额外的加载时间。 对于没有图像的网页，您的文本块可能会影响您的 LCP 评级。 在这种情况下，您的 LCP 分数将直接受您的字体影响。

虽然 Google Font 和 Font Awesome 继续改进，但使用系统堆栈字体提供了显着的改进。 虽然根据设备的不同并不那么奇特。

13.使用CDN

如果您有来自世界各地的用户，那么使用 CDN 可以帮助您提高速度并间接提高您的 Core Web Vitals 指标。

简单来说，CDN 会制作您网站的许多副本，并将它们存储在世界不同地区的各种入网点 (POP) 中。 当有人请求您的网站时，它会从最近的位置为您的网站提供服务。

例如，如果您的网站托管在美国，并且您有来自英国的访问者，那么 CDN 不会从美国获取您的网站，而是从英国为您的网站提供服务。 这样做的效果将是快速交付。 速度。

您可以查看一下目前最好的CDN服务商。

14.设置DNS预取

如果您依赖 CDN 等外部服务来交付网站，那么您可能需要设置 DNS 预取，以最大限度地减少因 DNS 查询造成的延迟。

DNS 预取将在调用 DNS 之前对其进行预取。 这样它在最终被调用时立即加载。

15.优化第三方脚本

检查以确保您在您的网站上使用的某些服务没有添加可能会降低您的网站速度的第三方脚本。

您可以用第三方请求替换解决方案，用更好的解决方案减慢您的网站速度。

对于另一个第三方脚本 Google AdSense，您无能为力。 最佳做法是在一个页面上最多使用 3 个广告。 避免匹配内容，因为它会带来低收入但会增加加载时间。

16. 从首屏移除 AdSense

该建议基于实验。 如果您在搜索控制台报告中的所有指标（LCP 除外）都很好，请首先确保您的图像和字体都经过优化。 如果它们经过优化并且您仍然未能通过 LCP，那么 AdSense 可能会负责。

如果您负担得起，请将 AdSense 从首屏移除一个月，看看问题是否会消失。

如果您不想删除它，您可以手动或借助 Flying Scripts 等插件延迟它。

17. 切换到 AMP

AMP 代表加速移动页面 (Accelerated Mobile Pages)。AMP 的理念是优化网页，使其在移动设备上加载速度更快。当然，AMP开源项目是由谷歌发起的。

虽然 AMP 最初旨在加速移动页面，但它也可以加速桌面页面。

根据我们的观察，AMP 页面始终比移动或桌面页面快，有时快 100% 以上。

如果您网站的唯一获利策略是 Google AdSense，那么您可以考虑将您的所有网站都切换到 AMP。 我个人注意到，在我拥有的博客上，AMP 页面上的 AdSense 有时比移动设备和桌面设备的转化率更高！

结语

Core Web Vitals 可以帮助您为用户改进您的网站，而不仅仅是为 Google。 拥有良好的实验室数据测试分数但糟糕的现场数据分数是很常见的。

这是由于您的用户的构成。 如果您的大多数用户来自互联网速度较慢的地方，那么您可能在优化方面做得很好，但在现场数据方面仍然失败。