Google Page Speed Insight 显示不一致的结果

Question

我有一个 wordpress 网站正在运行，我正在使用 W3Total 缓存插件来加快网站加载速度。当我在 Google Page Speed Insight 中扫描网站时，我注意到我得到的扫描结果不一致。我有一个浮动在网页上的 Facebook Messenger 聊天和一个谷歌地图。由于这两个给了我减少第三方代码警告的影响，我进行了更改，以便仅在 DOM 完全加载后才加载这两个。实际上，我为此使用了 jQuery SetTimeOut。通过这样做，我实际上设法从结果中删除了警告。但时不时我注意到同样的警告再次出现，即使我已经做出了调整。如果我经常扫描网站两到三遍，warnong 可能会消失，但我会在一段时间后再次尝试。

这些是频繁扫描的结果。你们知道这里会发生什么问题吗？我花了很多时间搜索，但无法理解它。

Answer 1

使用经典的 HTTP/1.0 超文本传输​​协议，Javascript、CSS、HTML、图像等资源加载在请求/响应对中，这意味着浏览器发送请求以请求资源（无论是 CSS、Javascript 等）。 )，并在请求另一个资源之前等待响应返回。即使它们在请求/响应对中加载，由于网络延迟、服务器响应时间、服务器当前正在经历的负载等方面的随机性，请求和响应对并不总是严格遵循相同的顺序。

使用 HTTP/2 和 HTTP/3（较新版本的 HTTP 协议），可以一次发送所有请求，而不是在发送另一个请求之前等待响应返回。我查看了您的网站，发现您的网站使用的是 HTTP/2 和 HTTP/3。对于 HTTP/2 和 HTTP/3 协议，由于可以一次发送所有请求，因此它也可能导致一定程度的“不一致”，等等。即使使用 HTTP 1，也总是存在一定程度的随机性，因为有许多因素会影响它，例如服务器响应时间会有所不同，网络延迟也会有所不同等。

为了说明这一点，如果您使用的是 Chrome 浏览器，请单击浏览器右上角的三个点打开“开发人员工具”选项卡，然后单击“更多工具”，然后单击“开发人员工具”。或者，如果您使用 Windows 或 Mac 上的“Command + Option + I”，您可以执行“Ctrl+Shift+I”。然后转到其“网络”选项卡，并刷新页面。每次刷新页面时，资源的加载顺序略有不同：

在上图中，以 Google Tag Manager UA-174548329-1 Javascript 为例（我知道它可能不是 Google Map），它作为第4 个资源加载。

当我再次刷新页面时，您的 Google 标签管理器 UA-174548329-1 Javascript 作为第11 个资源加载：

当页面正在加载或在 Google 的 PageSpeed Insight 上运行时，由于请求和响应的随机性，主线程有时很忙，有时不忙。您的主线程也在构建 DOM，并做了大量工作。有时它会被渲染阻止资源（例如 Javascript）阻止。

默认情况下，Javascript 总是会阻止关键渲染路径。如果不查看您的 Javascript SetTimeOut，很难说您使用什么实现来延迟您的 Javascript，但可以安全地假设它可能无助于清除关键渲染路径。您应该使用defer或async，而不是使用 SetTimeOut 。

您可以在此处详细了解关键渲染路径。主线程是浏览器运行的主要进程，它负责处理和呈现页面上的 CSS、Javascript、HTML 的大部分工作。关键渲染路径是“浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列”。- 引自关键渲染路径。关键渲染路径是您的 Javascript、HTML、CSS、图像和其他资源被下载和渲染的顺序。优化关键渲染路径需要大量知识，这绝非易事。但是，您可以尝试在脚本标记中使用两个属性，即“async”和“defer”来控制您的 Javascript 何时执行。

看看这张图片：

信用：与网络一起成长

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/?utm_source=lighthouse&utm_medium=unknown

如您所见，您可以尝试将async属性放在脚本中或将defer属性放在脚本标记中，看看是否有帮助。

在 script 标签中使用 'async' 属性，这意味着您的 Javascript 将在下载后立即异步执行。<script async>如图所示，下方的蓝色条显示脚本也在解析 HTML 的同时下载，因为看到绿色条和蓝色条并行执行。一旦脚本下载完成，脚本就会被执行。此时，HTML 解析会暂停，直到脚本执行完毕。而如果没有 'async' 属性，则在下载和执行脚本时，您的 HTML 解析将暂停（或阻止）。

在 script 标签中使用 'defer' 属性，这意味着您将推迟 Javascript 的执行，直到 DOM 完成解析。虽然浏览器一收到javascript资源就会下载，但是下载不会阻塞HTML解析。

总之，您可以在第三方脚本中使用“async”属性在一定程度上“解除阻塞”您的主线程，它们将在您的 DOM 渲染时在后台下载和执行。这将稍微加快主线程的速度。然而，一个警告是执行仍然会阻塞渲染。需要注意的一件非常重要的事情是，通过使用 'async' 属性，准备好看到页面的一些可能的不稳定行为，因为可能会发生更多的“不一致”，因为现在 Javascript 可以在渲染路径中随时执行，因此如果在脚本之前或之后需要发生某些事情，您可能会破坏流程和它的逻辑。

或者，您可以在第三方脚本中使用 'defer' 属性来告诉您的脚本仅在 DOM 完全加载后才执行。这只能加快进程的速度，只是一点点，因为脚本的下载现在可以在进行 HTML 解析时并行发生，而不是使用默认的脚本标记而不指定延迟或异步，但执行仍然会占用主线程的开销。

根据 Google 的支持文档，有一节介绍如何有效地加载第三方脚本？，这里有几个方法：

”

• 使用 async 或 defer 属性加载脚本以避免阻塞文档解析。

• 如果第三方服务器速度较慢，请考虑自托管脚本。

• 如果脚本没有为您的网站增加明确的价值，请考虑删除该脚本。

• 考虑 Resource Hints 之类的<link rel=preconnect>或<link rel=dns-prefetch>对托管第三方脚本的域执行 DNS 查找。

”

其他方法：

查看如何压缩、缩小或将各种 Javascript 文件合并到一个文件中（如果您以文件的形式使用 Javascript）。使用GZIP 压缩来压缩您的 Javascript、CSS。另请查看如何使用 CDN（内容分发网络/内容分发网络）等加载第三方脚本。

2020 年 8 月 12 日更新：

针对您的评论，由于您提到您的第三方脚本来自无法将“async”或“defer”属性编码到脚本标签中的插件，您可以考虑在其他脚本之前添加它：

<script>
// If your script tag has an id, use either one below:
document.getElementById("your_script_tag_id").async = true;
document.getElementById("your_script_tag_id").defer = true;

// If your script tag has a class name, use either one below:
document.getElementsByClassName("your_script_tag_class_name")[0].async = true;
document.getElementsByClassName("your_script_tag_class_name")[0].defer = true;

// If for once and for all scripts, use either one below:
document.getElementsByTagName("script")[0].async = true;
document.getElementsByTagName("script")[0].defer = true;
</script>

您还可以查看：Async JavaScript，这允许您延迟或异步您的 Javascript，包括第三方的。