您想拥有一个在谷歌排名靠前且转化率高的网站吗？确保网页快速加载对于提供良好的用户体验非常重要。谷歌推出的三项核心网站指标多年来一直是排名信号。不知道如何优化核心网络指标？本文提供了关于如何优化页面速度的 10 条建议，以及如何解决一些最常见的问题。

一，使用 Google Search Console 检查页面速度是否影响搜索引擎优化

Google Search Console 包含一个高级别的 Core Web Vitals 报告，可以告诉你网站上是否有需要优化速度的页面。谷歌从真实的 Chrome 浏览器用户那里收集这些页面速度数据。

您可以点击 “为什么URL不被认为是好的 “部分中的单个问题，找出受该问题影响的页面。

请注意，Search Console 会将类似页面分组，因此，例如 “示例 URL “的 “Largest Contentful Paint (LCP) “值并不一定与 “Group LCP “的整体值一致。

二，查看免费网页速度测试

运行在线网站速度测试可了解网站加载速度，帮助您了解页面速度，并提供改进建议。只需输入您的网站 URL 即可生成报告。

您可以点击每个指标，了解影响指标值的更多因素。例如，许多页面加载里程碑可以通过查看瀑布图来解释，该瀑布图显示了不同页面资源开始和完成加载的时间。

通过瀑布图顶部的电影带视图，您可以将网络上发生的情况与访客所能看到的情况联系起来。

您还可以从真实用户的 Chrome 浏览器用户体验报告 (CrUX) 数据中了解网站的运行情况。这是 Google 用作排名因数的数据。

最后，您可以在 “概览 “选项卡底部找到针对您网站的页面速度建议。

三，逐帧观看网站渲染

当你在网络状况极佳下加载网络的时候可能只需要一两秒。这样太快了，根本无法真正看到一步步发生了什么。使用 Chrome DevTools 中的网络节流功能，可以查看网站在较慢连接下的加载情况。您可以看到内容逐渐出现，并在优化过程中利用对加载过程的了解。

按照以下步骤可以使用较慢的连接加载网站：

1. 右键单击页面，然后单击 “检查”。
2. 打开 “网络 “选项卡。
3. 打开 “无节流 “下拉菜单，选择 “快速 3G”。
4. 重新加载页面。

在下面的示例中可以看到这一点：

1. 在背景图片出现之前，页面以静态背景开始渲染。
2. 在网页字体加载完成之前，最先使用的是后备字体。
3. 中间的图像最后才会出现。

 

四，关注Core Web Vitals ，而不是Lighthouse得分

谷歌的Ligthhouse被广泛用于测试网站性能。该工具易于使用，并能提供一套可行的建议来改进网站。

然而，Lighthouse性能得分并不是搜索引擎优化排名的最佳选择。许多网站的Lighthouse性能得分较低或一般，但在影响排名的真实用户数据中，所有三个核心网站生命周期指标都表现良好。

Lighthouse适合在固定环境中测试网站，让你在获得最新真实用户数据之前对网站进行前后测试。但最终重要的还是访客对网站的体验。

五，优化渲染受阻资源

渲染受阻资源是指在浏览器向用户显示任何内容之前需要加载到网站上的文件。页面 <head> 中的 CSS 和 JavaScript 文件通常会阻止呈现。

下面是一个请求瀑布图示例，展示了呈现阻塞文件如何影响网站的呈现过程。

1. 浏览器从空白页开始。
2. 加载 HTML 文档。
3. 加载多个呈现阻塞资源（我们将重点关注 app.css，因为它是最大、最慢的文件）。
4. app.css 加载完成后，页面开始渲染（如瀑布流中橙色 CPU 任务所示）。
5. 最后，页面内容开始在 filmstrip 视图中可见。

加载许多会阻碍渲染的资源会使页面内容显示得更慢，并会影响您的LCP得分。

改善服务器响应时间

加载初始 HTML 文档是加载网站的第一步。The Time to First Byte（TTFB）指标衡量的是网络服务器响应该资源请求的速度。

减少渲染阻塞请求的数量

让网站加载更快的最佳方法是减少阻碍渲染的资源数量。如果一个文件不是呈现内容时所必需的，那么它就不应该阻止呈现。

例如，script 标签上的 defer 和 async 关键字会告诉浏览器应该加载 JavaScript 文件，但页面可以在此之前开始呈现。

<script src="app.js" async>

更快加载渲染受阻资源

为了尽可能缩短渲染受阻的时间，你可以减小渲染受阻文件的大小，以加快下载速度。

从与 HTML 文档相同的网站域加载这些资源也能加快这些请求的速度，因为不需要额外的网络服务器连接。

今天的内容分享就到此为止，下一篇我们将会继续讨论其他提高网站速度的小技巧！