Wordpress Google Page Speed Insight在一致的结果中显示

我有一个wordpress网站正在运行，我正在使用W3Total缓存插件来加快网站的加载速度。当我在谷歌页面Speed Insight中扫描网站时，我注意到我得到了一致的扫描结果。我在网页上有一个Facebook Messenger聊天和一个谷歌地图。因为这两个警告降低了第三方代码警告的影响，所以我做了一些更改，以便只有在DOM完全加载之后才能加载这两个警告。实际上，我已经为此使用了jQuery SetTimeOut。通过这样做，我实际上成功地从结果中删除了警告。但有时我注意到同样的警告再次出现，即使我做了调整。如果我经常扫描网站两到三次，警告功能可能会关闭，但一段时间后我会再次尝试

---

这些都是频繁扫描的结果。你们知道这里会出什么问题吗？我花了很多时间搜索，但无法集中注意力。

使用经典的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标记管理器UA-174548329-1 Javascript为例，我知道它可能不是Google地图，而是作为第四个资源加载的

当我再次刷新页面时，您的Google Tag Manager UA-174548329-1 Javascript将作为第11个资源加载：

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

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

你可以在这里看得更清楚。主线程是浏览器正在运行的主进程，用于在页面上处理和呈现CSS、Javascript和HTML的大部分工作。关键的渲染路径是浏览器将HTML、CSS和JavaScript转换为屏幕上的像素所经历的一系列步骤。-引自。关键呈现路径是Javascript、HTML、CSS、图像和其他正在下载和呈现的资源的顺序。优化关键渲染路径需要大量的知识，这不是一件容易的工作。但是，您可以尝试在脚本标记中使用两个属性，即async和defer to control，以控制何时执行Javascript

请看这张图片：

信用：与网络一起成长

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

脚本标记中带有“async”属性，这意味着您的Javascript将在下载后立即异步执行。如图所示，下面的蓝色条显示在解析HTML的同时下载脚本，因为绿色条和蓝色条可以并行执行。脚本下载完成后，scr 然后执行ipt。此时，HTML解析将暂停，直到脚本完成执行。而如果没有“async”属性，则在下载和执行脚本时，HTML解析将暂停或被阻止

如果脚本标记中有“defer”属性，则意味着您将推迟Javascript的执行，直到DOM完成解析。虽然它会在浏览器收到javascript资源后立即下载，但下载不会阻止HTML解析

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

或者，您可以在第三方脚本中使用“defer”属性，告诉脚本只有在DOM完全加载后才能执行。这只会大大加快进程的速度，这是因为在进行HTML解析时，脚本的下载现在可以并行进行，而不是在不指定defer或async的情况下使用默认脚本标记，但是执行仍然会占用主线程的开销

根据谷歌的支持文档，这里有一个关于的部分，这里有一些方法：

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

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

如果脚本不能为站点增加明确的价值，请考虑删除它

考虑资源提示，如或，对承载第三方脚本的域执行DNS查找

其他方法：

如果您使用的是文件形式的Javascript，请查看如何将各种Javascript文件压缩、缩小或合并为一个文件。用于压缩Javascript、CSS。还可以查看如何使用CDN内容交付网络/内容分发网络等加载第三方脚本

更新日期：2020年8月12日：

响应于你的评论，因为你提到你的第三方脚本来自插件，你不能将“异步”或“推迟”属性编码到脚本标签中，你可以考虑在你的其他脚本之前添加这个：

<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>

---

您还可以查看：，这允许您延迟或异步您的Java脚本，包括第三方脚本。

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

有了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标记管理器UA-174548329-1 Javascript为例，我知道它可能不是Google地图，而是作为第四个资源加载的

当我再次刷新页面时，您的Google Tag Manager UA-174548329-1 Javascript将作为第11个资源加载：

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

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

你可以在这里看得更清楚。主线程是浏览器正在运行的主进程，用于在页面上处理和呈现CSS、Javascript和HTML的大部分工作。关键的渲染路径是浏览器将HTML、CSS和JavaScript转换为屏幕上的像素所经历的一系列步骤。-引自。关键呈现路径是Javascript、HTML、CSS、图像和其他正在下载和呈现的资源的顺序。优化关键渲染路径需要大量的知识，这不是一件容易的工作。但是，您可以尝试在脚本标记中使用两个属性，即async和defer to control，以控制何时执行Javascript

请看这张图片：

信用：与网络一起成长

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

脚本标记中带有“async”属性，这意味着您的Javascript将在下载后立即异步执行。如图所示，下面的蓝色条显示在解析HTML的同时下载脚本，因为绿色条和蓝色条可以并行执行。脚本下载完成后，立即执行脚本。此时，HTML解析将暂停，直到脚本完成执行。而如果没有“async”属性，则在下载和执行脚本时，HTML解析将暂停或被阻止

如果脚本标记中有“defer”属性，则意味着您将推迟Javascript的执行，直到DOM完成解析。虽然它会在浏览器收到javascript资源后立即下载，但下载不会阻止HTML解析

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

或者，您可以在第三方脚本中使用“defer”属性，告诉脚本只有在DOM完全加载后才能执行。这只会大大加快进程的速度，这是因为在进行HTML解析时，脚本的下载现在可以并行进行，而不是在不指定defer或async的情况下使用默认脚本标记，但是执行仍然会占用主线程的开销

根据谷歌的支持文档，这里有一个关于的部分，这里有一些方法：

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

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

如果脚本不能为站点增加明确的价值，请考虑删除它

考虑资源提示，如或，对承载第三方脚本的域执行DNS查找

