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

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

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

最大含量的涂料（LCP）：LCP 测量网页上最大的可见图像或文本块加载所需的时间。如果最大的可见文本或图像加载速度很快，则认为其余图像和文本将快速加载。通过所需的加载时间是 2.5秒.

首次输入延迟（FID）: FID 测量网页交互性。这取决于用户单击您的站点后浏览器开始处理事件处理程序所需的时间。这被广泛称为您网站的第一印象。通过所需的时间是 100毫秒.

累积版式移位（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、过大的主题大小等等。您可以随时使用类似的工具黄色实验室, 来测试演示。

如果您使用的是 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 Insight 上的建议推迟屏幕外图像. 它的简单含义是延迟加载图像。

延迟加载的作用是减少页面大小，并减少用户访问时页面的加载时间。这对 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 会制作您网站的许多副本，并将它们存储在世界不同地区的各种入网点 (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 表示加速移动页面。 AMP 的想法是优化网页以在移动设备上更快地加载。当然，AMP 开放源码项目由 Google 发起。

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

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

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

结论

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

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