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

问题描述

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

这些是频繁扫描的结果。你们对这里出什么问题有任何想法吗？我花了很多时间进行搜索，但始终无法解决问题。

解决方法

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

使用HTTP协议的较新版本HTTP / 2和HTTP / 3，可以立即发送所有请求，而不必等待响应返回再发送另一个请求。我检查了您的网站，发现您的网站正在使用HTTP / 2和HTTP / 3。使用HTTP / 2和HTTP / 3协议，由于可以一次发送所有请求，因此，除其他因素外，它还会造成一定程度的“不一致”。即使使用HTTP 1，也总是存在一定程度的随机性，因为其中会涉及许多因素，例如服务器响应时间将有所不同，网络延迟将有所不同等等。

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

在上图中，以Google跟踪代码管理器UA-174548329-1为例（我知道它可能不是Google Map），它已作为 4th 资源加载。

当我再次刷新页面时，您的Google跟踪代码管理器UA-174548329-1 Javascript已作为 11th 资源加载：

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

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

您可以在此处进一步了解Critical Rendering Path。主线程是浏览器正在运行的主要进程，它负责处理和呈现页面上的CSS，Javascript和HTML的大部分工作。关键的渲染路径是“浏览器将HTML，CSS和JavaScript转换为屏幕上的像素所经历的步骤序列”。 -引自Critical Rendering Path。关键的渲染路径是Javascript，HTML，CSS，图像以及其他资源的下载和渲染顺序。它需要大量知识来优化关键的渲染路径，这绝非易事。但是，您可以尝试在script标记中使用两个属性，即“异步”和“延迟”来控制何时执行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解析的同时并行进行脚本的下载，而不使用不指定defer或async的默认脚本标签，因此只能加快执行的速度，但是执行仍然会在主线程上增加开销。

根据Google的支持文档，在How do you load third-party script efficiently?上有一节，介绍了几种方法：

”

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

• 如果第三方服务器运行缓慢，请考虑自托管脚本。

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

• 考虑诸如<link rel=preconnect>或<link rel=dns-prefetch>之类的资源提示，以对托管第三方脚本的域执行DNS查找。

”

其他方法：

查看如何将各种Javascript文件压缩，最小化或合并为一个文件（如果您以文件形式使用Javascript）。使用GZIP compression压缩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（包括第三方Javascript）。

,

据我所知，您已将Facebook Messenger聊天的“延迟”设置为3秒。但是，您的网站加载初始内容所需的时间要长得多。

由于网络延迟，服务器负载等原因，您的网站通常在3秒钟之内不会加载“首屏”内容。

由于这个原因，Facebook Messenger聊天脚本在CP​​U可能忙碌或可能不忙的时候被加载。对于“ Total Blocking Time”（总阻塞时间）之类的内容，这一点很重要，因为它要侦听CPU在页面可用时的第一个静默期进行计算。

对于计算“第三方代码的影响”，它正在查看CPU在工作时尝试呈现“折叠之上”内容的原因，因此为什么有时有时会显示为影响而有时却不显示您的首屏内容在Facebook Messenger初始化之前已充分加载。

此外，您还必须考虑何时加载包含超时的主JS文件，有时它会根据延迟等情况而更快地加载，因此这也会影响添加fbDiv的时间。

要覆盖答案，有很多内容可以简化答案（因为有很多要解释为什么会发生这种情况）是增加Facebook Messenger上的延迟或仅在单击按钮时加载它。

例如，您可能有一个显示“与我们聊天”的按钮，然后使用click事件加载Facebook Messenger（并隐藏“与我们聊天”按钮）。 这是我的推荐

或者查看您网站上的加载速度，您可以将延迟设置为大约7秒，然后（可能）保持一致。