其他方法：

如果您使用的是文件形式的Javascript，请查看如何将各种Javascript文件压缩、缩小或合并为一个文件。用于压缩Javascript、CSS。还可以查看如何使用CDN内容交付网络/内容分发网络等加载第三方脚本

更新日期：2020年8月12日：

响应于你的评论，因为你提到你的第三方脚本来自插件，你不能将“异步”或“推迟”属性编码到脚本标签中，你可以考虑在你的其他脚本之前添加这个：

<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>

---

您还可以查看：，这允许您延迟或异步您的Java脚本，包括第三方脚本。

从我看到的情况来看，您在Facebook Messenger聊天中已将延迟设置为3秒。但是，您的站点加载初始内容所需的时间要比这长得多

你的网站通常不会在3秒内加载上面的内容，这是由于类似网络的原因 tency，在服务器上加载等

因此，Facebook Messenger聊天脚本在CPU可能忙或不忙的时候加载。对于像总阻塞时间这样的事情，这是很重要的，因为这是监听CPU何时有第一个安静的时间来计算页面何时可用

为了计算出第三方代码的影响，它在尝试呈现上述折叠内容时会查看CPU何时工作，因此，为什么有时它会显示为影响，而有时它不会显示为影响，因为有时您的上述折叠内容在Facebook Messenger初始化之前已经加载了足够的内容

<> P>另外，你必须考虑到包含超时的主JS文件何时加载，有时它会根据延迟等更快地加载，因此这也会影响FBDIV的添加时间。 有很多内容需要涵盖，所以要简化答案，因为有很多内容需要解释，为什么会发生这种情况，是因为Facebook Messenger的延迟增加了，还是只需点击一个按钮就可以加载

例如，您可以有一个显示“与我们聊天”的按钮，然后使用单击事件加载facebook messenger并隐藏“与我们聊天”按钮。这将是我的建议

---

或者，查看站点上的加载速度，您可以将延迟设置为7秒左右，然后可能会保持一致。

从我看到的情况来看，您在Facebook Messenger聊天中已将延迟设置为3秒。但是，您的站点加载初始内容所需的时间要比这长得多

由于网络延迟、服务器负载等原因，您的站点通常不会在3秒内加载上述内容

因此，Facebook Messenger聊天脚本在CPU可能忙或不忙的时候加载。对于像总阻塞时间这样的事情，这是很重要的，因为这是监听CPU何时有第一个安静的时间来计算页面何时可用

为了计算出第三方代码的影响，它在尝试呈现上述折叠内容时会查看CPU何时工作，因此，为什么有时它会显示为影响，而有时它不会显示为影响，因为有时您的上述折叠内容在Facebook Messenger初始化之前已经加载了足够的内容

<> P>另外，你必须考虑到包含超时的主JS文件何时加载，有时它会根据延迟等更快地加载，因此这也会影响FBDIV的添加时间。 有很多内容需要涵盖，所以要简化答案，因为有很多内容需要解释，为什么会发生这种情况，是因为Facebook Messenger的延迟增加了，还是只需点击一个按钮就可以加载

例如，您可以有一个显示“与我们聊天”的按钮，然后使用单击事件加载facebook messenger并隐藏“与我们聊天”按钮。这将是我的建议

---

或者，查看站点上的加载速度，您可以将延迟设置为7秒左右，然后可能会保持一致。

关键渲染路径，尽管非常重要，但它与减少第三方代码的影响关系不大，因为即使延迟，它仍会阻塞主线程。这是一个很好的建议，可以提高性能和OP。你一定要这样做。除非你知道你在做什么，否则async会在这个答案没有解决这个问题的时候破坏你的网站。谢谢你这么详细的解释。但这里的问题是，大多数脚本都来自wordpress插件，我无法完全控制这些插件。我希望我能对此进行两次投票，只是为了解释如何在wordpress for OP中添加延迟或异步。Hi@hiew1感谢您的更新。我只是设法推迟了一些脚本的使用。但是WP插件对我来说太多了。这个需要一段时间。：-：-关键渲染路径，虽然非常重要，但与减少第三方代码的影响有着非常小的关系，因为即使您延迟它，它仍然会阻塞主线程。这是一个很好的建议，可以提高性能和OP。你一定要这样做。除非你知道你在做什么，否则async会在这个答案没有解决这个问题的时候破坏你的网站。谢谢你这么详细的解释。但这里的问题是，大多数脚本都来自wordpress插件，我无法完全控制这些插件。我希望我能对此进行两次投票，只是为了解释如何在wordpress for OP中添加延迟或异步。Hi@hiew1感谢您的更新。我只是设法推迟了一些脚本的使用。但是WP插件对我来说太多了。这个需要一段时间。：-：-回答得很好！投票！非常感谢。这就是问题所在，页面加载时间比我指定的延迟间隔要长。我没有增加延迟时间，而是将setTimeOut放在$window.load中，这样它就可以加载了

---

在页面完全加载之后，as$document.ready将在加载之前触发。“与我们聊天”按钮也是一个很好的主意。没问题，还可以实现@hiew1关于使用延迟或异步的建议，因为这是提高总体性能的一个很好的建议。回答很好！投票！非常感谢。这就是问题所在，页面加载时间比我指定的延迟间隔要长。我没有增加延迟时间，而是将setTimeOut放在$window.load中，这样只有在页面完全加载后才会加载它，而在此之前，$document.ready将被触发。“与我们聊天”按钮也是一个很好的主意。没问题，还可以实现@hiew1关于使用延迟或异步的建议，因为这是提高总体性能的一个很好的建议。